Update login.html

Author: GitTimeraider

app/templates/login.html

@@ -2,21 +2,83 @@
 
 {% block content %}
 <div class="login-container">
-    <h2>Login</h2>
-    <form method="POST">
-        <div class="form-group">
-            <label for="username">Username</label>
-            <input type="text" id="username" name="username" required>
-        </div>
-        <div class="form-group">
-            <label for="password">Password</label>
-            <input type="password" id="password" name="password" required>
-        </div>
-        <div class="form-group">
-            <label for="totp_token">2FA Token (if enabled)</label>
-            <input type="text" id="totp_token" name="totp_token" placeholder="000000">
-        </div>
-        <button type="submit">Login</button>
+    <h1>Login</h1>
+
+    {% with messages = get_flashed_messages(with_categories=true) %}
+        {% if messages %}
+            {% for category, message in messages %}
+                <div class="alert alert-{{ category }}">{{ message }}</div>
+            {% endfor %}
+        {% endif %}
+    {% endwith %}
+
+    <form method="POST" action="{{ url_for('auth.login') }}">
+        {% if not require_totp %}
+            <!-- Normal login form -->
+            <div class="form-group">
+                <label for="username">Username</label>
+                <input type="text" id="username" name="username" required autofocus 
+                       value="{{ username if username else '' }}">
+            </div>
+
+            <div class="form-group">
+                <label for="password">Password</label>
+                <input type="password" id="password" name="password" required>
+            </div>
+        {% else %}
+            <!-- 2FA form - username and password are hidden -->
+            <input type="hidden" name="username" value="{{ username }}">
+            <input type="hidden" name="password" value="{{ request.form.password }}">
+
+            <div class="form-group">
+                <label for="totp_code">2FA Code</label>
+                <input type="text" id="totp_code" name="totp_code" 
+                       pattern="[0-9]{6}" maxlength="6" 
+                       placeholder="000000" required autofocus
+                       autocomplete="off">
+                <small class="help-text">Enter the 6-digit code from your authenticator app</small>
+            </div>
+        {% endif %}
+
+        <button type="submit" class="btn-primary">
+            {% if require_totp %}Verify{% else %}Login{% endif %}
+        </button>
     </form>
 </div>
+
+<style>
+.login-container {
+    max-width: 400px;
+    margin: 5rem auto;
+    padding: 2rem;
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+.alert {
+    padding: 0.75rem 1rem;
+    margin-bottom: 1rem;
+    border-radius: 4px;
+}
+
+.alert-error {
+    background-color: #f8d7da;
+    color: #721c24;
+    border: 1px solid #f5c6cb;
+}
+
+.help-text {
+    display: block;
+    margin-top: 0.25rem;
+    color: #6c757d;
+    font-size: 0.875rem;
+}
+
+input[type="text"]#totp_code {
+    font-size: 1.5rem;
+    letter-spacing: 0.5em;
+    text-align: center;
+}
+</style>
 {% endblock %}