feat: split auth into dedicated pages and enable flask auth routes

.gitignore

@@ -8,4 +8,7 @@ venv/
 .ruff_cache/
 .cache/
 Thumbs.db
-.DS_Store
+.DS_Store
+users.db
+*.db
+auth_module/.jwt_secret

app.py

@@ -175,6 +175,21 @@ def index():
     return render_template("index.html")
 
 
+@app.route("/login")
+def login_page():
+    return render_template("login.html")
+
+
+@app.route("/signup")
+def signup_page():
+    return render_template("signup.html")
+
+
+@app.route("/verify")
+def verify_page():
+    return render_template("verify.html")
+
+
 @app.route("/health")
 def health():
     uptime = int(time.time() - START_TIME)

auth_module/flask_auth_routes.py

@@ -0,0 +1,306 @@
+import asyncio
+import os
+import random
+from datetime import datetime, timedelta
+
+from flask import Blueprint, jsonify, make_response, request
+
+from .database import auth_db
+from .security import create_access_token, decode_access_token, validate_password_strength
+
+
+auth_blueprint = Blueprint("auth_blueprint", __name__)
+
+
+def _run(coro):
+    return asyncio.run(coro)
+
+
+def _extract_token_from_request():
+    auth_header = request.headers.get("Authorization", "").strip()
+    if auth_header.lower().startswith("bearer "):
+        return auth_header.split(" ", 1)[1].strip()
+
+    cookie_value = request.cookies.get("access_token", "").strip()
+    if cookie_value.lower().startswith("bearer "):
+        return cookie_value.split(" ", 1)[1].strip()
+    return cookie_value or None
+
+
+def _get_current_user_or_error():
+    token = _extract_token_from_request()
+    if not token:
+        return None, (jsonify({"detail": "غير مصرح — سجّل دخولك أولاً"}), 401)
+
+    payload = decode_access_token(token)
+    if not payload:
+        return None, (jsonify({"detail": "جلسة منتهية — سجّل دخولك مرة أخرى"}), 401)
+
+    email = payload.get("sub", "")
+    user = _run(auth_db.get_user_by_email(email))
+    if not user:
+        return None, (jsonify({"detail": "المستخدم غير موجود"}), 401)
+
+    return user, None
+
+
+def _is_production():
+    return bool(os.getenv("RENDER") or os.getenv("ENVIRONMENT", "").lower() == "production")
+
+
+@auth_blueprint.post("/signup")
+def signup():
+    data = request.get_json(silent=True) or {}
+    email = (data.get("email") or "").strip().lower()
+    password = data.get("password") or ""
+    full_name = (data.get("full_name") or "").strip()
+    phone = (data.get("phone") or "").strip() or None
+
+    valid, message = validate_password_strength(password)
+    if not valid:
+        return jsonify({"detail": message}), 400
+
+    if "@" not in email or "." not in email:
+        return jsonify({"detail": "البريد الإلكتروني غير صحيح"}), 400
+
+    if not full_name:
+        return jsonify({"detail": "الاسم الكامل مطلوب"}), 400
+
+    created_user = _run(auth_db.create_user(email, password, full_name, phone=phone))
+    if not created_user:
+        return jsonify({"detail": "البريد الإلكتروني مسجل بالفعل"}), 400
+
+    otp_code = str(random.randint(100000, 999999))
+    _run(auth_db.store_otp(created_user["id"], otp_code, "telegram_verify", minutes=10))
+
+    try:
+        from .config import auth_settings
+        from .nova_client import nova_client
+
+        if nova_client.is_configured:
+            _run(
+                nova_client.push_otp(
+                    email=email,
+                    code=otp_code,
+                    app_id=auth_settings.APP_ID,
+                    minutes=10,
+                )
+            )
+    except Exception:
+        pass
+
+    return jsonify(
+        {
+            "status": "pending_verification",
+            "message": "تم إنشاء الحساب! فعّل حسابك عبر تليجرام بوت @robovainova_bot ← /verify",
+            "user": created_user,
+        }
+    )
+
+
+@auth_blueprint.post("/login")
+def login():
+    data = request.get_json(silent=True) or {}
+    username_from_json = (data.get("username") or data.get("email") or "").strip()
+    password_from_json = data.get("password") or ""
+
+    username_from_form = (request.form.get("username") or "").strip()
+    password_from_form = request.form.get("password") or ""
+
+    username = username_from_json or username_from_form
+    password = password_from_json or password_from_form
+
+    if not username or not password:
+        return jsonify({"detail": "بيانات تسجيل الدخول غير مكتملة"}), 400
+
+    user = _run(auth_db.authenticate_user(username, password))
+    if not user:
+        return jsonify({"detail": "البريد الإلكتروني أو كلمة المرور غير صحيحة"}), 401
+
+    if not user.get("is_verified"):
+        return jsonify(
+            {
+                "detail": "الحساب غير مُفعّل. افتح بوت @robovainova_bot في تليجرام وأرسل /verify"
+            }
+        ), 403
+
+    access_token = create_access_token(data={"sub": user["email"]})
+    expires_at = (datetime.now() + timedelta(days=1)).isoformat()
+    _run(auth_db.create_session(user["id"], access_token, expires_at))
+
+    response = make_response(
+        jsonify({"access_token": access_token, "token_type": "bearer"})
+    )
+    response.set_cookie(
+        key="access_token",
+        value=f"Bearer {access_token}",
+        httponly=True,
+        secure=_is_production(),
+        max_age=86400,
+        samesite="Lax",
+    )
+    return response
+
+
+@auth_blueprint.post("/logout")
+def logout():
+    token = request.cookies.get("access_token", "")
+    if token.lower().startswith("bearer "):
+        token = token.split(" ", 1)[1].strip()
+
+    if token:
+        _run(auth_db.delete_session(token))
+
+    response = make_response(jsonify({"status": "success"}))
+    response.delete_cookie("access_token")
+    return response
+
+
+@auth_blueprint.get("/me")
+def me():
+    user, error_response = _get_current_user_or_error()
+    if error_response:
+        return error_response
+
+    return jsonify(
+        {
+            "id": user["id"],
+            "email": user["email"],
+            "full_name": user.get("full_name", ""),
+            "role": user.get("role", "user"),
+            "balance": user.get("balance", 0),
+        }
+    )
+
+
+@auth_blueprint.post("/request-otp")
+def request_otp():
+    data = request.get_json(silent=True) or {}
+    email = (data.get("email") or "").strip().lower()
+    if not email:
+        return jsonify({"detail": "البريد الإلكتروني مطلوب"}), 400
+
+    user = _run(auth_db.get_user_by_email_unverified(email))
+    if not user:
+        return jsonify({"detail": "لم يتم العثور على حساب بهذا البريد"}), 404
+
+    if user.get("is_verified"):
+        return jsonify({"status": "already_verified", "message": "الحساب مفعّل بالفعل ✅"})
+
+    otp_code = str(random.randint(100000, 999999))
+    _run(auth_db.store_otp(user["id"], otp_code, "telegram_verify", minutes=10))
+
+    try:
+        from .config import auth_settings
+        from .nova_client import nova_client
+
+        if nova_client.is_configured:
+            _run(
+                nova_client.push_otp(
+                    email=email,
+                    code=otp_code,
+                    app_id=auth_settings.APP_ID,
+                    minutes=10,
+                )
+            )
+    except Exception:
+        pass
+
+    return jsonify(
+        {
+            "status": "success",
+            "message": "تم إنشاء كود التحقق. افتح بوت RobovAI في تليجرام وأرسل /verify",
+        }
+    )
+
+
+@auth_blueprint.post("/verify-otp")
+def verify_otp():
+    data = request.get_json(silent=True) or {}
+    email = (data.get("email") or "").strip().lower()
+    code = (data.get("code") or "").strip()
+
+    if not email or not code:
+        return jsonify({"detail": "email و code مطلوبان"}), 400
+
+    user = _run(auth_db.get_user_by_email_unverified(email))
+    if not user:
+        return jsonify({"detail": "المستخدم غير موجود"}), 404
+
+    if user.get("is_verified"):
+        return jsonify({"status": "already_verified", "message": "الحساب مفعّل بالفعل ✅"})
+
+    valid = _run(auth_db.verify_otp(user["id"], code, "telegram_verify"))
+    if not valid:
+        return jsonify({"detail": "كود التحقق غير صحيح أو منتهي الصلاحية"}), 400
+
+    _run(auth_db.set_user_verified(user["id"]))
+
+    access_token = create_access_token(data={"sub": email})
+    expires_at = (datetime.now() + timedelta(days=1)).isoformat()
+    _run(auth_db.create_session(user["id"], access_token, expires_at))
+
+    response = make_response(
+        jsonify(
+            {
+                "status": "success",
+                "message": "تم تفعيل الحساب بنجاح! ✅",
+                "access_token": access_token,
+                "user": {
+                    "id": user["id"],
+                    "email": email,
+                    "full_name": user.get("full_name", ""),
+                },
+            }
+        )
+    )
+    response.set_cookie(
+        key="access_token",
+        value=f"Bearer {access_token}",
+        httponly=True,
+        secure=_is_production(),
+        max_age=86400,
+        samesite="Lax",
+    )
+    return response
+
+
+@auth_blueprint.get("/check-verified")
+def check_verified():
+    email = (request.args.get("email") or "").strip().lower()
+    if not email:
+        return jsonify({"detail": "email مطلوب"}), 400
+
+    user = _run(auth_db.get_user_by_email_unverified(email))
+    if not user:
+        return jsonify({"detail": "المستخدم غير موجود"}), 404
+
+    if user.get("is_verified"):
+        return jsonify({"verified": True})
+
+    try:
+        from .nova_client import nova_client
+
+        if nova_client.is_configured:
+            remote_verified = _run(nova_client.check_verified(email))
+            if remote_verified:
+                _run(auth_db.set_user_verified(user["id"]))
+                return jsonify({"verified": True})
+    except Exception:
+        pass
+
+    return jsonify({"verified": False})
+
+
+@auth_blueprint.delete("/delete-account")
+def delete_account():
+    user, error_response = _get_current_user_or_error()
+    if error_response:
+        return error_response
+
+    _run(auth_db.delete_user_account(user["id"]))
+    response = make_response(
+        jsonify({"status": "success", "message": "تم حذف الحساب نهائياً"})
+    )
+    response.delete_cookie("access_token")
+    return response

