Add show password button to login page

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">

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);
 }
 

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;
+}