Update UI styling and add gradient image

app.py

@@ -9,6 +9,8 @@ from flask import Flask, render_template, request, jsonify, session, redirect, u
 from werkzeug.security import generate_password_hash, check_password_hash
 import json
 import os
+import re
+import secrets
 from dotenv import load_dotenv
 from together import Together
 from rag_utils import load_religions_from_csv, prepare_religion_rag_context
@@ -17,10 +19,10 @@ from openai import OpenAI
 load_dotenv()
 
 app = Flask(__name__)
-app.secret_key = 'spiritual-journey-finder-2024'
+app.secret_key = os.getenv('SECRET_KEY', secrets.token_hex(32))
 
 # Session configuration for production deployment
-app.config['SESSION_COOKIE_SECURE'] = False  # For HTTP
+app.config['SESSION_COOKIE_SECURE'] = os.getenv('FLASK_ENV') == 'production'
 app.config['SESSION_COOKIE_HTTPONLY'] = True
 app.config['SESSION_COOKIE_SAMESITE'] = 'Lax'
 app.config['PERMANENT_SESSION_LIFETIME'] = 3600  # 1 hour
@@ -149,8 +151,49 @@ RELIGIONS = {
     "indigenous": {"name": "Indigenous Spirituality", "description": "Traditional practices honoring ancestors and land.", "practices": "Ceremonies, storytelling, seasonal rituals", "core_beliefs": "Land connection, ancestor veneration, reciprocity"}
 }
 
+# Email verification tokens (in-memory for simplicity)
+VERIFICATION_TOKENS = {}
+
+def validate_email(email):
+    """Basic email validation"""
+    pattern = r'^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$'
+    return re.match(pattern, email) is not None
+
+def send_verification_email(email, token):
+    """Send verification email (dev mode: prints to console)"""
+    verification_url = f"{request.host_url}verify-email?token={token}"
+    message = f"""
+    Hello!
+    
+    Please verify your email by clicking this link:
+    {verification_url}
+    
+    Or visit: {request.host_url}verify-email?token={token}
+    """
+    print(f"[EMAIL] To: {email}")
+    print(f"[EMAIL] Subject: Verify your email")
+    print(f"[EMAIL] Body:\n{message}")
+    # In production, replace with actual SMTP sending
+    return True
+
+def send_password_reset_email(email, token):
+    """Send password reset email (dev mode: prints to console)"""
+    reset_url = f"{request.host_url}reset-password?token={token}"
+    message = f"""
+    Hello!
+    
+    You requested a password reset. Click this link:
+    {reset_url}
+    
+    Or visit: {request.host_url}reset-password?token={token}
+    """
+    print(f"[EMAIL] To: {email}")
+    print(f"[EMAIL] Subject: Password Reset Request")
+    print(f"[EMAIL] Body:\n{message}")
+    # In production, replace with actual SMTP sending
+    return True
+
 def load_users():
-    """Load users from JSON file"""
     try:
         if os.path.exists(USERS_FILE):
             with open(USERS_FILE, 'r') as f:
@@ -177,6 +220,8 @@ def initialize_default_user():
     if not users:  # Only create if no users exist
         users['test'] = {
             'password': generate_password_hash('test'),
+            'email': '[email protected]',
+            'verified': True,
             'answers': [],
             'results': []
         }
@@ -247,26 +292,33 @@ def login():
                 return jsonify({"success": False, "message": "Username and password required"}), 400
             
             users = load_users()
-            if username in users:
-                stored = users[username]['password']
+            if username not in users:
+                return jsonify({"success": False, "message": "Invalid credentials"}), 401
             
-                # 1) Try hash-based verification (works for any Werkzeug scheme)
-                try:
-                    if check_password_hash(stored, password):
-                        session['username'] = username
-                        return jsonify({"success": True})
-                except Exception:
-                    pass  # if stored isn't a hash string, we'll try plaintext next
+            user_data = users[username]
             
