Add account deletion feature with confirmation modal

- Add delete account endpoint with password/username verification
- Support both local auth (password) and OIDC (username) confirmation
- Delete user data directory and cascade delete from database
- Add danger zone section to settings page with right-aligned button
- Add delete confirmation modal with warning and input validation

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[email protected]>

Author: JavaDogWebDesign

app/assets/css/components/forms.css

@@ -760,6 +760,7 @@ html.dark-mode .radio-option:has(input[type="radio"]:checked) {
     margin-top: var(--spacing-xl);
     padding-top: var(--spacing-lg);
     border-top: 1px solid var(--border-color);
+    overflow: hidden; /* clearfix for floated button */
 }
 
 .danger-zone h4 {
@@ -771,6 +772,7 @@ html.dark-mode .radio-option:has(input[type="radio"]:checked) {
 
 .danger-zone .btn-danger {
     margin-top: var(--spacing-md);
+    float: right;
 }
 
 .btn-danger {

app/routes/settings.py

@@ -1,9 +1,11 @@
 """Settings routes for user preferences and configuration"""
+import os
+import shutil
 from flask import Blueprint, render_template, request, jsonify, session
 from werkzeug.security import generate_password_hash, check_password_hash
 from database import get_db_connection
 from utils.decorators import login_required
-from utils.config import VALID_CURRENCIES
+from utils.config import VALID_CURRENCIES, USER_DATA_BASE_FOLDER
 
 settings_bp = Blueprint('settings', __name__)
 
@@ -389,3 +391,55 @@ def update_naming_patterns():
         'renamed_count': renamed_count,
         'errors': errors if errors else None
     })
+
+
+@settings_bp.route('/settings/delete-account', methods=['POST'])
+@login_required
+def delete_account():
+    """Permanently delete user account and all associated data"""
+    data = request.get_json()
+    user_id = session['user_id']
+    auth_method = session.get('auth_method', 'local')
+
+    conn = get_db_connection()
+    user = conn.execute('SELECT * FROM users WHERE id = ?', (user_id,)).fetchone()
+
+    if not user:
+        conn.close()
+        return jsonify({'success': False, 'message': 'User not found'}), 404
+
+    # Verify confirmation based on auth method
+    if auth_method == 'oidc':
+        # OIDC users confirm by typing their username
+        confirmation = data.get('confirmation', '').strip()
+        if confirmation != user['username']:
+            conn.close()
+            return jsonify({'success': False, 'message': 'Username does not match'}), 400
+    else:
+        # Local auth users confirm with password
+        password = data.get('password')
+        if not password or not check_password_hash(user['password_hash'], password):
+            conn.close()
+            return jsonify({'success': False, 'message': 'Incorrect password'}), 400
+
+    try:
+        # 1. Delete user's file directory (receipts, benefit plans, etc.)
+        user_data_dir = os.path.join(USER_DATA_BASE_FOLDER, str(user_id))
+        if os.path.exists(user_data_dir):
+            shutil.rmtree(user_data_dir)
+
+        # 2. Delete user from database (cascades to all related tables)
+        conn.execute('DELETE FROM users WHERE id = ?', (user_id,))
+        conn.commit()
+        conn.close()
+
+        # 3. Clear session
+        session.clear()
+
+        return jsonify({'success': True, 'message': 'Account deleted successfully'})
+
+    except Exception as e:
+        print(f"Error deleting account: {e}")
+        conn.rollback()
+        conn.close()
+        return jsonify({'success': False, 'message': f'Failed to delete account: {str(e)}'}), 500

app/templates/settings.html

@@ -403,6 +403,19 @@ <h4>Change Password</h4>
                         </p>
                     </div>
                     {% endif %}
+
+                    <!-- Danger Zone Section -->
+                    <div class="danger-zone">
+                        <h4>Danger Zone</h4>
+                        <p class="help-text">Permanently delete your account and all associated data. This action cannot be undone.</p>
+                        <button type="button" class="btn btn-danger" onclick="openDeleteAccountModal()">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" style="margin-right: 6px;">
+                                <path d="M3 6H5H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                                <path d="M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6H19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                            </svg>
+                            Delete Account
+                        </button>
+                    </div>
                 </div>
             </div>
         </div>
@@ -451,6 +464,48 @@ <h2>Edit Family Member</h2>
     </div>
 </div>
 
+<!-- Delete Account Modal -->
+<div id="deleteAccountModal" class="modal">
+    <div class="modal-content modal-small">
+        <div class="modal-header modal-header-danger">
+            <h2>Delete Account</h2>
+            <span class="close" role="button" tabindex="0" aria-label="Close modal" onclick="closeDeleteAccountModal()">&times;</span>
+        </div>
+        <div class="modal-body">
+            <div class="delete-warning">
+                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" class="warning-icon">
+                    <path d="M12 9V13M12 17H12.01M10.29 3.86L1.82 18C1.64 18.3 1.55 18.64 1.55 19C1.55 19.36 1.64 19.7 1.82 20C2 20.3 2.26 20.56 2.56 20.74C2.86 20.92 3.21 21.01 3.56 21H20.44C20.79 21.01 21.14 20.92 21.44 20.74C21.74 20.56 22 20.3 22.18 20C22.36 19.7 22.45 19.36 22.45 19C22.45 18.64 22.36 18.3 22.18 18L13.71 3.86C13.53 3.56 13.27 3.32 12.97 3.15C12.67 2.98 12.34 2.89 12 2.89C11.66 2.89 11.33 2.98 11.03 3.15C10.73 3.32 10.47 3.56 10.29 3.86Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+                <p><strong>This action cannot be undone.</strong></p>
+            </div>
+            <p>This will permanently delete:</p>
+            <ul class="delete-list">
+                <li>Your account and profile</li>
+                <li>All expenses and transactions</li>
+                <li>All receipts and attachments</li>
+                <li>All plan year documents</li>
+                <li>HSA balance history</li>
+            </ul>
+
+            {% if not session.auth_method or session.auth_method == 'local' %}
+            <div class="form-group">
+                <label for="deleteAccountPassword">Enter your password to confirm:</label>
+                <input type="password" id="deleteAccountPassword" placeholder="Your password" required>
+            </div>
+            {% else %}
+            <div class="form-group">
+                <label for="deleteAccountConfirmation">Type <strong>{{ session.username }}</strong> to confirm:</label>
+                <input type="text" id="deleteAccountConfirmation" placeholder="{{ session.username }}" required autocomplete="off">
+            </div>
+            {% endif %}
+        </div>
+        <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" onclick="closeDeleteAccountModal()">Cancel</button>
+            <button type="button" class="btn btn-danger" onclick="confirmDeleteAccount()">Delete My Account</button>
+        </div>
+    </div>
+</div>
+
 <script>
 function handleFileSelect(event) {
     const file = event.target.files[0];
@@ -902,15 +957,83 @@ <h2>Edit Family Member</h2>
 window.addEventListener('click', function(event) {
     const providerModal = document.getElementById('editProviderModal');
     const familyMemberModal = document.getElementById('editFamilyMemberModal');
+    const deleteAccountModal = document.getElementById('deleteAccountModal');
 
     if (event.target === providerModal) {
         closeEditProviderModal();
     }
     if (event.target === familyMemberModal) {
         closeEditFamilyMemberModal();
     }
+    if (event.target === deleteAccountModal) {
+        closeDeleteAccountModal();
+    }
 });
 
+// Delete Account Modal Functions
+function openDeleteAccountModal() {
+    openModal(document.getElementById('deleteAccountModal'));
+}
+
+function closeDeleteAccountModal() {
+    document.getElementById('deleteAccountModal').style.display = 'none';
+    // Clear inputs
+    const passwordInput = document.getElementById('deleteAccountPassword');
+    const confirmInput = document.getElementById('deleteAccountConfirmation');
+    if (passwordInput) passwordInput.value = '';
+    if (confirmInput) confirmInput.value = '';
+}
+
+function confirmDeleteAccount() {
+    const passwordInput = document.getElementById('deleteAccountPassword');
+    const confirmInput = document.getElementById('deleteAccountConfirmation');
+
+    let payload = {};
+    if (passwordInput) {
+        if (!passwordInput.value) {
+            showAlert('Please enter your password', 'error');
+            return;
+        }
+        payload.password = passwordInput.value;
+    } else if (confirmInput) {
+        if (!confirmInput.value) {
+            showAlert('Please type your username to confirm', 'error');
+            return;
+        }
+        payload.confirmation = confirmInput.value;
+    }
+
+    fetch('/settings/delete-account', addCSRFToken({
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(payload)
+    }))
+    .then(async response => {
+        const text = await response.text();
+        try {
+            const data = JSON.parse(text);
+            return { ok: response.ok, data };
+        } catch (e) {
+            console.error('Invalid JSON response:', text);
+            throw new Error('Server error: ' + text.substring(0, 100));
+        }
+    })
+    .then(result => {
+        if (result.ok && result.data.success) {
+            // Redirect to login page
+            window.location.href = '/login';
+        } else {
+            showAlert(result.data.message || 'Failed to delete account', 'error');
+        }
+    })
+    .catch(error => {
+        console.error('Error:', error);
+        showAlert(error.message || 'An error occurred. Please try again.', 'error');
+    });
+}
+
 // Keyboard navigation: Tab to first family member after profile button/dropdown
 document.addEventListener('DOMContentLoaded', function() {
     const profileBtn = document.getElementById('profileBtn');