From dcc1a3093bded8da96583394888e27b8c7eb75bc Mon Sep 17 00:00:00 2001
From: woorim02 <99327851+woorim02@users.noreply.github.com>
Date: Sun, 18 Aug 2024 14:51:05 +0900
Subject: [PATCH] Add show password button to login page

---
 src/controllers/session/login/index.html |  7 ++++++-
 src/controllers/session/login/index.js   | 10 ++++++++++
 src/controllers/session/login/login.scss | 23 +++++++++++++++++++++++
 3 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/src/controllers/session/login/index.html b/src/controllers/session/login/index.html
index f24bc0d3eb..cea030f117 100644
--- a/src/controllers/session/login/index.html
+++ b/src/controllers/session/login/index.html
@@ -9,7 +9,12 @@
             </div>
 
             <div class="inputContainer">
-                <input is="emby-input" id="txtManualPassword" type="password" label="${LabelPassword}" autocomplete="current-password" />
+                <input is="emby-input" id="txtManualPassword" type="password" label="${LabelPassword}" autocomplete="current-password">
+                <button class="passwordToggle" type="button">
+                    <span class="material-icons">
+                        visibility
+                    </span>
+                </button>
             </div>
 
             <label class="checkboxContainer">
diff --git a/src/controllers/session/login/index.js b/src/controllers/session/login/index.js
index 93f8e03de0..41032b2337 100644
--- a/src/controllers/session/login/index.js
+++ b/src/controllers/session/login/index.js
@@ -181,6 +181,15 @@ function loadUserList(context, apiClient, users) {
     context.querySelector('#divUsers').innerHTML = html;
 }
 
+function togglePassword() {
+    const input = document.getElementById('txtManualPassword');
+    if (input.type === 'password') {
+        input.type = 'text';
+    } else {
+        input.type = 'password';
+    }
+}
+
 export default function (view, params) {
     function getApiClient() {
         const serverId = params.serverid;
@@ -310,5 +319,6 @@ export default function (view, params) {
     view.addEventListener('viewhide', function () {
         libraryMenu.setTransparentMenu(false);
     });
+    view.querySelector('.passwordToggle').addEventListener('click', togglePassword);
 }
 
diff --git a/src/controllers/session/login/login.scss b/src/controllers/session/login/login.scss
index 70bb7754ef..27e617b4e7 100644
--- a/src/controllers/session/login/login.scss
+++ b/src/controllers/session/login/login.scss
@@ -24,3 +24,26 @@
         width: fit-content;
     }
 }
+
+.inputContainer {
+    position: relative;
+}
+
+.passwordToggle {
+    position: absolute;
+    width: 30px;
+    height: 30px;
+    top: calc(50% - 0.2em);
+    right: 10px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0.2em;
+    align-items: center;
+    justify-content: center;
+}
+
+.passwordToggle .material-icons {
+    font-size: 24px;
+    color: #666;
+}
\ No newline at end of file