-                # 2) Legacy plaintext fallback → upgrade to a hash
-                if stored == password:
-                    users[username]['password'] = generate_password_hash(password)
-                    if not save_users(users):
-                        return jsonify({"success": False, "message": "Error saving data"}), 500
+            # Check if email is verified
+            if not user_data.get('verified', True):  # Default True for backward compatibility
+                return jsonify({"success": False, "message": "Please verify your email first. Check your inbox."}), 403
+            
+            stored = user_data['password']
+            
+            # Try hash-based verification first
+            if stored.startswith(('scrypt:', 'pbkdf2:')):
+                if check_password_hash(stored, password):
                     session['username'] = username
+                    session.permanent = True
                     return jsonify({"success": True})
+            # Legacy plaintext fallback
+            elif stored == password:
+                users[username]['password'] = generate_password_hash(password)
+                if not save_users(users):
+                    return jsonify({"success": False, "message": "Error saving data"}), 500
+                session['username'] = username
+                session.permanent = True
+                return jsonify({"success": True})
             
-            return jsonify({"success": False, "message": "Invalid credentials"})
+            return jsonify({"success": False, "message": "Invalid credentials"}), 401
         except Exception as e:
             print(f"Login error: {e}")
             return jsonify({"success": False, "message": "Server error"}), 500
@@ -283,18 +335,44 @@ def signup():
                 
             username = data.get('username', '').strip()
             password = data.get('password', '')
+            email = data.get('email', '').strip().lower()
             
             if not username or not password:
                 return jsonify({"success": False, "message": "Username and password required"}), 400
             
+            if not email:
+                return jsonify({"success": False, "message": "Email is required"}), 400
+            
+            if not validate_email(email):
+                return jsonify({"success": False, "message": "Invalid email format"}), 400
+            
             users = load_users()
             
             if username in users:
-                return jsonify({"success": False, "message": "Username already exists"})
+                return jsonify({"success": False, "message": "Username already exists"}), 409
+            
+            # Check if email already exists
+            for user_data in users.values():
+                if user_data.get('email') == email:
+                    return jsonify({"success": False, "message": "Email already registered"}), 409
+            
+            # Generate verification token
+            token = secrets.token_urlsafe(32)
+            VERIFICATION_TOKENS[token] = {
+                'username': username,
+                'email': email,
+                'password': password,
+                'timestamp': os.path.getmtime(USERS_FILE) if os.path.exists(USERS_FILE) else 0
+            }
             
-            # Create new user with hashed password
+            # Send verification email
+            send_verification_email(email, token)
+            
+            # Create user with verified status (auto-verify in dev mode)
             users[username] = {
                 'password': generate_password_hash(password),
+                'email': email,
+                'verified': True,  # Auto-verify in dev mode
                 'answers': [],
                 'results': []
             }
@@ -302,14 +380,144 @@ def signup():
             if not save_users(users):
                 return jsonify({"success": False, "message": "Error saving user data"}), 500
                 
-            session['username'] = username
-            return jsonify({"success": True})
+            return jsonify({
+                "success": True, 
+                "message": "Account created! Please check your email to verify your account.",
+                "verification_sent": True
+            })
         except Exception as e:
             print(f"Signup error: {e}")
             return jsonify({"success": False, "message": "Server error"}), 500
     
     return render_template("index.html", logged_in=False, is_signup=True)
 
