From 1625e3ba6ce916fca0ae5b3788039716fef75b86 Mon Sep 17 00:00:00 2001
From: Leigh Pointer <leigh.pointer@outloo.com>
Date: Thu, 14 Apr 2022 13:47:27 +0200
Subject: [PATCH] User Areas to use the Toggle Password method

Updated the Components where the Password is required to allow toggle show / hide
---
 .../Modules/Admin/UserProfile/Index.razor     | 30 +++++++++++++++---
 Oqtane.Client/Modules/Admin/Users/Add.razor   | 31 +++++++++++++++----
 Oqtane.Client/Modules/Admin/Users/Edit.razor  | 29 ++++++++++++++---
 .../Modules/Admin/UserProfile/Index.resx      |  6 ++++
 .../Resources/Modules/Admin/Users/Add.resx    |  9 ++++++
 .../Resources/Modules/Admin/Users/Edit.resx   |  9 ++++++
 6 files changed, 98 insertions(+), 16 deletions(-)

diff --git a/Oqtane.Client/Modules/Admin/UserProfile/Index.razor b/Oqtane.Client/Modules/Admin/UserProfile/Index.razor
index 31c6f3d0..2caf9be8 100644
--- a/Oqtane.Client/Modules/Admin/UserProfile/Index.razor
+++ b/Oqtane.Client/Modules/Admin/UserProfile/Index.razor
@@ -31,8 +31,11 @@ else
                 </div>
                 <div class="row mb-1 align-items-center">
                     <Label Class="col-sm-3" For="password" HelpText="If you wish to change your password you can enter it here. Please choose a sufficiently secure password." ResourceKey="Password"></Label>
-                    <div class="col-sm-9">
-                        <input id="password" type="password" class="form-control" @bind="@password" autocomplete="new-password" />
+					<div class="col-sm-9">
+                        <div class="input-group">
+						    <input id="password" type="@_passwordtype" name="Password" class="form-control" @bind="@_password" autocomplete="new-password" />
+						    <button type="button" class="btn btn-secondary" @onclick="@TogglePassword">@_togglepassword</button>
+					    </div>
                     </div>
                 </div>
                 <div class="row mb-1 align-items-center">
