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

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;
+}