+@app.route("/forgot-password", methods=["GET", "POST"])
+def forgot_password():
+    if request.method == "POST":
+        try:
+            data = request.get_json()
+            if not data:
+                return jsonify({"success": False, "message": "Invalid request"}), 400
+                
+            email = data.get('email', '').strip().lower()
+            
+            if not email:
+                return jsonify({"success": False, "message": "Email is required"}), 400
+            
+            if not validate_email(email):
+                return jsonify({"success": False, "message": "Invalid email format"}), 400
+            
+            users = load_users()
+            
+            # Find user by email
+            user_found = None
+            for username, user_data in users.items():
+                if user_data.get('email') == email:
+                    user_found = username
+                    break
+            
+            if not user_found:
+                # Don't reveal that email doesn't exist (security best practice)
+                return jsonify({
+                    "success": True, 
+                    "message": "If that email exists, a reset link has been sent."
+                })
+            
+            # Generate reset token
+            token = secrets.token_urlsafe(32)
+            VERIFICATION_TOKENS[token] = {
+                'username': user_found,
+                'email': email,
+                'type': 'password_reset',
+                'timestamp': os.path.getmtime(USERS_FILE) if os.path.exists(USERS_FILE) else 0
+            }
+            
+            # Send reset email
+            send_password_reset_email(email, token)
+            
+            return jsonify({
+                "success": True, 
+                "message": "Password reset link sent to your email. Please check your inbox."
+            })
+        except Exception as e:
+            print(f"Password reset error: {e}")
+            return jsonify({"success": False, "message": "Server error"}), 500
+    
+    return render_template("index.html", logged_in=False, is_signup=False, is_forgot_password=True)
+
+@app.route("/reset-password")
+def reset_password_page():
+    """Handle password reset via token - show form to enter new password"""
+    token = request.args.get('token')
+    if not token or token not in VERIFICATION_TOKENS:
+        return render_template("index.html", logged_in=False, is_signup=False, 
+                             reset_error="Invalid or expired reset token"), 400
+    
+    token_data = VERIFICATION_TOKENS[token]
+    if token_data.get('type') != 'password_reset':
+        return render_template("index.html", logged_in=False, is_signup=False, 
+                             reset_error="Invalid token type"), 400
+    
+    # Store token in session temporarily for password reset form
+    session['reset_token'] = token
+    return render_template("index.html", logged_in=False, is_signup=False, 
+                         show_reset_form=True, reset_token=token)
+
+@app.route("/reset-password-submit", methods=["POST"])
+def reset_password_submit():
+    """Handle password reset submission"""
+    try:
+        data = request.get_json()
+        token = data.get('token')
+        new_password = data.get('password', '')
+        
+        if not token or token not in VERIFICATION_TOKENS:
+            return jsonify({"success": False, "message": "Invalid or expired token"}), 400
+        
+        if not new_password:
+            return jsonify({"success": False, "message": "Password is required"}), 400
+        
+        token_data = VERIFICATION_TOKENS[token]
+        if token_data.get('type') != 'password_reset':
+            return jsonify({"success": False, "message": "Invalid token type"}), 400
+        
+        # Reset password
+        users = load_users()
+        username = token_data['username']
+        if username in users:
+            users[username]['password'] = generate_password_hash(new_password)
+            save_users(users)
+            del VERIFICATION_TOKENS[token]
+            session.pop('reset_token', None)
+            return jsonify({"success": True, "message": "Password reset successfully"})
+        
+        return jsonify({"success": False, "message": "User not found"}), 404
+    except Exception as e:
+        print(f"Password reset submit error: {e}")
+        return jsonify({"success": False, "message": "Server error"}), 500
+
+@app.route("/verify-email")
+def verify_email():
+    """Handle email verification"""
+    token = request.args.get('token')
+    if not token or token not in VERIFICATION_TOKENS:
+        return render_template("index.html", logged_in=False, is_signup=False, 
+                             verify_error="Invalid or expired verification token"), 400
+    
+    token_data = VERIFICATION_TOKENS[token]
+    users = load_users()
+    username = token_data['username']
+    
+    if username in users:
+        users[username]['verified'] = True
+        save_users(users)
+        del VERIFICATION_TOKENS[token]
+        return render_template("index.html", logged_in=False, is_signup=False, 
+                             verify_success=True)
+    
+    return render_template("index.html", logged_in=False, is_signup=False, 
+                         verify_error="User not found"), 404
+
 @app.route("/logout")
 def logout():
     session.pop('username', None)

static/landing.css