@@ -219,7 +222,9 @@ else
 
 @code {
     private string username = string.Empty;
-    private string password = string.Empty;
+    private string _password = string.Empty;
+	private string _passwordtype = "password";
+	private string _togglepassword = string.Empty;
     private string confirm = string.Empty;
     private bool allowtwofactor = false;
     private string twofactor = "False";
@@ -241,6 +246,7 @@ else
     {
         try
         {
+            _togglepassword = Localizer["ShowPassword"];
             if (PageState.Site.Settings.ContainsKey("LoginOptions:TwoFactor") && !string.IsNullOrEmpty(PageState.Site.Settings["LoginOptions:TwoFactor"]))
             {
                 allowtwofactor = bool.Parse(PageState.Site.Settings["LoginOptions:TwoFactor"]);
@@ -303,11 +309,11 @@ else
         {
             if (username != string.Empty && email != string.Empty && ValidateProfiles())
             {
-                if (password == confirm)
+                if (_password == confirm)
                 {
                     var user = PageState.User;
                     user.Username = username;
-                    user.Password = password;
+                    user.Password = _password;
                     user.TwoFactorRequired = bool.Parse(twofactor);
                     user.Email = email;
                     user.DisplayName = (displayname == string.Empty ? username : displayname);
@@ -444,4 +450,18 @@ else
     
     }
 
+    private void TogglePassword()
+	{
+		if (_passwordtype == "password")
+		{
+			_passwordtype = "text";
+			_togglepassword = Localizer["HidePassword"];
+		}
+		else
+		{
+			_passwordtype = "password";
+			_togglepassword = Localizer["ShowPassword"];
+		}
+	}
+
 }
diff --git a/Oqtane.Client/Modules/Admin/Users/Add.razor b/Oqtane.Client/Modules/Admin/Users/Add.razor
index 4cde0a47..5fc0d465 100644
--- a/Oqtane.Client/Modules/Admin/Users/Add.razor
+++ b/Oqtane.Client/Modules/Admin/Users/Add.razor
@@ -20,8 +20,11 @@
                 </div>
                 <div class="row mb-1 align-items-center">
                     <Label Class="col-sm-3" For="password" HelpText="The user's password. Please choose a password which is sufficiently secure." ResourceKey="Password"></Label>
-                    <div class="col-sm-9">
-                        <input id="password" type="password" class="form-control" @bind="@password" />
+					<div class="col-sm-9">
+                        <div class="input-group">
+						    <input id="password" type="@_passwordtype" name="Password" class="form-control" @bind="@_password" required />
+						    <button type="button" class="btn btn-secondary" @onclick="@TogglePassword">@_togglepassword</button>
+					    </div>
                     </div>
                 </div>
                 <div class="row mb-1 align-items-center">
@@ -88,7 +91,9 @@
 
 @code {
     private string username = string.Empty;
-    private string password = string.Empty;
+    private string _password = string.Empty;
+	private string _passwordtype = "password";
+	private string _togglepassword = string.Empty;
     private string confirm = string.Empty;
     private string email = string.Empty;
     private string displayname = string.Empty;
@@ -102,6 +107,7 @@
     {
         try
         {
+            _togglepassword = Localizer["ShowPassword"];
             profiles = await ProfileService.GetProfilesAsync(ModuleState.SiteId);
             settings = new Dictionary<string, string>();
         }
@@ -119,9 +125,9 @@
     {
         try
         {
-            if (username != string.Empty && password != string.Empty && confirm != string.Empty && email != string.Empty && ValidateProfiles())
+            if (username != string.Empty && _password != string.Empty && confirm != string.Empty && email != string.Empty && ValidateProfiles())
             {
-                if (password == confirm)
+                if (_password == confirm)
                 {
                     var user = await UserService.GetUserAsync(username, PageState.Site.SiteId);
                     if (user == null)
@@ -129,7 +135,7 @@
                         user = new User();
                         user.SiteId = PageState.Site.SiteId;
                         user.Username = username;
-                        user.Password = password;
+                        user.Password = _password;
                         user.Email = email;
                         user.DisplayName = string.IsNullOrWhiteSpace(displayname) ? username : displayname;
                         user.PhotoFileId = null;
@@ -193,4 +199,17 @@
         settings = SettingService.SetSetting(settings, SettingName, value);
     }
 
+    private void TogglePassword()
+	{
+		if (_passwordtype == "password")
+		{
+			_passwordtype = "text";
+			_togglepassword = Localizer["HidePassword"];
+		}
+		else
+		{
+			_passwordtype = "password";
+			_togglepassword = Localizer["ShowPassword"];
+		}
+	}
 }
diff --git a/Oqtane.Client/Modules/Admin/Users/Edit.razor b/Oqtane.Client/Modules/Admin/Users/Edit.razor
index 167adc8d..b2445c4c 100644
--- a/Oqtane.Client/Modules/Admin/Users/Edit.razor
+++ b/Oqtane.Client/Modules/Admin/Users/Edit.razor
@@ -29,8 +29,11 @@ else
                 </div>
                 <div class="row mb-1 align-items-center">
                     <Label Class="col-sm-3" For="password" HelpText="The user's password. Please choose a password which is sufficiently secure." ResourceKey="Password"></Label>
-                    <div class="col-sm-9">
-                        <input id="password" type="password" class="form-control" @bind="@password" />
+					<div class="col-sm-9">
+                        <div class="input-group">
+						    <input id="password" type="@_passwordtype" name="Password" class="form-control" @bind="@_password" required />
+						    <button type="button" class="btn btn-secondary" @onclick="@TogglePassword">@_togglepassword</button>
+					    </div>
                     </div>
                 </div>
                 <div class="row mb-1 align-items-center">
@@ -133,7 +136,9 @@ else
 @code {
     private int userid;
     private string username = string.Empty;
-    private string password = string.Empty;
+    private string _password = string.Empty;
+	private string _passwordtype = "password";
+	private string _togglepassword = string.Empty;
     private string confirm = string.Empty;
     private string email = string.Empty;
     private string displayname = string.Empty;
@@ -160,6 +165,7 @@ else
             // OnParametersSetAsync is called when the edit modal is closed - in which case there is no id parameter
             if (PageState.QueryString.ContainsKey("id"))
             {
+                _togglepassword = Localizer["ShowPassword"];
                 profiles = await ProfileService.GetProfilesAsync(PageState.Site.SiteId);
                 userid = Int32.Parse(PageState.QueryString["id"]);
                 var user = await UserService.GetUserAsync(userid, PageState.Site.SiteId);
@@ -205,12 +211,12 @@ else
         {
             if (username != string.Empty && email != string.Empty && ValidateProfiles())
             {
-                if (password == confirm)
+                if (_password == confirm)
                 {
                     var user = await UserService.GetUserAsync(userid, PageState.Site.SiteId);
                     user.SiteId = PageState.Site.SiteId;
                     user.Username = username;
-                    user.Password = password;
+                    user.Password = _password;
                     user.Email = email;
                     user.DisplayName = string.IsNullOrWhiteSpace(displayname) ? username : displayname;
                     user.PhotoFileId = null;
@@ -268,4 +274,17 @@ else
         settings = SettingService.SetSetting(settings, SettingName, value);
     }
 
+        private void TogglePassword()
+	{
+		if (_passwordtype == "password")
+		{
+			_passwordtype = "text";
+			_togglepassword = Localizer["HidePassword"];
+		}
+		else
+		{
+			_passwordtype = "password";
+			_togglepassword = Localizer["ShowPassword"];
+		}
+	}
 }
diff --git a/Oqtane.Client/Resources/Modules/Admin/UserProfile/Index.resx b/Oqtane.Client/Resources/Modules/Admin/UserProfile/Index.resx
index 6eabb548..eccd3c38 100644
--- a/Oqtane.Client/Resources/Modules/Admin/UserProfile/Index.resx
+++ b/Oqtane.Client/Resources/Modules/Admin/UserProfile/Index.resx
@@ -219,4 +219,10 @@
   <data name="DeleteAllNotifications.Text" xml:space="preserve">
     <value>Delete ALL Notifications</value>
   </data>
+  <data name="HidePassword" xml:space="preserve">
+    <value>Hide</value>
+  </data>
+  <data name="ShowPassword" xml:space="preserve">
+    <value>Show</value>
+  </data>
 </root>
\ No newline at end of file
diff --git a/Oqtane.Client/Resources/Modules/Admin/Users/Add.resx b/Oqtane.Client/Resources/Modules/Admin/Users/Add.resx
index 4726a6e9..37bf3f31 100644
--- a/Oqtane.Client/Resources/Modules/Admin/Users/Add.resx
+++ b/Oqtane.Client/Resources/Modules/Admin/Users/Add.resx
@@ -168,4 +168,13 @@
   <data name="Username.Text" xml:space="preserve">
     <value>Username:</value>
   </data>
+  <data name="HidePassword" xml:space="preserve">
+    <value>Hide</value>
+  </data>
+  <data name="ShowPassword" xml:space="preserve">
+    <value>Show</value>
+  </data>
+  <data name="Password.Placeholder" xml:space="preserve">
+    <value>Password</value>
+  </data>
 </root>
\ No newline at end of file
diff --git a/Oqtane.Client/Resources/Modules/Admin/Users/Edit.resx b/Oqtane.Client/Resources/Modules/Admin/Users/Edit.resx
index 86f18fb8..7fabae46 100644
--- a/Oqtane.Client/Resources/Modules/Admin/Users/Edit.resx
+++ b/Oqtane.Client/Resources/Modules/Admin/Users/Edit.resx
@@ -183,4 +183,13 @@
   <data name="Profile.Heading" xml:space="preserve">
     <value>Profile</value>
   </data>
+  <data name="HidePassword" xml:space="preserve">
+    <value>Hide</value>
+  </data>
+  <data name="ShowPassword" xml:space="preserve">
+    <value>Show</value>
+  </data>
+  <data name="Password.Placeholder" xml:space="preserve">
+    <value>Password</value>
+  </data>
 </root>
\ No newline at end of file