Deploy full Auth-System-SMTP frontend and backend together in single space

.dockerignore

@@ -1,4 +1,24 @@
-__pycache__
-*.pyc
-*.db
+# Exclude git repository details
 .git
+.gitignore
+
+# Exclude package metadata and docs
+README.md
+DOCKER_GUIDE.md
+
+# Exclude local node modules and build output
+**/node_modules
+**/dist
+frontend/dist
+
+# Exclude local python venv and compiled cache files
+**/.venv
+**/.venv/
+**/__pycache__
+**/*.pyc
+**/*.pyo
+**/*.pyd
+
+# Exclude databases and debug logs
+**/users.db
+**/requests.log

.gitattributes

@@ -1,35 +0,0 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
-*.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz filter=lfs diff=lfs merge=lfs -text
-*.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,31 @@
+# Virtual environment
+.venv/
+venv/
+ENV/
+
+# Python cache files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# Databases and Local logs
+users.db
+requests.log
+
+# Node dependency modules
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Production build output
+frontend/dist/
+dist/
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# Environment secret tokens
+.env
+.env*.local

DOCKER_GUIDE.md

@@ -0,0 +1,36 @@
+# Docker Run Guide 🐳
+
+Here is a quick, point-wise guide on how the SMTP-enabled Docker container stack works and how the components connect together.
+
+## 1. Access Links (Click to Open)
+* 🖥️ **React Frontend**: [http://localhost:5173](http://localhost:5173)
+* ⚙️ **FastAPI Backend (Swagger Docs)**: [http://localhost:8000/docs](http://localhost:8000/docs)
+* 🏠 **Backend API Status**: [http://localhost:8000](http://localhost:8000)
+
+---
+
+## 2. How the Components Connect
+* **Backend (`./backend`)**:
+  * Runs on port `8000`.
+  * Automatically loads your SMTP email settings (email address and Google App Password token) from the `./backend/.env` file.
+  * Captures registration details and emails a 6-digit OTP code to the registered email address.
+* **Frontend (`./frontend`)**:
+  * Runs on port `5173`.
+  * Redirects users to the `/verify-email` screen after registration to enter their OTP.
+  * Connects directly to the backend at `http://localhost:8000` to process validations.
+* **Docker Network & Persistence**:
+  * Docker Compose runs both components in a single network.
+  * The SQLite database is saved on your computer at `./backend/users.db` so accounts are kept safe.
+
+---
+
+## 3. How to Start and Stop
+To run the entire project, execute this command in your terminal:
+```bash
+docker compose up --build
+```
+
+To stop the project, press `CTRL + C` or run:
+```bash
+docker compose down
+```

Dockerfile

@@ -1,8 +1,27 @@
-FROM python:3.10-slim
+# Stage 1: Build the React frontend
+FROM node:18-slim AS frontend-builder
+WORKDIR /frontend
+COPY frontend/package.json ./
+RUN npm install
+COPY frontend/ ./
+RUN npm run build
+
+# Stage 2: Serve via FastAPI backend
+FROM python:3.11-slim
 WORKDIR /app
-COPY requirements.txt .
+
+# Install backend dependencies
+COPY backend/requirements.txt .
 RUN pip install --no-cache-dir -r requirements.txt
-COPY . .
-RUN mkdir -p /app/data
+
+# Copy backend source code
+COPY backend/ .
+
+# Copy static frontend bundle from Stage 1 into the "static" folder
+COPY --from=frontend-builder /frontend/dist ./static
+
+# Expose port 7860 (Hugging Face Spaces default port)
 EXPOSE 7860
-CMD sh -c "uvicorn main:app --host 0.0.0.0 --port ${PORT:-7860}"
+
+# Run uvicorn on port 7860
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -1,12 +1,172 @@
 ---
-title: Auth Backend
-emoji: 🔐
-colorFrom: blue
-colorTo: purple
+title: Secure Auth System
+emoji: 🛡️
+colorFrom: gray
+colorTo: gray
 sdk: docker
 app_port: 7860
+pinned: false
 ---
 
-# Auth Backend API
+# Secure Authentication System with SMTP OTP Verification
 
-FastAPI backend with JWT authentication and OTP email verification.
+A professional, modular authentication system built with **FastAPI** (Python) and **React** (Vite + JavaScript). This version implements secure signup and recovery flows using **Email OTP (One-Time Password) Verification** via Python's built-in SMTP protocols.
+
+---
+
+## 🚀 Key Features
+
+* **SMTP Email Verification**: Creates inactive users on signup, sends a 6-digit OTP to their email, and locks login attempts until the account is verified.
+* **Console Fallback Mode**: If SMTP parameters are not set in `.env`, the server outputs verification codes to the console so you can test the system completely offline!
+* **Secure Forgot Password Recovery**: A 2-step password recovery flow sending OTP codes to users before allowing a credential reset.
+* **Modular Backend Architecture**: Clean separation of models, routes, database, schemas, configs, and helpers.
+* **JWT Access & Refresh Token System**: Implements short-lived access tokens (30 minutes) and long-lived refresh tokens (7 days).
+* **Automatic Token Rotation**: Refreshing your session issues a new access/refresh pair and revokes the old refresh token.
+* **Server-Side Token Revocation (Logout)**: Invalides active tokens immediately on logout by storing them in a SQLite database blacklist.
+* **Bcrypt Password Hashing**: Clean hashing using Python's direct `bcrypt` package to prevent dictionary attacks.
+* **Request Logger & Rate Limiter**: Logs API logs to `requests.log` and restricts traffic per IP address in-memory.
+* **Premium Glassmorphic UI**: Beautiful dark-mode dashboard styled with vanilla CSS and subtle micro-animations.
+
+---
+
+## 🛠️ Technology Stack
+
+* **Backend**: FastAPI, SQLite (Database), SQLAlchemy (ORM), Pydantic (Data Validation), PyJWT/Jose (JWT tokens), Bcrypt, built-in Smtplib.
+* **Frontend**: React, React Router Dom (Routing), Axios (Interceptors for token injection & auto-refresh).
+
+---
+
+## 📁 Project Structure
+
+```
+├── backend/
+│   ├── config.py           # Loads .env configurations
+│   ├── database.py         # SQLAlchemy engine & SQLite session setup
+│   ├── models.py           # User and RevokedToken database models
+│   ├── schemas.py          # Pydantic input/output validation models
+│   ├── auth.py             # Password hashing, JWT dependencies & SMTP mailers
+│   ├── routes/             # Authentication & user routing endpoints
+│   ├── .env                # Secret configurations & SMTP details
+│   ├── requirements.txt    # Python requirements
+│   └── main.py             # FastAPI entry point, logger, & rate-limiting
+└── frontend/
+    ├── package.json        # Frontend dependencies
+    ├── vite.config.js      # Vite dev server configuration
+    ├── index.html          # HTML template
+    └── src/
+        ├── main.jsx        # Renders React root
+        ├── App.jsx         # App router & AuthProvider integration
+        ├── index.css       # Gorgeous dark-glass UI styling
+        ├── api/axios.js    # Axios client with interceptors
+        ├── components/     # Reusable components (Navbar, Guards)
+        ├── context/        # Auth Context provider managing global states
+        └── pages/          # Login, Register, VerifyEmail, and Dashboard views
+```
+
+---
+
+## ⚙️ Setup and Installation
+
+### Option 1: Running with Docker Compose (Recommended)
+You can start the entire stack (React + FastAPI + SQLite) with a single command. Docker Compose will automatically read your SMTP settings from `./backend/.env`.
+
+In the root project folder, run:
+```bash
+docker compose up --build
+```
+* **React Frontend URL**: [http://localhost:5173](http://localhost:5173)
+* **FastAPI Docs URL**: [http://localhost:8000/docs](http://localhost:8000/docs)
+
+To stop the containers:
+```bash
+docker compose down
+```
+
+---
+
+### Option 2: Running Locally
+
+#### 1. Backend Setup
+1. Navigate to the backend directory:
+   ```bash
+   cd backend
+   ```
+2. Create and activate a Python virtual environment:
+   ```bash
+   python3 -m venv .venv
+   source .venv/bin/activate
+   ```
+3. Install dependencies:
+   ```bash
+   pip install -r requirements.txt
+   ```
+4. Copy/create a `.env` file and fill in your SMTP credentials (or leave them blank to use console simulation logs):
+   ```bash
+   uvicorn main:app --reload
+   ```
+
+#### 2. Frontend Setup
+1. In a new terminal, navigate to the frontend directory:
+   ```bash
+   cd frontend
+   ```
+2. Install npm packages:
+   ```bash
+   npm install
+   ```
+3. Run the development server:
+   ```bash
+   npm run dev
+   ```
+
+---
+
+## 📧 Configuring SMTP Server for Real Emails
+
+To make the app send actual emails to your users, edit the `backend/.env` file:
+```env
+SMTP_SERVER=smtp.gmail.com
+SMTP_PORT=587
+SMTP_USER=your_email@gmail.com
+SMTP_PASSWORD=your_google_app_password
+```
+*Note: For security reasons, do not use your primary password. Instead, generate a secure 16-character **App Password** from your Google Account settings.*
+
+---
+
+## 🤗 Deploying to Hugging Face Spaces
+
+You can easily deploy this full-stack application to Hugging Face Spaces using the **Docker** SDK! Since we set up a multi-stage Dockerfile, Hugging Face will compile your React files and run your Python API together on a single port automatically.
+
+### Step-by-Step Deployment Guide:
+1. **Create a Hugging Face Account**: Sign up at [huggingface.co](https://huggingface.co/).
+2. **Create a New Space**:
+   * Click your profile icon -> **New Space**.
+   * Choose a **Space name** (e.g. `secure-auth-smtp`).
+   * Select **Docker** as the SDK.
+   * Choose the **Blank** template.
+   * Click **Create Space**.
+3. **Configure Secret Variables**:
+   * Go to the **Settings** tab of your new Space.
+   * Scroll down to **Variables and secrets**.
+   * Add a new secret for each of the following:
+     * `SECRET_KEY`: (Any secure random text)
+     * `DATABASE_URL`: `sqlite:////app/users.db`
+     * `SMTP_SERVER`: `smtp.gmail.com`
+     * `SMTP_PORT`: `587`
+     * `SMTP_USER`: `your_email@gmail.com`
+     * `SMTP_PASSWORD`: `your_google_app_password_token`
+4. **Push your Repository**:
+   * Clone the Hugging Face space using git, copy all the files from this folder into it, and push:
+     ```bash
+     git add .
+     git commit -m "Initial commit"
+     git push
+     ```
+5. **Ready!**: The space will build automatically and show **Running** once deployed.
+
+---
+
+## 🛡️ License
+
+Distributed under the MIT License. See `LICENSE` for more information.

backend/Dockerfile

@@ -0,0 +1,12 @@
+FROM python:3.11-slim
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+EXPOSE 8000
+
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000"]

backend/__init__.py

@@ -0,0 +1 @@
+# Marks this folder as a Python package

backend/auth.py

@@ -0,0 +1,112 @@
+import bcrypt
+import smtplib
+import os
+from datetime import datetime, timedelta
+from email.mime.text import MIMEText
+from fastapi import Depends, HTTPException, status
+from fastapi.security import OAuth2PasswordBearer
+from jose import jwt, JWTError
+from sqlalchemy.orm import Session
+
+from config import SECRET_KEY, ALGORITHM, ACCESS_TOKEN_EXPIRE_MINUTES, REFRESH_TOKEN_EXPIRE_DAYS, SMTP_SERVER, SMTP_PORT, SMTP_USER, SMTP_PASSWORD
+from database import get_db
+from models import User, RevokedToken
+
+oauth2_scheme = OAuth2PasswordBearer(tokenUrl="/auth/login")
+
+# ─── PASSWORD HASHING ───
+
+def hash_password(password: str) -> str:
+    salt = bcrypt.gensalt()
+    return bcrypt.hashpw(password.encode('utf-8'), salt).decode('utf-8')
+
+def check_password(password: str, hashed_password: str) -> bool:
+    try:
+        return bcrypt.checkpw(password.encode('utf-8'), hashed_password.encode('utf-8'))
+    except Exception:
+        return False
+
+# ─── JWT TOKENS ───
+
+def make_access_token(user_id: int, email: str) -> str:
+    expire = datetime.utcnow() + timedelta(minutes=ACCESS_TOKEN_EXPIRE_MINUTES)
+    data = {"sub": str(user_id), "email": email, "type": "access", "exp": expire}
+    return jwt.encode(data, SECRET_KEY, algorithm=ALGORITHM)
+
+def make_refresh_token(user_id: int) -> str:
+    expire = datetime.utcnow() + timedelta(days=REFRESH_TOKEN_EXPIRE_DAYS)
+    data = {"sub": str(user_id), "type": "refresh", "exp": expire}
+    return jwt.encode(data, SECRET_KEY, algorithm=ALGORITHM)
+
+def get_current_user(token: str = Depends(oauth2_scheme), db: Session = Depends(get_db)) -> User:
+    credentials_exception = HTTPException(
+        status_code=status.HTTP_401_UNAUTHORIZED,
+        detail="Could not validate credentials",
+        headers={"WWW-Authenticate": "Bearer"},
+    )
+
+    revoked = db.query(RevokedToken).filter(RevokedToken.token == token).first()
+    if revoked:
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            detail="Session has expired or you logged out. Please sign in again.",
+            headers={"WWW-Authenticate": "Bearer"},
+        )
+
+    try:
+        payload = jwt.decode(token, SECRET_KEY, algorithms=[ALGORITHM])
+        if payload.get("type") != "access":
+            raise HTTPException(status_code=401, detail="Invalid token type")
+        user_id: str = payload.get("sub")
+        if user_id is None:
+            raise credentials_exception
+    except JWTError:
+        raise credentials_exception
+
+    user = db.query(User).filter(User.id == int(user_id)).first()
+    if user is None:
+        raise HTTPException(status_code=404, detail="User not found")
+    if not user.is_active:
+        raise HTTPException(status_code=400, detail="User account is inactive")
+    if not user.is_verified:
+        raise HTTPException(status_code=400, detail="User email is not verified yet")
+        
+    return user
+
+# ─── SMTP / CONSOLE FALLBACK EMAIL ROUTINE ───
+
+def send_email(to_email: str, subject: str, body: str) -> bool:
+    """
+    Sends an email using built-in smtplib.
+    If SMTP variables are not set in the .env, logs a block in the console so it can still be tested.
+    """
+    # Check if credentials are set
+    if not all([SMTP_SERVER, SMTP_USER, SMTP_PASSWORD]):
+        print(f"\n┌────────────────────────────────────────────────────────┐")
+        print(f"│ [SIMULATION] Email Sent To: {to_email:<27} │")
+        print(f"│ Subject: {subject:<44} │")
+        print(f"│ Code/OTP: {body:<44} │")
+        print(f"└────────────────────────────────────────────────────────┘\n")
+        return True
+
+    try:
+        msg = MIMEText(body)
+        msg["Subject"] = subject
+        msg["From"] = SMTP_USER
+        msg["To"] = to_email
+
+        # Start standard TLS connection on port 587 with a 5-second timeout
+        with smtplib.SMTP(SMTP_SERVER, SMTP_PORT, timeout=5) as server:
+            server.starttls()
+            server.login(SMTP_USER, SMTP_PASSWORD)
+            server.send_message(msg)
+        return True
+    except Exception as e:
+        # Print error details and output code to console so server doesn't crash
+        print(f"\n[SMTP ERROR] Sending failed: {e}")
+        print(f"┌────────────────────────────────────────────────────────┐")
+        print(f"│ [SIMULATION FALLBACK] Email To: {to_email:<22} │")
+        print(f"│ Subject: {subject:<44} │")
+        print(f"│ Code/OTP: {body:<44} │")
+        print(f"└────────────────────────────────────────────────────────┘\n")
+        return False

backend/config.py

@@ -0,0 +1,19 @@
+import os
+from dotenv import load_dotenv
+
+load_dotenv()
+
+# JWT Token Settings
+SECRET_KEY = os.getenv("SECRET_KEY", "super_secret_dev_key_change_me_123456789")
+ALGORITHM = os.getenv("ALGORITHM", "HS256")
+ACCESS_TOKEN_EXPIRE_MINUTES = int(os.getenv("ACCESS_TOKEN_EXPIRE_MINUTES", "30"))
+REFRESH_TOKEN_EXPIRE_DAYS = int(os.getenv("REFRESH_TOKEN_EXPIRE_DAYS", "7"))
+
+# Database Settings
+DATABASE_URL = os.getenv("DATABASE_URL", "sqlite:///./users.db")
+
+# SMTP Mail Server Settings (Loads credentials to send real OTP verification emails)
+SMTP_SERVER = os.getenv("SMTP_SERVER", "")
+SMTP_PORT = int(os.getenv("SMTP_PORT", "587"))
+SMTP_USER = os.getenv("SMTP_USER", "")
+SMTP_PASSWORD = os.getenv("SMTP_PASSWORD", "")

backend/database.py

@@ -0,0 +1,18 @@
+from sqlalchemy import create_engine
+from sqlalchemy.orm import sessionmaker, DeclarativeBase
+from config import DATABASE_URL
+
+connect_args = {"check_same_thread": False} if DATABASE_URL.startswith("sqlite") else {}
+
+engine = create_engine(DATABASE_URL, connect_args=connect_args)
+SessionLocal = sessionmaker(bind=engine, autoflush=False, autocommit=False)
+
+class Base(DeclarativeBase):
+    pass
+
+def get_db():
+    db = SessionLocal()
+    try:
+        yield db
+    finally:
+        db.close()

backend/main.py

@@ -0,0 +1,103 @@
+import time
+import os
+from datetime import datetime
+from fastapi import FastAPI, Request
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import JSONResponse, HTMLResponse
+from fastapi.staticfiles import StaticFiles
+
+from database import engine, Base
+from routes import auth_routes, user_routes
+
+Base.metadata.create_all(bind=engine)
+
+app = FastAPI(
+    title="SMTP-Enabled Authentication System",
+    description="A beginner-friendly secure authentication system with modular routes and email verification.",
+    version="1.0.0"
+)
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["http://localhost:5173", "http://localhost:3000"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# ─── SIMPLE RATE LIMITING & REQUEST LOGGING ───
+
+RATE_LIMIT_WINDOW = 60
+RATE_LIMIT_MAX = 60
+client_requests = {}
+
+@app.middleware("http")
+async def rate_limiting_and_logging_middleware(request: Request, call_next):
+    client_ip = request.client.host if request.client else "unknown"
+    now = time.time()
+    
+    if client_ip not in client_requests:
+        client_requests[client_ip] = []
+        
+    client_requests[client_ip] = [t for t in client_requests[client_ip] if now - t < RATE_LIMIT_WINDOW]
+    
+    if len(client_requests[client_ip]) >= RATE_LIMIT_MAX:
+        return JSONResponse(
+            status_code=429,
+            content={"detail": "Too many requests. Please slow down and try again in a minute."}
+        )
+    
+    client_requests[client_ip].append(now)
+    start_time = time.time()
+    
+    try:
+        response = await call_next(request)
+    except Exception as exc:
+        log_line = f"{datetime.utcnow().isoformat()} - {client_ip} - {request.method} {request.url.path} - ERROR: {str(exc)}\n"
+        with open("requests.log", "a") as log_file:
+            log_file.write(log_line)
+            
+        return JSONResponse(
+            status_code=500,
+            content={"detail": "An internal server error occurred. Please contact the administrator."}
+        )
+        
+    duration = time.time() - start_time
+    
+    log_line = (
+        f"{datetime.utcnow().isoformat()} - IP: {client_ip} - "
+        f"{request.method} {request.url.path} - Status: {response.status_code} - "
+        f"Took: {duration:.4f}s\n"
+    )
+    
+    with open("requests.log", "a") as log_file:
+        log_file.write(log_line)
+        
+    return response
+
+app.include_router(auth_routes.router)
+app.include_router(user_routes.router)
+
+@app.get("/api")
+def home():
+    return {
+        "status": "online",
+        "message": "Welcome to the SMTP Auth API! Go to /docs to test all endpoints."
+    }
+
+# ─── SERVE FRONTEND STATIC FILES (HF Spaces & Production) ───
+if os.path.exists("static"):
+    app.mount("/", StaticFiles(directory="static", html=True), name="static")
+
+# ─── SPA FALLBACK HANDLER (Serves React Router paths on direct visits/refreshes) ───
+@app.exception_handler(404)
+async def spa_fallback_404_handler(request: Request, exc: Exception):
+    # If the request is not an API call, serve the frontend index.html
+    path = request.url.path
+    if not path.startswith("/auth") and not path.startswith("/admin") and path != "/api":
+        if os.path.exists("static/index.html"):
+            with open("static/index.html", "r") as f:
+                return HTMLResponse(content=f.read(), status_code=200)
+    return JSONResponse(status_code=404, content={"detail": "Not Found"})
+
+

backend/models.py

@@ -0,0 +1,27 @@
+from sqlalchemy import Column, Integer, String, Boolean, DateTime
+from datetime import datetime
+from database import Base
+
+class User(Base):
+    __tablename__ = "users"
+
+    id = Column(Integer, primary_key=True, index=True)
+    username = Column(String, unique=True, index=True, nullable=False)
+    email = Column(String, unique=True, index=True, nullable=False)
+    password = Column(String, nullable=False)
+    is_active = Column(Boolean, default=True)
+    role = Column(String, default="user")
+    created_at = Column(DateTime, default=datetime.utcnow)
+
+    # ─── Verification Columns for SMTP Flow ───
+    is_verified = Column(Boolean, default=False)      # must be True before login is allowed
+    verification_code = Column(String, nullable=True) # stores the active registration OTP code
+    reset_code = Column(String, nullable=True)        # stores the active forgot password OTP code
+
+class RevokedToken(Base):
+    __tablename__ = "revoked_tokens"
+
+    id = Column(Integer, primary_key=True, index=True)
+    token = Column(String, unique=True, index=True, nullable=False)
+    revoked_at = Column(DateTime, default=datetime.utcnow)
+    expires_at = Column(DateTime, nullable=False)

backend/requirements.txt

@@ -0,0 +1,8 @@
+fastapi>=0.110.0
+uvicorn[standard]>=0.28.0
+sqlalchemy>=2.0.0
+bcrypt>=4.1.0
+python-jose[cryptography]>=3.3.0
+pydantic[email]>=2.6.0
+python-dotenv>=1.0.0
+python-multipart>=0.0.9

backend/routes/__init__.py

@@ -0,0 +1 @@
+# Marks this folder as a Python package

backend/routes/auth_routes.py

@@ -0,0 +1,199 @@
+import random
+from datetime import datetime
+from fastapi import APIRouter, Depends, HTTPException, status
+from fastapi.security import OAuth2PasswordRequestForm
+from jose import jwt, JWTError
+from sqlalchemy.orm import Session
+
+from config import SECRET_KEY, ALGORITHM
+from database import get_db
+from models import User, RevokedToken
+from schemas import RegisterInput, TokenOutput, RefreshInput, UserOutput, VerifyEmailInput, ForgotPasswordRequest, PasswordResetInput
+from auth import hash_password, check_password, make_access_token, make_refresh_token, oauth2_scheme, get_current_user, send_email
+
+router = APIRouter(prefix="/auth", tags=["Authentication"])
+
+def validate_password_strength(password: str):
+    if len(password) < 8:
+        raise HTTPException(status_code=400, detail="Password must be at least 8 characters long.")
+    if not any(char.isdigit() for char in password):
+        raise HTTPException(status_code=400, detail="Password must contain at least one number.")
+    if not any(char.isalpha() for char in password):
+        raise HTTPException(status_code=400, detail="Password must contain at least one letter.")
+
+def generate_otp() -> str:
+    """Generates a 6-digit numeric string OTP."""
+    return "".join(random.choices("0123456789", k=6))
+
+@router.post("/register", response_model=UserOutput, status_code=201)
+def register(data: RegisterInput, db: Session = Depends(get_db)):
+    """Registers an inactive user and sends a verification code via email."""
+    validate_password_strength(data.password)
+
+    if db.query(User).filter(User.username == data.username).first():
+        raise HTTPException(status_code=400, detail="Username is already taken")
+    if db.query(User).filter(User.email == data.email).first():
+        raise HTTPException(status_code=400, detail="Email is already registered")
+
+    # Generate 6-digit verification code
+    otp_code = generate_otp()
+
+    new_user = User(
+        username=data.username,
+        email=data.email,
+        password=hash_password(data.password),
+        is_verified=False,
+        verification_code=otp_code
+    )
+
+    db.add(new_user)
+    db.commit()
+    db.refresh(new_user)
+
+    # Send verification email
+    send_email(
+        to_email=new_user.email,
+        subject="Email Verification Code",
+        body=otp_code
+    )
+
+    return new_user
+
+@router.post("/verify-email")
+def verify_email(data: VerifyEmailInput, db: Session = Depends(get_db)):
+    """Verifies user's email using the registration OTP code."""
+    user = db.query(User).filter(User.email == data.email).first()
+    if not user:
+        raise HTTPException(status_code=404, detail="User not found")
+
+    if user.is_verified:
+        return {"detail": "Email already verified. You can sign in."}
+
+    if user.verification_code != data.code:
+        raise HTTPException(status_code=400, detail="Invalid verification code")
+
+    # Mark as verified
+    user.is_verified = True
+    user.verification_code = None
+    db.commit()
+
+    return {"detail": "Email verified successfully! You can now sign in."}
+
+@router.post("/login", response_model=TokenOutput)
+def login(form_data: OAuth2PasswordRequestForm = Depends(), db: Session = Depends(get_db)):
+    """Logs in verified users and returns JWT tokens."""
+    user = db.query(User).filter(User.username == form_data.username).first()
+    
+    if not user or not check_password(form_data.password, user.password):
+        raise HTTPException(status_code=status.HTTP_401_UNAUTHORIZED, detail="Incorrect username or password")
+        
+    if not user.is_active:
+        raise HTTPException(status_code=400, detail="User account is deactivated")
+
+    # Strict check: User must be verified
+    if not user.is_verified:
+        raise HTTPException(
+            status_code=status.HTTP_400_BAD_REQUEST, 
+            detail="Email is not verified. Please verify your email first."
+        )
+
+    access = make_access_token(user.id, user.email)
+    refresh = make_refresh_token(user.id)
+    
+    return TokenOutput(access_token=access, refresh_token=refresh)
+
+@router.post("/forgot-password")
+def forgot_password(data: ForgotPasswordRequest, db: Session = Depends(get_db)):
+    """Generates a password reset OTP and sends it via email."""
+    user = db.query(User).filter(User.email == data.email).first()
+    
+    # Simple security practice: don't expose if email exists or not, but for basic debugging 404 is user-friendly.
+    if not user:
+        raise HTTPException(status_code=404, detail="Email not found")
+
+    otp_code = generate_otp()
+    user.reset_code = otp_code
+    db.commit()
+
+    send_email(
+        to_email=user.email,
+        subject="Password Reset Request Code",
+        body=otp_code
+    )
+
+    return {"detail": "Verification code has been sent to your email."}
+
+@router.post("/reset-password")
+def reset_password(data: PasswordResetInput, db: Session = Depends(get_db)):
+    """Validates the reset OTP and updates the password."""
+    validate_password_strength(data.new_password)
+
+    user = db.query(User).filter(User.email == data.email).first()
+    if not user:
+        raise HTTPException(status_code=404, detail="User not found")
+
+    if user.reset_code != data.code:
+        raise HTTPException(status_code=400, detail="Invalid password reset code")
+
+    user.password = hash_password(data.new_password)
+    user.reset_code = None
+    db.commit()
+
+    return {"detail": "Password has been reset successfully."}
+
+@router.post("/refresh", response_model=TokenOutput)
+def refresh(data: RefreshInput, db: Session = Depends(get_db)):
+    try:
+        payload = jwt.decode(data.refresh_token, SECRET_KEY, algorithms=[ALGORITHM])
+        if payload.get("type") != "refresh":
+            raise HTTPException(status_code=401, detail="Invalid token type")
+        user_id = int(payload.get("sub"))
+        exp_timestamp = payload.get("exp")
+        expires_at = datetime.utcfromtimestamp(exp_timestamp)
+    except JWTError:
+        raise HTTPException(status_code=401, detail="Refresh token is expired or invalid")
+
+    revoked = db.query(RevokedToken).filter(RevokedToken.token == data.refresh_token).first()
+    if revoked:
+        raise HTTPException(status_code=401, detail="Refresh token has been revoked")
+
+    user = db.query(User).filter(User.id == user_id).first()
+    if not user or not user.is_active or not user.is_verified:
+        raise HTTPException(status_code=401, detail="User not found, inactive, or unverified")
+
+    db_revoked = RevokedToken(token=data.refresh_token, expires_at=expires_at)
+    db.add(db_revoked)
+
+    access = make_access_token(user.id, user.email)
+    new_refresh = make_refresh_token(user.id)
+    
+    db.commit()
+    return TokenOutput(access_token=access, refresh_token=new_refresh)
+
+@router.post("/logout")
+def logout(
+    data: RefreshInput = None,
+    access_token: str = Depends(oauth2_scheme), 
+    db: Session = Depends(get_db),
+    current_user: User = Depends(get_current_user)
+):
+    try:
+        payload = jwt.decode(access_token, SECRET_KEY, algorithms=[ALGORITHM])
+        exp = datetime.utcfromtimestamp(payload.get("exp"))
+    except JWTError:
+        exp = datetime.utcnow() + datetime.timedelta(minutes=30)
+
+    if not db.query(RevokedToken).filter(RevokedToken.token == access_token).first():
+        db.add(RevokedToken(token=access_token, expires_at=exp))
+
+    if data and data.refresh_token:
+        try:
+            r_payload = jwt.decode(data.refresh_token, SECRET_KEY, algorithms=[ALGORITHM])
+            r_exp = datetime.utcfromtimestamp(r_payload.get("exp"))
+            if not db.query(RevokedToken).filter(RevokedToken.token == data.refresh_token).first():
+                db.add(RevokedToken(token=data.refresh_token, expires_at=r_exp))
+        except JWTError:
+            pass
+
+    db.commit()
+    return {"detail": "Successfully logged out and session revoked"}

backend/routes/user_routes.py

@@ -0,0 +1,57 @@
+from fastapi import APIRouter, Depends, HTTPException, status
+from sqlalchemy.orm import Session
+from typing import List
+
+from database import get_db
+from models import User
+from schemas import UserOutput, ProfileUpdateInput
+from auth import get_current_user, hash_password
+from routes.auth_routes import validate_password_strength
+
+router = APIRouter(tags=["User Management"])
+
+@router.get("/me", response_model=UserOutput)
+def get_profile(current_user: User = Depends(get_current_user)):
+    return current_user
+
+@router.put("/me", response_model=UserOutput)
+def update_profile(
+    data: ProfileUpdateInput, 
+    db: Session = Depends(get_db), 
+    current_user: User = Depends(get_current_user)
+):
+    if data.username and data.username != current_user.username:
+        existing = db.query(User).filter(User.username == data.username).first()
+        if existing:
+            raise HTTPException(status_code=400, detail="Username is already taken")
+        current_user.username = data.username
+
+    if data.email and data.email != current_user.email:
+        existing = db.query(User).filter(User.email == data.email).first()
+        if existing:
+            raise HTTPException(status_code=400, detail="Email is already registered")
+        current_user.email = data.email
+
+    if data.password:
+        validate_password_strength(data.password)
+        current_user.password = hash_password(data.password)
+
+    db.commit()
+    db.refresh(current_user)
+    return current_user
+
+@router.delete("/me", status_code=200)
+def delete_account(db: Session = Depends(get_db), current_user: User = Depends(get_current_user)):
+    db.delete(current_user)
+    db.commit()
+    return {"detail": "Account deleted successfully"}
+
+@router.get("/admin/users", response_model=List[UserOutput])
+def get_all_users_admin(db: Session = Depends(get_db), current_user: User = Depends(get_current_user)):
+    if current_user.role != "admin":
+        raise HTTPException(
+            status_code=status.HTTP_403_FORBIDDEN,
+            detail="Forbidden: Admin access required"
+        )
+    users = db.query(User).all()
+    return users

backend/schemas.py

@@ -0,0 +1,45 @@
+from pydantic import BaseModel, EmailStr, Field
+from typing import Optional
+
+class RegisterInput(BaseModel):
+    username: str = Field(..., min_length=3, max_length=50)
+    email: EmailStr
+    password: str = Field(..., min_length=8)
+
+class TokenOutput(BaseModel):
+    access_token: str
+    refresh_token: str
+    token_type: str = "bearer"
+
+class RefreshInput(BaseModel):
+    refresh_token: str
+
+class UserOutput(BaseModel):
+    id: int
+    username: str
+    email: str
+    role: str
+    is_active: bool
+    is_verified: bool
+
+    class Config:
+        from_attributes = True
+
+class ProfileUpdateInput(BaseModel):
+    username: Optional[str] = Field(None, min_length=3, max_length=50)
+    email: Optional[EmailStr] = None
+    password: Optional[str] = Field(None, min_length=8)
+
+# ─── SMTP ROUTE SCHEMAS ───
+
+class VerifyEmailInput(BaseModel):
+    email: EmailStr
+    code: str = Field(..., min_length=6, max_length=6, description="6-digit verification code")
+
+class ForgotPasswordRequest(BaseModel):
+    email: EmailStr
+
+class PasswordResetInput(BaseModel):
+    email: EmailStr
+    code: str = Field(..., min_length=6, max_length=6, description="6-digit reset code")
+    new_password: str = Field(..., min_length=8, description="Must be at least 8 characters")

docker-compose.yml

@@ -0,0 +1,27 @@
+version: '3.8'
+
+services:
+  backend:
+    build: ./backend
+    ports:
+      - "8000:8000"
+    volumes:
+      - ./backend:/app
+    # Load SMTP settings and key variables from backend/.env automatically
+    env_file:
+      - ./backend/.env
+    # Override DATABASE_URL so it uses the container path
+    environment:
+      - DATABASE_URL=sqlite:////app/users.db
+    restart: always
+
+  frontend:
+    build: ./frontend
+    ports:
+      - "5173:5173"
+    volumes:
+      - ./frontend:/app
+      - /app/node_modules
+    depends_on:
+      - backend
+    restart: always

frontend/Dockerfile

@@ -0,0 +1,12 @@
+FROM node:18-slim
+
+WORKDIR /app
+
+COPY package.json .
+RUN npm install
+
+COPY . .
+
+EXPOSE 5173
+
+CMD ["npm", "run", "dev", "--", "--host"]

frontend/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236366f1'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Secure Auth System (SMTP)</title>
+    <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=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

frontend/package-lock.json

@@ -0,0 +1,2029 @@
+{
+  "name": "auth-frontend-smtp",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "auth-frontend-smtp",
+      "version": "1.0.0",
+      "dependencies": {
+        "axios": "^1.7.2",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "react-router-dom": "^6.24.0"
+      },
+      "devDependencies": {
+        "@vitejs/plugin-react": "^4.3.1",
+        "vite": "^5.3.1"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz",
+      "integrity": "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.7.tgz",
+      "integrity": "sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.7.tgz",
+      "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.7",
+        "@babel/helper-compilation-targets": "^7.29.7",
+        "@babel/helper-module-transforms": "^7.29.7",
+        "@babel/helpers": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/template": "^7.29.7",
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7",
+        "@jridgewell/remapping": "^2.3.5",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.7.tgz",
+      "integrity": "sha512-DkXD5OJQaAQIdZ1bt3UZdEnHAn9Imd3IVBdX03UFe+ony9Ojw5pzr9YVKGDY1jt+Gcn/FnGkNf8r+Vj5NOJWtQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.7",
+        "@babel/types": "^7.29.7",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.29.7.tgz",
+      "integrity": "sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.29.7",
+        "@babel/helper-validator-option": "^7.29.7",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.29.7.tgz",
+      "integrity": "sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.29.7.tgz",
+      "integrity": "sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.29.7.tgz",
+      "integrity": "sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "@babel/traverse": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.29.7.tgz",
+      "integrity": "sha512-G7sHYigPY17oO5SYWnfD/0MTBwVR781S/JI643e/JhUYgVgWE/61SoW3NH9KWUKyKq5LVh3npif99Wkt6j86Jw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz",
+      "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz",
+      "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.29.7.tgz",
+      "integrity": "sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.7.tgz",
+      "integrity": "sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.7.tgz",
+      "integrity": "sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.29.7"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-self": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.29.7.tgz",
+      "integrity": "sha512-TL0hMc9xzy86VD31nUiwzd5otRAcyEPcsegCxolO0PvcXuH1v0kECe/UIznYFihpkvU5wg/jk4v0TTEFfm53fw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-source": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.29.7.tgz",
+      "integrity": "sha512-06IyK09H3wi4cGbhDBwp5gUGo0IKtnYa8tyTiephirPCK6fbobVGiXMMI5zLQ4aKEYP3wZ3ArU44o+8KMrSG/Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.29.7.tgz",
+      "integrity": "sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.7.tgz",
+      "integrity": "sha512-EhlfNQtZ+NK22w5BM61ciuiq1m58ed33Wr1Xan//ZRTy6hgjnwyCffRYwzsGXdASJSUJ1guZILsErh1eQcl+zw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.7",
+        "@babel/helper-globals": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.7",
+        "debug": "^4.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.7.tgz",
+      "integrity": "sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
+      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
+      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
+      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
+      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
+      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
+      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
+      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
+      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
+      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
+      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
+      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
+      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
+      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
+      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
+      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
+      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
+      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
+      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
+      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@remix-run/router": {
+      "version": "1.23.3",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.3.tgz",
+      "integrity": "sha512-4An71tdz9X8+3sI4Qqqd2LWd9vS39J7sqd9EU4Scw7TJE/qB10Flv/UuqbPVgfQV9XoK8Np6jNquZitnZq5i+Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-beta.27",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz",
+      "integrity": "sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.62.0.tgz",
+      "integrity": "sha512-IPIQ55ythEHkfEd9jMEi32OQ7SxURsGA43JI22lj01OLZNt2NUbJX8YUHxkVWyQ6daHPNn0truF5nSj3DQp6YQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.62.0.tgz",
+      "integrity": "sha512-M6s9cr10MibETyo8JsOkq+Lo1+lU6hcvb1MApnUql5qte/5hMEgzlN8/ReIKNfRV8rrqX50W1BX9zoUhC192RA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.62.0.tgz",
+      "integrity": "sha512-BqCoMoIbn0keKys+dEAdBa70EtOwV1bEsQCUgU9FdiZmmMge/Zk7LlkYGqbrdHR+Frnt0E1FOanly+rlwvvQzw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.62.0.tgz",
+      "integrity": "sha512-SIMzST3VFNXDAbeIWDWiFCNM5qncUBDWaEV7NfE7oZbDt2mgfW4MvbKdbYiGOLoM32gbTv608UMd0XktEYSD7w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.62.0.tgz",
+      "integrity": "sha512-ezjfSQMP7ArdUsbBwbQIfwAlhE84I2iVnzQNCFSveqV42q+BmKlzVpf7mxv5EchLcoWU4y6/heFzVg1F+hodUQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.62.0.tgz",
+      "integrity": "sha512-9+qTWGW9AZRhnUgwtTwzNwcPlL87ngkeN0LA+q1bADvmY9aNvWaF2TFW8BZgnQPYxpDI7+rMVLivcd4V737TAQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.62.0.tgz",
+      "integrity": "sha512-T1dMEQhXA/jkJ/jyMIw9IovK8bSUq7A8kLIlvZTb/6YIVsp2zLavr4F3oyllHWo7eIVJRyE5n3tUjQJEbE1IuQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.62.0.tgz",
+      "integrity": "sha512-2as0LgT7qQpyceQq6VUJYnumUMUrgGQCWIiDIN9DE0/tglsk6o66uCB4f3djRawAltvfCNLyZZrsqbPA6inCsA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.62.0.tgz",
+      "integrity": "sha512-bVURMg+6eNN9C/yc0aVjooZcwTTtYF4YW3xta5pP0//r3o1V8gXEHXWCndj47w/HhwsFroZrFhR+6uQP5T0n0g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.62.0.tgz",
+      "integrity": "sha512-Ful8pM/2yYI83PViWdFdpZhdI8HJ5qsXANe5atypbHDf+KIBBDsZsbyy8hbXnULVvW9NsTh5DHwbcBftyLTfiw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-gnu": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.62.0.tgz",
+      "integrity": "sha512-9Gp/DgrkzfUBmNPVTyPTvay+4xEP7M/clXpj3efXBcm6uTIVIgDg4rqUpqKXvLEuFRVuEpSAOkhgNeecvaZ4Cg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-musl": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.62.0.tgz",
+      "integrity": "sha512-m9tsJz54LUXkSYM8+8PG81B9IKK5r+2T0clMq4QrS16xFosufU7firBDAZEsDheDs7wTlP7h3++S7lMsU955HA==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.62.0.tgz",
+      "integrity": "sha512-3UvJ5PNVU16aJf6M3tFI24pWzAl2/ynfbyRN3ICyQajK1lSkrnVYNnLz3v04J32qKa0FczJc22zeToc0lr2A3w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-musl": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.62.0.tgz",
+      "integrity": "sha512-vRWUAbYLGHBZS6Q8Msb2sfnf1fvJf+47t8l/TwOerM2qArzy+IeNMTHrYLHXh95h8MoatPHI5hhSZNs+mGXKPg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.62.0.tgz",
+      "integrity": "sha512-c00T5SYENHAt86cfW47URaP3Us5vLC/4QO7GYud1G5VNRffCwwCuBspwqYrriuJB+5m0WFzClCn9wed0FBjKvg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.62.0.tgz",
+      "integrity": "sha512-krrCDilhXOwFkSkO3Wm9I/f9H0L92XHHwy2fwxjukxIbh0dem8gZqOW5Y8BsHrpJv5qwlRBV+Wl4ZFyRWhUpwg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.62.0.tgz",
+      "integrity": "sha512-7pfYFSTc4/rUC/FtAI0Qp6QthDBCIi6/AuP1xYqFk5vanI6KnL5dWKP60OM/05LOsbwTmIcvr6eXC4CJuJ75IA==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.62.0.tgz",
+      "integrity": "sha512-7SDIalKeIpG0Ifogbbdn58HmSotYMlf23K3dCJEmiVd9Fg36Vmni82iPQec27N3wY4Bvbxftkxz6vSx9OcouTg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.62.0.tgz",
+      "integrity": "sha512-eRZevouTH2i1HeAVLqJuLnt256krQkGY0TN6WsTmsIhuzbh457HuWDMakKwmi0Cjadux983CoSr8Lim2QhUIFw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-openbsd-x64": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.62.0.tgz",
+      "integrity": "sha512-3oVS7FLGa4U1qcvao9ylGxrjXZyUQqR8UwxEcnUEyPX53O/C/mKDZegNXTdHCP+h3e6ta/f1EN38Yif1mmZHYg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-openharmony-arm64": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.62.0.tgz",
+      "integrity": "sha512-yTB9TgfWj5wHe5QgktAgXTLLot1gvEjl1NiPPAUiCs4oPrIWFl5V4nC3GrkNdj9LaAU4s94nVrGbGOCqUpyWsg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.62.0.tgz",
+      "integrity": "sha512-5LOhoaesY3doG1c+ac/2JtgREpKoJr5bUHH8tKY0V8di7+uSV6BwLs2PlR0/yzefGOkR+wE7ZolZphHCsyG5Rw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.62.0.tgz",
+      "integrity": "sha512-yYkWHhmbhRTWTnWos5HC4GcPQfjlzzCNbM9e/+GXrLuaBXYA3qSDR9f0Vgufd5S8yX81U8jPKp7ZnAjZFMtRnw==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-gnu": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.62.0.tgz",
+      "integrity": "sha512-SoTb6lPg25xZlA2ibwQ++ahCCnH+FP0qmEuafMJ4gznZKOlXioKEAeJLgCrqjM98ACziXM9V1amFjICVL4IFoA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.62.0.tgz",
+      "integrity": "sha512-5L+T1fMX4RIEBoZzT0+sQ0PhTS36NULFmMXtl1TZo44TMAROIMHbZufSOjVWt/Y622BtxgxtaNOokbTDvfsrZA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@types/babel__core": {
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
+      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
+      }
+    },
+    "node_modules/@types/babel__generator": {
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.27.0.tgz",
+      "integrity": "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__template": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
+      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__traverse": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.28.0.tgz",
+      "integrity": "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.2"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
+      "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz",
+      "integrity": "sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.28.0",
+        "@babel/plugin-transform-react-jsx-self": "^7.27.1",
+        "@babel/plugin-transform-react-jsx-source": "^7.27.1",
+        "@rolldown/pluginutils": "1.0.0-beta.27",
+        "@types/babel__core": "^7.20.5",
+        "react-refresh": "^0.17.0"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
+      }
+    },
+    "node_modules/agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
+    "node_modules/axios": {
+      "version": "1.18.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.18.0.tgz",
+      "integrity": "sha512-E32NzpYKp++W7XRe52rHiXV2ehxmh3wbdgO7MHeFM+vqxLBYHzt0ElkiImtOBxtOmyp0yoC8C6uESVV84Y2/hw==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.16.0",
+        "form-data": "^4.0.5",
+        "https-proxy-agent": "^5.0.1",
+        "proxy-from-env": "^2.1.0"
+      }
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.10.37",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.37.tgz",
+      "integrity": "sha512-girxaJ7WZssDOFhzCGZTDKoTa1gk6A1TbflaYTpykLJ4UU9Fz9kx1aREM8JCuoVHbL8X8T/mJg7w2oYSq72Oig==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.28.2",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.2.tgz",
+      "integrity": "sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "baseline-browser-mapping": "^2.10.12",
+        "caniuse-lite": "^1.0.30001782",
+        "electron-to-chromium": "^1.5.328",
+        "node-releases": "^2.0.36",
+        "update-browserslist-db": "^1.2.3"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001799",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001799.tgz",
+      "integrity": "sha512-hG1bReV+OUU+MOqK4t/ZWI0tZOyz3rqS9XuhOUz1cIcbwBKjOyJEJuw9ER5JuNyqxNk8u/JUVbGibBOL1yrjFw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.372",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.372.tgz",
+      "integrity": "sha512-M3yhbAlilnwqC8D21t28UCDGHyitShTmmLRU/H+b74P6Ski16Nb9HONYEaVpMj/pwC7BEo5B95FpjODLCWbtfA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.2.tgz",
+      "integrity": "sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
+      "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.21.5",
+        "@esbuild/android-arm": "0.21.5",
+        "@esbuild/android-arm64": "0.21.5",
+        "@esbuild/android-x64": "0.21.5",
+        "@esbuild/darwin-arm64": "0.21.5",
+        "@esbuild/darwin-x64": "0.21.5",
+        "@esbuild/freebsd-arm64": "0.21.5",
+        "@esbuild/freebsd-x64": "0.21.5",
+        "@esbuild/linux-arm": "0.21.5",
+        "@esbuild/linux-arm64": "0.21.5",
+        "@esbuild/linux-ia32": "0.21.5",
+        "@esbuild/linux-loong64": "0.21.5",
+        "@esbuild/linux-mips64el": "0.21.5",
+        "@esbuild/linux-ppc64": "0.21.5",
+        "@esbuild/linux-riscv64": "0.21.5",
+        "@esbuild/linux-s390x": "0.21.5",
+        "@esbuild/linux-x64": "0.21.5",
+        "@esbuild/netbsd-x64": "0.21.5",
+        "@esbuild/openbsd-x64": "0.21.5",
+        "@esbuild/sunos-x64": "0.21.5",
+        "@esbuild/win32-arm64": "0.21.5",
+        "@esbuild/win32-ia32": "0.21.5",
+        "@esbuild/win32-x64": "0.21.5"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/follow-redirects": {
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.16.0.tgz",
+      "integrity": "sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.6.tgz",
+      "integrity": "sha512-vKatAh4SlVfgbv+YtmhiRjhEMJsYpsG1Y2rMQtR+SVSbytsSD1YGzDIcrAJmdFec88u/+VoGmxnl+80gL1tRCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.4",
+        "mime-types": "^2.1.35"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz",
+      "integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/https-proxy-agent": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
+      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "license": "MIT"
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.12",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.12.tgz",
+      "integrity": "sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.47",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.47.tgz",
+      "integrity": "sha512-Uzmd6LXpouKo8EUK68IjH4+E01w/hXyV3R3g/geCJo+rXLNfh1xucB+LOzYEOQPSiUK3h/xZf0cQGcSsmyL2Og==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/postcss": {
+      "version": "8.5.15",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.15.tgz",
+      "integrity": "sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.12",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/proxy-from-env": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-2.1.0.tgz",
+      "integrity": "sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1"
+      }
+    },
+    "node_modules/react-refresh": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
+      "integrity": "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-router": {
+      "version": "6.30.4",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.4.tgz",
+      "integrity": "sha512-SVUsDe+DybHM/WmYKIVYhZh1o5Dcuf16yM6WjG02Q9XVFMZIJyHYhwrr6bFBXZkVP6z69kNkMyBCujt8FaFLJA==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.23.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.30.4",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.4.tgz",
+      "integrity": "sha512-q4HvNl+mmDdkS0g+MqiBZNteQJCuimWoOyHMy4T/RQLAn9Z29+E91QXRaxOujeMl2HTzRSS0KFPd7lxX3PjV0Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.23.3",
+        "react-router": "6.30.4"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.62.0.tgz",
+      "integrity": "sha512-nc72Wgq62I7rtDV4izT5/aaS0zxy3kttkinf9586ApknY3jZO9NYsmtc24fUckA0X7Q2v+ML4a15pdUlV5V/jA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.9"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.62.0",
+        "@rollup/rollup-android-arm64": "4.62.0",
+        "@rollup/rollup-darwin-arm64": "4.62.0",
+        "@rollup/rollup-darwin-x64": "4.62.0",
+        "@rollup/rollup-freebsd-arm64": "4.62.0",
+        "@rollup/rollup-freebsd-x64": "4.62.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.62.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.62.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.62.0",
+        "@rollup/rollup-linux-arm64-musl": "4.62.0",
+        "@rollup/rollup-linux-loong64-gnu": "4.62.0",
+        "@rollup/rollup-linux-loong64-musl": "4.62.0",
+        "@rollup/rollup-linux-ppc64-gnu": "4.62.0",
+        "@rollup/rollup-linux-ppc64-musl": "4.62.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.62.0",
+        "@rollup/rollup-linux-riscv64-musl": "4.62.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.62.0",
+        "@rollup/rollup-linux-x64-gnu": "4.62.0",
+        "@rollup/rollup-linux-x64-musl": "4.62.0",
+        "@rollup/rollup-openbsd-x64": "4.62.0",
+        "@rollup/rollup-openharmony-arm64": "4.62.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.62.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.62.0",
+        "@rollup/rollup-win32-x64-gnu": "4.62.0",
+        "@rollup/rollup-win32-x64-msvc": "4.62.0",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
+      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/vite": {
+      "version": "5.4.21",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.21.tgz",
+      "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "^0.21.3",
+        "postcss": "^8.4.43",
+        "rollup": "^4.20.0"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^18.0.0 || >=20.0.0",
+        "less": "*",
+        "lightningcss": "^1.21.0",
+        "sass": "*",
+        "sass-embedded": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.4.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true,
+      "license": "ISC"
+    }
+  }
+}

frontend/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "auth-frontend-smtp",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "axios": "^1.7.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.24.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.1",
+    "vite": "^5.3.1"
+  }
+}

frontend/src/App.jsx

@@ -0,0 +1,30 @@
+import { Routes, Route, Navigate } from "react-router-dom"
+import { AuthProvider } from "./context/AuthContext"
+import Navbar from "./components/Navbar"
+import ProtectedRoute from "./components/ProtectedRoute"
+import Login from "./pages/Login"
+import Register from "./pages/Register"
+import VerifyEmail from "./pages/VerifyEmail"
+import Dashboard from "./pages/Dashboard"
+
+export default function App() {
+  return (
+    <AuthProvider>
+      <Navbar />
+      <Routes>
+        <Route path="/login" element={<Login />} />
+        <Route path="/register" element={<Register />} />
+        <Route path="/verify-email" element={<VerifyEmail />} />
+        <Route 
+          path="/dashboard" 
+          element={
+            <ProtectedRoute>
+              <Dashboard />
+            </ProtectedRoute>
+          } 
+        />
+        <Route path="*" element={<Navigate to="/dashboard" replace />} />
+      </Routes>
+    </AuthProvider>
+  )
+}

frontend/src/api/axios.js

@@ -0,0 +1,50 @@
+import axios from "axios"
+
+const api = axios.create({
+  baseURL: window.location.hostname === "localhost" ? "http://localhost:8000" : "",
+})
+
+api.interceptors.request.use((config) => {
+  const token = sessionStorage.getItem("access_token")
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`
+  }
+  return config
+}, (error) => {
+  return Promise.reject(error)
+})
+
+api.interceptors.response.use(
+  (res) => res,
+  async (error) => {
+    const originalRequest = error.config
+    if (error.response?.status === 401 && !originalRequest._retry) {
+      originalRequest._retry = true
+      const refresh = sessionStorage.getItem("refresh_token")
+      
+      if (!refresh) {
+        sessionStorage.clear()
+        window.location.href = "/login"
+        return Promise.reject(error)
+      }
+      
+      try {
+        const baseURL = window.location.hostname === "localhost" ? "http://localhost:8000" : "";
+        const { data } = await axios.post(`${baseURL}/auth/refresh`, {
+          refresh_token: refresh,
+        })
+        sessionStorage.setItem("access_token", data.access_token)
+        sessionStorage.setItem("refresh_token", data.refresh_token)
+        originalRequest.headers.Authorization = `Bearer ${data.access_token}`
+        return api(originalRequest)
+      } catch (refreshError) {
+        sessionStorage.clear()
+        window.location.href = "/login"
+        return Promise.reject(refreshError)
+      }
+    }
+    return Promise.reject(error)
+  }
+)
+
+export default api

frontend/src/components/Navbar.jsx

@@ -0,0 +1,46 @@
+import { Link, NavLink, useNavigate } from "react-router-dom"
+import { useAuth } from "../context/AuthContext"
+
+export default function Navbar() {
+  const { user, logout } = useAuth()
+  const navigate = useNavigate()
+
+  async function handleLogout() {
+    await logout()
+    navigate("/login")
+  }
+
+  return (
+    <nav className="navbar">
+      <Link to="/" className="nav-brand">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ verticalAlign: 'middle' }}>
+          <path d="M12 2L3 7v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-9-5z" fill="currentColor"/>
+        </svg>
+        <span>SecureAuth</span>
+      </Link>
+      
+      <div className="nav-links">
+        {user ? (
+          <>
+            <span style={{ fontSize: "0.9rem", color: "var(--text-secondary)" }}>
+              Welcome, <strong style={{ color: "var(--text-primary)" }}>{user.username}</strong>
+              {user.role === "admin" && <span style={{ marginLeft: "6px", fontSize: "0.75rem", background: "rgba(99,102,241,0.2)", padding: "2px 6px", borderRadius: "10px", color: "#818cf8", fontWeight: "700" }}>ADMIN</span>}
+            </span>
+            <button className="btn btn-secondary" style={{ padding: "0.4rem 0.9rem", fontSize: "0.85rem", width: "auto" }} onClick={handleLogout}>
+              Sign Out
+            </button>
+          </>
+        ) : (
+          <>
+            <NavLink to="/login" className={({ isActive }) => isActive ? "nav-link active" : "nav-link"}>
+              Sign In
+            </NavLink>
+            <NavLink to="/register" className={({ isActive }) => isActive ? "nav-link active" : "nav-link"}>
+              Register
+            </NavLink>
+          </>
+        )}
+      </div>
+    </nav>
+  )
+}

frontend/src/components/ProtectedRoute.jsx

@@ -0,0 +1,37 @@
+import { Navigate } from "react-router-dom"
+import { useAuth } from "../context/AuthContext"
+
+export default function ProtectedRoute({ children }) {
+  const { user, loading } = useAuth()
+
+  if (loading) {
+    return (
+      <div style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        height: "80vh",
+        gap: "1rem"
+      }}>
+        <div style={{
+          width: "40px",
+          height: "40px",
+          border: "4px solid rgba(255, 255, 255, 0.1)",
+          borderTop: "4px solid var(--accent-color)",
+          borderRadius: "50%",
+          animation: "spin 1s linear infinite"
+        }} />
+        <p style={{ color: "var(--text-secondary)", fontSize: "0.95rem" }}>Loading your session...</p>
+        <style>{`
+          @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+          }
+        `}</style>
+      </div>
+    )
+  }
+
+  return user ? children : <Navigate to="/login" replace />
+}

frontend/src/context/AuthContext.jsx

@@ -0,0 +1,104 @@
+import { createContext, useContext, useState, useEffect } from "react"
+import api from "../api/axios"
+
+const AuthContext = createContext(null)
+
+export function AuthProvider({ children }) {
+  const [user, setUser] = useState(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    const token = sessionStorage.getItem("access_token")
+    if (!token) {
+      setLoading(false)
+      return
+    }
+    api.get("/me")
+      .then(({ data }) => setUser(data))
+      .catch(() => {
+        sessionStorage.clear()
+        setUser(null)
+      })
+      .finally(() => setLoading(false))
+  }, [])
+
+  async function login(username, password) {
+    const form = new URLSearchParams()
+    form.append("username", username)
+    form.append("password", password)
+    
+    const { data } = await api.post("/auth/login", form, {
+      headers: { "Content-Type": "application/x-www-form-urlencoded" },
+    })
+    
+    sessionStorage.setItem("access_token", data.access_token)
+    sessionStorage.setItem("refresh_token", data.refresh_token)
+    
+    const me = await api.get("/me")
+    setUser(me.data)
+  }
+
+  async function register(username, email, password) {
+    // Registration returns user data, and emails the verification OTP code
+    await api.post("/auth/register", { username, email, password })
+  }
+
+  // ─── SMTP ROUTING FUNCTIONS ───
+
+  async function verifyEmail(email, code) {
+    await api.post("/auth/verify-email", { email, code })
+  }
+
+  async function forgotPassword(email) {
+    await api.post("/auth/forgot-password", { email })
+  }
+
+  async function resetPassword(email, code, new_password) {
+    await api.post("/auth/reset-password", { email, code, new_password })
+  }
+
+  async function logout() {
+    const refreshToken = sessionStorage.getItem("refresh_token")
+    try {
+      await api.post("/auth/logout", { refresh_token: refreshToken })
+    } catch (err) {
+      console.warn("Logout request to server failed, clearing local session.", err)
+    } finally {
+      sessionStorage.clear()
+      setUser(null)
+    }
+  }
+
+  async function updateProfile(profileData) {
+    const { data } = await api.put("/me", profileData)
+    setUser(data)
+    return data;
+  }
+
+  async function deleteAccount() {
+    await api.delete("/me")
+    sessionStorage.clear()
+    setUser(null)
+  }
+
+  return (
+    <AuthContext.Provider value={{ 
+      user, 
+      loading, 
+      login, 
+      register, 
+      logout, 
+      updateProfile, 
+      deleteAccount, 
+      verifyEmail,
+      forgotPassword,
+      resetPassword 
+    }}>
+      {children}
+    </AuthContext.Provider>
+  )
+}
+
+export function useAuth() {
+  return useContext(AuthContext)
+}

frontend/src/index.css

@@ -0,0 +1,464 @@
+/* ─── Premium Glassmorphism Dark Mode Design System ─── */
+
+:root {
+  --bg-primary: #0b0f19;
+  --bg-grid: rgba(99, 102, 241, 0.03);
+  --card-bg: rgba(17, 24, 39, 0.65);
+  --card-border: rgba(255, 255, 255, 0.08);
+  
+  --primary-gradient: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
+  --secondary-gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+  --danger-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+  --success-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
+
+  --text-primary: #f3f4f6;
+  --text-secondary: #9ca3af;
+  --text-muted: #6b7280;
+  
+  --accent-glow: rgba(99, 102, 241, 0.3);
+  --accent-color: #6366f1;
+  --focus-ring: 0 0 0 3px rgba(99, 102, 241, 0.4);
+  
+  --radius-lg: 16px;
+  --radius-md: 10px;
+  --radius-sm: 6px;
+  
+  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Reset and Base Styles */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+
+body {
+  background-color: var(--bg-primary);
+  background-image: 
+    radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.08) 0%, transparent 40%),
+    radial-gradient(circle at 90% 80%, rgba(139, 92, 246, 0.08) 0%, transparent 40%),
+    linear-gradient(to right, var(--bg-grid) 1px, transparent 1px),
+    linear-gradient(to bottom, var(--bg-grid) 1px, transparent 1px);
+  background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;
+  color: var(--text-primary);
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow-x: hidden;
+}
+
+#root {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+}
+::-webkit-scrollbar-track {
+  background: var(--bg-primary);
+}
+::-webkit-scrollbar-thumb {
+  background: #1f2937;
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #374151;
+}
+
+.page-container {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2.5rem 1.5rem;
+}
+
+.navbar {
+  background: rgba(11, 15, 25, 0.7);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border-bottom: 1px solid var(--card-border);
+  padding: 1rem 2rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.nav-brand {
+  font-size: 1.4rem;
+  font-weight: 700;
+  background: var(--primary-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  text-decoration: none;
+}
+
+.nav-links {
+  display: flex;
+  gap: 1.5rem;
+  align-items: center;
+}
+
+.nav-link {
+  color: var(--text-secondary);
+  text-decoration: none;
+  font-size: 0.95rem;
+  font-weight: 500;
+  transition: var(--transition-smooth);
+  padding: 0.5rem 1rem;
+  border-radius: var(--radius-sm);
+}
+
+.nav-link:hover {
+  color: var(--text-primary);
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.nav-link.active {
+  color: var(--accent-color);
+  background: rgba(99, 102, 241, 0.1);
+}
+
+.glass-card {
+  background: var(--card-bg);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid var(--card-border);
+  border-radius: var(--radius-lg);
+  padding: 2.5rem;
+  width: 100%;
+  max-width: 460px;
+  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
+  animation: fadeIn 0.4s ease-out;
+}
+
+.glass-card.wide {
+  max-width: 800px;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(15px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+h1, h2, h3 {
+  font-weight: 700;
+  letter-spacing: -0.025em;
+  margin-bottom: 1.5rem;
+}
+
+h2 {
+  font-size: 1.8rem;
+  background: linear-gradient(to right, #ffffff, #d1d5db);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.card-subtitle {
+  color: var(--text-secondary);
+  font-size: 0.95rem;
+  margin-top: -1rem;
+  margin-bottom: 2rem;
+}
+
+.form-group {
+  margin-bottom: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+label {
+  font-size: 0.85rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-secondary);
+}
+
+input {
+  background: rgba(31, 41, 55, 0.5);
+  border: 1px solid var(--card-border);
+  border-radius: var(--radius-md);
+  padding: 0.8rem 1rem;
+  color: var(--text-primary);
+  font-size: 0.95rem;
+  transition: var(--transition-smooth);
+  width: 100%;
+}
+
+input:focus {
+  outline: none;
+  border-color: var(--accent-color);
+  box-shadow: var(--focus-ring);
+  background: rgba(31, 41, 55, 0.8);
+}
+
+input::placeholder {
+  color: var(--text-muted);
+}
+
+.btn {
+  background: var(--primary-gradient);
+  border: none;
+  border-radius: var(--radius-md);
+  color: white;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 0.95rem;
+  padding: 0.85rem 1.5rem;
+  transition: var(--transition-smooth);
+  width: 100%;
+  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25);
+  gap: 8px;
+}
+
+.btn:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
+  filter: brightness(1.1);
+}
+
+.btn:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.btn.btn-secondary {
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid var(--card-border);
+  color: var(--text-primary);
+  box-shadow: none;
+}
+
+.btn.btn-secondary:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.15);
+  box-shadow: none;
+}
+
+.btn.btn-danger {
+  background: var(--danger-gradient);
+  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
+}
+
+.btn.btn-danger:hover:not(:disabled) {
+  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
+}
+
+.btn-group {
+  display: flex;
+  gap: 1rem;
+  margin-top: 1.5rem;
+}
+
+.alert {
+  padding: 0.85rem 1rem;
+  border-radius: var(--radius-md);
+  font-size: 0.9rem;
+  font-weight: 500;
+  margin-bottom: 1.25rem;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  animation: shake 0.4s ease-out;
+}
+
+.alert-error {
+  background: rgba(239, 68, 68, 0.12);
+  border: 1px solid rgba(239, 68, 68, 0.3);
+  color: #fca5a5;
+}
+
+.alert-success {
+  background: rgba(16, 185, 129, 0.12);
+  border: 1px solid rgba(16, 185, 129, 0.3);
+  color: #a7f3d0;
+}
+
+.alert-info {
+  background: rgba(59, 130, 246, 0.12);
+  border: 1px solid rgba(59, 130, 246, 0.3);
+  color: #93c5fd;
+}
+
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-4px); }
+  75% { transform: translateX(4px); }
+}
+
+.footer-text {
+  text-align: center;
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+  margin-top: 1.5rem;
+}
+
+.footer-text a {
+  color: #8b5cf6;
+  text-decoration: none;
+  font-weight: 600;
+  transition: var(--transition-smooth);
+}
+
+.footer-text a:hover {
+  text-decoration: underline;
+  color: #a78bfa;
+}
+
+.dashboard-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 2rem;
+}
+
+@media (min-width: 768px) {
+  .dashboard-grid {
+    grid-template-columns: 2fr 1fr;
+  }
+}
+
+.info-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 1.5rem;
+}
+
+.info-table tr {
+  border-bottom: 1px solid var(--card-border);
+}
+
+.info-table tr:last-child {
+  border-bottom: none;
+}
+
+.info-table td {
+  padding: 0.9rem 0;
+  font-size: 0.95rem;
+}
+
+.info-table td.label {
+  font-weight: 600;
+  color: var(--text-secondary);
+  width: 35%;
+}
+
+.info-table td.value {
+  color: var(--text-primary);
+  word-break: break-all;
+}
+
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.2rem 0.6rem;
+  border-radius: 20px;
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.status-badge.active {
+  background: rgba(16, 185, 129, 0.15);
+  color: #34d399;
+  border: 1px solid rgba(16, 185, 129, 0.3);
+}
+
+.users-list {
+  max-height: 250px;
+  overflow-y: auto;
+  margin-top: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding-right: 5px;
+}
+
+.user-item {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--card-border);
+  padding: 0.75rem 1rem;
+  border-radius: var(--radius-md);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.user-item-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.user-item-name {
+  font-weight: 600;
+  font-size: 0.95rem;
+}
+
+.user-item-email {
+  color: var(--text-secondary);
+  font-size: 0.8rem;
+}
+
+.otp-container {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  margin: 1.5rem 0;
+}
+
+.otp-box {
+  width: 48px;
+  height: 48px;
+  font-size: 1.5rem;
+  font-weight: 700;
+  text-align: center;
+  background: rgba(31, 41, 55, 0.6);
+}
+
+.simulation-log-box {
+  margin-top: 1.5rem;
+  background: #090d16;
+  border: 1px dashed rgba(99, 102, 241, 0.3);
+  border-radius: var(--radius-md);
+  padding: 1rem;
+  font-family: 'Courier New', Courier, monospace;
+}
+
+.simulation-log-title {
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: #818cf8;
+  margin-bottom: 0.5rem;
+  text-transform: uppercase;
+}
+
+.simulation-log-content {
+  font-size: 0.85rem;
+  color: #a7f3d0;
+  white-space: pre-wrap;
+  word-break: break-all;
+}

frontend/src/main.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
+import App from './App'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>,
+)

frontend/src/pages/Dashboard.jsx

@@ -0,0 +1,215 @@
+import { useState, useEffect } from "react"
+import { useAuth } from "../context/AuthContext"
+import api from "../api/axios"
+
+export default function Dashboard() {
+  const { user, updateProfile, deleteAccount } = useAuth()
+  const [isEditing, setIsEditing] = useState(false)
+  const [profileForm, setProfileForm] = useState({ username: user?.username || "", email: user?.email || "", password: "" })
+  const [error, setError] = useState("")
+  const [success, setSuccess] = useState("")
+  const [loading, setLoading] = useState(false)
+  const [adminUsers, setAdminUsers] = useState([])
+  const [adminError, setAdminError] = useState("")
+
+  useEffect(() => {
+    if (user?.role === "admin") {
+      api.get("/admin/users")
+        .then(({ data }) => setAdminUsers(data))
+        .catch(err => setAdminError(err.response?.data?.detail || "Could not load user list."))
+    }
+  }, [user])
+
+  function handleFormChange(e) {
+    setProfileForm({ ...profileForm, [e.target.name]: e.target.value })
+  }
+
+  async function handleProfileUpdate(e) {
+    e.preventDefault()
+    setError("")
+    setSuccess("")
+    setLoading(true)
+
+    const payload = {}
+    if (profileForm.username !== user.username) payload.username = profileForm.username
+    if (profileForm.email !== user.email) payload.email = profileForm.email
+    if (profileForm.password) payload.password = profileForm.password
+
+    if (Object.keys(payload).length === 0) {
+      setError("No changes detected.")
+      setLoading(false)
+      setIsEditing(false)
+      return
+    }
+
+    try {
+      await updateProfile(payload)
+      setSuccess("Profile updated successfully!")
+      setIsEditing(false)
+      setProfileForm(prev => ({ ...prev, password: "" }))
+    } catch (err) {
+      setError(err.response?.data?.detail || "Update failed. Please check inputs.")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  async function handleDeleteAccount() {
+    const confirmDelete = window.confirm(
+      "Warning: Are you absolutely sure you want to delete your account permanently? This action cannot be undone."
+    )
+    if (!confirmDelete) return
+
+    try {
+      await deleteAccount()
+    } catch (err) {
+      setError("Failed to delete account. Please try again.")
+    }
+  }
+
+  return (
+    <div className="page-container">
+      <div className="glass-card wide">
+        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", borderBottom: "1px solid var(--card-border)", paddingBottom: "1rem", marginBottom: "1.5rem" }}>
+          <div>
+            <h2>User Dashboard</h2>
+            <p className="card-subtitle" style={{ margin: 0 }}>Manage your session, roles, and profile settings</p>
+          </div>
+          <span className="status-badge active">Active Session</span>
+        </div>
+
+        {error && <div className="alert alert-error">{error}</div>}
+        {success && <div className="alert alert-success">{success}</div>}
+
+        <div className="dashboard-grid">
+          <div>
+            <h3 style={{ fontSize: "1.2rem", marginBottom: "1rem", color: "var(--accent-color)" }}>Profile Details</h3>
+            
+            {!isEditing ? (
+              <>
+                <table className="info-table">
+                  <tbody>
+                    <tr>
+                      <td className="label">Username</td>
+                      <td className="value">{user?.username}</td>
+                    </tr>
+                    <tr>
+                      <td className="label">Email Address</td>
+                      <td className="value">{user?.email}</td>
+                    </tr>
+                    <tr>
+                      <td className="label">User ID</td>
+                      <td className="value">#{user?.id}</td>
+                    </tr>
+                    <tr>
+                      <td className="label">Account Role</td>
+                      <td className="value" style={{ textTransform: "capitalize" }}>{user?.role}</td>
+                    </tr>
+                  </tbody>
+                </table>
+                
+                <div style={{ display: "flex", gap: "10px" }}>
+                  <button 
+                    className="btn" 
+                    style={{ width: "auto" }} 
+                    onClick={() => {
+                      setProfileForm({ username: user.username, email: user.email, password: "" })
+                      setIsEditing(true)
+                    }}
+                  >
+                    Edit Profile
+                  </button>
+                  <button className="btn btn-danger" style={{ width: "auto" }} onClick={handleDeleteAccount}>
+                    Delete Account
+                  </button>
+                </div>
+              </>
+            ) : (
+              <form onSubmit={handleProfileUpdate}>
+                <div className="form-group">
+                  <label htmlFor="edit-username">Username</label>
+                  <input
+                    id="edit-username"
+                    name="username"
+                    type="text"
+                    value={profileForm.username}
+                    onChange={handleFormChange}
+                    required
+                  />
+                </div>
+                <div className="form-group">
+                  <label htmlFor="edit-email">Email Address</label>
+                  <input
+                    id="edit-email"
+                    name="email"
+                    type="email"
+                    value={profileForm.email}
+                    onChange={handleFormChange}
+                    required
+                  />
+                </div>
+                <div className="form-group">
+                  <label htmlFor="edit-password">New Password (optional)</label>
+                  <input
+                    id="edit-password"
+                    name="password"
+                    type="password"
+                    value={profileForm.password}
+                    onChange={handleFormChange}
+                    placeholder="Leave blank to keep same"
+                  />
+                </div>
+                
+                <div className="btn-group">
+                  <button className="btn btn-secondary" type="button" onClick={() => setIsEditing(false)} disabled={loading}>
+                    Cancel
+                  </button>
+                  <button className="btn" type="submit" disabled={loading}>
+                    {loading ? "Saving..." : "Save Changes"}
+                  </button>
+                </div>
+              </form>
+            )}
+          </div>
+
+          <div style={{ borderLeft: "1px solid var(--card-border)", paddingLeft: "1.5rem" }}>
+            <h3 style={{ fontSize: "1.2rem", marginBottom: "1rem" }}>System Panel</h3>
+            {user?.role === "admin" ? (
+              <div>
+                <p style={{ fontSize: "0.85rem", color: "var(--text-secondary)", marginBottom: "0.5rem" }}>
+                  Admin Authorization Verified. Total users database list:
+                </p>
+                {adminError && <p className="alert alert-error" style={{ padding: "0.5rem" }}>{adminError}</p>}
+                
+                <div className="users-list">
+                  {adminUsers.map(u => (
+                    <div className="user-item" key={u.id}>
+                      <div className="user-item-info">
+                        <span className="user-item-name">{u.username}</span>
+                        <span className="user-item-email">{u.email}</span>
+                      </div>
+                      <span style={{ fontSize: "0.75rem", background: "rgba(255,255,255,0.05)", padding: "2px 6px", borderRadius: "4px" }}>
+                        {u.role}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ) : (
+              <div>
+                <p style={{ fontSize: "0.85rem", color: "var(--text-muted)", lineHeight: "1.4" }}>
+                  Regular user account permissions detected. Admin features (such as user administration list checks) are disabled.
+                </p>
+                <div style={{ marginTop: "1rem", padding: "0.75rem", border: "1px dashed #374151", borderRadius: "8px", background: "rgba(0,0,0,0.1)" }}>
+                  <span style={{ fontSize: "0.75rem", fontWeight: "700", color: "#6b7280", display: "block" }}>ADMIN ACCESS REQUIRED</span>
+                  <span style={{ fontSize: "0.75rem", color: "#4b5563" }}>Route `GET /admin/users` will throw 403 Forbidden for this account.</span>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+
+      </div>
+    </div>
+  )
+}

frontend/src/pages/Login.jsx

@@ -0,0 +1,243 @@
+import { useState } from "react"
+import { useAuth } from "../context/AuthContext"
+import { useNavigate, Link, useLocation } from "react-router-dom"
+
+export default function Login() {
+  const { login, forgotPassword, resetPassword } = useAuth()
+  const navigate = useNavigate()
+  const location = useLocation()
+  
+  // Normal Login
+  const [form, setForm] = useState({ username: "", password: "" })
+  const [unverifiedEmail, setUnverifiedEmail] = useState("")
+
+  // Forgot Password Steps
+  const [forgotMode, setForgotMode] = useState(false)
+  const [forgotStep, setForgotStep] = useState(1) // 1 = enter email, 2 = enter code and new password
+  const [resetEmail, setResetEmail] = useState("")
+  const [resetCode, setResetCode] = useState("")
+  const [newPassword, setNewPassword] = useState("")
+
+  const [error, setError] = useState("")
+  const [successMsg, setSuccessMsg] = useState(location.state?.success || "")
+  const [loading, setLoading] = useState(false)
+
+  function handleChange(e) {
+    setForm({ ...form, [e.target.name]: e.target.value })
+  }
+
+  async function handleSubmit(e) {
+    e.preventDefault()
+    setError("")
+    setSuccessMsg("")
+    setUnverifiedEmail("")
+    setLoading(true)
+    try {
+      await login(form.username, form.password)
+      navigate("/dashboard")
+    } catch (err) {
+      const errMsg = err.response?.data?.detail || "Invalid username or password."
+      setError(errMsg)
+      
+      // If the backend indicates unverified email, extract email/username if possible
+      if (errMsg.includes("not verified")) {
+        // We'll allow the user to click a link to verify
+        setUnverifiedEmail(form.username) // Username is typed in, can redirect
+      }
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  // Step 1: Send OTP to Email
+  async function handleForgotRequest(e) {
+    e.preventDefault()
+    setError("")
+    setSuccessMsg("")
+    setLoading(true)
+    try {
+      await forgotPassword(resetEmail)
+      setSuccessMsg("Verification code sent to your email!")
+      setForgotStep(2) // Move to enter code step
+    } catch (err) {
+      setError(err.response?.data?.detail || "Email address not found.")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  // Step 2: Verify OTP and Reset Password
+  async function handleResetSubmit(e) {
+    e.preventDefault()
+    setError("")
+    setSuccessMsg("")
+    setLoading(true)
+    try {
+      await resetPassword(resetEmail, resetCode, newPassword)
+      setSuccessMsg("Password reset successfully! You can now sign in.")
+      setForgotMode(false)
+      setForgotStep(1)
+      setResetEmail("")
+      setResetCode("")
+      setNewPassword("")
+    } catch (err) {
+      setError(err.response?.data?.detail || "Password reset failed. Invalid code.")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="page-container">
+      <div className="glass-card">
+        {!forgotMode ? (
+          <>
+            <h2>Sign In</h2>
+            <p className="card-subtitle">Enter your credentials to access your dashboard</p>
+
+            {error && <div className="alert alert-error">{error}</div>}
+            {successMsg && <div className="alert alert-success">{successMsg}</div>}
+
+            {unverifiedEmail && (
+              <div style={{ marginBottom: "1.25rem", textAlign: "center" }}>
+                <Link 
+                  to={`/verify-email?email=${encodeURIComponent(unverifiedEmail)}`} 
+                  className="btn btn-secondary"
+                  style={{ fontSize: "0.85rem", padding: "0.5rem 1rem" }}
+                >
+                  Verify Your Email Now
+                </Link>
+              </div>
+            )}
+
+            <form onSubmit={handleSubmit}>
+              <div className="form-group">
+                <label htmlFor="username">Username</label>
+                <input
+                  id="username"
+                  name="username"
+                  type="text"
+                  value={form.username}
+                  onChange={handleChange}
+                  placeholder="Enter your username"
+                  required
+                />
+              </div>
+
+              <div className="form-group">
+                <label htmlFor="password">Password</label>
+                <input
+                  id="password"
+                  name="password"
+                  type="password"
+                  value={form.password}
+                  onChange={handleChange}
+                  placeholder="Enter your password"
+                  required
+                />
+              </div>
+
+              <div style={{ textAlign: "right", marginBottom: "1.5rem" }}>
+                <button 
+                  type="button" 
+                  style={{ background: "none", border: "none", color: "#8b5cf6", cursor: "pointer", fontSize: "0.85rem", fontWeight: "500" }}
+                  onClick={() => { setForgotMode(true); setError(""); setForgotStep(1); }}
+                >
+                  Forgot Password?
+                </button>
+              </div>
+
+              <button className="btn" type="submit" disabled={loading}>
+                {loading ? "Signing in..." : "Sign In"}
+              </button>
+            </form>
+
+            <p className="footer-text">
+              Don't have an account? <Link to="/register">Register here</Link>
+            </p>
+          </>
+        ) : (
+          <>
+            <h2>Reset Password</h2>
+            <p className="card-subtitle">Recover your account using email verification</p>
+
+            {error && <div className="alert alert-error">{error}</div>}
+            {successMsg && <div className="alert alert-success">{successMsg}</div>}
+
+            {forgotStep === 1 ? (
+              <form onSubmit={handleForgotRequest}>
+                <div className="form-group">
+                  <label htmlFor="reset-email">Email Address</label>
+                  <input
+                    id="reset-email"
+                    type="email"
+                    value={resetEmail}
+                    onChange={(e) => setResetEmail(e.target.value)}
+                    placeholder="Enter your registered email"
+                    required
+                  />
+                </div>
+
+                <div className="btn-group">
+                  <button 
+                    className="btn btn-secondary" 
+                    type="button" 
+                    onClick={() => { setForgotMode(false); setError(""); }}
+                    disabled={loading}
+                  >
+                    Cancel
+                  </button>
+                  <button className="btn" type="submit" disabled={loading}>
+                    {loading ? "Sending..." : "Request Reset Code"}
+                  </button>
+                </div>
+              </form>
+            ) : (
+              <form onSubmit={handleResetSubmit}>
+                <div className="form-group">
+                  <label htmlFor="reset-code">Verification Code</label>
+                  <input
+                    id="reset-code"
+                    type="text"
+                    maxLength={6}
+                    value={resetCode}
+                    onChange={(e) => setResetCode(e.target.value.replace(/\D/g, ""))}
+                    placeholder="6-digit OTP code"
+                    style={{ textAlign: "center", letterSpacing: "3px", fontWeight: "700" }}
+                    required
+                  />
+                </div>
+
+                <div className="form-group">
+                  <label htmlFor="reset-new-password">New Password</label>
+                  <input
+                    id="reset-new-password"
+                    type="password"
+                    value={newPassword}
+                    onChange={(e) => setNewPassword(e.target.value)}
+                    placeholder="At least 8 chars + 1 letter + 1 number"
+                    required
+                  />
+                </div>
+
+                <div className="btn-group">
+                  <button 
+                    className="btn btn-secondary" 
+                    type="button" 
+                    onClick={() => { setForgotStep(1); setError(""); }}
+                    disabled={loading}
+                  >
+                    Back
+                  </button>
+                  <button className="btn" type="submit" disabled={loading}>
+                    {loading ? "Resetting..." : "Submit Reset"}
+                  </button>
+                </div>
+              </form>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  )
+}

frontend/src/pages/Register.jsx

@@ -0,0 +1,97 @@
+import { useState } from "react"
+import { useAuth } from "../context/AuthContext"
+import { useNavigate, Link } from "react-router-dom"
+
+export default function Register() {
+  const { register } = useAuth()
+  const navigate = useNavigate()
+  const [form, setForm] = useState({ username: "", email: "", password: "" })
+  const [error, setError] = useState("")
+  const [loading, setLoading] = useState(false)
+
+  function handleChange(e) {
+    setForm({ ...form, [e.target.name]: e.target.value })
+  }
+
+  async function handleSubmit(e) {
+    e.preventDefault()
+    setError("")
+    setLoading(true)
+
+    if (form.password.length < 8) {
+      setError("Password must be at least 8 characters long.")
+      setLoading(false)
+      return
+    }
+
+    try {
+      await register(form.username, form.email, form.password)
+      // Redirect straight to verification page with email parameter in URL query
+      navigate(`/verify-email?email=${encodeURIComponent(form.email)}`)
+    } catch (err) {
+      setError(err.response?.data?.detail || "Registration failed. Please check credentials.")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="page-container">
+      <div className="glass-card">
+        <h2>Create Account</h2>
+        <p className="card-subtitle">Sign up now and verify your email to access the dashboard</p>
+
+        {error && <div className="alert alert-error">{error}</div>}
+
+        <form onSubmit={handleSubmit}>
+          <div className="form-group">
+            <label htmlFor="username">Username</label>
+            <input
+              id="username"
+              name="username"
+              type="text"
+              value={form.username}
+              onChange={handleChange}
+              placeholder="Choose a username"
+              required
+            />
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="email">Email Address</label>
+            <input
+              id="email"
+              name="email"
+              type="email"
+              value={form.email}
+              onChange={handleChange}
+              placeholder="name@example.com"
+              required
+            />
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="password">Password</label>
+            <input
+              id="password"
+              name="password"
+              type="password"
+              value={form.password}
+              onChange={handleChange}
+              placeholder="At least 8 chars + 1 letter + 1 number"
+              required
+            />
+          </div>
+
+          <button className="btn" type="submit" disabled={loading} style={{ marginTop: "1rem" }}>
+            {loading ? "Registering account..." : "Register"}
+          </button>
+        </form>
+
+        <p className="footer-text">
+          Already have an account? <Link to="/login">Sign in</Link>
+        </p>
+      </div>
+    </div>
+  )
+}

frontend/src/pages/VerifyEmail.jsx

@@ -0,0 +1,89 @@
+import { useState, useEffect } from "react"
+import { useAuth } from "../context/AuthContext"
+import { useNavigate, useSearchParams } from "react-router-dom"
+
+export default function VerifyEmail() {
+  const { verifyEmail } = useAuth()
+  const navigate = useNavigate()
+  const [searchParams] = useSearchParams()
+  
+  const [email, setEmail] = useState("")
+  const [code, setCode] = useState("")
+  const [error, setError] = useState("")
+  const [loading, setLoading] = useState(false)
+
+  useEffect(() => {
+    const emailParam = searchParams.get("email")
+    if (emailParam) {
+      setEmail(emailParam)
+    }
+  }, [searchParams])
+
+  async function handleSubmit(e) {
+    e.preventDefault()
+    setError("")
+    setLoading(true)
+
+    if (code.length !== 6) {
+      setError("Please enter a valid 6-digit verification code.")
+      setLoading(false)
+      return
+    }
+
+    try {
+      await verifyEmail(email, code)
+      navigate("/login", { 
+        state: { success: "Email verified successfully! You can now sign in." } 
+      })
+    } catch (err) {
+      setError(err.response?.data?.detail || "Verification failed. Please check the code.")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="page-container">
+      <div className="glass-card">
+        <h2>Verify Email</h2>
+        <p className="card-subtitle">
+          We sent a 6-digit verification code. Please check your email inbox (or FastAPI terminal logs).
+        </p>
+
+        {error && <div className="alert alert-error">{error}</div>}
+
+        <form onSubmit={handleSubmit}>
+          <div className="form-group">
+            <label htmlFor="verify-email">Email Address</label>
+            <input
+              id="verify-email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="name@example.com"
+              required
+            />
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="otp-code">Verification Code</label>
+            <input
+              id="otp-code"
+              type="text"
+              maxLength={6}
+              value={code}
+              onChange={(e) => setCode(e.target.value.replace(/\D/g, ""))}
+              placeholder="Enter 6-digit OTP code"
+              style={{ letterSpacing: "4px", textAlign: "center", fontSize: "1.2rem", fontWeight: "700" }}
+              required
+            />
+          </div>
+
+          <button className="btn" type="submit" disabled={loading} style={{ marginTop: "1rem" }}>
+            {loading ? "Verifying..." : "Verify & Activate"}
+          </button>
+        </form>
+      </div>
+    </div>
+  )
+}

frontend/vite.config.js

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 5173,
+    host: true
+  }
+})

hld.md

@@ -0,0 +1,768 @@
+# Auth-System-SMTP — High-Level Design (HLD)
+
+---
+
+## 1. System Overview
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│                          CLIENT (Browser)                          │
+│                    React 18 + Vite (Port 5173)                     │
+│                                                                     │
+│   ┌──────────┐  ┌──────────┐  ┌──────────┐  ┌──────────────────┐  │
+│   │ Register │  │  Login   │  │ Verify   │  │    Dashboard     │  │
+│   │  Page    │  │  Page    │  │  Email   │  │ (Profile/Admin)  │  │
+│   └────┬─────┘  └────┬─────┘  └────┬─────┘  └────────┬─────────┘  │
+│        │              │              │                  │            │
+│   ┌────▼──────────────▼──────────────▼──────────────────▼─────────┐ │
+│   │                    AuthContext (State)                        │ │
+│   │              + Axios Interceptors (Token)                    │ │
+│   └──────────────────────────┬───────────────────────────────────┘ │
+└──────────────────────────────┼─────────────────────────────────────┘
+                               │ HTTP/HTTPS
+                               │ Authorization: Bearer <token>
+                               ▼
+┌─────────────────────────────────────────────────────────────────────┐
+│                       API SERVER (FastAPI)                          │
+│                      (Port 8000, Uvicorn)                          │
+│                                                                     │
+│   ┌──────────────────────────────────────────────────────────────┐  │
+│   │                     Middleware Layer                         │  │
+│   │  ┌──────────┐  ┌──────────────┐  ┌──────────────────────┐  │  │
+│   │  │   CORS   │  │ Rate Limiter │  │  Request Logger      │  │  │
+│   │  │ Middleware│  │ (60 req/min) │  │  (IP, method, path)  │  │  │
+│   │  └──────────┘  └──────────────┘  └──────────────────────┘  │  │
+│   └──────────────────────────────────────────────────────────────┘  │
+│                                                                     │
+│   ┌──────────────────────────────────────────────────────────────┐  │
+│   │                    Route Handlers                            │  │
+│   │                                                              │  │
+│   │  Auth Routes (/auth)          User Routes (/me, /admin)     │  │
+│   │  ┌──────────────────┐         ┌──────────────────────┐      │  │
+│   │  │ register          │         │ GET    /me           │      │  │
+│   │  │ verify-email      │         │ PUT    /me           │      │  │
+│   │  │ login             │         │ DELETE /me           │      │  │
+│   │  │ forgot-password   │         │ GET    /admin/users  │      │  │
+│   │  │ reset-password    │         └──────────────────────┘      │  │
+│   │  │ refresh           │                                      │  │
+│   │  │ logout            │                                      │  │
+│   │  └──────────────────┘                                      │  │
+│   └──────────────────────────────────────────────────────────────┘  │
+│                                                                     │
+│   ┌──────────────────────────────────────────────────────────────┐  │
+│   │                   Core Services                              │  │
+│   │  ┌───────────┐  ┌───────────┐  ┌───────────────────────┐   │  │
+│   │  │   Auth    │  │  Config   │  │   Database Manager    │   │  │
+│   │  │ Service   │  │  Loader   │  │  (SQLAlchemy Engine)  │   │  │
+│   │  │           │  │           │  │                       │   │  │
+│   │  │ bcrypt    │  │ .env      │  │ SQLite3 Connection    │   │  │
+│   │  │ JWT       │  │ variables │  │ Session Factory       │   │  │
+│   │  │ SMTP Send │  │           │  │ Base (ORM)            │   │  │
+│   │  └─────┬─────┘  └───────────┘  └───────────┬───────────┘   │  │
+│   └────────┼────────────────────────────────────┼───────────────┘  │
+└────────────┼────────────────────────────────────┼───────────────────┘
+             │                                    │
+             ▼                                    ▼
+┌──────────────────────┐          ┌──────────────────────────────────┐
+│    SMTP SERVER       │          │         SQLite Database          │
+│  (Gmail / Console)   │          │         (users.db)               │
+│                      │          │                                  │
+│  smtp.gmail.com      │          │  ┌────────────┐ ┌─────────────┐ │
+│  Port 587 (STARTTLS) │          │  │   users    │ │revoked_tokens│ │
+│                      │          │  └────────────┘ └─────────────┘ │
+│  Sends OTP emails:   │          │                                  │
+│  - Email Verify      │          │  Tables:                        │
+│  - Password Reset    │          │  - users                        │
+└──────────────────────┘          │  - revoked_tokens               │
+                                  └──────────────────────────────────┘
+```
+
+---
+
+## 2. Component Architecture
+
+### 2.1 Backend Components
+
+```
+backend/
+├── main.py              ← FastAPI app, CORS, rate limiting, middleware
+├── config.py            ← Loads .env variables via python-dotenv
+├── database.py          ← SQLAlchemy engine + session + Base
+├── models.py            ← ORM models: User, RevokedToken
+├── schemas.py           ← Pydantic request/response schemas
+├── auth.py              ← Password hashing, JWT, SMTP email
+├── routes/
+│   ├── auth_routes.py   ← /auth endpoints (register, login, etc.)
+│   └── user_routes.py   ← /me and /admin endpoints
+└── .env                 ← Environment variables (secrets)
+```
+
+**Data Flow:**
+```
+Request → Middleware (CORS, Rate Limit, Logging)
+       → Route Handler (auth_routes / user_routes)
+       → Auth Service (validate token, hash password, send email)
+       → Database (SQLAlchemy ORM → SQLite)
+       → Response (JSON)
+```
+
+### 2.2 Frontend Components
+
+```
+frontend/
+├── src/
+│   ├── main.jsx                 ← Entry point, BrowserRouter
+│   ├── App.jsx                  ← Root component, all routes
+│   ├── index.css                ← Global styles (glassmorphism)
+│   ├── api/
+│   │   └── axios.js             ← Axios instance + interceptors
+│   ├── context/
+│   │   └── AuthContext.jsx      ← Auth state management
+│   ├── components/
+│   │   ├── Navbar.jsx           ← Navigation bar
+│   │   └── ProtectedRoute.jsx   ← Route guard
+│   └── pages/
+│       ├── Register.jsx         ← Registration form
+│       ├── Login.jsx            ← Login form
+│       ├── VerifyEmail.jsx      ← OTP verification form
+│       └── Dashboard.jsx        ← User dashboard + admin panel
+```
+
+**Component Hierarchy:**
+```
+<App>
+├── <AuthProvider>           (Context)
+│   ├── <Navbar />
+│   ├── <Routes>
+│   │   ├── /register     → <Register />
+│   │   ├── /login        → <Login />
+│   │   ├── /verify-email → <VerifyEmail />
+│   │   └── /dashboard    → <ProtectedRoute> → <Dashboard />
+│   │   └── /             → <Navigate to="/login" />
+```
+
+---
+
+## 3. Authentication Flow Diagrams
+
+### 3.1 Registration Flow
+
+```
+┌──────────┐                              ┌──────────┐                    ┌──────────┐
+│  Client  │                              │  Server  │                    │  SMTP    │
+└────┬─────┘                              └────┬─────┘                    └────┬─────┘
+     │                                         │                               │
+     │  POST /auth/register                    │                               │
+     │  { username, email, password }          │                               │
+     │────────────────────────────────────────▶│                               │
+     │                                         │                               │
+     │                           ┌─────────────┤                               │
+     │                           │ Validate:   │                               │
+     │                           │ - Email len │                               │
+     │                           │ - Password  │                               │
+     │                           │   strength  │                               │
+     │                           │ - Uniqueness│                               │
+     │                           └─────────────┤                               │
+     │                                         │                               │
+     │                           ┌─────────────┤                               │
+     │                           │ bcrypt.hash │                               │
+     │                           │ + OTP gen   │                               │
+     │                           │ + Create    │                               │
+     │                           │   User      │                               │
+     │                           └─────────────┤                               │
+     │                                         │                               │
+     │                                         │  Send OTP via SMTP            │
+     │                                         │──────────────────────────────▶│
+     │                                         │                               │
+     │  200 OK (redirect to /verify-email)     │                               │
+     │◀────────────────────────────────────────│                               │
+     │                                         │                               │
+     │                                         │  ┌────────────────────────┐   │
+     │                                         │  │ Console fallback:      │   │
+     │                                         │  │ Print OTP if SMTP fails│   │
+     │                                         │  └────────────────────────┘   │
+```
+
+### 3.2 Login Flow
+
+```
+┌──────────┐                              ┌──────────┐
+│  Client  │                              │  Server  │
+└────┬─────┘                              └────┬─────┘
+     │                                         │
+     │  POST /auth/login                       │
+     │  (OAuth2 form: username + password)     │
+     │────────────────────────────────────────▶│
+     │                                         │
+     │                           ┌─────────────┤
+     │                           │ Look up     │
+     │                           │ user by     │
+     │                           │ username    │
+     │                           └─────────────┤
+     │                                         │
+     │                           ┌─────────────┤
+     │                           │ bcrypt      │
+     │                           │ .checkpw()  │
+     │                           └─────────────┤
+     │                                         │
+     │                           ┌─────────────┤
+     │                           │ Check:      │
+     │                           │ - is_active │
+     │                           │ - is_verified│
+     │                           └─────────────┤
+     │                                         │
+     │                           ┌─────────────┤
+     │                           │ Generate:   │
+     │                           │ - access_token  │
+     │                           │ - refresh_token │
+     │                           └─────────────┤
+     │                                         │
+     │  200 OK                                 │
+     │  { access_token, refresh_token }        │
+     │◀────────────────────────────────────────│
+     │                                         │
+     │  Store in sessionStorage                │
+     │  Set AuthContext user                   │
+```
+
+### 3.3 Token Refresh Flow
+
+```
+┌──────────┐                              ┌──────────┐
+│  Client  │                              │  Server  │
+└────┬─────┘                              └────┬─────┘
+     │                                         │
+     │  API Request with expired access_token  │
+     │────────────────────────────────────────▶│
+     │                                         │
+     │  401 Unauthorized                       │
+     │◀────────────────────────────────────────│
+     │                                         │
+     │  Axios interceptor detects 401          │
+     │                                         │
+     │  POST /auth/refresh                     │
+     │  { refresh_token }                      │
+     │────────────────────────────────────────▶│
+     │                                         │
+     │                           ┌─────────────┤
+     │                           │ Decode JWT  │
+     │                           │ Check type  │
+     │                           │ == "refresh"│
+     │                           └─────────────┤
+     │                                         │
+     │                           ┌─────────────┤
+     │                           │ Check if    │
+     │                           │ revoked     │
+     │                           └─────────────┤
+     │                                         │
+     │                           ┌─────────────┤
+     │                           │ Revoke old  │
+     │                           │ refresh token│
+     │                           │ (rotation)  │
+     │                           └─────────────┤
+     │                                         │
+     │                           ┌─────────────┤
+     │                           │ Issue new   │
+     │                           │ access +    │
+     │                           │ refresh pair│
+     │                           └─────────────┤
+     │                                         │
+     │  200 OK                                 │
+     │  { access_token, refresh_token }        │
+     │◀────────────────────────────────────────│
+     │                                         │
+     │  Retry original request with new token  │
+     │────────────────────────────────────────▶│
+     │                                         │
+     │  200 OK (success)                       │
+     │◀────────────────────────────────────────│
+```
+
+### 3.4 Logout Flow
+
+```
+┌──────────┐                              ┌──────────┐
+│  Client  │                              │  Server  │
+└────┬─────┘                              └────┬─────┘
+     │                                         │
+     │  POST /auth/logout                      │
+     │  { refresh_token }                      │
+     │  Authorization: Bearer <access_token>   │
+     │────────────────────────────────────────▶│
+     │                                         │
+     │                           ┌─────────────┤
+     │                           │ Insert both │
+     │                           │ tokens into │
+     │                           │ revoked_    │
+     │                           │ tokens table│
+     │                           └─────────────┤
+     │                                         │
+     │  200 OK                                 │
+     │◀────────────────────────────────────────│
+     │                                         │
+     │  Clear sessionStorage                   │
+     │  Set user = null                        │
+     │  Redirect to /login                     │
+```
+
+---
+
+## 4. Data Models
+
+### 4.1 Entity Relationship Diagram
+
+```
+┌─────────────────────────┐          ┌──────────────────────────────┐
+│         users           │          │        revoked_tokens        │
+├─────────────────────────┤          ├──────────────────────────────┤
+│ id          INTEGER PK  │          │ id          INTEGER PK       │
+│ username    VARCHAR UNI │          │ token       VARCHAR UNI      │
+│ email       VARCHAR UNI │          │ revoked_at  DATETIME         │
+│ password    VARCHAR     │          │ expires_at  DATETIME         │
+│ is_active   BOOLEAN     │          └──────────────────────────────┘
+│ role        VARCHAR     │
+│ created_at  DATETIME    │          Relationship: One user can have
+│ is_verified BOOLEAN     │          many revoked tokens (1:N)
+│ verification_code VARCHAR│
+│ reset_code  VARCHAR     │
+└─────────────────────────┘
+```
+
+### 4.2 User Model Fields
+
+| Field | Type | Constraints | Default | Description |
+|-------|------|-------------|---------|-------------|
+| `id` | Integer | PK, auto-increment, indexed | — | Unique user identifier |
+| `username` | String(50) | UNIQUE, NOT NULL, indexed | — | Login username |
+| `email` | String(120) | UNIQUE, NOT NULL, indexed | — | User email address |
+| `password` | String(255) | NOT NULL | — | bcrypt hashed password |
+| `is_active` | Boolean | — | `True` | Account active status |
+| `role` | String(10) | — | `"user"` | User role (user/admin) |
+| `created_at` | DateTime | — | `datetime.utcnow()` | Registration timestamp |
+| `is_verified` | Boolean | — | `False` | Email verified status |
+| `verification_code` | String(6) | nullable | `None` | Registration OTP |
+| `reset_code` | String(6) | nullable | `None` | Password reset OTP |
+
+### 4.3 RevokedToken Model Fields
+
+| Field | Type | Constraints | Default | Description |
+|-------|------|-------------|---------|-------------|
+| `id` | Integer | PK, auto-increment, indexed | — | Record identifier |
+| `token` | String(512) | UNIQUE, NOT NULL, indexed | — | Full JWT string |
+| `revoked_at` | DateTime | — | `datetime.utcnow()` | Revocation timestamp |
+| `expires_at` | DateTime | NOT NULL | — | Token original expiry |
+
+---
+
+## 5. Security Architecture
+
+### 5.1 Authentication & Authorization Layers
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                    SECURITY LAYERS                          │
+├─────────────────────────────────────────────────────────────┤
+│                                                             │
+│  Layer 1: Password Security                                │
+│  ┌─────────────────────────────────────────────────────┐   │
+│  │ bcrypt hashing (salt + hash)                        │   │
+│  │ Password strength validation (≥8 chars, 1 letter,   │   │
+│  │   1 digit)                                          │   │
+│  └─────────────────────────────────────────────────────┘   │
+│                                                             │
+│  Layer 2: JWT Token Security                               │
+│  ┌─────────────────────────────────────────────────────┐   │
+│  │ Dual-token system (access 30min + refresh 7days)     │   │
+│  │ Token rotation on refresh (old token revoked)        │   │
+│  │ Token type validation (access vs refresh)            │   │
+│  │ Revocation checking on every request                 │   │
+│  └─────────────────────────────────────────────────────┘   │
+│                                                             │
+│  Layer 3: Email Verification                               │
+│  ┌─────────────────────────────────────────────────────┐   │
+│  │ OTP-based email verification                        │   │
+│  │ 6-digit numeric code                                │   │
+│  │ Must verify before login                            │   │
+│  └─────────────────────────────────────────────────────┘   │
+│                                                             │
+│  Layer 4: Rate Limiting                                    │
+│  ┌─────────────────────────────────────────────────────┐   │
+│  │ Global: 60 requests per 60 seconds per IP           │   │
+│  │ HTTP 429 when exceeded                              │   │
+│  └─────────────────────────────────────────────────────┘   │
+│                                                             │
+│  Layer 5: CORS Protection                                  │
+│  ┌─────────────────────────────────────────────────────┐   │
+│  │ Whitelist: localhost:5173, localhost:3000            │   │
+│  │ Credentials allowed                                 │   │
+│  └─────────────────────────────────────────────────────┘   │
+│                                                             │
+│  Layer 6: Role-Based Access Control                        │
+│  ┌─────────────────────────────────────────────────────┐   │
+│  │ Admin-only endpoints (/admin/users)                  │   │
+│  │ User role checking in route handlers                 │   │
+│  └─────────────────────────────────────────────────────┘   │
+│                                                             │
+│  Layer 7: Input Validation                                 │
+│  ┌─────────────────────────────────────────────────────┐   │
+│  │ Pydantic schemas for all inputs                      │   │
+│  │ Email validation (EmailStr)                          │   │
+│  │ Field length constraints                             │   │
+│  └─────────────────────────────────────────────────────┘   │
+│                                                             │
+│  Layer 8: Error Handling                                   │
+│  ┌─────────────────────────────────────────────────────┐   │
+│  │ Generic error messages (no stack trace leak)         │   │
+│  │ Request logging for audit trail                      │   │
+│  └─────────────────────────────────────────────────────┘   │
+│                                                             │
+└─────────────────────────────────────────────────────────────┘
+```
+
+### 5.2 Token Lifecycle
+
+```
+                    ┌──────────────────┐
+                    │   User Login     │
+                    └────────┬─────────┘
+                             │
+                    ┌────────▼─────────┐
+                    │ Issue Access +   │
+                    │ Refresh Tokens   │
+                    └────────┬─────────┘
+                             │
+              ┌──────────────┼──────────────┐
+              │              │              │
+     ┌────────▼───────┐     │     ┌────────▼───────┐
+     │ Use Access     │     │     │ Use Refresh    │
+     │ Token (30min)  │     │     │ Token (7days)  │
+     └────────┬───────┘     │     └────────┬───────┘
+              │              │              │
+     ┌────────▼───────┐     │     ┌────────▼───────┐
+     │ Token Expires  │     │     │ Refresh Used   │
+     │ (401 Response) │     │     │ (Token Rotation)│
+     └────────┬───────┘     │     └────────┬───────┘
+              │              │              │
+              └──────┬───────┘              │
+                     │              ┌───────▼────────┐
+              ┌──────▼────────┐     │ Issue New      │
+              │ Send Refresh  │     │ Access+Refresh │
+              │ Token to      │     │ Pair           │
+              │ /auth/refresh │     └────────────────┘
+              └──────┬────────┘
+                     │
+              ┌──────▼────────┐
+              │ Old Refresh   │
+              │ Token Revoked │
+              │ (stored in DB)│
+              └───────────────┘
+```
+
+---
+
+## 6. API Design
+
+### 6.1 Request/Response Schemas
+
+**Register Request:**
+```json
+POST /auth/register
+{
+  "username": "string (3-50 chars)",
+  "email": "string (valid email)",
+  "password": "string (≥8 chars, 1 letter, 1 digit)"
+}
+```
+
+**Register Response:**
+```json
+200 OK
+{
+  "message": "User registered successfully. Please verify your email."
+}
+```
+
+**Login Request:**
+```json
+POST /auth/login
+Content-Type: application/x-www-form-urlencoded
+
+username=string&password=string
+```
+
+**Login Response:**
+```json
+200 OK
+{
+  "access_token": "eyJ...",
+  "refresh_token": "eyJ...",
+  "token_type": "bearer"
+}
+```
+
+**Refresh Request:**
+```json
+POST /auth/refresh
+{
+  "refresh_token": "eyJ..."
+}
+```
+
+**Refresh Response:**
+```json
+200 OK
+{
+  "access_token": "eyJ...",
+  "refresh_token": "eyJ..."
+}
+```
+
+### 6.2 Error Response Format
+
+```json
+401 Unauthorized
+{
+  "detail": "Invalid authentication credentials"
+}
+
+422 Validation Error
+{
+  "detail": [
+    {
+      "loc": ["body", "password"],
+      "msg": "Password must be at least 8 characters with at least one letter and one digit",
+      "type": "value_error"
+    }
+  ]
+}
+
+429 Too Many Requests
+{
+  "detail": "Too many requests. Please try again later."
+}
+```
+
+---
+
+## 7. SMTP Email System
+
+### 7.1 Email Flow
+
+```
+┌──────────────┐     ┌──────────────┐     ┌──────────────┐
+│  Route       │     │  Auth        │     │  SMTP        │
+│  Handler     │────▶│  Service     │────▶│  Server      │
+│              │     │              │     │              │
+│  send_email()│     │  smtplib     │     │  Gmail       │
+│  called      │     │  STARTTLS    │     │  Port 587    │
+└──────────────┘     └──────────────┘     └──────────────┘
+       │
+       │ (if SMTP not configured or fails)
+       ▼
+┌──────────────┐
+│  Console     │
+│  Fallback    │
+│  (print OTP) │
+└──────────────┘
+```
+
+### 7.2 SMTP Configuration
+
+| Setting | Value | Purpose |
+|---------|-------|---------|
+| Server | `smtp.gmail.com` | Gmail SMTP server |
+| Port | `587` | STARTTLS encryption |
+| Protocol | STARTTLS | Upgrades plain connection to TLS |
+| Auth | Username + App Password | Gmail-specific authentication |
+
+### 7.3 Email Templates Sent
+
+**Email Verification:**
+```
+Subject: Verify your email - Auth System
+
+Hello {username},
+
+Your verification code is: {otp_code}
+
+This code will expire in 10 minutes.
+
+If you did not register, please ignore this email.
+```
+
+**Password Reset:**
+```
+Subject: Password Reset Request - Auth System
+
+Hello {username},
+
+Your password reset code is: {otp_code}
+
+This code will expire in 10 minutes.
+
+If you did not request this, please ignore this email.
+```
+
+---
+
+## 8. Frontend State Management
+
+### 8.1 AuthContext Flow
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                     AuthContext                             │
+├─────────────────────────────────────────────────────────────┤
+│                                                             │
+│  State:                                                     │
+│  ┌─────────────────────────────────────────────────────┐   │
+│  │ user: null | { id, username, email, role, ... }     │   │
+│  └─────────────────────────────────────────────────────┘   │
+│                                                             │
+│  Methods:                                                   │
+│  ┌─────────────────────────────────────────────────────┐   │
+│  │ login(username, password)                           │   │
+│  │   → POST /auth/login                                │   │
+│  │   → Store tokens in sessionStorage                  │   │
+│  │   → Fetch user profile                              │   │
+│  │                                                     │   │
+│  │ logout()                                            │   │
+│  │   → POST /auth/logout                               │   │
+│  │   → Clear sessionStorage                            │   │
+│  │   → Set user = null                                 │   │
+│  └─────────────────────────────────────────────────────┘   │
+│                                                             │
+│  Initialization (on mount):                                 │
+│  ┌─────────────────────────────────────────────────────┐   │
+│  │ 1. Check sessionStorage for access_token            │   │
+│  │ 2. If exists → GET /me to validate                  │   │
+│  │ 3. If valid → set user state                        │   │
+│  │ 4. If invalid → clear session, set user = null      │   │
+│  └─────────────────────────────────────────────────────┘   │
+│                                                             │
+└─────────────────────────────────────────────────────────────┘
+```
+
+### 8.2 Axios Interceptor Chain
+
+```
+Request Flow:
+┌──────────┐    ┌──────────────┐    ┌──────────────┐    ┌──────────┐
+│  API     │───▶│   Request    │───▶│   Server     │───▶│ Response │
+│  Call    │    │ Interceptor  │    │              │    │          │
+└──────────┘    └──────────────┘    └──────────────┘    └────┬─────┘
+                  │                                           │
+                  │ Attach Bearer token                       │
+                  │ from sessionStorage                       │
+                                                           │
+                                              ┌─────────────▼──────────┐
+                                              │  Response Interceptor  │
+                                              └���────────────┬──────────┘
+                                                           │
+                                              ┌─────────────▼──────────┐
+                                              │  If 401:               │
+                                              │  1. POST /auth/refresh │
+                                              │  2. Update tokens      │
+                                              │  3. Retry request      │
+                                              │  4. If fail → /login   │
+                                              └────────────────────────┘
+```
+
+---
+
+## 9. Deployment Architecture
+
+### 9.1 Development Setup
+
+```
+┌─────────────────────────────────────────────────┐
+│              Development Environment             │
+├─────────────────────────────────────────────────┤
+│                                                   │
+│  Terminal 1: Backend                              │
+│  $ cd backend                                     │
+│  $ source .venv/bin/activate                      │
+│  $ uvicorn main:app --reload --port 8000          │
+│                                                   │
+│  Terminal 2: Frontend                             │
+│  $ cd frontend                                    │
+│  $ npm run dev                                    │
+│  → Vite dev server on http://localhost:5173       │
+│                                                   │
+│  Database: SQLite (auto-created)                  │
+│  Email: Console fallback (no SMTP needed)         │
+│                                                   │
+└─────────────────────────────────────────────────┘
+```
+
+### 9.2 Production Recommendations
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│                   Production Architecture                       │
+├─────────────────────────────────────────────────────────────────┤
+│                                                                   │
+│  ┌─────────────┐    ┌─────────────┐    ┌─────────────────────┐  │
+│  │   Nginx     │───▶│  Uvicorn    │───▶│   PostgreSQL        │  │
+│  │   (Reverse  │    │  (Gunicorn  │    │   (or MySQL)        │  │
+│  │    Proxy)   │    │   Workers)  │    │                     │  │
+│  │   Port 443  │    │   Port 8000 │    │   Port 5432         │  │
+│  │   HTTPS     │    │             │    │                     │  │
+│  └─────────────┘    └─────────────┘    └─────────────────────┘  │
+│        │                                         │                │
+│        │            ┌─────────────┐             │                │
+│        │            │   Redis     │             │                │
+│        │            │   (Cache +  │◀────────────┤                │
+│        │            │    Rate     │             │                │
+│        │            │   Limiting) │             │                │
+│        │            └─────────────┘             │                │
+│        │                                         │                │
+│        │            ┌─────────────┐             │                │
+│        └───────────▶│   Static    │             │                │
+│                     │   Files     │             │                │
+│                     │   (React    │             │                │
+│                     │    Build)   │             │                │
+│                     └─────────────┘             │                │
+│                                                   │                │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## 10. Environment Configuration
+
+| Variable | Development | Production | Purpose |
+|----------|-------------|------------|---------|
+| `SECRET_KEY` | `super_secret_dev_key...` | Strong random 256-bit key | JWT signing |
+| `ALGORITHM` | `HS256` | `HS256` or `RS256` | JWT algorithm |
+| `ACCESS_TOKEN_EXPIRE_MINUTES` | `30` | `15` | Shorter in prod |
+| `REFRESH_TOKEN_EXPIRE_DAYS` | `7` | `7` | Refresh token TTL |
+| `DATABASE_URL` | `sqlite:///./users.db` | `postgresql://...` | Database |
+| `SMTP_SERVER` | `smtp.gmail.com` | `smtp.gmail.com` | Email server |
+| `SMTP_PORT` | `587` | `587` | Email port |
+| `SMTP_USER` | `user@gmail.com` | `noreply@domain.com` | Email sender |
+| `SMTP_PASSWORD` | `app_password` | `app_password` | Email auth |
+
+---
+
+## 11. Future Improvements
+
+### High Priority
+- [ ] Add `.gitignore` (exclude `.env`, `users.db`, `__pycache__`, `node_modules`)
+- [ ] Use `secrets` module for OTP generation (cryptographic randomness)
+- [ ] Add per-account brute-force lockout (e.g., 5 failed attempts → 15min lock)
+- [ ] Move to PostgreSQL for production use
+
+### Medium Priority
+- [ ] Add Docker + docker-compose for containerized deployment
+- [ ] Implement email rate limiting (prevent OTP spam)
+- [ ] Add CSRF protection
+- [ ] Add comprehensive unit and integration tests
+- [ ] Implement account deletion with cascade (revoke all tokens)
+
+### Low Priority
+- [ ] Add OAuth2 social login (Google, GitHub)
+- [ ] Implement 2FA (TOTP-based)
+- [ ] Add admin dashboard for user management
+- [ ] Implement audit logging
+- [ ] Add API versioning (v1/, v2/)

main.py

@@ -1,432 +0,0 @@
-import bcrypt
-from fastapi import FastAPI, Depends, HTTPException
-from fastapi.middleware.cors import CORSMiddleware
-from fastapi.security import OAuth2PasswordBearer
-from jose import jwt, JWTError
-from datetime import datetime, timedelta
-from pydantic import BaseModel, Field, validator
-from sqlalchemy import create_engine, Column, Integer, String, Boolean, DateTime
-from sqlalchemy.orm import sessionmaker, Session, DeclarativeBase
-import os
-import re
-import random
-import string
-import threading
-import logging
-
-logger = logging.getLogger(__name__)
-logging.basicConfig(level=logging.INFO)
-
-# Use /app/data in Docker, ./data locally
-DB_DIR = os.environ.get("DB_DIR", "./data")
-os.makedirs(DB_DIR, exist_ok=True)
-DATABASE_URL = f"sqlite:///{os.path.join(DB_DIR, 'users.db')}"
-
-SECRET_KEY = os.environ.get("SECRET_KEY", "mysecretkey123")
-ALGORITHM = "HS256"
-ACCESS_TOKEN_EXPIRE_MINUTES = 30
-
-engine = create_engine(DATABASE_URL, connect_args={"check_same_thread": False})
-SessionLocal = sessionmaker(bind=engine)
-
-class Base(DeclarativeBase):
-    pass
-
-class User(Base):
-    __tablename__ = "users"
-
-    id = Column(Integer, primary_key=True)
-    username = Column(String, unique=True)
-    email = Column(String, unique=True)
-    password = Column(String)
-    is_activate = Column(Boolean, default=True)
-
-class OTP(Base):
-    __tablename__ = "otp"
-
-    id = Column(Integer, primary_key=True)
-    email = Column(String)
-    code = Column(String)
-    purpose = Column(String)
-    expires_at = Column(DateTime)
-    is_used = Column(Boolean, default=False)
-    username = Column(String, nullable=True)
-    password_hash = Column(String, nullable=True)
-
-class RegisterRequest(BaseModel):
-    username: str = Field(min_length=3, max_length=20)
-    email: str
-    password: str = Field(min_length=6)
-
-    @validator("username")
-    def validate_username(cls, v):
-        if not re.match(r"^[a-zA-Z0-9_]+$", v):
-            raise ValueError("Username must be alphanumeric with underscores only")
-        return v
-
-    @validator("email")
-    def validate_email(cls, v):
-        if not re.match(r"^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$", v):
-            raise ValueError("Invalid email format")
-        return v
-
-class LoginRequest(BaseModel):
-    username: str
-    password: str
-
-class TokenResponse(BaseModel):
-    access_token: str
-    refresh_token: str
-    token_type: str = "bearer"
-
-class RefreshRequest(BaseModel):
-    refresh_token: str
-
-class ForgotPasswordRequest(BaseModel):
-    email: str
-
-class ForgotPasswordVerifyRequest(BaseModel):
-    email: str
-    otp: str
-    new_password: str = Field(min_length=6)
-
-class VerifyRegisterRequest(BaseModel):
-    email: str
-    otp: str
-
-# Email config - SMTP for local, Brevo HTTP for Render
-BREVO_API_KEY = os.environ.get("BREVO_API_KEY", "")
-EMAIL_FROM = "ashutoshknp12@gmail.com"
-EMAIL_FROM_NAME = "Auth System"
-
-# Gmail SMTP for local testing (use env vars so passwords stay out of code)
-SMTP_HOST = os.environ.get("SMTP_HOST", "smtp.gmail.com")
-SMTP_PORT = int(os.environ.get("SMTP_PORT", "465"))
-SMTP_USER = os.environ.get("SMTP_USER", "ashutoshknp12@gmail.com")
-SMTP_PASS = os.environ.get("SMTP_PASS", "")
-
-def generate_otp():
-    return ''.join(random.choices(string.digits, k=6))
-
-def send_otp_email(to_email, otp_code, purpose):
-    """Send OTP email. Uses Brevo HTTP API on Render, Gmail SMTP locally."""
-    if purpose == "register":
-        subject = "Verify Your Account"
-    elif purpose == "forgot_password":
-        subject = "Password Reset Code"
-    else:
-        subject = "Your OTP Code"
-
-    html = f"<p>Your OTP code is: <strong>{otp_code}</strong></p><p>It expires in 5 minutes.</p>"
-    body = f"Your OTP code is: {otp_code}\nIt expires in 5 minutes."
-
-    # --- Method 1: Brevo HTTP API (works on Render, uses HTTPS port 443) ---
-    # Render free tier BLOCKS SMTP ports 25/465/587, so we MUST use HTTP API
-    if BREVO_API_KEY:
-        try:
-            import urllib.request
-            import json
-            payload = json.dumps({
-                "sender": {"name": EMAIL_FROM_NAME, "email": EMAIL_FROM},
-                "to": [{"email": to_email}],
-                "subject": subject,
-                "htmlContent": html
-            }).encode()
-            req = urllib.request.Request(
-                "https://api.brevo.com/v3/smtp/email",
-                data=payload,
-                headers={"api-key": BREVO_API_KEY, "Content-Type": "application/json"}
-            )
-            resp = urllib.request.urlopen(req, timeout=15)
-            resp_body = resp.read().decode()
-            logger.info(f"OTP email sent to {to_email} via Brevo. Response: {resp_body}")
-            return True
-        except Exception as e:
-            logger.error(f"Brevo HTTP API failed for {to_email}: {e}")
-            # Don't fall through to SMTP on Render — it's blocked anyway
-            return False
-
-    # --- Method 2: Gmail SMTP (works locally, NOT on Render free tier) ---
-    if SMTP_PASS:
-        try:
-            import smtplib
-            from email.mime.text import MIMEText
-            msg = MIMEText(body)
-            msg["Subject"] = subject
-            msg["From"] = EMAIL_FROM
-            msg["To"] = to_email
-            server = smtplib.SMTP_SSL(SMTP_HOST, SMTP_PORT, timeout=10)
-            server.login(SMTP_USER, SMTP_PASS)
-            server.sendmail(EMAIL_FROM, to_email, msg.as_string())
-            server.quit()
-            logger.info(f"OTP email sent to {to_email} via Gmail SMTP")
-            return True
-        except Exception as e:
-            logger.error(f"Gmail SMTP failed for {to_email}: {e}")
-            return False
-
-    # No email method available
-    logger.error("No email method set up! Set BREVO_API_KEY (for Render) or SMTP_PASS (for local)")
-    return False
-
-# Removed background thread — send email directly so we can report errors to user
-
-def create_otp(db, email, purpose):
-    code = generate_otp()
-    otp = OTP(
-        email=email,
-        code=code,
-        purpose=purpose,
-        expires_at=datetime.utcnow() + timedelta(minutes=5)
-    )
-    db.add(otp)
-    db.commit()
-    return code
-
-def hash_password(password):
-    return bcrypt.hashpw(password.encode(), bcrypt.gensalt(rounds=4)).decode()
-
-def verify_password(plain, hashed):
-    return bcrypt.checkpw(plain.encode(), hashed.encode())
-
-def create_access_token(data):
-    to_encode = data.copy()
-    to_encode["sub"] = str(to_encode["sub"])
-    to_encode["exp"] = datetime.utcnow() + timedelta(minutes=ACCESS_TOKEN_EXPIRE_MINUTES)
-    to_encode["type"] = "access"
-    return jwt.encode(to_encode, SECRET_KEY, algorithm=ALGORITHM)
-
-def create_refresh_token(data):
-    to_encode = data.copy()
-    to_encode["sub"] = str(to_encode["sub"])
-    to_encode["exp"] = datetime.utcnow() + timedelta(days=7)
-    to_encode["type"] = "refresh"
-    return jwt.encode(to_encode, SECRET_KEY, algorithm=ALGORITHM)
-
-
-
-def get_db():
-    db = SessionLocal()
-    try:
-        yield db
-    finally:
-        db.close()
-
-
-
-oauth2_scheme = OAuth2PasswordBearer(tokenUrl="/auth/login")
-
-def get_current_user(token: str = Depends(oauth2_scheme), db: Session = Depends(get_db)):
-    try:
-        payload = jwt.decode(token, SECRET_KEY, algorithms=[ALGORITHM])
-        user_id = int(payload.get("sub"))
-        token_type = payload.get("type")
-        if user_id is None or token_type != "access":
-            raise HTTPException(status_code=401, detail="Invalid token")
-    except JWTError:
-        raise HTTPException(status_code=401, detail="Invalid token")
-
-    user = db.query(User).filter(User.id == user_id).first()
-    if not user:
-        raise HTTPException(status_code=401, detail="User not found")
-    return user
-
-
-app = FastAPI()
-
-CORS_ORIGINS = os.environ.get("CORS_ORIGINS", "https://frontend-15-two.vercel.app,https://frontend-15-b3jpt0vcu-ashutoshs-projects-8cd9906b.vercel.app,http://localhost:5173,http://localhost:5174,http://localhost:7860").split(",")
-app.add_middleware(
-    CORSMiddleware,
-    allow_origins=CORS_ORIGINS,
-    allow_credentials=True,
-    allow_methods=["*"],
-    allow_headers=["*"],
-)
-
-Base.metadata.create_all(bind=engine)
-
-@app.post("/auth/register")
-def register(req: RegisterRequest, db: Session = Depends(get_db)):
-    if db.query(User).filter(User.username == req.username).first():
-        raise HTTPException(400, "Username taken")
-    if db.query(User).filter(User.email == req.email).first():
-        raise HTTPException(400, "Email already registered")
-    code = generate_otp()
-    otp = OTP(
-        email=req.email,
-        code=code,
-        purpose="register",
-        expires_at=datetime.utcnow() + timedelta(minutes=5),
-        username=req.username,
-        password_hash=hash_password(req.password)
-    )
-    db.add(otp)
-    db.commit()
-    success = send_otp_email(req.email, code, "register")
-    if not success:
-        raise HTTPException(500, "Failed to send OTP email. Try again.")
-    return {"message": "OTP sent to email. Verify to activate account."}
-
-@app.post("/auth/register/verify")
-def register_verify(req: VerifyRegisterRequest, db: Session = Depends(get_db)):
-    otp = db.query(OTP).filter(
-        OTP.email == req.email,
-        OTP.code == req.otp,
-        OTP.purpose == "register",
-        OTP.is_used == False
-    ).first()
-    if not otp:
-        raise HTTPException(400, "Invalid OTP")
-    if otp.expires_at < datetime.utcnow():
-        raise HTTPException(400, "OTP expired")
-    user = User(
-        username=otp.username,
-        email=otp.email,
-        password=otp.password_hash,
-        is_activate=True
-    )
-    db.add(user)
-    otp.is_used = True
-    db.commit()
-    return {"message": "Account verified. You can now login."}
-
-@app.post("/auth/login")
-def login(req: LoginRequest, db: Session = Depends(get_db)):
-    user = db.query(User).filter(
-        (User.username == req.username) | (User.email == req.username)
-    ).first()
-    if not user or not verify_password(req.password, user.password):
-        raise HTTPException(401, "Wrong credentials")
-    if not user.is_activate:
-        raise HTTPException(401, "Account not verified. Check your email for OTP.")
-    return {
-        "access_token": create_access_token({"sub": user.id}),
-        "refresh_token": create_refresh_token({"sub": user.id}),
-        "user": {"id": user.id, "username": user.username, "email": user.email}
-    }
-
-@app.get("/me")
-def me(current_user: User = Depends(get_current_user)):
-    return {"id": current_user.id, "username": current_user.username, "email": current_user.email}
-
-@app.post("/auth/refresh", response_model=TokenResponse)
-def refresh(req: RefreshRequest, db: Session = Depends(get_db)):
-    try:
-        payload = jwt.decode(req.refresh_token, SECRET_KEY, algorithms=[ALGORITHM])
-        if payload.get("type") != "refresh":
-            raise HTTPException(401, "Invalid token")
-        user_id = int(payload.get("sub"))
-    except JWTError:
-        raise HTTPException(401, "Invalid token")
-
-    user = db.query(User).filter(User.id == user_id).first()
-    if not user:
-        raise HTTPException(401, "User not found")
-    
-    if not user.is_activate:
-        raise HTTPException(401, "User deactivated")
-    
-    new_refresh_token = create_refresh_token({"sub": user.id})
-    
-    return {
-        "access_token": create_access_token({"sub": user.id}),
-        "refresh_token": new_refresh_token
-    }
-
-@app.post("/users")
-def create_user(
-    req: RegisterRequest,
-    db: Session = Depends(get_db),
-    current_user: User = Depends(get_current_user)
-):
-    if db.query(User).filter(User.username == req.username).first():
-        raise HTTPException(400, "Username taken")
-    user = User(
-        username=req.username,
-        email=req.email,
-        password=hash_password(req.password)
-    )
-    db.add(user)
-    db.commit()
-    db.refresh(user)
-    return {"id": user.id, "username": user.username, "email": user.email}
-
-@app.get("/users")
-def get_users(
-    db: Session = Depends(get_db),
-    current_user: User = Depends(get_current_user)
-):
-    return db.query(User).all()
-
-@app.get("/users/{user_id}")
-def get_user(
-    user_id: int,
-    db: Session = Depends(get_db),
-    current_user: User = Depends(get_current_user)
-):
-    user = db.query(User).filter(User.id == user_id).first()
-    if not user:
-        raise HTTPException(status_code=404, detail="User not found")
-    return user
-
-@app.put("/users/{user_id}")
-def update_user(
-    user_id: int,
-    username: str,
-    db: Session = Depends(get_db),
-    current_user: User = Depends(get_current_user)
-):
-    user = db.query(User).filter(User.id == user_id).first()
-    if not user:
-        raise HTTPException(status_code=404, detail="User not found")
-    user.username = username
-    db.commit()
-    return user
-
-@app.delete("/users/{user_id}")
-def delete_user(
-    user_id: int,
-    db: Session = Depends(get_db),
-    current_user: User = Depends(get_current_user)
-):
-    user = db.query(User).filter(User.id == user_id).first()
-    if not user:
-        raise HTTPException(status_code=404, detail="User not found")
-    db.delete(user)
-    db.commit()
-    return {"message": "Deleted"}
-
-@app.post("/auth/forgot-password")
-def forgot_password(req: ForgotPasswordRequest, db: Session = Depends(get_db)):
-    user = db.query(User).filter(User.email == req.email).first()
-    if not user:
-        raise HTTPException(404, "Email not found")
-    code = create_otp(db, req.email, "forgot_password")
-    success = send_otp_email(req.email, code, "forgot_password")
-    if not success:
-        raise HTTPException(500, "Failed to send OTP email. Try again.")
-    return {"message": "OTP sent to email"}
-
-@app.post("/auth/forgot-password/verify")
-def forgot_password_verify(req: ForgotPasswordVerifyRequest, db: Session = Depends(get_db)):
-    otp = db.query(OTP).filter(
-        OTP.email == req.email,
-        OTP.code == req.otp,
-        OTP.purpose == "forgot_password",
-        OTP.is_used == False
-    ).first()
-    if not otp:
-        raise HTTPException(400, "Invalid OTP")
-    if otp.expires_at < datetime.utcnow():
-        raise HTTPException(400, "OTP expired")
-    user = db.query(User).filter(User.email == req.email).first()
-    if not user:
-        raise HTTPException(404, "User not found")
-    user.password = hash_password(req.new_password)
-    otp.is_used = True
-    db.commit()
-    return {"message": "Password reset successful"}
-
-@app.get("/health")
-def health():
-    return {"status": "ok"}

requirements.txt

@@ -1,6 +0,0 @@
-fastapi>=0.100.0
-uvicorn>=0.23.0
-python-jose[cryptography]>=3.3.0
-bcrypt>=4.0.0
-SQLAlchemy>=2.0.0
-python-multipart>=0.0.6

summary.md

@@ -0,0 +1,258 @@
+# Auth-System-SMTP — Summary of Important Questions & Concepts
+
+---
+
+## 1. Project Overview
+
+**Q: What is this project?**
+A full-stack authentication system with email verification and password reset using SMTP. Built with **FastAPI** (backend) + **React** (frontend).
+
+**Q: What is the tech stack?**
+| Layer | Technology |
+|-------|-----------|
+| Backend | FastAPI, SQLAlchemy, SQLite, bcrypt, JWT (python-jose) |
+| Frontend | React 18, Vite, Axios, React Router v6 |
+| Email | Python `smtplib` (STARTTLS on port 587) |
+| Auth | Dual JWT tokens (access + refresh), bcrypt hashing, OTP verification |
+
+---
+
+## 2. Authentication Flow
+
+**Q: What happens during registration?**
+1. User submits `username`, `email`, `password`
+2. Backend validates password strength (≥8 chars, 1 letter, 1 digit)
+3. Password is hashed with bcrypt
+4. A 6-digit OTP is generated and stored in `verification_code`
+5. OTP is sent via email (SMTP or console fallback)
+6. User is redirected to `/verify-email`
+
+**Q: How does email verification work?**
+1. User enters email + 6-digit OTP
+2. Backend matches OTP against `verification_code` column
+3. On success: `is_verified = True`, `verification_code = None`
+4. User can now log in
+
+**Q: What happens during login?**
+1. User submits `username` + `password` (OAuth2 form body)
+2. Backend validates credentials with `bcrypt.checkpw()`
+3. Checks `is_active` and `is_verified` flags
+4. Issues two JWT tokens:
+   - **Access token**: 30-minute expiry, type `"access"`
+   - **Refresh token**: 7-day expiry, type `"refresh"`
+5. Frontend stores both in `sessionStorage`
+
+**Q: How does token refresh work?**
+1. Axios interceptor detects a 401 response
+2. Sends refresh token to `/auth/refresh`
+3. Backend validates refresh token (not revoked, valid type, user active)
+4. **Revokes old refresh token** (adds to `revoked_tokens` table)
+5. Issues new access + refresh token pair (token rotation)
+6. Original request is retried with new token
+
+**Q: How does logout work?**
+1. Frontend sends refresh token to `/auth/logout`
+2. Backend inserts both tokens into `revoked_tokens` table
+3. Frontend clears `sessionStorage` and resets user state
+
+---
+
+## 3. Password Reset Flow
+
+**Q: How does forgot password work?**
+- **Step 1**: User enters email → backend generates 6-digit OTP → stores in `reset_code` → sends via email
+- **Step 2**: User enters email + code + new password → backend validates OTP → hashes new password → clears `reset_code`
+
+---
+
+## 4. JWT Token Structure
+
+**Q: What claims are in the access token?**
+```json
+{
+  "sub": "<user_id>",
+  "email": "<email>",
+  "type": "access",
+  "exp": "<datetime>"
+}
+```
+
+**Q: What claims are in the refresh token?**
+```json
+{
+  "sub": "<user_id>",
+  "type": "refresh",
+  "exp": "<datetime>"
+}
+```
+
+**Q: Why use two token types?**
+- Access token: Short-lived, used for API requests
+- Refresh token: Long-lived, used only to get new access tokens
+- Separation limits exposure if a token is compromised
+
+---
+
+## 5. Database Schema
+
+**Q: What tables exist?**
+
+### `users` Table
+| Column | Type | Purpose |
+|--------|------|---------|
+| `id` | Integer (PK) | User ID |
+| `username` | String (UNIQUE) | Login username |
+| `email` | String (UNIQUE) | User email |
+| `password` | String | bcrypt hashed password |
+| `is_active` | Boolean | Account enabled/disabled |
+| `role` | String | `"user"` or `"admin"` |
+| `created_at` | DateTime | Registration timestamp |
+| `is_verified` | Boolean | Email verified flag |
+| `verification_code` | String (nullable) | Active registration OTP |
+| `reset_code` | String (nullable) | Active password reset OTP |
+
+### `revoked_tokens` Table
+| Column | Type | Purpose |
+|--------|------|---------|
+| `id` | Integer (PK) | Record ID |
+| `token` | String (UNIQUE) | Revoked JWT string |
+| `revoked_at` | DateTime | When it was revoked |
+| `expires_at` | DateTime | Original token expiry |
+
+---
+
+## 6. API Endpoints
+
+**Q: What are all the endpoints?**
+
+### Auth Routes (`/auth`)
+| Method | Endpoint | Description |
+|--------|----------|-------------|
+| POST | `/auth/register` | Register new user |
+| POST | `/auth/verify-email` | Verify email with OTP |
+| POST | `/auth/login` | Login, returns JWT tokens |
+| POST | `/auth/forgot-password` | Request password reset OTP |
+| POST | `/auth/reset-password` | Reset password with OTP |
+| POST | `/auth/refresh` | Refresh access token |
+| POST | `/auth/logout` | Revoke tokens |
+
+### User Routes
+| Method | Endpoint | Description |
+|--------|----------|-------------|
+| GET | `/me` | Get current user profile |
+| PUT | `/me` | Update profile |
+| DELETE | `/me` | Delete own account |
+| GET | `/admin/users` | List all users (admin only) |
+
+---
+
+## 7. Security Concepts
+
+**Q: How are passwords stored?**
+- Hashed with **bcrypt** using `bcrypt.gensalt()` + `bcrypt.hashpw()`
+- Verified with `bcrypt.checkpw()` (constant-time comparison)
+
+**Q: What is token revocation?**
+- Tokens are inserted into `revoked_tokens` table
+- Every authenticated request checks this table
+- If token is found → 401 Unauthorized
+
+**Q: What is token rotation?**
+- On each refresh, the old refresh token is revoked
+- A new access + refresh token pair is issued
+- Prevents long-lived refresh token abuse
+
+**Q: How is rate limiting implemented?**
+- Custom HTTP middleware in FastAPI
+- Max 60 requests per 60-second window per client IP
+- Returns HTTP 429 when exceeded
+
+**Q: How is CORS configured?**
+- Allows only `http://localhost:5173` and `http://localhost:3000`
+- Allows credentials, all methods, all headers
+
+**Q: What is the SMTP fallback mechanism?**
+- If SMTP credentials are empty/missing → prints OTP to console
+- If SMTP sending fails → falls back to console printing
+- Allows development without a real mail server
+
+---
+
+## 8. Frontend Architecture
+
+**Q: How does the frontend manage auth state?**
+- `AuthContext` (React Context) holds `user` state
+- On mount, checks `sessionStorage` for `access_token`
+- Calls `GET /me` to validate and hydrate user state
+- If validation fails → clears session
+
+**Q: How does the axios interceptor work?**
+- **Request interceptor**: Attaches `Authorization: Bearer <token>` from `sessionStorage`
+- **Response interceptor**: On 401 → attempts refresh → retries request → on failure redirects to `/login`
+
+**Q: What is the ProtectedRoute component?**
+- Wraps routes that require authentication
+- Checks `user` from AuthContext
+- Redirects to `/login` if not authenticated
+- Shows loading spinner while checking
+
+---
+
+## 9. Environment Variables
+
+| Variable | Default | Purpose |
+|----------|---------|---------|
+| `SECRET_KEY` | `super_secret_dev_key_change_me_123456789` | JWT signing key |
+| `ALGORITHM` | `HS256` | JWT algorithm |
+| `ACCESS_TOKEN_EXPIRE_MINUTES` | `30` | Access token TTL |
+| `REFRESH_TOKEN_EXPIRE_DAYS` | `7` | Refresh token TTL |
+| `DATABASE_URL` | `sqlite:///./users.db` | Database connection |
+| `SMTP_SERVER` | `""` | SMTP host (empty = simulation) |
+| `SMTP_PORT` | `587` | SMTP port |
+| `SMTP_USER` | `""` | SMTP login (empty = simulation) |
+| `SMTP_PASSWORD` | `""` | SMTP password (empty = simulation) |
+
+---
+
+## 10. Important Security Notes & Weaknesses
+
+**Q: What security concerns exist?**
+1. `.env` contains real Gmail credentials — must not be committed to version control
+2. `SECRET_KEY` is a weak dev key — must be changed in production
+3. OTP generated with `random.choices` (non-cryptographic PRNG) — should use `secrets` module
+4. `forgot_password` endpoint may expose whether an email exists (different error responses)
+5. No per-account brute-force protection — only global rate limiter
+6. No `.gitignore` file — secrets could be accidentally committed
+
+**Q: What should be improved for production?**
+1. Use a production database (PostgreSQL, MySQL) instead of SQLite
+2. Add `.gitignore` to exclude `.env`, `users.db`, `__pycache__`, `node_modules`
+3. Use `secrets` module for OTP generation
+4. Implement account lockout after failed login attempts
+5. Add email rate limiting (prevent OTP spam)
+6. Use asymmetric JWT signing (RS256) for microservice architectures
+7. Add HTTPS enforcement
+8. Implement CSRF protection
+9. Add comprehensive logging and monitoring
+
+---
+
+## 11. Key Files Reference
+
+| File | Purpose |
+|------|---------|
+| `backend/main.py` | FastAPI app entry, CORS, rate limiting, middleware |
+| `backend/auth.py` | Password hashing, JWT creation, SMTP email sending |
+| `backend/models.py` | SQLAlchemy ORM models (User, RevokedToken) |
+| `backend/schemas.py` | Pydantic request/response schemas |
+| `backend/config.py` | Centralized config from `.env` |
+| `backend/database.py` | SQLAlchemy engine, session, Base |
+| `backend/routes/auth_routes.py` | Auth endpoints |
+| `backend/routes/user_routes.py` | User profile + admin endpoints |
+| `frontend/src/context/AuthContext.jsx` | Auth state management |
+| `frontend/src/api/axios.js` | Axios instance with interceptors |
+| `frontend/src/components/ProtectedRoute.jsx` | Route guard |
+| `frontend/src/pages/Login.jsx` | Login form |
+| `frontend/src/pages/Register.jsx` | Registration form |
+| `frontend/src/pages/VerifyEmail.jsx` | OTP verification form |
+| `frontend/src/pages/Dashboard.jsx` | User dashboard + admin panel |