Improved secret input fields by adding a toggle visibility feature (#479)

app/MindWork AI Studio/Assistants/I18N/allTexts.lua

@@ -1015,6 +1015,12 @@ UI_TEXT_CONTENT["AISTUDIO::COMPONENTS::READWEBCONTENT::T3825586228"] = "Please p
 -- Show web content options
 UI_TEXT_CONTENT["AISTUDIO::COMPONENTS::READWEBCONTENT::T4249712357"] = "Show web content options"
 
+-- Hide content
+UI_TEXT_CONTENT["AISTUDIO::COMPONENTS::SECRETINPUTFIELD::T1273315904"] = "Hide content"
+
+-- Show content
+UI_TEXT_CONTENT["AISTUDIO::COMPONENTS::SECRETINPUTFIELD::T2891011873"] = "Show content"
+
 -- Spellchecking is disabled
 UI_TEXT_CONTENT["AISTUDIO::COMPONENTS::SETTINGS::SETTINGSPANELAPP::T1059411425"] = "Spellchecking is disabled"
 

app/MindWork AI Studio/Components/SecretInputField.razor

@@ -0,0 +1,20 @@
+@inherits MSGComponentBase
+<MudStack Row="true" AlignItems="AlignItems.Center" Class="@this.Class" StretchItems="StretchItems.Start" Wrap="Wrap.NoWrap">
+    <MudTextField
+        T="string"
+        Text="@this.Secret"
+        TextChanged="@this.OnSecretChanged"
+        Label="@this.Label"
+        Placeholder="@this.Placeholder"
+        Adornment="Adornment.Start"
+        AdornmentIcon="@Icons.Material.Filled.VpnKey"
+        AdornmentColor="Color.Info"
+        InputType="@this.InputType"
+        Immediate="true"
+        Validation="@this.Validation"
+        UserAttributes="@SPELLCHECK_ATTRIBUTES"/>
+
+    <MudTooltip Text="@this.ToggleVisibilityTooltip">
+        <MudIconButton Icon="@this.InputTypeIcon" OnClick="() => this.ToggleVisibility()"/>
+    </MudTooltip>
+</MudStack>

app/MindWork AI Studio/Components/SecretInputField.razor.cs

@@ -0,0 +1,54 @@
+using Microsoft.AspNetCore.Components;
+
+namespace AIStudio.Components;
+
+public partial class SecretInputField : MSGComponentBase
+{
+    private static readonly Dictionary<string, object?> SPELLCHECK_ATTRIBUTES = new();
+    
+    [Parameter]
+    public string Secret { get; set; } = string.Empty;
+    
+    [Parameter]
+    public EventCallback<string> SecretChanged { get; set; }
+    
+    [Parameter]
+    public string Label { get; set; } = string.Empty;
+    
+    [Parameter]
+    public string Placeholder { get; set; } = string.Empty;
+    
+    [Parameter]
+    public Func<string, string?> Validation { get; set; } = _ => null;
+    
+    [Parameter]
+    public string Class { get; set; } = "mb-3";
+
+    #region Overrides of MSGComponentBase
+
+    protected override async Task OnInitializedAsync()
+    {
+        await base.OnInitializedAsync();
+        
+        // Configure the spellchecking for the instance name input:
+        this.SettingsManager.InjectSpellchecking(SPELLCHECK_ATTRIBUTES);
+    }
+
+    #endregion
+
+    private bool isSecretVisible;
+    
+    private InputType InputType => this.isSecretVisible ? InputType.Text : InputType.Password;
+    
+    private string InputTypeIcon => this.isSecretVisible ? Icons.Material.Filled.Visibility : Icons.Material.Filled.VisibilityOff;
+
+    private string ToggleVisibilityTooltip => this.isSecretVisible ? T("Hide content") : T("Show content");
+
+    private Task OnSecretChanged(string arg)
+    {
+        this.Secret = arg;
+        return this.SecretChanged.InvokeAsync(arg);
+    }
+
+    private void ToggleVisibility() => this.isSecretVisible = !this.isSecretVisible;
+}

app/MindWork AI Studio/Dialogs/DataSourceERI_V1Dialog.razor

@@ -96,20 +96,7 @@
                         UserAttributes="@SPELLCHECK_ATTRIBUTES"/>
                 }
                 
-                @* ReSharper disable once CSharpWarnings::CS8974 *@
+                <SecretInputField @bind-Secret="@this.dataSecret" Label="@this.GetSecretLabel()" Validation="@this.dataSourceValidation.ValidatingSecret" Class="mb-6"/>
-                <MudTextField
-                    T="string"
-                    @bind-Text="@this.dataSecret"
-                    Label="@this.GetSecretLabel()"
-                    Class="mb-6"
-                    Immediate="@true"
-                    Validation="@this.dataSourceValidation.ValidatingSecret"
-                    Adornment="Adornment.Start"
-                    AdornmentIcon="@Icons.Material.Filled.Security"
-                    AdornmentColor="Color.Info"
-                    Variant="Variant.Text"
-                    InputType="InputType.Password"
-                    UserAttributes="@SPELLCHECK_ATTRIBUTES"/>
             }
             
             @if (this.availableRetrievalProcesses.Count > 0)

