Update database installers to show/hide passwd

Oqtane.Client/Installer/Controls/MySQLConfig.razor

@@ -1,5 +1,6 @@
 @namespace Oqtane.Installer.Controls
 @implements Oqtane.Interfaces.IDatabaseConfigControl
+@inject IStringLocalizer<SharedResources> SharedLocalizer
 
 <div class="row mb-1 align-items-center">
     <Label Class="col-sm-3" For="server" HelpText="Enter the database server" ResourceKey="Server">Server:</Label>
@@ -28,7 +29,10 @@
 <div class="row mb-1 align-items-center">
     <Label Class="col-sm-3" For="pwd" HelpText="Enter the password to use for the database" ResourceKey="Pwd">Password:</Label>
     <div class="col-sm-9">
-        <input id="pwd" type="password" class="form-control" @bind="@_pwd" autocomplete="new-password" />
+        <div class="input-group">
+            <input id="pwd" type="@_passwordType" class="form-control" @bind="@_pwd" autocomplete="new-password" />
+            <button type="button" class="btn btn-secondary" @onclick="@TogglePassword" tabindex="-1">@_togglePassword</button>
+        </div>
     </div>
 </div>
 
@@ -38,6 +42,13 @@
     private string _database = "Oqtane-" + DateTime.UtcNow.ToString("yyyyMMddHHmm");
     private string _uid = String.Empty;
     private string _pwd = String.Empty;
+    private string _passwordType = "password";
+    private string _togglePassword = string.Empty;
+
+    protected override async Task OnInitializedAsync()
+	{
+        _togglePassword = SharedLocalizer["ShowPassword"];
+    }
 
     public string GetConnectionString()
     {
@@ -55,4 +66,18 @@
 
         return connectionString;
     }
+
+    private void TogglePassword()
+    {
+        if (_passwordType == "password")
+        {
+            _passwordType = "text";
+            _togglePassword = SharedLocalizer["HidePassword"];
+        }
+        else
+        {
+            _passwordType = "password";
+            _togglePassword = SharedLocalizer["ShowPassword"];
+        }
+    }
 }

Oqtane.Client/Installer/Controls/PostgreSQLConfig.razor

@@ -1,6 +1,7 @@
 @namespace Oqtane.Installer.Controls
 @implements Oqtane.Interfaces.IDatabaseConfigControl
 @inject IStringLocalizer<PostgreSQLConfig> Localizer
+@inject IStringLocalizer<SharedResources> SharedLocalizer
 
 <div class="row mb-1 align-items-center">
     <Label Class="col-sm-3" For="server" HelpText="Enter the database server" ResourceKey="Server">Server:</Label>
@@ -40,7 +41,10 @@
     <div class="row mb-1 align-items-center">
         <Label Class="col-sm-3" For="pwd" HelpText="Enter the password to use for the database" ResourceKey="Pwd">Password:</Label>
         <div class="col-sm-9">
-            <input id="pwd" type="password" class="form-control" @bind="@_pwd" autocomplete="new-password" />
+            <div class="input-group">
+                <input id="pwd" type="@_passwordType" class="form-control" @bind="@_pwd" autocomplete="new-password" />
+                <button type="button" class="btn btn-secondary" @onclick="@TogglePassword" tabindex="-1">@_togglePassword</button>
+            </div>
         </div>
     </div>
 }
@@ -52,6 +56,13 @@
     private string _security = "integrated";
     private string _uid = String.Empty;
     private string _pwd = String.Empty;
+    private string _passwordType = "password";
+    private string _togglePassword = string.Empty;
+
+    protected override async Task OnInitializedAsync()
+	{
+        _togglePassword = SharedLocalizer["ShowPassword"];
+    }
 
     public string GetConnectionString()
     {
@@ -80,4 +91,18 @@
 
         return connectionString;
     }
+
+    private void TogglePassword()
+    {
+        if (_passwordType == "password")
+        {
+            _passwordType = "text";
+            _togglePassword = SharedLocalizer["HidePassword"];
+        }
+        else
+        {
+            _passwordType = "password";
+            _togglePassword = SharedLocalizer["ShowPassword"];
+        }
+    }
 }

Oqtane.Client/Installer/Controls/SqlServerConfig.razor

@@ -35,7 +35,10 @@
     <div class="row mb-1 align-items-center">
         <Label Class="col-sm-3" For="pwd" HelpText="Enter the password to use for the database" ResourceKey="Pwd">Password:</Label>
         <div class="col-sm-9">
-            <input id="pwd" type="password" class="form-control" @bind="@_pwd" autocomplete="new-password" />
+             <div class="input-group">
+                <input id="pwd" type="@_passwordType" class="form-control" @bind="@_pwd" autocomplete="new-password" />
+                <button type="button" class="btn btn-secondary" @onclick="@TogglePassword" tabindex="-1">@_togglePassword</button>
+            </div>
         </div>
     </div>
 }
@@ -67,9 +70,16 @@
     private string _security = "integrated";
     private string _uid = String.Empty;
     private string _pwd = String.Empty;
+    private string _passwordType = "password";
+    private string _togglePassword = string.Empty;
     private string _encryption = "false";
     private string _trustservercertificate = "false";
 
+    protected override async Task OnInitializedAsync()
+	{
+        _togglePassword = SharedLocalizer["ShowPassword"];
+    }
+
     public string GetConnectionString()
     {
         var connectionString = String.Empty;
@@ -92,4 +102,18 @@
 
         return connectionString;
     }
+
+    private void TogglePassword()
+    {
+        if (_passwordType == "password")
+        {
+            _passwordType = "text";
+            _togglePassword = SharedLocalizer["HidePassword"];
+        }
+        else
+        {
+            _passwordType = "password";
+            _togglePassword = SharedLocalizer["ShowPassword"];
+        }
+    }
 }