Add Forget Password feature.

2025-07-13 12:57:52 +02:00
parent 1500b2cf88
commit 2969fb41c9
9 changed files with 1063 additions and 56 deletions
--- a/templates/forgot_password.html
+++ b/templates/forgot_password.html
@@ -0,0 +1,135 @@
+{% extends "layout.html" %}
+
+{% block content %}
+<div class="content">
+    <div class="auth-container">
+        <div class="auth-card">
+            <h2 class="auth-title">Forgot Password</h2>
+            
+            <p class="auth-subtitle">
+                Enter your username or email address and we'll send you a link to reset your password.
+            </p>
+            
+            <form method="POST" class="auth-form">
+                <div class="form-group">
+                    <label for="username_or_email">Username or Email</label>
+                    <input type="text" 
+                           id="username_or_email" 
+                           name="username_or_email" 
+                           class="form-control" 
+                           placeholder="Enter your username or email"
+                           required 
+                           autofocus>
+                </div>
+                
+                <button type="submit" class="btn btn-primary btn-block">Send Reset Link</button>
+                
+                <div class="auth-links">
+                    <a href="{{ url_for('login') }}">Back to Login</a>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<style>
+    .auth-container {
+        min-height: calc(100vh - 200px);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 2rem;
+    }
+    
+    .auth-card {
+        background: white;
+        border-radius: 12px;
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+        padding: 2.5rem;
+        width: 100%;
+        max-width: 400px;
+    }
+    
+    .auth-title {
+        text-align: center;
+        margin-bottom: 0.5rem;
+        color: var(--primary-color);
+    }
+    
+    .auth-subtitle {
+        text-align: center;
+        color: #666;
+        margin-bottom: 2rem;
+        line-height: 1.5;
+    }
+    
+    .auth-form .form-group {
+        margin-bottom: 1.5rem;
+    }
+    
+    .auth-form label {
+        display: block;
+        margin-bottom: 0.5rem;
+        font-weight: 500;
+        color: #333;
+    }
+    
+    .auth-form .form-control {
+        width: 100%;
+        padding: 0.75rem;
+        border: 1px solid #ddd;
+        border-radius: 6px;
+        font-size: 1rem;
+        transition: border-color 0.2s;
+    }
+    
+    .auth-form .form-control:focus {
+        outline: none;
+        border-color: var(--primary-color);
+        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+    }
+    
+    .btn-block {
+        width: 100%;
+        padding: 0.875rem;
+        font-size: 1rem;
+        font-weight: 500;
+        margin-bottom: 1rem;
+    }
+    
+    .auth-links {
+        text-align: center;
+        margin-top: 1.5rem;
+    }
+    
+    .auth-links a {
+        color: var(--primary-color);
+        text-decoration: none;
+        font-size: 0.875rem;
+    }
+    
+    .auth-links a:hover {
+        text-decoration: underline;
+    }
+    
+    /* Mobile optimization */
+    @media (max-width: 768px) {
+        .auth-container {
+            padding: 1rem;
+            min-height: calc(100vh - 140px);
+        }
+        
+        .auth-card {
+            padding: 1.5rem;
+        }
+        
+        .auth-title {
+            font-size: 1.5rem;
+        }
+        
+        .auth-subtitle {
+            font-size: 0.875rem;
+        }
+    }
+</style>
+{% endblock %}