Add account settings page with options to update email, password and delete account

db.py

@@ -574,3 +574,27 @@ ORDER BY invocation_time DESC""", [http_function_id])
                LIMIT %s""",
             (user_id, limit)
         )
+
+    def update_user_password(self, user_id, new_password_hash):
+        """Update user's password"""
+        self.execute(
+            'UPDATE users SET password_hash=%s WHERE id=%s',
+            [new_password_hash, user_id],
+            commit=True
+        )
+
+    def update_user_email(self, user_id, new_email):
+        """Update user's email address"""
+        self.execute(
+            'UPDATE users SET email=%s WHERE id=%s',
+            [new_email, user_id],
+            commit=True
+        )
+
+    def delete_user(self, user_id):
+        """Delete a user account and all associated data"""
+        self.execute(
+            'DELETE FROM users WHERE id=%s',
+            [user_id],
+            commit=True
+        )

migrations/004_add_email_to_users.sql

@@ -0,0 +1,3 @@
+-- Add email column to users table
+ALTER TABLE users ADD COLUMN IF NOT EXISTS email VARCHAR(255);
+CREATE INDEX IF NOT EXISTS idx_users_email ON users(email);

routes/auth.py

@@ -21,26 +21,27 @@ def get_client_ip():
         return request.remote_addr
 
 class User(UserMixin):
-    def __init__(self, id, username, password_hash, created_at, theme_preference='light'):
+    def __init__(self, id, username, password_hash, created_at, theme_preference='light', email=None):
         self.id = id
         self.username = username
         self.password_hash = password_hash
         self.created_at = created_at
         self.theme_preference = theme_preference
+        self.email = email
 
     @staticmethod
     def get(user_id):
         user_data = db.get_user(int(user_id))
 
         if user_data:
-            return User(id=str(user_data['id']), username=user_data['username'], password_hash=user_data['password_hash'], created_at=user_data['created_at'], theme_preference=user_data.get('theme_preference', 'light'))
+            return User(id=str(user_data['id']), username=user_data['username'], password_hash=user_data['password_hash'], created_at=user_data['created_at'], theme_preference=user_data.get('theme_preference', 'light'), email=user_data.get('email'))
         return None
 
 @login_manager.user_loader
 def load_user(user_id):
     user_data = db.get_user(int(user_id))
     if user_data:
-        return User(id=str(user_data['id']), username=user_data['username'], password_hash=user_data['password_hash'], created_at=user_data['created_at'], theme_preference=user_data.get('theme_preference', 'light'))
+        return User(id=str(user_data['id']), username=user_data['username'], password_hash=user_data['password_hash'], created_at=user_data['created_at'], theme_preference=user_data.get('theme_preference', 'light'), email=user_data.get('email'))
     return None
 
 @auth.route('/login', methods=['GET', 'POST'])
@@ -64,7 +65,7 @@ def login():
         db.record_login(user_data['id'], get_client_ip(), str(request.user_agent), False, "Invalid password")
         return render_template("login.html", error="Invalid username or password")
     
-    user = User(id=str(user_data['id']), username=user_data['username'], password_hash=user_data['password_hash'], created_at=user_data['created_at'], theme_preference=user_data.get('theme_preference', 'light'))
+    user = User(id=str(user_data['id']), username=user_data['username'], password_hash=user_data['password_hash'], created_at=user_data['created_at'], theme_preference=user_data.get('theme_preference', 'light'), email=user_data.get('email'))
     
     # Record successful login with real IP
     db.record_login(user.id, get_client_ip(), str(request.user_agent), True)
@@ -94,7 +95,7 @@ def signup():
     hashed_password = generate_password_hash(password)
     user_data = db.create_new_user(username, hashed_password)
 
-    user = User(id=str(user_data['id']), username=user_data['username'], password_hash=user_data['password_hash'], created_at=user_data['created_at'], theme_preference=user_data.get('theme_preference', 'light'))
+    user = User(id=str(user_data['id']), username=user_data['username'], password_hash=user_data['password_hash'], created_at=user_data['created_at'], theme_preference=user_data.get('theme_preference', 'light'), email=user_data.get('email'))
     login_user(user)
 
     return redirect(url_for('home.index'))

routes/settings.py

@@ -50,7 +50,8 @@ def export():
         return render_block(
             environment,
             "dashboard/settings/export.html",
-            "page"
+            "page",
+            current_user=current_user
         )
     return render_template("dashboard/settings/export.html")
 
@@ -74,7 +75,8 @@ def api_keys():
             "dashboard/settings/api_keys.html", 
             "page", 
             api_keys=api_keys,
