feat: implement complete password recovery flow with OTP verification and transactional email templates.

.env.example

@@ -19,7 +19,7 @@ SECRET_KEY=CHANGE_ME_IN_PRODUCTION_USE_COMMAND_ABOVE
 # DATABASE - NEON POSTGRESQL (REQUIRED)
 # ════════════════════════════════════════════════════════════════════════════
 # Your connection string from Neon
-DATABASE_URL=Get from Neon dashboard - format: postgresql://username:password@host:port/database
+DATABASE_URL=postgresql://<username>:<password>@<host>/<database>?sslmode=require
 # ════════════════════════════════════════════════════════════════════════════
 # FILE UPLOADS & STORAGE
 # ════════════════════════════════════════════════════════════════════════════
@@ -36,6 +36,27 @@ ICH_FOLD_SELECTION=ensemble
 ICH_HF_MODEL_REPO=HarshCode/eff_b4_brain
 ICH_HF_TOKEN=
 
+# ════════════════════════════════════════════════════════════════════════════
+# SMTP / EMAIL (REQUIRED FOR OTP + PASSWORD RESET EMAILS)
+# ════════════════════════════════════════════════════════════════════════════
+SMTP_HOST=smtp.your-provider.com
+SMTP_PORT=587
+SMTP_USER=your-email@domain.com
+SMTP_PASSWORD=CHANGE_ME
+SMTP_FROM=no-reply@your-domain.com
+SMTP_USE_TLS=true
+
+# Optional aliases also supported by code (Brevo-style):
+# EMAIL_HOST, EMAIL_PORT, EMAIL_HOST_USER, EMAIL_HOST_PASSWORD, EMAIL_FROM, EMAIL_USE_TLS
+
+# Public base URL used in email links when app is behind proxy/load balancer.
+# Example local:  ICH_PUBLIC_BASE_URL=http://127.0.0.1:7860
+# Example prod:   ICH_PUBLIC_BASE_URL=https://your-domain.com
+ICH_PUBLIC_BASE_URL=
+
+# Optional local debugging for auth emails (prints OTP/reset link to server logs)
+ICH_DEBUG_AUTH_EMAILS=false
+
 # ════════════════════════════════════════════════════════════════════════════
 # LOGGING & MONITORING
 # ════════════════════════════════════════════════════════════════════════════

app_new.py

@@ -70,6 +70,7 @@ from flask import (
     send_from_directory, url_for
 )
 from werkzeug.utils import secure_filename
+from werkzeug.middleware.proxy_fix import ProxyFix
 from flask_login import current_user, login_required
 
 # Import new security and auth modules
@@ -126,6 +127,7 @@ LOCAL_MODE = _env_bool("ICH_LOCAL_MODE", True)
 # ══════════════════════════════════════════════════════════════════════════
 
 app = Flask(__name__, template_folder="templates", static_folder="static")
