hide/show secure fields

Oqtane.Client/Modules/Admin/Site/Index.razor

@@ -120,7 +120,10 @@
                 <div class="row mb-1 align-items-center">
                     <Label Class="col-sm-3" For="password" HelpText="Enter the password for your SMTP account" ResourceKey="SmtpPassword">Password: </Label>
                     <div class="col-sm-9">
-                        <input id="password" type="password" class="form-control" @bind="@_smtppassword" />
+						<div class="input-group">
+							<input id="password" type="@_smtppasswordtype" class="form-control" @bind="@_smtppassword" />
+							<button type="button" class="btn btn-secondary" @onclick="@ToggleSMTPPassword">@_togglesmtppassword</button>
+						</div>
                     </div>
                 </div>
                 <div class="row mb-1 align-items-center">
@@ -266,6 +269,8 @@
 	private string _smtpssl = "False";
 	private string _smtpusername = string.Empty;
 	private string _smtppassword = string.Empty;
+	private string _smtppasswordtype = "password";
+	private string _togglesmtppassword = string.Empty;
 	private string _smtpsender = string.Empty;
 	private string _retention = string.Empty;
 	private string _pwaisenabled;
@@ -336,6 +341,7 @@
 				_smtpssl = SettingService.GetSetting(settings, "SMTPSSL", "False");
 				_smtpusername = SettingService.GetSetting(settings, "SMTPUsername", string.Empty);
 				_smtppassword = SettingService.GetSetting(settings, "SMTPPassword", string.Empty);
+				_togglesmtppassword = Localizer["Show"];
 				_smtpsender = SettingService.GetSetting(settings, "SMTPSender", string.Empty);
 				_retention = SettingService.GetSetting(settings, "NotificationRetention", "30");
 
@@ -644,4 +650,18 @@
 		}
 		if (string.IsNullOrEmpty(_defaultalias)) _defaultalias = _aliases.First().Name.Trim();
 	}
+
+	private void ToggleSMTPPassword()
+	{
+		if (_smtppasswordtype == "password")
+		{
+			_smtppasswordtype = "text";
+			_togglesmtppassword = Localizer["Hide"];
+		}
+		else
+		{
+			_smtppasswordtype = "password";
+			_togglesmtppassword = Localizer["Show"];
+		}
+	}
 }

Oqtane.Client/Modules/Admin/Users/Index.razor

@@ -239,7 +239,10 @@ else
 						<div class="row mb-1 align-items-center">
 							<Label Class="col-sm-3" For="clientsecret" HelpText="The Client Secret from the provider" ResourceKey="ClientSecret">Client Secret:</Label>
 							<div class="col-sm-9">
-								<input type="password" id="clientsecret" class="form-control" @bind="@_clientsecret" />
+								<div class="input-group">
+									<input type="@_clientsecrettype" id="clientsecret" class="form-control" @bind="@_clientsecret" />
+									<button type="button" class="btn btn-secondary" @onclick="@ToggleClientSecret">@_toggleclientsecret</button>
+								</div>
 							</div>
 						</div>
 						<div class="row mb-1 align-items-center">
@@ -291,9 +294,12 @@ else
 				</Section>
 				<Section Name="Token" Heading="Token Settings" ResourceKey="TokenSettings">
 					<div class="row mb-1 align-items-center">
-						<Label Class="col-sm-3" For="secret" HelpText="If you want to want to provide API access, please specify a secret which will be used to encrypt your tokens. The secret should be 16 characters or more to ensure optimal security. Please note that if you change this secret, all existing tokens will become invalid and will need to be regenerated." ResourceKey="Secret">Site Secret:</Label>
+						<Label Class="col-sm-3" For="secret" HelpText="If you want to want to provide API access, please specify a secret which will be used to encrypt your tokens. The secret should be 16 characters or more to ensure optimal security. Please note that if you change this secret, all existing tokens will become invalid and will need to be regenerated." ResourceKey="Secret">Secret:</Label>
 						<div class="col-sm-9">
-							<input id="secret" class="form-control" @bind="@_secret" />
+							<div class="input-group">
+								<input type="@_secrettype" id="secret" class="form-control" @bind="@_secret" />
+								<button type="button" class="btn btn-secondary" @onclick="@ToggleSecret">@_togglesecret</button>
+							</div>
 						</div>
 					</div>					
 					<div class="row mb-1 align-items-center">
@@ -359,6 +365,8 @@ else
 	private string _userinfourl;
 	private string _clientid;
 	private string _clientsecret;