-            functions=functions
+            functions=functions,
+            current_user=current_user
         )
     return render_template("dashboard/settings/api_keys.html", api_keys=api_keys, functions=functions)
 
@@ -129,7 +131,8 @@ def database_schema():
             environment,
             "dashboard/settings/database_schema.html",
             "page",
-            schema_info=schema_info
+            schema_info=schema_info,
+            current_user=current_user
         )
     return render_template("dashboard/settings/database_schema.html", schema_info=schema_info)
 
@@ -145,10 +148,92 @@ def login_history():
             environment,
             "dashboard/settings/login_history.html",
             "page",
-            history=history
+            history=history,
+            current_user=current_user
         )
     return render_template("dashboard/settings/login_history.html", history=history)
 
+@settings.route("/account", methods=["GET"])
+@login_required
+def account():
+    """Display account settings page"""
+    if htmx:
+        return render_block(
+            environment,
+            "dashboard/settings/account.html",
+            "page",
+            current_user=current_user
+        )
+    return render_template("dashboard/settings/account.html")
+
+@settings.route("/account/password", methods=["POST"])
+@login_required
+def update_password():
+    """Update user password"""
+    from werkzeug.security import generate_password_hash, check_password_hash
+    
+    current_password = request.form.get('current_password')
+    new_password = request.form.get('new_password')
+    confirm_password = request.form.get('confirm_password')
+    
+    # Verify current password
+    user_data = db.get_user(current_user.id)
+    if not check_password_hash(user_data['password_hash'], current_password):
+        return render_template("dashboard/settings/account.html", error="Incorrect current password")
+    
+    # Validate new password
+    if len(new_password) < 10:
+        return render_template("dashboard/settings/account.html", error="New password must be at least 10 characters")
+    
+    if new_password != confirm_password:
+        return render_template("dashboard/settings/account.html", error="New passwords do not match")
+    
+    # Update password
+    new_hash = generate_password_hash(new_password)
+    db.update_user_password(current_user.id, new_hash)
+    
+    return render_template("dashboard/settings/account.html", success="Password updated successfully")
+
+@settings.route("/account/email", methods=["POST"])
+@login_required
+def update_email():
+    """Update user email"""
+    email = request.form.get('email')
+    
+    # Basic validation
+    if email and '@' not in email:
+        return render_template("dashboard/settings/account.html", error="Invalid email address")
+    
+    db.update_user_email(current_user.id, email)
+    
+    # Update current user object in session if needed, or just reload page
+    return render_template("dashboard/settings/account.html", success="Email updated successfully")
+
+@settings.route("/account/delete", methods=["POST"])
+@login_required
+def delete_account():
+    """Delete user account"""
+    from werkzeug.security import check_password_hash
+    from flask_login import logout_user
+    
+    password = request.form.get('password')
+    confirm_text = request.form.get('confirm_text')
+    
+    # Verify password
+    user_data = db.get_user(current_user.id)
+    if not check_password_hash(user_data['password_hash'], password):
+        return render_template("dashboard/settings/account.html", error="Incorrect password")
+    
+    # Verify confirmation text
+    if confirm_text != "DELETE":
+        return render_template("dashboard/settings/account.html", error="Please type DELETE to confirm")
+    
+    # Delete account
+    db.delete_user(current_user.id)
+    logout_user()
+    
+    return redirect(url_for('landing_page'))
+
 
 def get_database_schema():
     """Fetch database schema information for ERD generation"""

templates/dashboard/settings/account.html

