Grey out user/password when token present

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