password show/hide edited

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

@@ -5,14 +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)
+    <div class="mb-3">
-    {
+        @if (!Model.HideOldPasswordInput)
-        <abp-input asp-for="CurrentPassword" class="password-visibility" />
+        {
-    }
+            <label asp-for="CurrentPassword" class="form-label"></label>
-    <abp-input asp-for="NewPassword" class="password-visibility" />
+            <div class="input-group">
-    <abp-input asp-for="NewPasswordConfirm" class="password-visibility" />
+                <input type="password" class="form-control" autocomplete="new-password" asp-for="CurrentPassword"/>
-    <button class="btn btn-secondary" type="button" id="PasswordVisibilityButton"><i class="fa fa-eye-slash" aria-hidden="true"></i></button>
+                <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,25 +1,29 @@
 (function ($) {
-    $("#PasswordVisibilityButton").click(function (e) {
+    $(".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();
+
             if (!$('#ChangePasswordForm').valid()) {
                 return false;
             }
@@ -37,12 +41,12 @@
             if (input.currentPassword && input.currentPassword == '') {
                 return;
             }
-            
+
             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');