From 6a45bae887084f6d23b8e35f4cda2da401c0200a Mon Sep 17 00:00:00 2001
From: malik masis <malik.masis@gmail.com>
Date: Mon, 14 Nov 2022 16:46:02 +0300
Subject: [PATCH] Added Hiden-Show button for razor - account

---
 .../Pages/Account/Login.cshtml                | 28 ++++++++++++++++---
 .../Pages/Account/Login.js                    | 22 +++++++++++++++
 2 files changed, 46 insertions(+), 4 deletions(-)
 create mode 100644 modules/account/src/Volo.Abp.Account.Web/Pages/Account/Login.js

diff --git a/modules/account/src/Volo.Abp.Account.Web/Pages/Account/Login.cshtml b/modules/account/src/Volo.Abp.Account.Web/Pages/Account/Login.cshtml
index ae31edc5e7..2b0fcb9c2c 100644
--- a/modules/account/src/Volo.Abp.Account.Web/Pages/Account/Login.cshtml
+++ b/modules/account/src/Volo.Abp.Account.Web/Pages/Account/Login.cshtml
@@ -2,10 +2,26 @@
 @using Microsoft.AspNetCore.Mvc.Localization
 @using Volo.Abp.Account.Localization
 @using Volo.Abp.Account.Settings
+@using Volo.Abp.Account.Web.Pages.Account;
+@using Volo.Abp.AspNetCore.Mvc.UI.Theming;
+@using Volo.Abp.Identity;
 @using Volo.Abp.Settings
 @model Volo.Abp.Account.Web.Pages.Account.LoginModel
 @inject IHtmlLocalizer<AccountResource> L
+@inject IThemeManager ThemeManager
 @inject Volo.Abp.Settings.ISettingProvider SettingProvider
+
+@{
+    Layout = ThemeManager.CurrentTheme.GetAccountLayout();
+}
+
+@section scripts
+    {
+    <abp-script-bundle name="@typeof(LoginModel).FullName">
+        <abp-script src="/Pages/Account/Login.js" />
+    </abp-script-bundle>
+}
+
 <div class="card mt-3 shadow-sm rounded">
     <div class="card-body p-5">
         <h4>@L["Login"]</h4>
@@ -21,17 +37,21 @@
             <form method="post" class="mt-4">
                 <div class="mb-3">
                     <label asp-for="LoginInput.UserNameOrEmailAddress" class="form-label"></label>
-                    <input asp-for="LoginInput.UserNameOrEmailAddress" class="form-control"/>
+                    <input asp-for="LoginInput.UserNameOrEmailAddress" class="form-control" />
                     <span asp-validation-for="LoginInput.UserNameOrEmailAddress" class="text-danger"></span>
                 </div>
+
                 <div class="mb-3">
                     <label asp-for="LoginInput.Password" class="form-label"></label>
-                    <input asp-for="LoginInput.Password" class="form-control"/>
-                    <span asp-validation-for="LoginInput.Password" class="text-danger"></span>
+                    <div class="input-group">
+                        <input type="password" class="form-control" autocomplete="new-password" maxlength="@IdentityUserConsts.MaxPasswordLength" asp-for="LoginInput.Password" />
+                        <button class="btn btn-secondary" type="button" id="PasswordVisibilityButton"><i class="fa fa-eye-slash" aria-hidden="true"></i></button>
+                    </div>
+                    <span asp-validation-for="LoginInput.Password"></span>
                 </div>
                 <abp-row>
                     <abp-column>
-                        <abp-input asp-for="LoginInput.RememberMe" class="mb-4"/>
+                        <abp-input asp-for="LoginInput.RememberMe" class="mb-4" />
                     </abp-column>
                     <abp-column class="text-end">
                         <a href="@Url.Page("./ForgotPassword", new {returnUrl = Model.ReturnUrl, returnUrlHash = Model.ReturnUrlHash})">@L["ForgotPassword"]</a>
diff --git a/modules/account/src/Volo.Abp.Account.Web/Pages/Account/Login.js b/modules/account/src/Volo.Abp.Account.Web/Pages/Account/Login.js
new file mode 100644
index 0000000000..56934f4fef
--- /dev/null
+++ b/modules/account/src/Volo.Abp.Account.Web/Pages/Account/Login.js
@@ -0,0 +1,22 @@
+$(function () {
+    $("#PasswordVisibilityButton").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");
+        }
+    });
+
+});