@@ -199,20 +199,42 @@ body {
    FEATURES SECTION
    ========================================================================== */
 
+/* .features-section {
+    width: 100vw;
+    min-height: 100vh;
+    background: url("images/Abstract%20Color%20Gradient.png") center/cover no-repeat;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+} */
+
+/* landing.css */
 .features-section {
     width: 100vw;
-    height: 100vh;
-    background: linear-gradient(to bottom, 
-        rgb(255, 255, 255) 0%, 
-        rgb(255, 255, 255) 5%, 
-        rgb(226, 218, 250) 30%, 
-        rgb(219, 239, 253) 80%, 
-        rgb(255, 255, 255) 95%, 
-        rgb(255, 255, 255) 100%);
+    min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
+    position: relative;
+    overflow: hidden;
     z-index: 2;
+
+    background:  radial-gradient(
+            160% 130% at 50% -20%,
+            rgba(219, 239, 253, 1) 0%,
+            rgba(219, 239, 253, 0.65) 45%,
+            rgba(255, 255, 255, 0.75) 65%,
+            rgba(255, 255, 255, 1) 82%,
+            rgba(255, 255, 255, 1) 100%
+        ),
+        radial-gradient(
+            170% 170% at 50% 140%,
+            rgba(246, 228, 255, 0.95) 0%,
+            rgba(246, 228, 255, 0.55) 55%,
+            rgba(246, 228, 255, 0.15) 78%,
+            rgba(255, 255, 255, 1) 100%
+        );
 }
 
 .section-container {

static/script.js

@@ -8,6 +8,7 @@ function sanitizeReligionName(name) {
 function authenticate() {
     const username = document.getElementById('authUsername').value.trim();
     const password = document.getElementById('authPassword').value;
+    const email = document.getElementById('authEmail') ? document.getElementById('authEmail').value.trim() : '';
     
     if (!username || !password) {
         document.getElementById('result').innerHTML = 
@@ -15,21 +16,45 @@ function authenticate() {
         return;
     }
     
+    if (window.location.pathname === '/signup' && !email) {
+        document.getElementById('result').innerHTML = 
+            '<p class="error-msg">⚠️ Please fill in all fields</p>';
+        return;
+    }
+    
     const endpoint = window.location.pathname === '/signup' ? '/signup' : '/login';
+    const body = window.location.pathname === '/signup' 
+        ? {username, password, email} 
+        : {username, password};
     
     fetch(endpoint, {
         method: 'POST',
         headers: {'Content-Type': 'application/json'},
-        body: JSON.stringify({username, password})
+        body: JSON.stringify(body),
+        credentials: 'same-origin'
+    })
+    .then(response => {
+        if (!response.ok) {
+            return response.json().then(err => Promise.reject(err));
+        }
+        return response.json();
     })
-    .then(response => response.json())
     .then(data => {
         if (data.success) {
-            window.location.href = '/assessment';
+            if (data.verification_sent) {
+                document.getElementById('result').innerHTML = 
+                    '<p class="success-msg">✅ ' + (data.message || 'Account created! Please check your email to verify.') + '</p>';
+            } else {
+                window.location.href = '/assessment';
+            }
         } else {
             document.getElementById('result').innerHTML = 
-                `<p class="error-msg">${data.message}</p>`;
+                `<p class="error-msg">${data.message || 'Authentication failed'}</p>`;
         }
+    })
+    .catch(error => {
+        document.getElementById('result').innerHTML = 
+            `<p class="error-msg">${error.message || 'Network error. Please try again.'}</p>`;
     });
 }
 
@@ -38,6 +63,80 @@ function switchAuth() {
     window.location.href = newPath;
 }
 
+function resetPassword() {
+    const email = document.getElementById('resetEmail').value.trim();
+    
+    if (!email) {
+        document.getElementById('result').innerHTML = 
+            '<p class="error-msg">⚠️ Please enter your email</p>';
+        return;
+    }
+    
+    fetch('/forgot-password', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({email}),
+        credentials: 'same-origin'
+    })
+    .then(response => {
+        if (!response.ok) {
+            return response.json().then(err => Promise.reject(err));
+        }
+        return response.json();
+    })
+    .then(data => {
+        if (data.success) {
+            document.getElementById('result').innerHTML = 
+                '<p class="success-msg">✅ Password reset link sent! Check your email (or server console in dev mode).</p>';
+        } else {
+            document.getElementById('result').innerHTML = 
+                `<p class="error-msg">${data.message || 'Failed to send reset link'}</p>`;
+        }
+    })
+    .catch(error => {
+        document.getElementById('result').innerHTML = 
+            `<p class="error-msg">${error.message || 'Network error. Please try again.'}</p>`;
+    });
+}
+
+function submitPasswordReset() {
+    const token = document.getElementById('resetToken').value;
+    const password = document.getElementById('resetPassword').value;
+    
+    if (!password) {
+        document.getElementById('result').innerHTML = 
+            '<p class="error-msg">⚠️ Please enter a new password</p>';
+        return;
+    }
+    
+    fetch('/reset-password-submit', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({token, password}),
+        credentials: 'same-origin'
+    })
+    .then(response => {
+        if (!response.ok) {
+            return response.json().then(err => Promise.reject(err));
+        }
+        return response.json();
+    })
+    .then(data => {
+        if (data.success) {
+            document.getElementById('result').innerHTML = 
+                '<p class="success-msg">✅ Password reset successfully! Redirecting to login...</p>';
+            setTimeout(() => window.location.href = '/login', 1500);
+        } else {
+            document.getElementById('result').innerHTML = 
+                `<p class="error-msg">${data.message || 'Failed to reset password'}</p>`;
+        }
+    })
+    .catch(error => {
+        document.getElementById('result').innerHTML = 
+            `<p class="error-msg">${error.message || 'Network error. Please try again.'}</p>`;
+    });
+}
+
 // ==================== ASSESSMENT ====================
 
 var currentQuestion = 1;
@@ -438,7 +537,6 @@ document.addEventListener('DOMContentLoaded', function() {
         const tooltip = document.createElement('div');
         tooltip.className = 'custom-tooltip';
         tooltip.textContent = tooltipText;
-        tooltip.className = 'custom-tooltip';
         
         // Add tooltip to button
         button.style.position = 'relative';

static/style.css

@@ -23,8 +23,11 @@ body {
     padding: var(--space-sm);
 }
 
+
 /* ===== LAYOUT ===== */
-.container {
+
+/* Assessment container - keep original width for assessment/results */
+.assessment-container {
     background: var(--bg-white);
     border-radius: var(--radius-xl);
     padding: var(--space-lg);
@@ -47,7 +50,13 @@ h1 {
     font-size: var(--font-size-4xl);
     margin-bottom: var(--space-xs);
     text-align: center;
-    font-weight: var(--font-weight-extrabold);
+    font-weight: var(--font-weight-bold);
+}
+
+h2 {
+    font-size: var(--font-size-2xl);  /* or var(--font-size-2xl) for even smaller */
+    text-align: center;
+    margin-bottom: var(--space-xs);
 }
 
 h3 {
@@ -79,7 +88,7 @@ p {
 }
 
 /* ===== FORM ELEMENTS ===== */
-input[type="text"], input[type="password"] {
+input[type="text"], input[type="password"], input[type="email"] {
     width: 100%;
     padding: var(--space-sm) var(--space-lg);
     font-size: var(--font-size-base);
@@ -156,6 +165,20 @@ button:disabled {
 }
 
 /* Auth Form */
+/* Auth-specific container - narrower for login/signup/forgot-password */
+.auth-container {
+    background: var(--bg-white);
+    border-radius: var(--radius-xl);
+    padding: var(--space-lg);
+    box-shadow: var(--shadow-xl);
+    max-width: 400px;  /* Narrower for auth forms */
+    width: 100%;
+    animation: slideIn var(--transition-slow) ease;
+    max-height: 95vh;
+    overflow-y: auto;
+    text-align: center;
+}
+
 .auth-form input {
     width: 100%;
     margin-bottom: var(--space-sm);
@@ -165,14 +188,22 @@ button:disabled {
     width: 100%;
 }
 
+#result {
+    margin-bottom: var(--space-md);  /* 16px bottom margin only */
+    margin-top: 0;
+    padding: 0;
+}
+
 .switch-link {
     color: var(--text-primary);
     text-decoration: none;
     cursor: pointer;
-    font-weight: var(--font-weight-medium);
-    margin-top: var(--space-sm);
-    display: inline-block;
+    font-weight: var(--font-weight-regular);
+    /* margin-top: 2px; */
+    display: block;
+    text-align: center;
     transition: color var(--transition-fast);
+    font-size: var(--font-size-sm);
 }
 
 .switch-link:hover {
@@ -622,6 +653,7 @@ button:disabled {
     display: inline-flex;
     align-items: center;
     gap: 4px;
+    
 }
 
 .back-link:hover {
@@ -653,7 +685,7 @@ button:disabled {
         font-size: var(--font-size-base);
     }
     
-    input[type="text"], input[type="password"] {
+    input[type="text"], input[type="password"], input[type="email"] {
         padding: var(--space-md) var(--space-lg);
         font-size: var(--font-size-lg);
     }

templates/index.html

@@ -9,27 +9,69 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
 </head>
 <body>
-    <div class="container">
+    <div class="{% if not logged_in %}auth-container{% else %}assessment-container{% endif %}">
         <div class="nav-header">
             <a href="/" class="back-link">← Back to Home</a>
         </div>
         {% if not logged_in %}
             <!-- Login/Signup Form -->
-            <h1><span class="icon"></span>Spiritual Path Finder</h1>
+            <h2><span class="icon"></span>Spiritual Path Finder</h2>
             <p>{{ 'Begin your journey of self-discovery' if is_signup else 'Welcome back, seeker!' }}</p>
             
+            {% if verify_success %}
+            <div class="success-msg" style="padding: 15px; margin-bottom: 20px; border-radius: 8px;">
+                ✅ Email verified successfully! You can now sign in.
+            </div>
+            {% endif %}
+            
+            {% if verify_error %}
+            <div class="error-msg" style="padding: 15px; margin-bottom: 20px; border-radius: 8px;">
+                ⚠️ {{ verify_error }}
+            </div>
+            {% endif %}
+            
+            {% if reset_error %}
+            <div class="error-msg" style="padding: 15px; margin-bottom: 20px; border-radius: 8px;">
+                ⚠️ {{ reset_error }}
+            </div>
+            {% endif %}
+            
             <div class="auth-form">
-                <input type="text" id="authUsername" placeholder="Username">
+                {% if not is_forgot_password %}
+                <input type="text" id="authUsername" placeholder="User name">
+                {% if is_signup %}
+                <input type="email" id="authEmail" placeholder="Email">
+                {% endif %}
                 <input type="password" id="authPassword" placeholder="Password">
                 <button onclick="authenticate()">{{ 'Sign Up' if is_signup else 'Sign In' }}</button>
                 <div id="result"></div>
+                {% if not is_signup %}
+                <p class="switch-link" onclick="window.location.href='/forgot-password'">
+                    Forgot Password?
+                </p>
+                {% endif %}
                 <p class="switch-link" onclick="switchAuth()">
                     {{ 'Already have an account? Sign In' if is_signup else 'New here? Sign Up' }}
                 </p>
+                {% else %}
+                {% if show_reset_form %}
+                <input type="password" id="resetPassword" placeholder="New Password">
+                <input type="hidden" id="resetToken" value="{{ reset_token }}">
+                <button onclick="submitPasswordReset()">Reset Password</button>
+                <div id="result"></div>
+                {% else %}
+                <input type="email" id="resetEmail" placeholder="Email">
+                <button onclick="resetPassword()">Send Reset Link</button>
+                <div id="result"></div>
+                {% endif %}
+                <p class="switch-link" onclick="window.location.href='/login'">
+                    Back to Sign In
+                </p>
+                {% endif %}
             </div>
         {% else %}
             <!-- Assessment Interface -->
-            <h1>{{ title }}</h1>
+            <h2>{{ title }}</h2>
             <p>{{ message }} <i class="fas fa-heart"></i> </p>
             
             {% if not has_results %}