+	private string _clientsecrettype = "password";
+	private string _toggleclientsecret = string.Empty;
 	private string _scopes;
 	private string _pkce;
 	private string _redirecturl;
@@ -367,6 +375,8 @@ else
 	private string _createusers;
 
 	private string _secret;
+	private string _secrettype = "password";
+	private string _togglesecret = string.Empty;
 	private string _issuer;
 	private string _audience;
 	private string _lifetime;
@@ -405,6 +415,7 @@ else
 		_userinfourl = SettingService.GetSetting(settings, "ExternalLogin:UserInfoUrl", "");
 		_clientid = SettingService.GetSetting(settings, "ExternalLogin:ClientId", "");
 		_clientsecret = SettingService.GetSetting(settings, "ExternalLogin:ClientSecret", "");
+		_toggleclientsecret = Localizer["Show"];
 		_scopes = SettingService.GetSetting(settings, "ExternalLogin:Scopes", "");
 		_pkce = SettingService.GetSetting(settings, "ExternalLogin:PKCE", "false");
 		_redirecturl = PageState.Uri.Scheme + "://" + PageState.Alias.Name + "/signin-" + _providertype;
@@ -413,6 +424,7 @@ else
 		_createusers = SettingService.GetSetting(settings, "ExternalLogin:CreateUsers", "true");
 
 		_secret = SettingService.GetSetting(settings, "JwtOptions:Secret", "");
+		_togglesecret = Localizer["Show"];
 		_issuer = SettingService.GetSetting(settings, "JwtOptions:Issuer", PageState.Uri.Scheme + "://" + PageState.Alias.Name);
 		_audience = SettingService.GetSetting(settings, "JwtOptions:Audience", "");
 		_lifetime = SettingService.GetSetting(settings, "JwtOptions:Lifetime", "20");
@@ -552,4 +564,32 @@ else
 	{
 		_token = await UserService.GetTokenAsync();
 	}
+
+	private void ToggleClientSecret()
+	{
+		if (_clientsecrettype == "password")
+		{
+			_clientsecrettype = "text";
+			_toggleclientsecret = Localizer["Hide"];
+		}
+		else
+		{
+			_clientsecrettype = "password";
+			_toggleclientsecret = Localizer["Show"];
+		}
+	}
+
+	private void ToggleSecret()
+	{
+		if (_secrettype == "password")
+		{
+			_secrettype = "text";
+			_togglesecret = Localizer["Hide"];
+		}
+		else
+		{
+			_secrettype = "password";
+			_togglesecret = Localizer["Show"];
+		}
+	}
 }

Oqtane.Client/Resources/Modules/Admin/Site/Index.resx

@@ -318,10 +318,16 @@
   <data name="DefaultAlias.HelpText" xml:space="preserve">
     <value>The default alias for the site. Requests for non-default aliases will be redirected to the default alias.</value>
   </data>
-    <data name="DefaultAlias.Text" xml:space="preserve">
+  <data name="DefaultAlias.Text" xml:space="preserve">
     <value>Default Alias: </value>
   </data>
   <data name="Aliases.Heading" xml:space="preserve">
     <value>Aliases</value>
   </data>
+  <data name="Hide" xml:space="preserve">
+    <value>Hide</value>
+  </data>
+  <data name="Show" xml:space="preserve">
+    <value>Show</value>
+  </data>
 </root>

Oqtane.Client/Resources/Modules/Admin/Users/Index.resx

@@ -343,7 +343,7 @@
     <value>If you want to want to provide API access, please specify a secret which will be used to encrypt your tokens. The secret should be 16 characters or more to ensure optimal security. Please note that if you change this secret, all existing tokens will become invalid and will need to be regenerated.</value>
   </data>
   <data name="Secret.Text" xml:space="preserve">
-    <value>Site Secret:</value>
+    <value>Secret:</value>
   </data>
   <data name="Token.HelpText" xml:space="preserve">
     <value>Select the Create Token button to generate a long-lived access token (valid for 1 year). Be sure to store this token in a safe location as you will not be able to access it in the future.</value>
@@ -360,4 +360,10 @@
   <data name="TwoFactor.Text" xml:space="preserve">
     <value>Allow Two Factor?</value>
   </data>
+  <data name="Hide" xml:space="preserve">
+    <value>Hide</value>
+  </data>
+  <data name="Show" xml:space="preserve">
+    <value>Show</value>
+  </data>
 </root>