Merge pull request #15153 from onurpicakci/Onur/password-show-hide

added hide show button

modules/account/src/Volo.Abp.Account.Web/Pages/Account/Components/ProfileManagementGroup/Password/Default.cshtml

@@ -5,13 +5,31 @@
 @inject ICurrentUser CurrentUser
 @model Volo.Abp.Account.Web.Pages.Account.Components.ProfileManagementGroup.Password.AccountProfilePasswordManagementGroupViewComponent.ChangePasswordInfoModel
 
-<h4>@L["ChangePassword"]</h4><hr/>
+<h4>@L["ChangePassword"]</h4><hr />
 <form id="ChangePasswordForm">
-    @if (!Model.HideOldPasswordInput)
-    {
-        <abp-input asp-for="CurrentPassword"/>
-    }
-    <abp-input asp-for="NewPassword"/>
-    <abp-input asp-for="NewPasswordConfirm"/>
-    <abp-button type="submit" button-type="Primary" text="@L["Submit"].Value"/>
-</form>
+    <div class="mb-3">
+        @if (!Model.HideOldPasswordInput)
+        {
+            <label asp-for="CurrentPassword" class="form-label"></label>
+            <div class="input-group">
+                <input type="password" class="form-control" autocomplete="new-password" asp-for="CurrentPassword"/>
+                <button class="btn btn-secondary password-visibility-button" type="button"><i class="fa fa-eye-slash" aria-hidden="true"></i></button>
+            </div>
+            <span asp-validation-for="CurrentPassword"></span><br/>
+        }
+        <label asp-for="NewPassword" class="form-label"></label>
+        <div class="input-group">
+            <input type="password" class="form-control" autocomplete="new-password" asp-for="NewPassword"/>
+            <button class="btn btn-secondary password-visibility-button" type="button" ><i class="fa fa-eye-slash" aria-hidden="true"></i></button>
+        </div>
+        <span asp-validation-for="NewPassword"></span><br/>
+    
+        <label asp-for="NewPasswordConfirm" class="form-label"></label>
+        <div class="input-group">
+            <input type="password" class="form-control" autocomplete="new-password" asp-for="NewPasswordConfirm"/>
+            <button class="btn btn-secondary password-visibility-button" type="button"><i class="fa fa-eye-slash" aria-hidden="true"></i></button>
+        </div>
+        <span asp-validation-for="NewPasswordConfirm"></span>
+    </div>
+    <abp-button type="submit" button-type="Primary" text="@L["Submit"].Value" />
+</form>

modules/account/src/Volo.Abp.Account.Web/Pages/Account/Components/ProfileManagementGroup/Password/Default.js

@@ -1,7 +1,26 @@
 (function ($) {
+    $(".password-visibility-button").click(function (e) {
+        let button = $(this);
+        let passwordInput = button.parent().find("input");
+        if (!passwordInput) {
+            return;
+        }
+
+        if (passwordInput.attr("type") === "password") {
+            passwordInput.attr("type", "text");
+        }
+        else {
+            passwordInput.attr("type", "password");
+        }
+
+        let icon = button.find("i");
+        if (icon) {
+            icon.toggleClass("fa-eye-slash").toggleClass("fa-eye");
+        }
+    });
+
     $(function () {
         var l = abp.localization.getResource("AbpAccount");
-
         $('#ChangePasswordForm').submit(function (e) {
             e.preventDefault();
 
@@ -19,15 +38,15 @@
                 return;
             }
 
-            if (input.currentPassword && input.currentPassword == ''){
+            if (input.currentPassword && input.currentPassword == '') {
                 return;
             }
-            
-            if(input.currentPassword == input.newPassword) {
+
+            if (input.currentPassword == input.newPassword) {
                 abp.message.error(l('NewPasswordSameAsOld'));
                 return;
             }
-            
+
             volo.abp.account.profile.changePassword(input).then(function (result) {
                 abp.message.success(l('PasswordChanged'));
                 abp.event.trigger('passwordChanged');