@@ -0,0 +1,197 @@
+{% extends 'dashboard.html' %}
+
+{% block page %}
+<div class="p-6 max-w-4xl mx-auto">
+    <!-- Settings Navigation -->
+    <div class="mb-6 border-b border-gray-200 dark:border-gray-700">
+        <nav class="-mb-px flex space-x-8">
+            <a hx-get="{{ url_for('settings.api_keys') }}" hx-target="#container" hx-swap="innerHTML" hx-push-url="true"
+                class="border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 py-4 px-1 text-sm font-medium cursor-pointer">
+                API Keys
+            </a>
+            <a hx-get="{{ url_for('settings.export') }}" hx-target="#container" hx-swap="innerHTML" hx-push-url="true"
+                class="border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 py-4 px-1 text-sm font-medium cursor-pointer">
+                Export Data
+            </a>
+            <a hx-get="{{ url_for('settings.database_schema') }}" hx-target="#container" hx-swap="innerHTML"
+                hx-push-url="true"
+                class="border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 py-4 px-1 text-sm font-medium cursor-pointer">
+                Database Schema
+            </a>
+            <a hx-get="{{ url_for('settings.login_history') }}" hx-target="#container" hx-swap="innerHTML"
+                hx-push-url="true"
+                class="border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 py-4 px-1 text-sm font-medium cursor-pointer">
+                Login History
+            </a>
+            <a hx-get="{{ url_for('settings.account') }}" hx-target="#container" hx-swap="innerHTML" hx-push-url="true"
+                class="border-b-2 border-blue-500 text-blue-600 dark:text-blue-400 py-4 px-1 text-sm font-medium cursor-pointer">
+                Account
+            </a>
+        </nav>
+    </div>
+
+    <div class="mb-6">
+        <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">Account Settings</h1>
+        <p class="text-gray-600 dark:text-gray-400">Manage your profile, security, and account preferences</p>
+    </div>
+
+    {% if error %}
+    <div class="mb-6 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 px-4 py-3 rounded relative"
+        role="alert">
+        <span class="block sm:inline">{{ error }}</span>
+    </div>
+    {% endif %}
+
+    {% if success %}
+    <div class="mb-6 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 text-green-700 dark:text-green-300 px-4 py-3 rounded relative"
+        role="alert">
+        <span class="block sm:inline">{{ success }}</span>
+    </div>
+    {% endif %}
+
+    <!-- Account Info -->
+    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-6">
+        <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Profile Information</h2>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+            <div>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Username</label>
+                <div
+                    class="px-3 py-2 bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md text-gray-600 dark:text-gray-400">
+                    {{ current_user.username }}
+                </div>
+            </div>
+            <div>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Account Created</label>
+                <div
+                    class="px-3 py-2 bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md text-gray-600 dark:text-gray-400">
+                    {{ current_user.created_at.strftime('%B %d, %Y') }}
+                </div>
+            </div>
+        </div>
+
+        <form hx-post="{{ url_for('settings.update_email') }}" hx-target="#container" hx-swap="innerHTML">
+            <div class="mb-4">
+                <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email
+                    Address</label>
+                <div class="flex">
+                    <input type="email" name="email" id="email" value="{{ current_user.email or '' }}"
+                        placeholder="Enter your email address"
+                        class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-l-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
+                    <button type="submit"
+                        class="px-4 py-2 bg-blue-600 text-white font-medium rounded-r-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                        Update
+                    </button>
+                </div>
+                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Used for notifications and account recovery.
+                </p>
+            </div>
+        </form>
+    </div>
+
+    <!-- Change Password -->
+    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-6">
+        <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Change Password</h2>
+
+        <form hx-post="{{ url_for('settings.update_password') }}" hx-target="#container" hx-swap="innerHTML">
+            <div class="space-y-4">
+                <div>
+                    <label for="current_password"
+                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Current Password</label>
+                    <input type="password" name="current_password" id="current_password" required
+                        class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
+                </div>
+
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div>
+                        <label for="new_password"
+                            class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">New Password</label>
+                        <input type="password" name="new_password" id="new_password" required minlength="10"
+                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
+                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Minimum 10 characters</p>
+                    </div>
+                    <div>
+                        <label for="confirm_password"
+                            class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Confirm New
+                            Password</label>
+                        <input type="password" name="confirm_password" id="confirm_password" required minlength="10"
+                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
+                    </div>
+                </div>
+
+                <div class="flex justify-end">
+                    <button type="submit"
+                        class="px-4 py-2 bg-blue-600 text-white font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                        Change Password
+                    </button>
+                </div>
+            </div>
+        </form>
+    </div>
+
+    <!-- Danger Zone -->
+    <div class="bg-red-50 dark:bg-red-900/10 border border-red-200 dark:border-red-800 rounded-lg shadow p-6">
+        <h2 class="text-lg font-semibold text-red-700 dark:text-red-400 mb-4">Danger Zone</h2>
+
+        <div class="flex items-center justify-between">
+            <div>
+                <h3 class="font-medium text-gray-900 dark:text-white">Delete Account</h3>
+                <p class="text-sm text-gray-600 dark:text-gray-400">Permanently delete your account and all associated
+                    data. This action cannot be undone.</p>
+            </div>
+            <button onclick="document.getElementById('delete-modal').classList.remove('hidden')"
+                class="px-4 py-2 bg-red-600 text-white font-medium rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
+                Delete Account
+            </button>
+        </div>
+    </div>
+</div>
+
+<!-- Delete Confirmation Modal -->
+<div id="delete-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
+    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800">
+        <div class="mt-3 text-center">
+            <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100 dark:bg-red-900">
+                <svg class="h-6 w-6 text-red-600 dark:text-red-400" fill="none" stroke="currentColor"
+                    viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                </svg>
+            </div>
+            <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white mt-4">Delete Account?</h3>
+            <div class="mt-2 px-7 py-3">
+                <p class="text-sm text-gray-500 dark:text-gray-400">
+                    Are you sure you want to delete your account? All of your data will be permanently removed. This
+                    action cannot be undone.
+                </p>
+            </div>
+
+            <form action="{{ url_for('settings.delete_account') }}" method="POST" class="mt-4">
+                <div class="mb-4 text-left">
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Enter
+                        Password</label>
+                    <input type="password" name="password" required
+                        class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-red-500 focus:border-red-500 dark:bg-gray-700 dark:text-white">
+                </div>
+                <div class="mb-4 text-left">
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Type "DELETE" to
+                        confirm</label>
+                    <input type="text" name="confirm_text" required pattern="DELETE"
+                        class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-red-500 focus:border-red-500 dark:bg-gray-700 dark:text-white">
+                </div>
+
+                <div class="flex justify-center space-x-4 mt-6">
+                    <button type="button" onclick="document.getElementById('delete-modal').classList.add('hidden')"
+                        class="px-4 py-2 bg-gray-200 text-gray-800 font-medium rounded-md hover:bg-gray-300 focus:outline-none">
+                        Cancel
+                    </button>
+                    <button type="submit"
+                        class="px-4 py-2 bg-red-600 text-white font-medium rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
+                        Delete Permanently
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+{% endblock %}

