From 68db55104187eb6b5333b8af9b61fd5f97052c3d Mon Sep 17 00:00:00 2001
From: Jens Luedicke <jens.luedicke@gmail.com>
Date: Sun, 29 Jun 2025 15:47:07 +0200
Subject: [PATCH] Update Profile page.

---
 templates/profile.html | 133 +++++++++++++++++++++++++++++++++--------
 1 file changed, 107 insertions(+), 26 deletions(-)

diff --git a/templates/profile.html b/templates/profile.html
index 82f2b5f..6bcfe42 100644
--- a/templates/profile.html
+++ b/templates/profile.html
@@ -25,33 +25,53 @@
         </p>
     </div>
     
-    <h2>Update Profile</h2>
-    <form method="POST" action="{{ url_for('profile') }}" class="profile-form">
-        <div class="form-group">
-            <label for="email">Email</label>
-            <input type="email" id="email" name="email" class="form-control" value="{{ user.email }}" required>
-        </div>
-        
+    <h2>Profile Settings</h2>
+    
+    <div class="profile-card">
+        <h3>Basic Information</h3>
+        <form method="POST" action="{{ url_for('profile') }}" class="profile-form">
+            <div class="form-group">
+                <label for="email">Email Address</label>
+                <input type="email" id="email" name="email" class="form-control" value="{{ user.email }}" required>
+                <small>This email address is used for account verification and notifications.</small>
+            </div>
+            
+            <div class="form-group">
+                <button type="submit" class="btn btn-primary">Update Email</button>
+            </div>
+        </form>
+    </div>
+    
+    <div class="profile-card">
         <h3>Change Password</h3>
-        <div class="form-group">
-            <label for="current_password">Current Password</label>
-            <input type="password" id="current_password" name="current_password" class="form-control">
-        </div>
-        
-        <div class="form-group">
-            <label for="new_password">New Password</label>
-            <input type="password" id="new_password" name="new_password" class="form-control">
-        </div>
-        
-        <div class="form-group">
-            <label for="confirm_password">Confirm New Password</label>
-            <input type="password" id="confirm_password" name="confirm_password" class="form-control">
-        </div>
-        
-        <div class="form-group">
-            <button type="submit" class="btn btn-primary">Update Profile</button>
-        </div>
-    </form>
+        <p>Update your account password to keep your account secure.</p>
+        <form method="POST" action="{{ url_for('profile') }}" class="password-form">
+            <!-- Hidden email field to maintain current email -->
+            <input type="hidden" name="email" value="{{ user.email }}">
+            
+            <div class="form-group">
+                <label for="current_password">Current Password</label>
+                <input type="password" id="current_password" name="current_password" class="form-control" required>
+                <small>Enter your current password to verify your identity.</small>
+            </div>
+            
+            <div class="form-group">
+                <label for="new_password">New Password</label>
+                <input type="password" id="new_password" name="new_password" class="form-control" required>
+                <small>Choose a strong password with at least 8 characters.</small>
+            </div>
+            
+            <div class="form-group">
+                <label for="confirm_password">Confirm New Password</label>
+                <input type="password" id="confirm_password" name="confirm_password" class="form-control" required>
+                <small>Re-enter your new password to confirm.</small>
+            </div>
+            
+            <div class="form-group">
+                <button type="submit" class="btn btn-warning">Change Password</button>
+            </div>
+        </form>
+    </div>
     
     <div class="security-section">
         <h2>Security Settings</h2>
@@ -89,6 +109,24 @@
     font-weight: bold;
 }
 
+.profile-card {
+    background: #f8f9fa;
+    border: 1px solid #dee2e6;
+    border-radius: 0.5rem;
+    padding: 1.5rem;
+    margin: 1.5rem 0;
+}
+
+.profile-card h3 {
+    color: #007bff;
+    margin-bottom: 1rem;
+}
+
+.profile-card p {
+    color: #6c757d;
+    margin-bottom: 1.5rem;
+}
+
 .security-section {
     margin-top: 2rem;
     padding-top: 2rem;
@@ -154,5 +192,48 @@
 .btn-primary:hover {
     background: #0056b3;
 }
+
+.btn-warning {
+    background: #ffc107;
+    color: #212529;
+}
+
+.btn-warning:hover {
+    background: #e0a800;
+}
+
+.form-group {
+    margin-bottom: 1.5rem;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+    color: #333;
+}
+
+.form-control {
+    width: 100%;
+    padding: 0.75rem;
+    border: 1px solid #ced4da;
+    border-radius: 0.25rem;
+    font-size: 1rem;
+    line-height: 1.5;
+    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.form-control:focus {
+    outline: none;
+    border-color: #007bff;
+    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+}
+
+.form-group small {
+    display: block;
+    margin-top: 0.25rem;
+    color: #6c757d;
+    font-size: 0.875rem;
+}
 </style>
 {% endblock %}
\ No newline at end of file