From 0c3d9d728784d676ecaf0e9ef5cadbd2039c503d Mon Sep 17 00:00:00 2001
From: Koha9 <36852125+Koha9@users.noreply.github.com>
Date: Tue, 8 Jul 2025 19:44:07 +0900
Subject: [PATCH 1/3] Grey out user/password when token present

---
 app/templates/login.html | 32 +++++++++++++++++++++++++++++---
 1 file changed, 29 insertions(+), 3 deletions(-)

diff --git a/app/templates/login.html b/app/templates/login.html
index d6caca2..d1f8a87 100644
--- a/app/templates/login.html
+++ b/app/templates/login.html
@@ -6,11 +6,11 @@
 <h2>🔐 登录信息</h2>
 <form method="post" action="/login">
     <div class="mb-3">
-        <label for="user" class="form-label">用户名</label>
+        <label for="user" class="form-label" id="user-label">用户名</label>
         <input type="text" class="form-control" id="user" name="user">
     </div>
     <div class="mb-3">
-        <label for="pw" class="form-label">密码</label>
+        <label for="pw" class="form-label" id="pw-label">密码</label>
         <input type="password" class="form-control" id="pw" name="pw">
     </div>
         <div class="mb-3">
@@ -38,4 +38,30 @@
 {% if message %}
 <div class="alert alert-{{ 'success' if success else 'danger' }} mt-4">{{ message }}</div>
 {% endif %}
-{% endblock %}
\ No newline at end of file
+<script>
+    document.addEventListener('DOMContentLoaded', function () {
+        const tokenInput = document.getElementById('token');
+        const userInput = document.getElementById('user');
+        const pwInput = document.getElementById('pw');
+        const userLabel = document.getElementById('user-label');
+        const pwLabel = document.getElementById('pw-label');
+
+        function toggleCredFields() {
+            const hasToken = tokenInput.value.trim() !== '';
+            [userInput, pwInput].forEach(el => {
+                el.readOnly = hasToken;
+                el.classList.toggle('bg-body-secondary', hasToken);
+                el.classList.toggle('text-decoration-line-through', hasToken);
+                el.classList.toggle('text-body-secondary', hasToken);
+            });
+            [userLabel, pwLabel].forEach(el => {
+                el.classList.toggle('text-decoration-line-through', hasToken);
+                el.classList.toggle('text-body-secondary', hasToken);
+            });
+        }
+
+        tokenInput.addEventListener('input', toggleCredFields);
+        toggleCredFields();
+    });
+</script>
+{% endblock %}

From 77c38cd17d16ccc5774f347ffaef0f23549533c0 Mon Sep 17 00:00:00 2001
From: Koha9 <36852125+Koha9@users.noreply.github.com>
Date: Tue, 8 Jul 2025 19:49:35 +0900
Subject: [PATCH 2/3] Disable highlight when user/pass grayed out

---
 app/templates/login.html | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/app/templates/login.html b/app/templates/login.html
index d1f8a87..6587350 100644
--- a/app/templates/login.html
+++ b/app/templates/login.html
@@ -50,6 +50,11 @@
             const hasToken = tokenInput.value.trim() !== '';
             [userInput, pwInput].forEach(el => {
                 el.readOnly = hasToken;
+                el.tabIndex = hasToken ? -1 : 0;
+                el.style.pointerEvents = hasToken ? 'none' : '';
+                if (hasToken && document.activeElement === el) {
+                    el.blur();
+                }
                 el.classList.toggle('bg-body-secondary', hasToken);
                 el.classList.toggle('text-decoration-line-through', hasToken);
                 el.classList.toggle('text-body-secondary', hasToken);

From afd4981ba74aff9948e285556dbb80aeef1e4452 Mon Sep 17 00:00:00 2001
From: Koha9 <36852125+Koha9@users.noreply.github.com>
Date: Tue, 8 Jul 2025 19:54:32 +0900
Subject: [PATCH 3/3] refactor login template

---
 app/templates/login.html | 30 +++++++++++++-----------------
 1 file changed, 13 insertions(+), 17 deletions(-)

diff --git a/app/templates/login.html b/app/templates/login.html
index 6587350..c5bfd43 100644
--- a/app/templates/login.html
+++ b/app/templates/login.html
@@ -39,29 +39,25 @@
 <div class="alert alert-{{ 'success' if success else 'danger' }} mt-4">{{ message }}</div>
 {% endif %}
 <script>
-    document.addEventListener('DOMContentLoaded', function () {
+    document.addEventListener('DOMContentLoaded', () => {
         const tokenInput = document.getElementById('token');
-        const userInput = document.getElementById('user');
-        const pwInput = document.getElementById('pw');
-        const userLabel = document.getElementById('user-label');
-        const pwLabel = document.getElementById('pw-label');
+        const inputs = [document.getElementById('user'), document.getElementById('pw')];
+        const labels = [document.getElementById('user-label'), document.getElementById('pw-label')];
+        const fieldClasses = ['bg-body-secondary', 'text-body-secondary', 'text-decoration-line-through'];
 
         function toggleCredFields() {
-            const hasToken = tokenInput.value.trim() !== '';
-            [userInput, pwInput].forEach(el => {
-                el.readOnly = hasToken;
-                el.tabIndex = hasToken ? -1 : 0;
-                el.style.pointerEvents = hasToken ? 'none' : '';
-                if (hasToken && document.activeElement === el) {
+            const inactive = tokenInput.value.trim() !== '';
+            inputs.forEach(el => {
+                el.readOnly = inactive;
+                el.tabIndex = inactive ? -1 : 0;
+                el.style.pointerEvents = inactive ? 'none' : '';
+                if (inactive && document.activeElement === el) {
                     el.blur();
                 }
-                el.classList.toggle('bg-body-secondary', hasToken);
-                el.classList.toggle('text-decoration-line-through', hasToken);
-                el.classList.toggle('text-body-secondary', hasToken);
+                fieldClasses.forEach(cls => el.classList.toggle(cls, inactive));
             });
-            [userLabel, pwLabel].forEach(el => {
-                el.classList.toggle('text-decoration-line-through', hasToken);
-                el.classList.toggle('text-body-secondary', hasToken);
+            labels.forEach(el => {
+                ['text-decoration-line-through', 'text-body-secondary'].forEach(cls => el.classList.toggle(cls, inactive));
             });
         }