fix login error display: use dedicated error div with show/hide

- Rename message-container to login-error for clarity
- Add CSS to hide error by default, show when populated
- Update showMessage() to control visibility
- Update clear on input to hide error div
- Remove completed Task 16 from tasks.md

Docs/tasks.md

@@ -1,11 +1,3 @@
-### Task 16: Fix `Login Page Loads` UI Test
-**Test Result:** FAIL — `TimeoutError: locator.waitFor: Timeout 5000ms exceeded. Call log: waiting for locator('id=password-input') to be visible`
-**File:** `tests/robot/ui/login.robot` and `src/server/web/templates/login.html`
-**Instructions:**
-The Robot test looks for `id=password-input`, but the HTML template uses `id=password`. Open `src/server/web/templates/login.html` and change the password input element's `id` from `password` to `password-input`. Also check `id=login-submit-btn` — the template uses `id=login-button`. Change it to `id=login-submit-btn`. Ensure all referenced element IDs in the Robot tests match the actual HTML.
-
----
-
 ### Task 17: Fix `Login With Valid Password` UI Test
 **Test Result:** FAIL — Same as Task 16 (`id=password-input` not found)
 **File:** `tests/robot/ui/login.robot` and `src/server/web/templates/login.html`

src/server/web/templates/login.html

@@ -146,6 +146,11 @@
             border: 1px solid var(--color-error);
             font-size: 0.9rem;
             text-align: center;
+            display: block;
+        }
+        
+        #login-error {
+            display: none;
         }
         
         .success-message {
@@ -242,7 +247,7 @@
                     </div>
                 </div>
                 
-                <div id="message-container"></div>
+                <div id="login-error" class="message-container"></div>
                 
                 <button type="submit" class="login-button" id="login-submit-btn">
                     <i class="fas fa-sign-in-alt"></i>
@@ -348,11 +353,13 @@
         });
         
         function showMessage(message, type) {
-            messageContainer.innerHTML = `
+            const errorDiv = document.getElementById('login-error');
+            errorDiv.innerHTML = `
                 <div class="${type}-message">
                     ${message}
                 </div>
             `;
+            errorDiv.style.display = 'block';
         }
         
         function setLoading(loading) {
@@ -371,7 +378,9 @@
         
         // Clear message on input
         passwordInput.addEventListener('input', () => {
-            messageContainer.innerHTML = '';
+            const errorDiv = document.getElementById('login-error');
+            errorDiv.innerHTML = '';
+            errorDiv.style.display = 'none';
         });
         
         // Enter key on password toggle