static/css/style.css

@@ -2621,6 +2621,17 @@ body.no-waveform .waveform-canvas {
 .auth-footer {
   margin-top: 10px;
 }
+.auth-standalone {
+  max-width: 460px;
+}
+.auth-page-panel {
+  margin-top: 10px;
+}
+.auth-switch-line {
+  margin-top: 14px;
+  font-size: 0.82rem;
+  color: var(--text-secondary);
+}
 
 /* ============================================
    RESPONSIVE ADJUSTMENTS (Phase 3)

static/js/auth-pages.js

@@ -0,0 +1,140 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const $ = (id) => document.getElementById(id);
+  const toastEl = $('toast');
+
+  function showToast(msg, type = '') {
+    if (!toastEl) return;
+    toastEl.textContent = msg;
+    toastEl.className = 'toast' + (type ? ' ' + type : '');
+    toastEl.classList.add('visible');
+    setTimeout(() => toastEl.classList.remove('visible'), 3000);
+  }
+
+  async function authRequest(path, options = {}) {
+    const res = await fetch(path, {
+      credentials: 'include',
+      ...options,
+      headers: {
+        'Content-Type': 'application/json',
+        ...(options.headers || {}),
+      },
+    });
+
+    let payload = null;
+    try {
+      payload = await res.json();
+    } catch (e) {}
+
+    if (!res.ok) {
+      throw new Error(payload?.detail || payload?.error || 'Request failed');
+    }
+    return payload || {};
+  }
+
+  const loginBtn = $('auth-login-submit');
+  if (loginBtn) {
+    loginBtn.addEventListener('click', async () => {
+      try {
+        const email = ($('auth-login-email')?.value || '').trim();
+        const password = $('auth-login-password')?.value || '';
+        await authRequest('/auth/login', {
+          method: 'POST',
+          body: JSON.stringify({ email, password }),
+        });
+        showToast('Login successful', 'success');
+        setTimeout(() => {
+          window.location.href = '/';
+        }, 300);
+      } catch (e) {
+        showToast(e.message || 'Login failed', 'error');
+      }
+    });
+  }
+
+  const signupBtn = $('auth-signup-submit');
+  if (signupBtn) {
+    signupBtn.addEventListener('click', async () => {
+      try {
+        const full_name = ($('auth-signup-name')?.value || '').trim();
+        const email = ($('auth-signup-email')?.value || '').trim();
+        const phone = ($('auth-signup-phone')?.value || '').trim();
+        const password = $('auth-signup-password')?.value || '';
+        await authRequest('/auth/signup', {
+          method: 'POST',
+          body: JSON.stringify({ full_name, email, phone, password }),
+        });
+        showToast('Account created. Continue verification.', 'success');
+        setTimeout(() => {
+          window.location.href = `/verify?email=${encodeURIComponent(email)}`;
+        }, 400);
+      } catch (e) {
+        showToast(e.message || 'Signup failed', 'error');
+      }
+    });
+  }
+
+  const otpEmailInput = $('auth-otp-email');
+  if (otpEmailInput) {
+    const queryEmail = new URLSearchParams(window.location.search).get('email');
+    if (queryEmail) otpEmailInput.value = queryEmail;
+  }
+
+  const requestOtpBtn = $('auth-otp-request');
+  if (requestOtpBtn) {
+    requestOtpBtn.addEventListener('click', async () => {
+      try {
+        const email = ($('auth-otp-email')?.value || '').trim();
+        await authRequest('/auth/request-otp', {
+          method: 'POST',
+          body: JSON.stringify({ email }),
+        });
+        showToast('OTP requested. Check Telegram bot.', 'success');
+      } catch (e) {
+        showToast(e.message || 'OTP request failed', 'error');
+      }
+    });
+  }
+
+  const verifyOtpBtn = $('auth-otp-verify');
+  if (verifyOtpBtn) {
+    verifyOtpBtn.addEventListener('click', async () => {
+      try {
+        const email = ($('auth-otp-email')?.value || '').trim();
+        const code = ($('auth-otp-code')?.value || '').trim();
+        await authRequest('/auth/verify-otp', {
+          method: 'POST',
+          body: JSON.stringify({ email, code }),
+        });
+        showToast('Verified successfully. Redirecting to login.', 'success');
+        setTimeout(() => {
+          window.location.href = '/login';
+        }, 400);
+      } catch (e) {
+        showToast(e.message || 'OTP verification failed', 'error');
+      }
+    });
+  }
+
+  const checkBtn = $('auth-check-verified');
+  if (checkBtn) {
+    checkBtn.addEventListener('click', async () => {
+      try {
+        const email = ($('auth-otp-email')?.value || '').trim();
+        const data = await authRequest(
+          `/auth/check-verified?email=${encodeURIComponent(email)}`,
+          { method: 'GET' },
+        );
+        if (data.verified) {
+          showToast('Account is verified. Go login.', 'success');
+          setTimeout(() => {
+            window.location.href = '/login';
+          }, 300);
+        } else {
+          showToast('Still not verified yet.', 'error');
+        }
+      } catch (e) {
+        showToast(e.message || 'Check failed', 'error');
+      }
+    });
+  }
+});

static/js/script.js

@@ -960,7 +960,9 @@ document.addEventListener('DOMContentLoaded', () => {
   startBtn.addEventListener('click', () => {
     if (!currentUser) {
       showToast('Please login first', 'error');
-      $('auth-modal')?.classList.remove('hidden');
+      setTimeout(() => {
+        window.location.href = '/login';
+      }, 300);
       return;
     }
     onboardingScreen.classList.add('hidden');
@@ -1812,7 +1814,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
   function bindAuthUI() {
     authBtn?.addEventListener('click', () => {
-      $('auth-modal')?.classList.remove('hidden');
+      window.location.href = '/login';
     });
 
     $('auth-close')?.addEventListener('click', () => {

templates/index.html

@@ -516,105 +516,6 @@
       </div>
     </div>
 
-    <!-- ============ AUTH MODAL ============ -->
-    <div class="modal-overlay hidden" id="auth-modal">
-      <div class="modal-card auth-card">
-        <div class="modal-header">
-          <h2>Account</h2>
-          <button class="modal-close" id="auth-close">&times;</button>
-        </div>
-
-        <div class="auth-tabs" id="auth-tabs">
-          <button class="auth-tab active" data-auth-tab="login">Login</button>
-          <button class="auth-tab" data-auth-tab="signup">Sign Up</button>
-        </div>
-
-        <div class="auth-panel" id="auth-login-panel">
-          <input
-            class="voice-input"
-            id="auth-login-email"
-            type="email"
-            placeholder="Email"
-            autocomplete="email"
-          />
-          <input
-            class="voice-input"
-            id="auth-login-password"
-            type="password"
-            placeholder="Password"
-            autocomplete="current-password"
-          />
-          <div class="auth-actions">
-            <button class="btn-primary" id="auth-login-submit">Login</button>
-          </div>
-        </div>
-
-        <div class="auth-panel hidden" id="auth-signup-panel">
-          <input
-            class="voice-input"
-            id="auth-signup-name"
-            type="text"
-            placeholder="Full name"
-            autocomplete="name"
-          />
-          <input
-            class="voice-input"
-            id="auth-signup-email"
-            type="email"
-            placeholder="Email"
-            autocomplete="email"
-          />
-          <input
-            class="voice-input"
-            id="auth-signup-phone"
-            type="text"
-            placeholder="Phone (optional)"
-            autocomplete="tel"
-          />
-          <input
-            class="voice-input"
-            id="auth-signup-password"
-            type="password"
-            placeholder="Password"
-            autocomplete="new-password"
-          />
-          <div class="auth-actions">
-            <button class="btn-primary" id="auth-signup-submit">Create account</button>
-          </div>
-
-          <div class="auth-otp-box">
-            <label class="voice-label" for="auth-otp-email">OTP verification</label>
-            <input
-              class="voice-input"
-              id="auth-otp-email"
-              type="email"
-              placeholder="Email for OTP"
-              autocomplete="email"
-            />
-            <div class="auth-actions">
-              <button class="btn-secondary" id="auth-otp-request">Request OTP</button>
-            </div>
-            <input
-              class="voice-input"
-              id="auth-otp-code"
-              type="text"
-              placeholder="6-digit code"
-              maxlength="6"
-              inputmode="numeric"
-            />
-            <div class="auth-actions">
-              <button class="btn-primary" id="auth-otp-verify">Verify OTP</button>
-            </div>
-          </div>
-        </div>
-
-        <div class="auth-current" id="auth-current"></div>
-        <div class="auth-actions auth-footer">
-          <button class="btn-secondary" id="auth-logout">Logout</button>
-        </div>
-      </div>
-    </div>
-
     <!-- ============ SIDE PANEL (Grammar + Vocab) ============ -->
     <div class="side-panel hidden" id="side-panel">
       <div class="panel-header">

templates/login.html

@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="en" dir="ltr" data-theme="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Login — Echo Tutor</title>
+    <link
+      rel="stylesheet"
+      href="{{ url_for('static', filename='css/style.css') }}"
+    />
+  </head>
+  <body>
+    <canvas id="particles-canvas"></canvas>
+    <div class="toast" id="toast"></div>
+
+    <div class="onboarding-screen">
+      <div class="onboarding-content auth-standalone">
+        <h1 class="onboarding-title">Welcome <span class="accent">Back</span></h1>
+        <p class="onboarding-subtitle">Login to continue your sessions</p>
+
+        <div class="auth-panel auth-page-panel">
+          <input class="voice-input" id="auth-login-email" type="email" placeholder="Email" autocomplete="email" />
+          <input class="voice-input" id="auth-login-password" type="password" placeholder="Password" autocomplete="current-password" />
+          <div class="auth-actions">
+            <button class="btn-primary" id="auth-login-submit">Login</button>
+          </div>
+        </div>
+
+        <p class="auth-switch-line">
+          New here?
+          <a href="/signup" class="accent">Create account</a>
+        </p>
+      </div>
+    </div>
+
+    <script src="{{ url_for('static', filename='js/auth-pages.js') }}"></script>
+  </body>
+</html>

templates/signup.html

@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en" dir="ltr" data-theme="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Sign Up — Echo Tutor</title>
+    <link
+      rel="stylesheet"
+      href="{{ url_for('static', filename='css/style.css') }}"
+    />
+  </head>
+  <body>
+    <canvas id="particles-canvas"></canvas>
+    <div class="toast" id="toast"></div>
+
+    <div class="onboarding-screen">
+      <div class="onboarding-content auth-standalone">
+        <h1 class="onboarding-title">Create <span class="accent">Account</span></h1>
+        <p class="onboarding-subtitle">Step 1: registration</p>
+
+        <div class="auth-panel auth-page-panel">
+          <input class="voice-input" id="auth-signup-name" type="text" placeholder="Full name" autocomplete="name" />
+          <input class="voice-input" id="auth-signup-email" type="email" placeholder="Email" autocomplete="email" />
+          <input class="voice-input" id="auth-signup-phone" type="text" placeholder="Phone (optional)" autocomplete="tel" />
+          <input class="voice-input" id="auth-signup-password" type="password" placeholder="Password" autocomplete="new-password" />
+          <div class="auth-actions">
+            <button class="btn-primary" id="auth-signup-submit">Create account</button>
+          </div>
+        </div>
+
+        <p class="auth-switch-line">
+          Already have account?
+          <a href="/login" class="accent">Login</a>
+        </p>
+      </div>
+    </div>
+
+    <script src="{{ url_for('static', filename='js/auth-pages.js') }}"></script>
+  </body>
+</html>

templates/verify.html

@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en" dir="ltr" data-theme="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Verify OTP — Echo Tutor</title>
+    <link
+      rel="stylesheet"
+      href="{{ url_for('static', filename='css/style.css') }}"
+    />
+  </head>
+  <body>
+    <canvas id="particles-canvas"></canvas>
+    <div class="toast" id="toast"></div>
+
+    <div class="onboarding-screen">
+      <div class="onboarding-content auth-standalone">
+        <h1 class="onboarding-title">Verify <span class="accent">Account</span></h1>
+        <p class="onboarding-subtitle">Step 2: activation via Telegram OTP</p>
+
+        <div class="auth-panel auth-page-panel">
+          <input class="voice-input" id="auth-otp-email" type="email" placeholder="Email for OTP" autocomplete="email" />
+          <div class="auth-actions">
+            <button class="btn-secondary" id="auth-otp-request">Request OTP</button>
+          </div>
+          <input class="voice-input" id="auth-otp-code" type="text" placeholder="6-digit code" maxlength="6" inputmode="numeric" />
+          <div class="auth-actions">
+            <button class="btn-primary" id="auth-otp-verify">Verify OTP</button>
+            <button class="btn-secondary" id="auth-check-verified">Check status</button>
+          </div>
+        </div>
+
+        <p class="auth-switch-line">
+          After verification, go to
+          <a href="/login" class="accent">Login</a>
+        </p>
+      </div>
+    </div>
+
+    <script src="{{ url_for('static', filename='js/auth-pages.js') }}"></script>
+  </body>
+</html>