app/MindWork AI Studio/Dialogs/EmbeddingProviderDialog.razor

@@ -25,18 +25,7 @@
             
             @if (this.DataLLMProvider.IsAPIKeyNeeded(this.DataHost))
             {
-                @* ReSharper disable once CSharpWarnings::CS8974 *@
+                <SecretInputField @bind-Secret="@this.dataAPIKey" Label="@this.APIKeyText" Validation="@this.providerValidation.ValidatingAPIKey"/>
-                <MudTextField
-                    T="string"
-                    @bind-Text="@this.dataAPIKey"
-                    Label="@this.APIKeyText"
-                    Class="mb-3"
-                    Adornment="Adornment.Start"
-                    AdornmentIcon="@Icons.Material.Filled.VpnKey"
-                    AdornmentColor="Color.Info"
-                    InputType="InputType.Password"
-                    Immediate="true"
-                    Validation="@this.providerValidation.ValidatingAPIKey"/>
             }
 
             @if (this.DataLLMProvider.IsHostnameNeeded())

app/MindWork AI Studio/Dialogs/ProviderDialog.razor

@@ -22,18 +22,7 @@
             
             @if (this.DataLLMProvider.IsAPIKeyNeeded(this.DataHost))
             {
-                @* ReSharper disable once CSharpWarnings::CS8974 *@
+                <SecretInputField @bind-Secret="@this.dataAPIKey" Label="@this.APIKeyText" Validation="@this.providerValidation.ValidatingAPIKey"/>
-                <MudTextField
-                    T="string"
-                    @bind-Text="@this.dataAPIKey"
-                    Label="@this.APIKeyText"
-                    Class="mb-3"
-                    Adornment="Adornment.Start"
-                    AdornmentIcon="@Icons.Material.Filled.VpnKey"
-                    AdornmentColor="Color.Info"
-                    InputType="InputType.Password"
-                    Immediate="true"
-                    Validation="@this.providerValidation.ValidatingAPIKey"/>
             }
 
             @if (this.DataLLMProvider.IsHostnameNeeded())

app/MindWork AI Studio/Plugins/languages/de-de-43065dbc-78d0-45b7-92be-f14c2926e2dc/plugin.lua

@@ -1017,6 +1017,12 @@ UI_TEXT_CONTENT["AISTUDIO::COMPONENTS::READWEBCONTENT::T3825586228"] = "Bitte ge
 -- Show web content options
 UI_TEXT_CONTENT["AISTUDIO::COMPONENTS::READWEBCONTENT::T4249712357"] = "Web-Inhalte anzeigen"
 
+-- Hide content
+UI_TEXT_CONTENT["AISTUDIO::COMPONENTS::SECRETINPUTFIELD::T1273315904"] = "Inhalt ausblenden"
+
+-- Show content
+UI_TEXT_CONTENT["AISTUDIO::COMPONENTS::SECRETINPUTFIELD::T2891011873"] = "Inhalt anzeigen"
+
 -- Spellchecking is disabled
 UI_TEXT_CONTENT["AISTUDIO::COMPONENTS::SETTINGS::SETTINGSPANELAPP::T1059411425"] = "Rechtschreibprüfung ist deaktiviert"
 

app/MindWork AI Studio/Plugins/languages/en-us-97dfb1ba-50c4-4440-8dfa-6575daf543c8/plugin.lua

@@ -1017,6 +1017,12 @@ UI_TEXT_CONTENT["AISTUDIO::COMPONENTS::READWEBCONTENT::T3825586228"] = "Please p
 -- Show web content options
 UI_TEXT_CONTENT["AISTUDIO::COMPONENTS::READWEBCONTENT::T4249712357"] = "Show web content options"
 
+-- Hide content
+UI_TEXT_CONTENT["AISTUDIO::COMPONENTS::SECRETINPUTFIELD::T1273315904"] = "Hide content"
+
+-- Show content
+UI_TEXT_CONTENT["AISTUDIO::COMPONENTS::SECRETINPUTFIELD::T2891011873"] = "Show content"
+
 -- Spellchecking is disabled
 UI_TEXT_CONTENT["AISTUDIO::COMPONENTS::SETTINGS::SETTINGSPANELAPP::T1059411425"] = "Spellchecking is disabled"
 

app/MindWork AI Studio/wwwroot/changelog/v0.9.45.md

@@ -2,4 +2,5 @@
 - Added chat templates. They are similar to common AI companies' playgrounds, where you can define your own system prompts and leverage assistant prompts for providers that support them. We thank Peer `peerschuett` for the work on this feature.
 - Added Russian as a language option for various assistants (e.g., translations, text summarization).
 - Improved chat options: you can access them directly from the chat interface.
+- Improved password and API key input fields: they now optionally display their content to allow users to verify manual input.
 - Changed the design of the data source settings to match the new design.