+app.wsgi_app = ProxyFix(app.wsgi_app, x_for=1, x_proto=1, x_host=1, x_port=1)
 
 # Configuration
 app.config.update(

auth_routes.py

@@ -1,17 +1,249 @@
-"""
-Authentication routes: login, register, logout
-"""
+"""Authentication routes: login, register, logout, password reset and OTP verification."""
+import hashlib
 import logging
-from flask import Blueprint, render_template, request, redirect, url_for, flash, jsonify
-from flask_login import login_user, logout_user, current_user
-from models import db, User
-from auth_utils import (
-    validate_username, validate_password, validate_email, log_audit
+import os
+import secrets
+import smtplib
+from datetime import datetime, timedelta
+from email.message import EmailMessage
+from urllib.parse import urljoin
+
+from flask import (
+    Blueprint,
+    current_app,
+    flash,
+    jsonify,
+    redirect,
+    render_template,
+    request,
+    session,
+    url_for,
 )
+from flask_login import current_user, login_required, login_user, logout_user
+from itsdangerous import BadSignature, SignatureExpired, URLSafeTimedSerializer
+from sqlalchemy import func, or_
+
+from auth_utils import log_audit, validate_email, validate_password, validate_username
+from models import User, db
 
 logger = logging.getLogger(__name__)
 auth_bp = Blueprint('auth', __name__, url_prefix='/auth')
 
+OTP_SESSION_KEY = "pending_otp"
+
+
+def _parse_bool(raw: str | None, default: bool = False) -> bool:
+    if raw is None:
+        return default
+    return raw.strip().lower() in {"1", "true", "yes", "on"}
+
+
+def _auth_email_debug_enabled() -> bool:
+    return _parse_bool(os.environ.get("ICH_DEBUG_AUTH_EMAILS"), False)
+
+
+def _hash_otp(code: str) -> str:
+    return hashlib.sha256(code.encode("utf-8")).hexdigest()
+
+
+def _generate_otp() -> str:
+    return f"{secrets.randbelow(1_000_000):06d}"
+
+
+def _otp_payload_from_session() -> dict:
+    payload = session.get(OTP_SESSION_KEY)
+    return payload if isinstance(payload, dict) else {}
+
+
+def _store_otp(email: str, purpose: str, user_id: int | None = None) -> str:
+    code = _generate_otp()
+    expires_at = datetime.utcnow() + timedelta(minutes=10)
+    session[OTP_SESSION_KEY] = {
+        "email": email,
+        "purpose": purpose,
+        "user_id": user_id,
+        "otp_hash": _hash_otp(code),
+        "expires_at": expires_at.isoformat(),
+        "attempts": 0,
+    }
+    session.modified = True
+    return code
+
+
+def _clear_otp() -> None:
+    session.pop(OTP_SESSION_KEY, None)
+    session.modified = True
+
+
+def _extract_otp_from_form() -> str:
+    direct = request.form.get("otp", "").strip()
+    if direct:
+        return direct
+    digits = [request.form.get(f"d{i}", "").strip() for i in range(1, 7)]
+    return "".join(digits)
+
+
+def _validate_otp(submitted_code: str, expected_purpose: str) -> tuple[bool, str, dict | None]:
+    payload = _otp_payload_from_session()
+    if not payload:
+        return False, "OTP session is missing or expired. Please request a new code.", None
+
+    if payload.get("purpose") != expected_purpose:
+        return False, "OTP purpose mismatch. Please request a new code.", None
+
+    expires_raw = payload.get("expires_at")
+    try:
+        expires_at = datetime.fromisoformat(expires_raw)
+    except Exception:
+        _clear_otp()
+        return False, "OTP is invalid. Please request a new code.", None
+
+    if datetime.utcnow() > expires_at:
+        _clear_otp()
+        return False, "OTP expired. Please request a new code.", None
+
+    attempts = int(payload.get("attempts", 0))
+    if attempts >= 5:
+        _clear_otp()
+        return False, "Too many failed attempts. Please request a new code.", None
+
+    if _hash_otp(submitted_code) != payload.get("otp_hash"):
+        payload["attempts"] = attempts + 1
+        session[OTP_SESSION_KEY] = payload
+        session.modified = True
+        return False, "Invalid OTP code.", None
+
+    return True, "", payload
+
+
+def _otp_email_content(code: str, purpose: str) -> tuple[str, str]:
+    """Return (plain_text, html) for OTP emails."""
+    if purpose == "verify_email":
+        title = "Verify your ICH Screening account"
+        body_line = (
+            "Welcome to ICH Screening. You're one step away from accessing our platform.\n"
+            "Enter the verification code below to confirm your email address and activate your account."
+        )
+    else:
+        title = "Your ICH Screening verification code"
+        body_line = (
+            "A verification code was requested for your ICH Screening account.\n"
+            "Enter the code below to continue. If this wasn't you, your account remains secure."
+        )
+
+    plain = (
+        f"{title}\n"
+        f"{'=' * len(title)}\n\n"
+        f"Hi there,\n\n"
+        f"{body_line}\n\n"
+        f"  Verification Code: {code}\n"
+        f"  Valid for: 10 minutes\n\n"
+        "Security reminder: ICH Screening will never ask you to share this code "
+        "over the phone, email, or chat. If anyone requests it, treat it as a phishing attempt.\n\n"
+        "Didn't sign up? Simply ignore this email — your account will remain inactive "
+        "unless this code is entered.\n"
+    )
+
+    try:
+        from flask import render_template
+        html = render_template(
+            "email/otp_email.html",
+            title=title,
+            otp_code=code,
+            purpose=purpose,
+            recipient_name=None,
+            current_year=datetime.utcnow().year,
+        )
+    except Exception as exc:
+        logger.warning("Could not render OTP HTML email template: %s", exc)
+        html = None
+
+    return plain, html
+
+
+def _password_reset_email_content(reset_link: str) -> tuple[str, str]:
+    """Return (plain_text, html) for password-reset emails."""
+    _reset_title = "ICH Screening — Password Reset"
+    plain = (
+        f"{_reset_title}\n"
+        f"{'─' * len(_reset_title)}\n\n"
+        "Hi there,\n\n"
+        "We received a request to reset the password for your ICH Screening account.\n"
+        "Use the link below to choose a new password — it only takes a moment.\n\n"
+        f"  Reset link: {reset_link}\n\n"
+        "This link is single-use and expires in 30 minutes.\n\n"
+        "Didn't request this? You can ignore this email — your password has not been\n"
+        "changed and your account remains intact.\n"
+    )
+
+    try:
+        from flask import render_template
+        html = render_template(
+            "email/password_reset_email.html",
+            reset_link=reset_link,
+            recipient_name=None,
+            current_year=datetime.utcnow().year,
+        )
+    except Exception as exc:
+        logger.warning("Could not render password-reset HTML email template: %s", exc)
+        html = None
+
+    return plain, html
+
+
+def _send_email(to_email: str, subject: str, body: str, html_body: str | None = None) -> bool:
+    """Send a (optionally multipart HTML + plain-text) email via SMTP."""
+    smtp_host = os.environ.get("SMTP_HOST", os.environ.get("EMAIL_HOST", "")).strip()
+    smtp_user = os.environ.get("SMTP_USER", os.environ.get("EMAIL_HOST_USER", "")).strip()
+    smtp_pass = os.environ.get("SMTP_PASSWORD", os.environ.get("EMAIL_HOST_PASSWORD", "")).strip()
+    smtp_from = os.environ.get("SMTP_FROM", os.environ.get("EMAIL_FROM", smtp_user)).strip()
+    port_raw = os.environ.get("SMTP_PORT", os.environ.get("EMAIL_PORT", "587"))
+    smtp_port = int(port_raw)
+    use_tls = _parse_bool(os.environ.get("SMTP_USE_TLS", os.environ.get("EMAIL_USE_TLS")), True)
+
+    if not smtp_host or not smtp_from:
+        logger.error(
+            "SMTP not configured: set SMTP_HOST/SMTP_FROM or EMAIL_HOST/EMAIL_FROM (and credentials if required)."
+        )
+        return False
+
+    msg = EmailMessage()
+    msg["Subject"] = subject
+    msg["From"] = smtp_from
+    msg["To"] = to_email
+    # Plain-text part (always present as fallback for non-HTML clients)
+    msg.set_content(body)
+    # HTML alternative part (preferred by modern email clients when present)
+    if html_body:
+        msg.add_alternative(html_body, subtype="html")
+
+    try:
+        with smtplib.SMTP(smtp_host, smtp_port, timeout=20) as server:
+            server.ehlo()
+            if use_tls:
+                server.starttls()
+                server.ehlo()
+            if smtp_user and smtp_pass:
+                server.login(smtp_user, smtp_pass)
+            server.send_message(msg)
+        return True
+    except Exception as exc:
+        logger.error("Failed to send email to %s: %s", to_email, exc)
+        return False
+
+
+def _token_serializer() -> URLSafeTimedSerializer:
+    return URLSafeTimedSerializer(current_app.config["SECRET_KEY"], salt="ich-password-reset")
+
+
+def _build_external_link(endpoint: str, **values: object) -> str:
+    """Build externally reachable link, preferring explicit public base URL when configured."""
+    public_base_url = os.environ.get("ICH_PUBLIC_BASE_URL", "").strip()
+    if public_base_url:
+        relative_path = url_for(endpoint, _external=False, **values)
+        return urljoin(public_base_url.rstrip("/") + "/", relative_path.lstrip("/"))
+    return url_for(endpoint, _external=True, **values)
+
 
 @auth_bp.route('/register', methods=['GET', 'POST'])
 def register():
@@ -60,17 +292,32 @@ def register():
             user = User(
                 username=username,
                 email=email,
-                full_name=full_name
+                full_name=full_name,
+                is_active=False,
             )
             user.set_password(password)
             
             db.session.add(user)
             db.session.commit()
             
+            otp_code = _store_otp(email=user.email, purpose="verify_email", user_id=user.id)
+            _plain, _html = _otp_email_content(otp_code, "verify_email")
+            sent = _send_email(
+                user.email,
+                "Your ICH Screening verification code",
+                _plain,
+                html_body=_html,
+            )
+            if _auth_email_debug_enabled():
+                logger.info("DEV OTP for %s: %s", user.email, otp_code)
+
             log_audit('user_registered', user_id=user.id, status='success')
-            
-            flash('Registration successful! Please log in.', 'success')
-            return redirect(url_for('auth.login'))
+            if sent:
+                flash('Registration successful. We sent a verification code to your email.', 'success')
+            else:
+                flash('Registration successful, but email delivery failed. Configure SMTP and resend OTP.', 'warning')
+
+            return redirect(url_for('auth.verify_otp', purpose='verify_email', email=user.email))
         
         except Exception as e:
             db.session.rollback()
@@ -89,25 +336,44 @@ def login():
         return redirect(url_for('home'))
     
     if request.method == 'POST':
-        username = request.form.get('username', '').strip()
+        identifier = request.form.get('identifier', request.form.get('username', '')).strip()
+        normalized_identifier = identifier.lower()
         password = request.form.get('password', '')
-        remember = request.form.get('remember', False)
-        
-        user = User.query.filter_by(username=username).first()
+        remember = bool(request.form.get('remember', False))
+
+        user = User.query.filter(
+            or_(
+                func.lower(User.username) == normalized_identifier,
+                func.lower(User.email) == normalized_identifier,
+            )
+        ).first()
         
         if not user:
-            logger.warning(f"Login attempt with non-existent username: {username}")
-            log_audit('login_failed', status='failure', details=f'User not found: {username}')
+            logger.warning("Login attempt with non-existent identifier: %s", identifier)
+            log_audit('login_failed', status='failure', details=f'User not found: {identifier}')
             flash('Invalid username or password', 'error')
             return render_template('auth/login.html'), 401
         
         if not user.is_active:
-            log_audit('login_failed', user_id=user.id, status='failure', details='Account inactive')
-            flash('Your account has been deactivated', 'error')
-            return render_template('auth/login.html'), 403
+            otp_code = _store_otp(email=user.email, purpose="verify_email", user_id=user.id)
+            _plain, _html = _otp_email_content(otp_code, "verify_email")
+            sent = _send_email(
+                user.email,
+                "Your ICH Screening verification code",
+                _plain,
+                html_body=_html,
+            )
+            if _auth_email_debug_enabled():
+                logger.info("DEV OTP resend/login for %s: %s", user.email, otp_code)
+            log_audit('login_failed', user_id=user.id, status='failure', details='Email not verified')
+            if sent:
+                flash('Please verify your email. A fresh OTP code was sent.', 'info')
+            else:
+                flash('Please verify your email. OTP generation worked but SMTP is not configured.', 'warning')
+            return redirect(url_for('auth.verify_otp', purpose='verify_email', email=user.email))
         
         if not user.check_password(password):
-            logger.warning(f"Failed login attempt for user: {username}")
+            logger.warning("Failed login attempt for identifier: %s", identifier)
             log_audit('login_failed', user_id=user.id, status='failure', details='Invalid password')
             flash('Invalid username or password', 'error')
             return render_template('auth/login.html'), 401
@@ -141,22 +407,147 @@ def logout():
 
 @auth_bp.route('/forgot-password', methods=['GET', 'POST'])
 def forgot_password():
-    """Forgot password — shows a polished form; no email is sent (SMTP not configured)."""
+    """Forgot password route: issue signed reset link and send email."""
     if current_user.is_authenticated:
         return redirect(url_for('home'))
 
     if request.method == 'POST':
         email = request.form.get('email', '').strip().lower()
-        # We always return the same response to prevent user enumeration.
-        logger.info(f"Password reset requested for email: {email}")
-        log_audit('password_reset_requested', status='info', details=f'Email: {email}')
-        # Redirect with ?sent=1 so the template can show the success state
+        user = User.query.filter_by(email=email).first()
+
+        if user:
+            token = _token_serializer().dumps({"email": user.email, "purpose": "reset_password"})
+            reset_link = _build_external_link('auth.reset_password', token=token)
+            _plain, _html = _password_reset_email_content(reset_link)
+            sent = _send_email(
+                user.email,
+                'Reset your ICH Screening password',
+                _plain,
+                html_body=_html,
+            )
+            if _auth_email_debug_enabled():
+                logger.info("DEV reset link for %s: %s", user.email, reset_link)
+            log_audit(
+                'password_reset_requested',
+                user_id=user.id,
+                status='success' if sent else 'failure',
+                details='Reset email sent' if sent else 'SMTP failed',
+            )
+        else:
+            log_audit('password_reset_requested', status='info', details=f'Unknown email: {email}')
+            flash('No account exists with this email address.', 'error')
+            return render_template('auth/forgot_password.html'), 404
+
         return redirect(url_for('auth.forgot_password') + '?sent=1')
 
     return render_template('auth/forgot_password.html')
 
 
+@auth_bp.route('/verify-otp', methods=['GET', 'POST'])
+def verify_otp():
+    """Verify one-time password for account email verification."""
+    purpose = request.args.get('purpose', 'verify_email')
+    payload = _otp_payload_from_session()
+    email = payload.get('email') or request.args.get('email', '')
+
+    if request.method == 'POST':
+        submitted = _extract_otp_from_form()
+        if len(submitted) != 6 or not submitted.isdigit():
+            flash('Please enter the 6-digit OTP code.', 'error')
+            return render_template('auth/verify_otp.html', email=email, purpose=purpose), 400
+
+        ok, msg, verified_payload = _validate_otp(submitted, purpose)
+        if not ok:
+            flash(msg, 'error')
+            return render_template('auth/verify_otp.html', email=email, purpose=purpose), 400
+
+        user_id = verified_payload.get("user_id") if verified_payload else None
+        user = User.query.get(int(user_id)) if user_id else None
+        if not user:
+            _clear_otp()
+            flash('Verification session is invalid. Please register again.', 'error')
+            return redirect(url_for('auth.register'))
+
+        user.is_active = True
+        db.session.commit()
+        _clear_otp()
+        log_audit('email_verified', user_id=user.id, status='success')
+        flash('Email verified. You can now sign in.', 'success')
+        return redirect(url_for('auth.login'))
+
+    return render_template('auth/verify_otp.html', email=email, purpose=purpose)
+
+
+@auth_bp.route('/resend-otp', methods=['POST'])
+def resend_otp():
+    """Resend OTP for the current verification session."""
+    payload = _otp_payload_from_session()
+    if not payload:
+        flash('No active OTP session. Please register again.', 'error')
+        return redirect(url_for('auth.register'))
+
+    email = payload.get("email", "")
+    purpose = payload.get("purpose", "verify_email")
+    user_id = payload.get("user_id")
+    new_code = _store_otp(email=email, purpose=purpose, user_id=user_id)
+    _plain, _html = _otp_email_content(new_code, purpose)
+    sent = _send_email(email, "Your ICH Screening verification code", _plain, html_body=_html)
+    if _auth_email_debug_enabled():
+        logger.info("DEV OTP resend for %s: %s", email, new_code)
+
+    if sent:
+        flash('A new OTP code was sent to your email.', 'success')
+    else:
+        flash('Failed to send OTP email. Please configure SMTP settings.', 'error')
+    return redirect(url_for('auth.verify_otp', purpose=purpose, email=email))
+
+
+@auth_bp.route('/reset-password/<token>', methods=['GET', 'POST'])
+def reset_password(token: str):
+    """Reset password using signed token sent by email."""
+    try:
+        payload = _token_serializer().loads(token, max_age=1800)
+    except SignatureExpired:
+        flash('Password reset link has expired. Please request a new one.', 'error')
+        return redirect(url_for('auth.forgot_password'))
+    except BadSignature:
+        flash('Invalid password reset link.', 'error')
+        return redirect(url_for('auth.forgot_password'))
+
+    if payload.get('purpose') != 'reset_password':
+        flash('Invalid password reset link.', 'error')
+        return redirect(url_for('auth.forgot_password'))
+
+    email = payload.get('email', '').strip().lower()
+    user = User.query.filter_by(email=email).first()
+    if not user:
+        flash('Invalid password reset link.', 'error')
+        return redirect(url_for('auth.forgot_password'))
+
+    if request.method == 'POST':
+        password = request.form.get('password', '')
+        confirm_password = request.form.get('confirm_password', '')
+
+        if password != confirm_password:
+            flash('Passwords do not match.', 'error')
+            return render_template('auth/reset_password.html', token=token), 400
+
+        valid, msg = validate_password(password)
+        if not valid:
+            flash(msg, 'error')
+            return render_template('auth/reset_password.html', token=token), 400
+
+        user.set_password(password)
+        db.session.commit()
+        log_audit('password_reset_completed', user_id=user.id, status='success')
+        flash('Password updated successfully. Please sign in.', 'success')
+        return redirect(url_for('auth.login'))
+
+    return render_template('auth/reset_password.html', token=token)
+
+
 @auth_bp.route('/profile', methods=['GET'])
+@login_required
 def profile():
     """View user profile"""
     if not current_user.is_authenticated:
@@ -166,6 +557,7 @@ def profile():
 
 
 @auth_bp.route('/change-password', methods=['POST'])
+@login_required
 def change_password():
     """Change user password"""
     if not current_user.is_authenticated:

static/js/verify-otp.js

@@ -0,0 +1,54 @@
+document.addEventListener('DOMContentLoaded', function () {
+  var form = document.getElementById('otpForm');
+  var combined = document.getElementById('otpCombined');
+  var inputs = Array.prototype.slice.call(document.querySelectorAll('.otp-digit'));
+
+  if (!form || !combined || !inputs.length) {
+    return;
+  }
+
+  function normalize(v) {
+    return (v || '').replace(/\D/g, '').slice(0, 1);
+  }
+
+  function updateCombined() {
+    combined.value = inputs.map(function (i) { return i.value; }).join('');
+  }
+
+  inputs.forEach(function (input, idx) {
+    input.addEventListener('input', function () {
+      input.value = normalize(input.value);
+      updateCombined();
+      if (input.value && idx < inputs.length - 1) {
+        inputs[idx + 1].focus();
+      }
+    });
+
+    input.addEventListener('keydown', function (event) {
+      if (event.key === 'Backspace' && !input.value && idx > 0) {
+        inputs[idx - 1].focus();
+      }
+    });
+
+    input.addEventListener('paste', function (event) {
+      var text = (event.clipboardData || window.clipboardData).getData('text');
+      var digits = (text || '').replace(/\D/g, '').slice(0, 6).split('');
+      if (!digits.length) {
+        return;
+      }
+      event.preventDefault();
+      inputs.forEach(function (box, i) {
+        box.value = digits[i] || '';
+      });
+      updateCombined();
+      var last = Math.min(digits.length - 1, inputs.length - 1);
+      inputs[last].focus();
+    });
+  });
+
+  form.addEventListener('submit', function () {
+    updateCombined();
+  });
+
+  inputs[0].focus();
+});

templates/auth/forgot_password.html

@@ -78,8 +78,8 @@
   <main class="auth-form-panel">
     <div class="auth-card" id="formCard">
       <div class="auth-card-header">
-        <h2>Forgot password?</h2>
-        <p>Enter your email and we'll send you a reset link</p>
+        <h2>Forgot your password?</h2>
+        <p>No problem — enter your email and we'll send you a reset link</p>
       </div>
 
       {% with messages = get_flashed_messages(with_categories=true) %}
@@ -106,7 +106,8 @@
         </div>
         <h3 style="color:#e8ecf6;font-size:1.2rem;font-weight:800;margin-bottom:10px;">Check your inbox</h3>
         <p style="color:#8ba0c4;font-size:.9rem;line-height:1.65;margin-bottom:24px;">
-          If that email address is registered, you'll receive a password reset link shortly. Check your spam folder if you don't see it.
+          If that address is registered with us, a reset link is on its way. It expires in 30 minutes, so act quickly.
+          Don't see it? Check your spam or junk folder.
         </p>
         <a href="{{ url_for('auth.login') }}" class="btn-auth-submit" style="display:block;text-decoration:none;text-align:center;">
           Back to Sign In
@@ -127,7 +128,7 @@
       </form>
 
       <div class="auth-footer">
-        Remember your password? <a href="{{ url_for('auth.login') }}">Sign in</a>
+        Remembered it after all? <a href="{{ url_for('auth.login') }}">Back to sign in</a>
       </div>
     </div>
   </main>

templates/auth/login.html

@@ -27,7 +27,7 @@
 
     <div class="auth-headline">
       <h2>AI-Powered <span class="grad">Hemorrhage</span> Detection</h2>
-      <p>Clinical-grade CT scan analysis with Grad-CAM explainability and automated triage reporting.</p>
+      <p>Clinical-grade CT scan analysis with Grad-CAM explainability — built for speed, precision, and trust.</p>
     </div>
 
     <ul class="auth-features">
@@ -131,7 +131,7 @@
     <div class="auth-card">
       <div class="auth-card-header">
         <h2>Welcome back</h2>
-        <p>Sign in to your ICH Screening account</p>
+        <p>Enter your credentials to access your dashboard</p>
       </div>
 
       {% with messages = get_flashed_messages(with_categories=true) %}
@@ -153,11 +153,11 @@
 
       <form method="POST" class="auth-form" id="loginForm">
         <div class="form-group">
-          <label for="username">Username</label>
+          <label for="identifier">Username or Email</label>
           <div class="input-wrap">
             <svg class="input-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
-            <input type="text" id="username" name="username" required autofocus
-                   placeholder="Enter your username" autocomplete="username"/>
+            <input type="text" id="identifier" name="identifier" required autofocus
+                   placeholder="Enter your username or email" autocomplete="username"/>
           </div>
         </div>
 
@@ -185,7 +185,7 @@
       </form>
 
       <div class="auth-footer">
-        Don't have an account? <a href="{{ url_for('auth.register') }}">Create one</a>
+        New to ICH Screening? <a href="{{ url_for('auth.register') }}">Create a free account</a>
       </div>
     </div>
   </main>

templates/auth/register.html

@@ -35,25 +35,25 @@
         <span class="feat-icon">
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
         </span>
-        Free to get started
+        Free to get started — no credit card needed
       </li>
       <li>
         <span class="feat-icon">
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
         </span>
-        Your scans stay private
+        Your scans are private and isolated
       </li>
       <li>
         <span class="feat-icon">
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
         </span>
-        Full calibration metrics & reports
+        Full calibration metrics and PDF reports
       </li>
       <li>
         <span class="feat-icon">
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
         </span>
-        Results in seconds
+        AI results delivered in seconds
       </li>
     </ul>
 
@@ -122,8 +122,8 @@
   <main class="auth-form-panel">
     <div class="auth-card">
       <div class="auth-card-header">
-        <h2>Create account</h2>
-        <p>Fill in your details to get started</p>
+        <h2>Create your account</h2>
+        <p>Takes less than a minute to get started</p>
       </div>
 
       {% with messages = get_flashed_messages(with_categories=true) %}
@@ -152,7 +152,7 @@
             <input type="text" id="username" name="username" required autofocus
                    placeholder="3–80 chars, letters/numbers/-/_" autocomplete="username"/>
           </div>
-          <span class="form-hint">Letters, numbers, hyphens and underscores only</span>
+          <span class="form-hint">Letters, numbers, hyphens and underscores only (3–80 characters)</span>
         </div>
 
         <!-- Email -->
@@ -181,7 +181,7 @@
           <div class="input-wrap">
             <svg class="input-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
             <input type="password" id="password" name="password" required
-                   class="has-toggle" placeholder="8+ chars, upper, lower, digit" autocomplete="new-password"/>
+                   class="has-toggle" placeholder="Min. 8 chars with uppercase, lowercase &amp; number" autocomplete="new-password"/>
             <button type="button" class="btn-pw-toggle" id="togglePw" aria-label="Toggle password visibility">
               <svg id="eyeIcon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
             </button>
@@ -207,7 +207,7 @@
       </form>
 
       <div class="auth-footer">
-        Already have an account? <a href="{{ url_for('auth.login') }}">Sign in</a>
+        Already have an account? <a href="{{ url_for('auth.login') }}">Sign in instead</a>
       </div>
     </div>
   </main>

templates/auth/reset_password.html

@@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
+  <title>Reset Password — ICH Screening</title>
+  <meta name="description" content="Set a new password for your account."/>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"/>
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/base.css') }}"/>
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/auth.css') }}"/>
+</head>
+<body>
+<div class="auth-page">
+  <aside class="auth-brand">
+    <div class="auth-brand-logo">
+      <div class="auth-brand-icon">
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
+        </svg>
+      </div>
+      <span class="auth-brand-name">ICH Screening</span>
+    </div>
+
+    <div class="auth-headline">
+      <h2>Almost <span class="grad">Back In</span></h2>
+      <p>Choose a strong, unique password you haven't used before.</p>
+    </div>
+  </aside>
+
+  <main class="auth-form-panel">
+    <div class="auth-card">
+      <div class="auth-card-header">
+        <h2>Choose a new password</h2>
+        <p>This link is single-use and expires in 30 minutes</p>
+      </div>
+
+      {% with messages = get_flashed_messages(with_categories=true) %}
+        {% if messages %}
+          <div class="auth-alerts">
+            {% for category, message in messages %}
+              <div class="alert alert-{{ category }}">{{ message }}</div>
+            {% endfor %}
+          </div>
+        {% endif %}
+      {% endwith %}
+
+      <form method="POST" class="auth-form" id="resetPwForm">
+        <div class="form-group">
+          <label for="password">New Password</label>
+          <div class="input-wrap">
+            <input type="password" id="password" name="password" required class="has-toggle" minlength="8" autocomplete="new-password"/>
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label for="confirm_password">Confirm New Password</label>
+          <div class="input-wrap">
+            <input type="password" id="confirm_password" name="confirm_password" required class="has-toggle" minlength="8" autocomplete="new-password"/>
+          </div>
+        </div>
+
+        <button type="submit" class="btn-auth-submit">Save New Password</button>
+      </form>
+
+      <div class="auth-footer">
+        Remembered it? <a href="{{ url_for('auth.login') }}">Back to sign in</a>
+      </div>
+    </div>
+  </main>
+</div>
+</body>
+</html>

templates/auth/verify_otp.html

@@ -0,0 +1,82 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
+  <title>Verify Email OTP — ICH Screening</title>
+  <meta name="description" content="Verify your email with one-time password."/>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"/>
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/base.css') }}"/>
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/auth.css') }}"/>
+</head>
+<body>
+<div class="auth-page">
+  <aside class="auth-brand">
+    <div class="auth-brand-logo">
+      <div class="auth-brand-icon">
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
+        </svg>
+      </div>
+      <span class="auth-brand-name">ICH Screening</span>
+    </div>
+
+    <div class="auth-headline">
+      <h2>Check Your <span class="grad">Email</span></h2>
+      <p>We sent a 6-digit code to your inbox. Enter it below to verify your identity and activate your account.</p>
+    </div>
+
+    <ul class="auth-features">
+      <li><span class="feat-icon">1</span>Open the email from ICH Screening</li>
+      <li><span class="feat-icon">2</span>Copy the 6-digit code</li>
+      <li><span class="feat-icon">3</span>Enter it here — valid for 10 minutes</li>
+    </ul>
+  </aside>
+
+  <main class="auth-form-panel">
+    <div class="auth-card">
+      <div class="auth-card-header">
+        <h2>Enter your verification code</h2>
+        <p>Sent to <strong>{{ email or 'your registered email' }}</strong></p>
+      </div>
+
+      {% with messages = get_flashed_messages(with_categories=true) %}
+        {% if messages %}
+          <div class="auth-alerts">
+            {% for category, message in messages %}
+              <div class="alert alert-{{ category }}">{{ message }}</div>
+            {% endfor %}
+          </div>
+        {% endif %}
+      {% endwith %}
+
+      <form method="POST" class="auth-form" id="otpForm">
+        <input type="hidden" name="otp" id="otpCombined"/>
+        <div class="otp-grid" style="display:grid;grid-template-columns:repeat(6,1fr);gap:10px;">
+          <input type="text" inputmode="numeric" maxlength="1" name="d1" class="otp-digit" required/>
+          <input type="text" inputmode="numeric" maxlength="1" name="d2" class="otp-digit" required/>
+          <input type="text" inputmode="numeric" maxlength="1" name="d3" class="otp-digit" required/>
+          <input type="text" inputmode="numeric" maxlength="1" name="d4" class="otp-digit" required/>
+          <input type="text" inputmode="numeric" maxlength="1" name="d5" class="otp-digit" required/>
+          <input type="text" inputmode="numeric" maxlength="1" name="d6" class="otp-digit" required/>
+        </div>
+
+        <button type="submit" class="btn-auth-submit" style="margin-top:16px;">Verify &amp; Activate Account</button>
+      </form>
+
+      <form method="POST" action="{{ url_for('auth.resend_otp') }}" style="margin-top:12px;">
+        <button type="submit" class="btn-auth-submit" style="background:#0f1b31;border:1px solid #2a3f68;">Didn't receive it? Resend code</button>
+      </form>
+
+      <div class="auth-footer">
+        Wrong account? <a href="{{ url_for('auth.login') }}">Back to sign in</a>
+      </div>
+    </div>
+  </main>
+</div>
+
+<script src="{{ url_for('static', filename='js/verify-otp.js') }}" defer></script>
+</body>
+</html>

templates/email/css/_base.css

@@ -0,0 +1,160 @@
+/* ============================================================
+   EMAIL BASE STYLES
+   Shared across all ICH Screening email templates.
+   Included via Jinja2: {% include 'email/css/_base.css' %}
+   NOTE: Email clients do NOT load external stylesheets.
+         This file is injected inline at render time by Flask.
+============================================================ */
+
+/* ── Reset ──────────────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
+table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse; }
+img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; }
+a { text-decoration: none; }
+
+/* ── Color Scheme Declaration ───────────────────────────── */
+:root {
+  color-scheme: light dark;
+}
+
+/* ── LIGHT THEME (default) ──────────────────────────────── */
+body {
+  background-color: #f0f4f8;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  color: #1a202c;
+}
+
+.email-wrapper {
+  width: 100%;
+  background-color: #f0f4f8;
+  padding: 40px 16px;
+}
+
+.email-container {
+  max-width: 560px;
+  margin: 0 auto;
+  background-color: #ffffff;
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+}
+
+/* ── Header ─────────────────────────────────────────────── */
+.email-header {
+  background: linear-gradient(135deg, #0d1b3e 0%, #0a2a4a 50%, #0d1b3e 100%);
+  padding: 40px 32px 36px;
+  text-align: center;
+}
+
+.brand-icon {
+  width: 36px;
+  height: 36px;
+  background: rgba(0, 212, 255, 0.15);
+  border: 1.5px solid rgba(0, 212, 255, 0.5);
+  border-radius: 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  margin-right: 10px;
+}
+
+.brand-name {
+  font-size: 15px;
+  font-weight: 700;
+  color: #ffffff;
+  letter-spacing: 0.5px;
+}
+
+.header-title {
+  font-size: 22px;
+  font-weight: 700;
+  color: #ffffff;
+  margin-top: 16px;
+  letter-spacing: -0.3px;
+}
+
+.header-subtitle {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.6);
+  margin-top: 6px;
+}
+
+/* ── Body ────────────────────────────────────────────────── */
+.email-body {
+  padding: 36px 32px;
+}
+
+.greeting {
+  font-size: 15px;
+  color: #4a5568;
+  line-height: 1.7;
+  margin-bottom: 28px;
+}
+
+.divider {
+  border: none;
+  border-top: 1px solid #e2e8f0;
+  margin: 24px 0;
+}
+
+.security-notice {
+  font-size: 12px;
+  color: #a0aec0;
+  line-height: 1.7;
+  margin-bottom: 8px;
+}
+
+/* ── Footer ──────────────────────────────────────────────── */
+.email-footer {
+  background-color: #f7f8fb;
+  border-top: 1px solid #e2e8f0;
+  padding: 20px 32px;
+  text-align: center;
+}
+
+.footer-brand {
+  font-size: 13px;
+  font-weight: 700;
+  color: #4a5568;
+  margin-bottom: 4px;
+}
+
+.footer-text {
+  font-size: 11px;
+  color: #a0aec0;
+  line-height: 1.6;
+}
+
+/* ── DARK THEME (shared overrides) ──────────────────────── */
+@media (prefers-color-scheme: dark) {
+  body { background-color: #0b0f1a !important; color: #e2e8f0 !important; }
+
+  .email-wrapper { background-color: #0b0f1a !important; }
+
+  .email-container {
+    background-color: #111827 !important;
+    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.5) !important;
+    border: 1px solid rgba(255, 255, 255, 0.06) !important;
+  }
+
+  .email-header {
+    background: linear-gradient(135deg, #060d1f 0%, #081428 50%, #060d1f 100%) !important;
+  }
+
+  .greeting      { color: #a0aec0 !important; }
+  .security-notice { color: #4a5568 !important; }
+  .divider       { border-top-color: rgba(255, 255, 255, 0.07) !important; }
+
+  .email-footer  { background-color: #0d1424 !important; border-top-color: rgba(255, 255, 255, 0.07) !important; }
+  .footer-brand  { color: #718096 !important; }
+  .footer-text   { color: #4a5568 !important; }
+}
+
+/* ── RESPONSIVE (shared) ─────────────────────────────────── */
+@media only screen and (max-width: 560px) {
+  .email-body   { padding: 28px 20px !important; }
+  .email-header { padding: 32px 20px 28px !important; }
+  .email-footer { padding: 16px 20px !important; }
+}

templates/email/css/_otp.css

@@ -0,0 +1,87 @@
+/* ============================================================
+   OTP EMAIL — COMPONENT STYLES
+   Styles specific to the OTP/email-verification email template.
+   Included via Jinja2: {% include 'email/css/_otp.css' %}
+============================================================ */
+
+/* ── OTP Label ───────────────────────────────────────────── */
+.otp-label {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+  color: #718096;
+  margin-bottom: 12px;
+  text-align: center;
+}
+
+/* ── OTP Box ─────────────────────────────────────────────── */
+.otp-box {
+  background: #f7f8fb;
+  border: 2px solid #e2e8f0;
+  border-radius: 14px;
+  padding: 28px 20px;
+  text-align: center;
+  margin-bottom: 28px;
+}
+
+.otp-digits {
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 42px;
+  font-weight: 800;
+  letter-spacing: 12px;
+  color: #0d1b3e;
+  text-indent: 12px; /* compensates for letter-spacing gap on last char */
+}
+
+.otp-accent {
+  color: #0078d4;
+}
+
+.otp-expiry {
+  font-size: 12px;
+  color: #718096;
+  margin-top: 10px;
+}
+
+.otp-expiry strong {
+  color: #e53e3e;
+}
+
+/* ── Info Block ──────────────────────────────────────────── */
+.info-block {
+  background: #ebf8ff;
+  border-left: 4px solid #0078d4;
+  border-radius: 0 8px 8px 0;
+  padding: 14px 16px;
+  margin-bottom: 24px;
+  font-size: 13px;
+  color: #2c5282;
+  line-height: 1.6;
+}
+
+/* ── DARK THEME (OTP-specific overrides) ─────────────────── */
+@media (prefers-color-scheme: dark) {
+  .otp-label  { color: #4a5568 !important; }
+
+  .otp-box    { background: #1a2035 !important; border-color: rgba(0, 212, 255, 0.25) !important; }
+  .otp-digits { color: #e2e8f0 !important; }
+  .otp-accent { color: #00d4ff !important; }
+  .otp-expiry { color: #718096 !important; }
+  .otp-expiry strong { color: #fc8181 !important; }
+
+  .info-block {
+    background: rgba(0, 120, 212, 0.1) !important;
+    border-left-color: #00d4ff !important;
+    color: #90cdf4 !important;
+  }
+}
+
+/* ── RESPONSIVE (OTP-specific) ───────────────────────────── */
+@media only screen and (max-width: 560px) {
+  .otp-digits {
+    font-size: 34px !important;
+    letter-spacing: 8px !important;
+    text-indent: 8px !important;
+  }
+}

templates/email/css/_reset.css

@@ -0,0 +1,90 @@
+/* ============================================================
+   PASSWORD RESET EMAIL — COMPONENT STYLES
+   Styles specific to the password-reset email template.
+   Included via Jinja2: {% include 'email/css/_reset.css' %}
+============================================================ */
+
+/* ── CTA Button ──────────────────────────────────────────── */
+.cta-wrap {
+  text-align: center;
+  margin: 4px 0 28px;
+}
+
+.cta-button {
+  display: inline-block;
+  background: linear-gradient(135deg, #0078d4, #005fa3);
+  color: #ffffff !important;
+  font-size: 15px;
+  font-weight: 700;
+  padding: 15px 40px;
+  border-radius: 10px;
+  letter-spacing: 0.3px;
+  text-decoration: none;
+  box-shadow: 0 4px 16px rgba(0, 120, 212, 0.3);
+}
+
+/* ── Fallback Link ───────────────────────────────────────── */
+.cta-fallback {
+  font-size: 12px;
+  color: #a0aec0;
+  margin-top: 14px;
+  line-height: 1.7;
+  word-break: break-all;
+}
+
+.cta-fallback a {
+  color: #0078d4;
+  text-decoration: underline;
+}
+
+/* ── Warning Box ─────────────────────────────────────────── */
+.warning-box {
+  background: #fff5f5;
+  border-left: 4px solid #e53e3e;
+  border-radius: 0 8px 8px 0;
+  padding: 14px 16px;
+  margin-bottom: 24px;
+  font-size: 13px;
+  color: #742a2a;
+  line-height: 1.6;
+}
+
+/* ── Expiry Note ─────────────────────────────────────────── */
+.expiry-note {
+  text-align: center;
+  font-size: 12px;
+  color: #718096;
+  margin-bottom: 24px;
+}
+
+.expiry-note strong {
+  color: #e53e3e;
+}
+
+/* ── DARK THEME (reset-specific overrides) ───────────────── */
+@media (prefers-color-scheme: dark) {
+  .cta-button {
+    background: linear-gradient(135deg, #0091ea, #0078d4) !important;
+    box-shadow: 0 4px 20px rgba(0, 212, 255, 0.25) !important;
+  }
+
+  .cta-fallback        { color: #4a5568 !important; }
+  .cta-fallback a      { color: #00d4ff !important; }
+
+  .warning-box {
+    background: rgba(229, 62, 62, 0.1) !important;
+    border-left-color: #fc8181 !important;
+    color: #feb2b2 !important;
+  }
+
+  .expiry-note        { color: #4a5568 !important; }
+  .expiry-note strong { color: #fc8181 !important; }
+}
+
+/* ── RESPONSIVE (reset-specific) ────────────────────────── */
+@media only screen and (max-width: 560px) {
+  .cta-button {
+    padding: 14px 28px !important;
+    font-size: 14px !important;
+  }
+}

templates/email/otp_email.html

@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="color-scheme" content="light dark" />
+  <meta name="supported-color-schemes" content="light dark" />
+  <title>{{ title }} — ICH Screening</title>
+  <style>
+    {# ── Shared base: reset, layout, header, footer, dark theme ── #}
+    {% include 'email/css/_base.css' %}
+
+    {# ── OTP-specific: digit display, info block, dark overrides ── #}
+    {% include 'email/css/_otp.css' %}
+  </style>
+</head>
+<body>
+<div class="email-wrapper">
+  <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
+    <tr>
+      <td align="center">
+        <div class="email-container">
+
+          <!-- ═══════════ HEADER ═══════════ -->
+          <div class="email-header">
+
+            <!-- Brand -->
+            <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
+              <tr>
+                <td align="center">
+                  <table role="presentation" cellpadding="0" cellspacing="0">
+                    <tr>
+                      <td style="padding-right:10px; vertical-align:middle;">
+                        <div class="brand-icon">
+                          <svg width="18" height="18" viewBox="0 0 24 24" fill="none"
+                               stroke="#00d4ff" stroke-width="2.5"
+                               stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
+                          </svg>
+                        </div>
+                      </td>
+                      <td style="vertical-align:middle;">
+                        <span class="brand-name">ICH Screening</span>
+                      </td>
+                    </tr>
+                  </table>
+                </td>
+              </tr>
+            </table>
+
+            <!-- Brain / Neural SVG graphic -->
+            <div style="margin: 20px auto 0; text-align: center;">
+              <svg width="64" height="64" viewBox="0 0 64 64" fill="none"
+                   xmlns="http://www.w3.org/2000/svg">
+                <circle cx="32" cy="32" r="30"
+                        fill="rgba(0,212,255,0.08)"
+                        stroke="rgba(0,212,255,0.4)"
+                        stroke-width="1.5"/>
+                <path d="M22 28c0-5.5 4-10 10-10 3 0 5.5 1.2 7.2 3.2"
+                      stroke="#00d4ff" stroke-width="1.8" stroke-linecap="round" fill="none"/>
+                <path d="M39 22c2.5 1.5 4 4.2 4 7 0 4-2.8 7.5-7 9"
+                      stroke="#00d4ff" stroke-width="1.8" stroke-linecap="round" fill="none"/>
+                <path d="M36 38c-1.2.7-2.6 1-4 1-5.5 0-10-4-10-9 0-2.2.8-4.2 2-5.8"
+                      stroke="#00d4ff" stroke-width="1.8" stroke-linecap="round" fill="none"/>
+                <path d="M24 32h4l2-5 3 10 2-5h5"
+                      stroke="rgba(0,212,255,0.85)" stroke-width="1.6"
+                      stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+                <circle cx="32" cy="21" r="1.5" fill="rgba(0,212,255,0.6)"/>
+                <circle cx="22" cy="35" r="1.5" fill="rgba(0,212,255,0.6)"/>
+                <circle cx="40" cy="30" r="1.5" fill="rgba(0,212,255,0.6)"/>
+              </svg>
+            </div>
+
+            <div class="header-title">{{ title }}</div>
+            <div class="header-subtitle">ICH Screening — Intracranial Hemorrhage Detection</div>
+          </div>
+          <!-- ═══════════ END HEADER ═══════════ -->
+
+          <!-- ═══════════ BODY ═══════════ -->
+          <div class="email-body">
+
+            <p class="greeting">
+              {% if recipient_name %}Hi <strong>{{ recipient_name }}</strong>,{% else %}Hi there,{% endif %}<br/><br/>
+              {% if purpose == 'verify_email' %}
+                Welcome to <strong>ICH Screening</strong>. You're one step away from accessing
+                our intracranial hemorrhage detection platform. Enter the verification code below
+                to confirm your email address and activate your account.
+              {% else %}
+                A verification code was requested for your <strong>ICH Screening</strong> account.
+                Enter the code below to continue. If this wasn't you, you can safely disregard
+                this message — your account remains secure.
+              {% endif %}
+            </p>
+
+            <!-- OTP Box -->
+            <div class="otp-label">Verification Code &mdash; Valid for 10 minutes</div>
+            <div class="otp-box">
+              <div class="otp-digits">
+                {%- set chars = otp_code | list -%}
+                {%- for i in range(chars | length) -%}
+                  {%- if i == 3 %}<span class="otp-accent">{{ chars[i] }}</span>
+                  {%- else %}{{ chars[i] }}{%- endif -%}
+                {%- endfor -%}
+              </div>
+              <div class="otp-expiry">
+                Do not share this code. It expires in <strong>10 minutes</strong>.
+              </div>
+            </div>
+
+            <!-- Info notice -->
+            <div class="info-block">
+              <strong>Security reminder:</strong> ICH Screening will never ask you to share this
+              code over the phone, email, or chat. If anyone requests it, treat it as a phishing attempt.
+            </div>
+
+            <hr class="divider"/>
+
+            <p class="security-notice">
+              Didn't sign up for ICH Screening? No worries — simply ignore this email.
+              Your code is useless without your login credentials, and your account will
+              remain inactive unless this code is entered.
+            </p>
+
+          </div>
+          <!-- ═══════════ END BODY ═══════════ -->
+
+          <!-- ═══════════ FOOTER ═══════════ -->
+          <div class="email-footer">
+            <div class="footer-brand">ICH Screening</div>
+            <div class="footer-text">
+              This message was sent automatically. Replies to this address are not monitored.<br/>
+              &copy; {{ current_year }} ICH Screening &mdash; Intracranial Hemorrhage Detection Platform.
+            </div>
+          </div>
+          <!-- ═══════════ END FOOTER ═══════════ -->
+
+        </div><!-- /email-container -->
+      </td>
+    </tr>
+  </table>
+</div>
+</body>
+</html>

templates/email/password_reset_email.html

@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="color-scheme" content="light dark" />
+  <meta name="supported-color-schemes" content="light dark" />
+  <title>Reset your Password — ICH Screening</title>
+  <style>
+    {# ── Shared base: reset, layout, header, footer, dark theme ── #}
+    {% include 'email/css/_base.css' %}
+
+    {# ── Reset-specific: CTA button, warning box, expiry note ── #}
+    {% include 'email/css/_reset.css' %}
+  </style>
+</head>
+<body>
+<div class="email-wrapper">
+  <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
+    <tr>
+      <td align="center">
+        <div class="email-container">
+
+          <!-- ═══════════ HEADER ═══════════ -->
+          <div class="email-header">
+
+            <!-- Brand -->
+            <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
+              <tr>
+                <td align="center">
+                  <table role="presentation" cellpadding="0" cellspacing="0">
+                    <tr>
+                      <td style="padding-right:10px; vertical-align:middle;">
+                        <div class="brand-icon">
+                          <svg width="18" height="18" viewBox="0 0 24 24" fill="none"
+                               stroke="#00d4ff" stroke-width="2.5"
+                               stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
+                          </svg>
+                        </div>
+                      </td>
+                      <td style="vertical-align:middle;">
+                        <span class="brand-name">ICH Screening</span>
+                      </td>
+                    </tr>
+                  </table>
+                </td>
+              </tr>
+            </table>
+
+            <!-- Shield / Lock SVG graphic -->
+            <div style="margin: 20px auto 0; text-align: center;">
+              <svg width="68" height="68" viewBox="0 0 68 68" fill="none"
+                   xmlns="http://www.w3.org/2000/svg">
+                <circle cx="34" cy="34" r="32"
+                        fill="rgba(0,212,255,0.07)"
+                        stroke="rgba(0,212,255,0.35)"
+                        stroke-width="1.5"/>
+                <path d="M34 16 L48 22 L48 34 C48 42.5 41.5 49.5 34 52 C26.5 49.5 20 42.5 20 34 L20 22 Z"
+                      fill="rgba(0,212,255,0.1)"
+                      stroke="#00d4ff" stroke-width="1.8" stroke-linejoin="round"/>
+                <rect x="27" y="33" width="14" height="10" rx="2.5"
+                      fill="rgba(0,212,255,0.25)" stroke="#00d4ff" stroke-width="1.5"/>
+                <path d="M29 33 L29 29.5 C29 26.5 39 26.5 39 29.5 L39 33"
+                      stroke="#00d4ff" stroke-width="1.5" stroke-linecap="round" fill="none"/>
+                <circle cx="34" cy="37.5" r="1.5" fill="#00d4ff"/>
+                <path d="M34 39 L34 41" stroke="#00d4ff" stroke-width="1.5" stroke-linecap="round"/>
+              </svg>
+            </div>
+
+            <div class="header-title">Let's get you back in</div>
+            <div class="header-subtitle">ICH Screening — Intracranial Hemorrhage Detection</div>
+          </div>
+          <!-- ═══════════ END HEADER ═══════════ -->
+
+          <!-- ═══════════ BODY ═══════════ -->
+          <div class="email-body">
+
+            <p class="greeting">
+              {% if recipient_name %}Hi <strong>{{ recipient_name }}</strong>,{% else %}Hi there,{% endif %}<br/><br/>
+              We received a request to reset the password for your <strong>ICH Screening</strong> account.
+              Use the button below to choose a new password — it only takes a moment.
+            </p>
+
+            <!-- CTA Button -->
+            <div class="cta-wrap">
+              <a href="{{ reset_link }}" class="cta-button" id="reset-password-btn">
+                Reset My Password
+              </a>
+            </div>
+
+            <!-- Expiry notice -->
+            <div class="expiry-note">
+              This reset link is single-use and expires in <strong>30 minutes</strong>
+            </div>
+
+            <!-- Fallback link text -->
+            <div class="cta-fallback" style="text-align: center;">
+              Button not working? Paste this link directly into your browser's address bar:<br/>
+              <a href="{{ reset_link }}">{{ reset_link }}</a>
+            </div>
+
+            <hr class="divider"/>
+
+            <!-- Warning -->
+            <div class="warning-box">
+              <strong>Didn't request this?</strong> You can ignore this email — your password
+              has not been changed and your account remains intact. If you keep receiving
+              unexpected reset emails, consider reviewing your account security.
+            </div>
+
+            <p class="security-notice">
+              For your protection, this link expires automatically and can only be used once.
+              Need a new link? Head back to the
+              <a href="#" style="color: #718096;">Forgot Password</a> page and try again.
+            </p>
+
+          </div>
+          <!-- ═══════════ END BODY ═══════════ -->
+
+          <!-- ═══════════ FOOTER ═══════════ -->
+          <div class="email-footer">
+            <div class="footer-brand">ICH Screening</div>
+            <div class="footer-text">
+              This message was sent automatically. Replies to this address are not monitored.<br/>
+              &copy; {{ current_year }} ICH Screening &mdash; Intracranial Hemorrhage Detection Platform.
+            </div>
+          </div>
+          <!-- ═══════════ END FOOTER ═══════════ -->
+
+        </div><!-- /email-container -->
+      </td>
+    </tr>
+  </table>
+</div>
+</body>
+</html>