templates/dashboard/settings/api_keys.html

@@ -22,8 +22,14 @@
                 hx-push-url="true"
                 class="border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 py-4 px-1 text-sm font-medium cursor-pointer">
                 Login History
+            </a>
+                    <a hx-get="{{ url_for('settings.account') }}" hx-target="#container" hx-swap="innerHTML"
+                hx-push-url="true"
+                class="border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 py-4 px-1 text-sm font-medium cursor-pointer">
+                Account
             </a>
         </nav>
+
     </div>
 
     <div class="flex justify-between items-center mb-6">
@@ -136,4 +142,4 @@
         </form>
     </div>
 </dialog>
-{% endblock %}
+{% endblock %}

templates/dashboard/settings/database_schema.html

@@ -22,8 +22,14 @@
                 hx-push-url="true"
                 class="border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 py-4 px-1 text-sm font-medium cursor-pointer">
                 Login History
+            </a>
+                    <a hx-get="{{ url_for('settings.account') }}" hx-target="#container" hx-swap="innerHTML"
+                hx-push-url="true"
+                class="border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 py-4 px-1 text-sm font-medium cursor-pointer">
+                Account
             </a>
         </nav>
+
     </div>
 
     <div class="mb-6">
@@ -232,4 +238,4 @@ erDiagram
         document.getElementById('mermaid-diagram').innerHTML = '<div class="text-amber-600 dark:text-amber-400 p-6 text-center"><svg class="w-12 h-12 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg><p class="font-medium mb-2">Unable to render ERD</p><p class="text-sm">View the tables overview below for schema information.</p></div>';
     }
 </script>
-{% endblock %}
+{% endblock %}

templates/dashboard/settings/export.html

@@ -22,8 +22,14 @@
                 hx-push-url="true"
                 class="border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 py-4 px-1 text-sm font-medium cursor-pointer">
                 Login History
+            </a>
+                    <a hx-get="{{ url_for('settings.account') }}" hx-target="#container" hx-swap="innerHTML"
+                hx-push-url="true"
+                class="border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 py-4 px-1 text-sm font-medium cursor-pointer">
+                Account
             </a>
         </nav>
+
     </div>
 
     <div class="mb-6">
@@ -271,4 +277,4 @@
         detailsDiv.innerHTML = detailsHTML || '<p class="text-sm text-gray-500 dark:text-gray-400">No items to import.</p>';
     }
 </script>
-{% endblock %}
+{% endblock %}

templates/dashboard/settings/login_history.html

@@ -22,8 +22,14 @@
                 hx-push-url="true"
                 class="border-b-2 border-blue-500 text-blue-600 dark:text-blue-400 py-4 px-1 text-sm font-medium cursor-pointer">
                 Login History
+            </a>
+                    <a hx-get="{{ url_for('settings.account') }}" hx-target="#container" hx-swap="innerHTML"
+                hx-push-url="true"
+                class="border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 py-4 px-1 text-sm font-medium cursor-pointer">
+                Account
             </a>
         </nav>
+
     </div>
 
     <div class="mb-6">
@@ -112,4 +118,4 @@
     </div>
     {% endif %}
 </div>
-{% endblock %}
+{% endblock %}