Added new pages, and added user approval and login to external services (Still need to add service tokens)

config.json

@@ -0,0 +1,7 @@
+{
+    "permissionDetails":{
+        "readAccountData":["Access your profile information","Name, email, and account details"],
+        "storeAppData":["Stora data in your account","Store data affiliated with you"],
+        "getAppData":["Read app data","Read data set by this app affiliated with you"]
+    }
+}

db.py

@@ -95,6 +95,36 @@ def getGroupByName(name, dbuser, dbpass, dbhost, dbname):
         print(f"Error retrieving group: {e}")
         raise
 
+def getServiceById(id, dbuser, dbpass, dbhost, dbname):
+    try:
+        conn = psycopg2.connect(
+            host=dbhost,
+            user=dbuser,
+            password=dbpass,
+            database=dbname
+        )
+        cur = conn.cursor()
+        print(id)
+        cur.execute("SELECT name, permissions, creation_date FROM services WHERE id = %s", (id,))
+        group_record = cur.fetchone()
+        
+        cur.close()
+        conn.close()
+        
+        if group_record:
+            return {
+                "name": group_record[0],
+                "permissions": group_record[1],
+                "creation_date": group_record[2]
+            }
+        else:
+            return None
+        
+    except Exception as e:
+        print(f"Error retrieving group: {e}")
+        raise
+
+
 def createUser(name, username, email, password, group, dbuser, dbpass, dbhost, dbname):
     try:
         conn = psycopg2.connect(
@@ -124,6 +154,165 @@ def createUser(name, username, email, password, group, dbuser, dbpass, dbhost, d
         print(f"Error creating user: {e}")
         raise
 
+def createRequestToken(user_id, dbuser, dbpass, dbhost, dbname):
+    try:
+        conn = psycopg2.connect(
+            host=dbhost,
+            user=dbuser,
+            password=dbpass,
+            database=dbname
+        )
+        cur = conn.cursor()
+
+        token_id = secrets.token_urlsafe(32)
+
+        cur.execute("""
+            INSERT INTO requestTokens (id, owner_id)
+            VALUES (%s, %s) RETURNING id, creation_date, expiration_date
+        """, (token_id, user_id))
+
+        token_data = cur.fetchone()
+        conn.commit()
+
+        cur.close()
+        conn.close()
+
+        return token_data[0]
+        
+    except Exception as e:
+        print(f"Error creating token: {e}")
+        raise
+
+def checkRequestToken(token_id, dbuser, dbpass, dbhost, dbname):
+    try:
+        conn = psycopg2.connect(
+            host=dbhost,
+            user=dbuser,
+            password=dbpass,
+            database=dbname
+        )
+        cur = conn.cursor()
+        
+        cur.execute("""
+            SELECT owner_id FROM requestTokens
+            WHERE id = %s AND expiration_date > CURRENT_TIMESTAMP
+        """, (token_id,))
+        
+        token_record = cur.fetchone()
+        
+        cur.close()
+        conn.close()
+        
+        if token_record:
+            cur.execute("DELETE FROM requestTokens WHERE id = %s", (token_id,))
+            conn.commit()
+            return token_record[0]
+        else:
+            return None
+        
+    except Exception as e:
+        print(f"Error verifying token: {e}")
+        return None
+
+def getUserServiceData(user_id, service_id, record_key, dbuser, dbpass, dbhost, dbname):
+    try:
+        conn = psycopg2.connect(
+            host=dbhost,
+            user=dbuser,
+            password=dbpass,
+            database=dbname
+        )
+        cur = conn.cursor()
+        
+        cur.execute("""
+            SELECT permissions FROM services
+            WHERE id = %s
+        """, (service_id,))
+        
+        service_perms = cur.fetchone()
+        
+        print(service_perms)
+        
+        cur.execute("""
+            SELECT value FROM userData
+            WHERE property = %s AND user_id = %s AND service_id = %s
+        """, (record_key, user_id, service_id))
+        
+        service_record = cur.fetchone()
+
+        cur.close()
+        conn.close()
+
+        if service_record:
+            return service_record[0]
+        else:
+            return None
+        
+    except Exception as e:
+        print(f"Error retrieving user service data: {e}")
+        raise
+
+def createUserServiceData(key, value, service_id, user_id, dbuser, dbpass, dbhost, dbname):
+    try:
+        conn = psycopg2.connect(
+            host=dbhost,
+            user=dbuser,
+            password=dbpass,
+            database=dbname
+        )
+        cur = conn.cursor()
+
+        cur.execute("""
+            INSERT INTO userData (user_id, service_id, property, value)
+            VALUES (%s, %s) RETURNING id
+        """, (user_id, service_id, key, value))
+        
+        row = cur.fetchone()
+        
+        conn.commit()
+        
+        cur.close()
+        conn.close()
+        
+        return "Success"
+        
+    except Exception as e:
+        print(f"Error creating service: {e}")
+        raise
+
+
+def createService(name, permissions, dbuser, dbpass, dbhost, dbname):
+    try:
+        conn = psycopg2.connect(
+            host=dbhost,
+            user=dbuser,
+            password=dbpass,
+            database=dbname
+        )
+        cur = conn.cursor()
+
+        cur.execute("""
+            INSERT INTO services (name, permissions)
+            VALUES (%s, %s) RETURNING id, key
+        """, (name, permissions))
+        
+        row = cur.fetchone()
+        
+        serviceData = {
+            "id": row[0],
+            "key": row[1]
+        }
+        conn.commit()
+        
+        cur.close()
+        conn.close()
+        
+        return serviceData
+        
+    except Exception as e:
+        print(f"Error creating service: {e}")
+        raise
+
 def createToken(user_id, dbuser, dbpass, dbhost, dbname):
     try:
         conn = psycopg2.connect(

initdb.py

@@ -49,6 +49,27 @@ def createTables(dbuser, dbpass, dbhost, dbname):
         """)
         print("Table 'groups' created or already exists")
         
+        cur.execute("""
+            CREATE TABLE IF NOT EXISTS services (
+                id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+                key uuid UNIQUE DEFAULT gen_random_uuid(),
+                name VARCHAR(255) UNIQUE NOT NULL,
+                permissions JSON,
+                creation_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+            )
+        """)
+        print("Table 'services' created or already exists")
+
+        cur.execute("""
+            CREATE TABLE IF NOT EXISTS requestTokens (
+                id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+                owner_id uuid REFERENCES users(id) 
+                creation_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+                expiration_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP + INTERVAL '1 hour'
+            )
+        """)
+        print("Table 'requestTokens' created or already exists")
+
         cur.execute("""
             CREATE TABLE IF NOT EXISTS users (
                 id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
@@ -66,7 +87,7 @@ def createTables(dbuser, dbpass, dbhost, dbname):
             CREATE TABLE IF NOT EXISTS userData (
                 id SERIAL PRIMARY KEY,
                 user_id uuid REFERENCES users(id),
-                service_id VARCHAR(255) NOT NULL,
+                service_id uuid NOT NULL,
                 creation_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
                 property VARCHAR(255) NOT NULL,
                 value VARCHAR(255) NOT NULL
@@ -78,7 +99,7 @@ def createTables(dbuser, dbpass, dbhost, dbname):
             CREATE TABLE IF NOT EXISTS groupData (
                 id SERIAL PRIMARY KEY,
                 group_id uuid REFERENCES groups(id),
-                service_id VARCHAR(255) NOT NULL,
+                service_id uuid NOT NULL,
                 creation_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
                 property VARCHAR(255) NOT NULL,
                 value VARCHAR(255) NOT NULL

main.py

@@ -1,10 +1,15 @@
 import flask
-from flask import render_template, jsonify, request, redirect, Response
+from flask import render_template, jsonify, request, redirect, Response, json
 import initdb
 import db
 from dotenv import load_dotenv
 from os import getenv
 
+with open("config.json", "r") as f:
+    config = json.load(f)
+
+print(config)
+
 load_dotenv()
 
 DB_HOST = getenv("DB_HOST")
@@ -54,17 +59,76 @@ def logout():
     db.removeToken(token, DB_USER, DB_PASSWORD, DB_HOST, DB_NAME)
     return render_template('logout.html', appName=appName)
 
+@app.route('/login/service/<serviceid>', methods = ['GET'])
+def logIntoServiceWebsite(serviceid):
+    token = request.cookies.get('auth_token', 'none')
+    redirectUrl = request.args.get("redirect")
+    userId = db.verifyToken(token, DB_USER, DB_PASSWORD, DB_HOST, DB_NAME)
+    if (userId == None):
+        return render_template('login.html', appName=appName)
+    else:
+        serviceData = db.getServiceById(serviceid, DB_USER, DB_PASSWORD, DB_HOST, DB_NAME)
+        if not serviceData:
+            return jsonify("Service not found")
+        else:
+            serviceName = serviceData["name"]
+            requestToken = db.createRequestToken(userId, DB_USER, DB_PASSWORD, DB_HOST, DB_NAME)
+            if db.getUserServiceData(userId, serviceid, "approved", DB_USER, DB_PASSWORD, DB_HOST, DB_NAME) == "True":
+                return render_template('logbackintoservice.html', appName=appName, serviceName=serviceName, requestToken=requestToken, serviceId=serviceid, redirectUrl=redirectUrl)
+            else:
+                permissions = []
+                for permission in serviceData["permissions"]:
+                    permissions.append(config["permissionDetails"][permission])
+                return render_template('approveservice.html', appName=appName, serviceName=serviceName, permissions=permissions, requestToken=requestToken, serviceId=serviceid, redirectUrl = redirectUrl)
+        
+@app.route('/api/login/service', methods = ['POST'])
+def logIntoService():
+    requestId = request.json["request_id"]
+    serviceId = request.json["service_id"]
+    redirectURL = request.json["redirect_url"]
+    token = request.cookies.get('auth_token', 'none')
+    userId = db.verifyToken(token, DB_USER, DB_PASSWORD, DB_HOST, DB_NAME)
+    requestUserId = db.checkRequestToken(requestId, DB_USER, DB_PASSWORD, DB_HOST, DB_NAME)
+    if userId == requestUserId:
+        if db.getUserServiceData(userId, serviceId, "approved", DB_USER, DB_PASSWORD, DB_HOST, DB_NAME) != "True":
+            db.createUserServiceData("approved", "True", serviceId, userId, DB_USER, DB_PASSWORD, DB_HOST, DB_NAME)
+        serviceToken = "TEST FOR NOW, FIX IT FIRST THING"
+        # TODO: Generate token for service to access data
+        redirectURL = redirectURL + "?token=" + serviceToken
+        return redirect(redirectURL)
+    else:
+
+@app.route('/api/createservice', methods = ['POST'])
+def createService():
+    try:
+        name = request.json['name']
+        permissions = json.dumps(request.json['permissions'])
+        print(permissions)
+        serviceData =db.createService(name, permissions, DB_USER, DB_PASSWORD, DB_HOST, DB_NAME)
+        print(serviceData)
+        return jsonify({"success": True, "service": serviceData})
+    except Exception as e:
+        print(f"Signup error: {e}")
+        return jsonify({"success": False, "error": str(e)})
+
 @app.route('/api/signup', methods = ['POST'])
 def handleSignup():
     try:
         username = request.json['username'].lower()
         email = request.json['email'].lower()
         password = request.json['password']
-        displayName = request.json['displayname']
+        name = request.json['name']
-        db.createUser(displayName, username, email, password, DB_USER, DB_PASSWORD, DB_HOST, DB_NAME)
+        root_group = db.getGroupByName("root", DB_USER, DB_PASSWORD, DB_HOST, DB_NAME)
-    except:
+        group_id = root_group['id'] if root_group else None
-        return jsonify("An error occured")
+        db.createUser(name, username, email, password, group_id, DB_USER, DB_PASSWORD, DB_HOST, DB_NAME)
+        return jsonify({"success": True})
+    except Exception as e:
+        print(f"Signup error: {e}")
+        return jsonify({"success": False, "error": str(e)})
     
+@app.route('/testpage/<pageStr>', methods = ['GET'])
+def testPage(pageStr):
+        return render_template(pageStr, appName=appName, serviceName="Test Service")
 
 if __name__ == '__main__':
     initdb.createDatabase(DB_USER, DB_PASSWORD, DB_HOST, DB_NAME)

templates/approveservice.html

@@ -0,0 +1,518 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Approve Service | {{ appName }}</title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@400;500;600&display=swap');
+        
+        :root {
+            --brand-primary: #6366f1;
+            --brand-hover: #4f46e5;
+            --brand-success: #10b981;
+            --brand-error: #ef4444;
+            --text-main: #0f172a;
+            --text-muted: #64748b;
+            --bg-body: #f8fafc;
+            --border-color: #e2e8f0;
+            --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+            --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+            --radius-xl: 2rem;
+            --radius-lg: 0.75rem;
+        }
+
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: var(--bg-body);
+            background-image: 
+                radial-gradient(at 0% 0%, hsla(253,16%,95%,1) 0, transparent 50%), 
+                radial-gradient(at 100% 0%, hsla(225,39%,90%,1) 0, transparent 50%);
+            height: 100vh;
+            width: 100vw;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 1rem;
+            overflow: hidden;
+        }
+
+        .login-card {
+            max-width: 448px;
+            width: 100%;
+            background: #ffffff;
+            border-radius: var(--radius-xl);
+            box-shadow: var(--shadow-xl);
+            border: 1px solid var(--border-color);
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+
+        .card-content {
+            padding: 2.5rem;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .brand-header {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            margin-bottom: 2rem;
+        }
+
+        .brand-icon {
+            width: 32px;
+            height: 32px;
+            background: var(--brand-primary);
+            border-radius: 8px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+            font-size: 0.875rem;
+        }
+
+        .brand-name {
+            font-family: 'Space Grotesk', sans-serif;
+            font-size: 1.25rem;
+            font-weight: 700;
+            color: var(--text-main);
+            letter-spacing: -0.025em;
+        }
+
+        h2 {
+            font-family: 'Space Grotesk', sans-serif;
+            font-size: 1.875rem;
+            font-weight: 700;
+            color: var(--text-main);
+            margin-bottom: 0.5rem;
+            letter-spacing: -0.025em;
+        }
+
+        .description {
+            color: var(--text-muted);
+            font-size: 0.875rem;
+            margin-bottom: 2rem;
+            line-height: 1.5;
+        }
+
+        .form-group {
+            margin-bottom: 1.5rem;
+        }
+
+        .input-container {
+            display: flex;
+            align-items: center;
+            background: #ffffff;
+            border: 2px solid var(--border-color);
+            border-radius: var(--radius-lg);
+            padding: 0 1rem;
+            transition: all 0.3s ease;
+        }
+
+        .input-container:focus-within {
+            border-color: var(--brand-primary);
+            box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
+        }
+
+        .input-container i {
+            color: var(--text-muted);
+            margin-right: 0.75rem;
+            font-size: 1rem;
+        }
+
+        input {
+            width: 100%;
+            border: none;
+            outline: none;
+            padding: 0.875rem 0;
+            font-size: 1rem;
+            color: var(--text-main);
+            background: transparent;
+        }
+
+        .btn {
+            width: 100%;
+            padding: 1rem;
+            border-radius: var(--radius-lg);
+            border: none;
+            font-size: 1rem;
+            font-weight: 700;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.5rem;
+            transition: all 0.3s ease;
+        }
+
+        .btn-primary {
+            background: var(--brand-primary);
+            color: white;
+            box-shadow: 0 4px 10px rgba(99, 102, 241, 0.2);
+        }
+
+        .btn-primary:hover:not(:disabled) {
+            background: var(--brand-hover);
+            transform: translateY(-1px);
+        }
+
+        .btn-primary:disabled {
+            opacity: 0.7;
+            cursor: not-allowed;
+        }
+
+        .btn-text {
+            background: transparent;
+            color: var(--text-muted);
+            border: none;
+            font-size: 0.875rem;
+            font-weight: 500;
+            margin-top: 1rem;
+            cursor: pointer;
+            transition: color 0.2s;
+        }
+
+        .btn-text:hover {
+            color: var(--brand-primary);
+        }
+
+        .back-link {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            color: var(--text-muted);
+            font-size: 0.75rem;
+            font-weight: 700;
+            text-decoration: none;
+            margin-bottom: 1.5rem;
+            cursor: pointer;
+            transition: color 0.2s;
+        }
+
+        .back-link:hover {
+            color: var(--brand-primary);
+        }
+
+        .identity-chip {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            background: var(--bg-body);
+            border: 1px solid var(--border-color);
+            padding: 0.375rem 0.75rem;
+            border-radius: 0.5rem;
+            font-size: 0.75rem;
+            color: var(--text-muted);
+            width: fit-content;
+            margin-bottom: 1.5rem;
+        }
+
+        .hidden { display: none !important; }
+
+        .error-box {
+            background: #fef2f2;
+            border-left: 4px solid var(--brand-error);
+            color: #b91c1c;
+            padding: 0.75rem;
+            border-radius: 0 0.5rem 0.5rem 0;
+            font-size: 0.75rem;
+            margin-bottom: 1.5rem;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .success-state {
+            text-align: center;
+            padding: 1rem 0;
+        }
+
+        .success-icon {
+            width: 64px;
+            height: 64px;
+            background: #ecfdf5;
+            color: var(--brand-success);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.5rem;
+            margin: 0 auto 1.5rem;
+        }
+
+        .step-transition {
+            animation: fadeInScale 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+        }
+
+        @keyframes fadeInScale {
+            from { opacity: 0; transform: scale(0.99) translateY(5px); }
+            to { opacity: 1; transform: scale(1) translateY(0); }
+        }
+
+        .loader {
+            width: 18px;
+            height: 18px;
+            border: 2px solid rgba(255,255,255,0.3);
+            border-top-color: #fff;
+            border-radius: 50%;
+            animation: spin 0.8s linear infinite;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+
+        .toggle-btn {
+            background: none;
+            border: none;
+            color: var(--text-muted);
+            cursor: pointer;
+            padding: 0.5rem;
+        }
+
+        /* Mobile and popup responsiveness */
+        @media (max-width: 768px) {
+            body {
+                padding: 0;
+                align-items: stretch;
+                justify-content: stretch;
+            }
+
+            .login-card {
+                max-width: none;
+                width: 100%;
+                height: 100vh;
+                border-radius: 0;
+                border: none;
+                box-shadow: none;
+            }
+
+            .card-content {
+                padding: 1.5rem;
+                height: 100%;
+                justify-content: flex-start;
+                padding-top: 2rem;
+            }
+
+            .brand-header {
+                margin-bottom: 1.5rem;
+            }
+
+            h2 {
+                font-size: 1.5rem;
+            }
+
+            .description {
+                font-size: 0.75rem;
+            }
+        }
+    </style>
+</head>
+<body>
+
+    <div class="login-card">
+        <div class="card-content">
+            <!-- Brand -->
+            <div class="brand-header">
+                <div class="brand-icon">
+                    <i class="fa-solid fa-key"></i>
+                </div>
+                <span class="brand-name">{{ appName }}</span>
+            </div>
+
+            <!-- Stage 1: Service Request -->
+            <div id="stage1" class="step-transition">
+                <h2>Sign In</h2>
+                <p class="description">Do you want to sign into <strong>{{ serviceName }}</strong>?</p>
+
+                <div style="display: flex; flex-direction: column; gap: 1rem; margin-top: 2rem;">
+                    <button type="button" class="btn btn-primary" onclick="toStage2()">
+                        <i class="fa-solid fa-arrow-right" style="font-size: 0.75rem; opacity: 0.7;"></i>
+                        Next
+                    </button>
+                </div>
+            </div>
+
+            <!-- Stage 2: Permissions -->
+            <div id="stage2" class="step-transition hidden">
+                <div class="back-link" onclick="backToStage1()">
+                    <i class="fa-solid fa-chevron-left"></i>
+                    Back
+                </div>
+
+                <h2>Permissions</h2>
+                <p class="description">{{ serviceName }} is requesting the following permissions:</p>
+
+                {% for i in permissions: %}
+                <div style="background: var(--bg-body); border-radius: var(--radius-lg); padding: 1rem; margin-bottom: 0.75rem;">
+                    <div style="display: flex; align-items: center; gap: 0.75rem;">
+                        <i class="fa-solid fa-circle-check" style="color: var(--brand-primary); font-size: 1.25rem;"></i>
+                        <div>
+                            <div style="font-weight: 600; color: var(--text-main); font-size: 0.875rem;">{{ i[0] }}</div>
+                            <div style="color: var(--text-muted); font-size: 0.75rem; margin-top: 0.25rem;">{{ i[1] }}</div>
+                        </div>
+                    </div>
+                </div>
+                {% endfor %}
+
+                <div style="display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem;">
+                    <button type="button" class="btn btn-primary" onclick="toStage3()">
+                        <i class="fa-solid fa-arrow-right" style="font-size: 0.75rem; opacity: 0.7;"></i>
+                        Next
+                    </button>
+                </div>
+            </div>
+
+            <!-- Stage 3: Approval -->
+            <div id="stage3" class="step-transition hidden">
+                <div class="back-link" onclick="backToStage2()">
+                    <i class="fa-solid fa-chevron-left"></i>
+                    Back
+                </div>
+                <div class="success-state">
+                    <div class="success-icon">
+                        <i class="fa-solid fa-check"></i>
+                    </div>
+                    <h2>You are logging into</h2>
+                    <p style="color: var(--text-muted); font-size: 1.125rem; font-weight: 600; margin-bottom: 1.5rem;">{{ serviceName }}</p>
+                    <div style="display: flex; flex-direction: column; gap: 1rem;">
+                        <button type="button" class="btn btn-primary" id="approveBtn" onclick="approveService()">
+                            <span id="approveLoader" class="loader hidden"></span>
+                            <span id="approveText">Approve</span>
+                        </button>
+                        <button type="button" class="btn" id="denyBtn" style="background: transparent; color: var(--text-muted); border: 2px solid var(--border-color);" onclick="denyService()">
+                            <span id="denyLoader" class="loader hidden" style="border-color: rgba(100, 116, 139, 0.3); border-top-color: #64748b;"></span>
+                            <i id="denyIcon" class="fa-solid fa-xmark" style="font-size: 0.75rem; opacity: 0.7;"></i>
+                            <span id="denyText">Deny</span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <div id="stage4" class="step-transition hidden">
+                <div class="success-state">
+                    <div class="success-icon" style="background: #fef2f2; color: var(--brand-error);">
+                        <i class="fa-solid fa-xmark"></i>
+                    </div>
+                    <h2>Access Denied</h2>
+                    <p class="description">You have denied access to <strong>{{ serviceName }}</strong>.</p>
+                    <button type="button" class="btn btn-primary" onclick="closeTab()" style="background: var(--brand-error); margin-top: 1.5rem;">
+                        <i class="fa-solid fa-xmark" style="font-size: 0.75rem; opacity: 0.7;"></i>
+                        Close Tab
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Check if in popup and apply fullscreen styling
+        if (window.opener || window.self !== window.top) {
+            document.documentElement.style.width = '100vw';
+            document.documentElement.style.height = '100vh';
+            document.body.style.width = '100vw';
+            document.body.style.height = '100vh';
+            document.querySelector('.login-card').style.maxWidth = 'none';
+            document.querySelector('.login-card').style.width = '100%';
+            document.querySelector('.login-card').style.height = '100vh';
+            document.querySelector('.login-card').style.borderRadius = '0';
+            document.querySelector('.login-card').style.border = 'none';
+            document.querySelector('.login-card').style.boxShadow = 'none';
+        }
+
+        const stages = {
+            1: document.getElementById('stage1'),
+            2: document.getElementById('stage2'),
+            3: document.getElementById('stage3'),
+            4: document.getElementById('stage4')
+        };
+
+        function switchStage(to) {
+            Object.values(stages).forEach(s => s.classList.add('hidden'));
+            stages[to].classList.remove('hidden');
+        }
+
+        function toStage2() {
+            switchStage(2);
+        }
+
+        function toStage3() {
+            switchStage(3);
+        }
+
+        function backToStage1() {
+            switchStage(1);
+        }
+
+        function backToStage2() {
+            switchStage(2);
+        }
+
+        async function approveService() {
+            const btn = document.getElementById('approveBtn');
+            const loader = document.getElementById('approveLoader');
+            const text = document.getElementById('approveText');
+
+            btn.disabled = true;
+            loader.classList.remove('hidden');
+            text.innerText = 'Completing...';
+
+            try {
+                const response = await fetch("{{ url_for('logIntoService') }}", {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify({ 
+                        "request_id": "{{ requestToken }}", 
+                        "service_id": "{{ serviceId }}",
+                        "redirect_url": "{{ redirectUrl }}"
+                    }),
+                });
+                if (!response.ok) {
+                    return { success: false, message: "Signup failed" };
+                }
+                const result = await response.json();
+                return { success: true, result };
+            } catch (error) {
+                console.error(error.message);
+                return { success: false, message: error.message };
+            }
+        }
+
+        function denyService() {
+            const btn = document.getElementById('denyBtn');
+            const loader = document.getElementById('denyLoader');
+            const icon = document.getElementById('denyIcon');
+            const text = document.getElementById('denyText');
+            
+            btn.disabled = true;
+            loader.classList.remove('hidden');
+            icon.classList.add('hidden');
+            text.innerText = 'Denying...';
+
+            setTimeout(() => {
+                switchStage(4);
+            }, 1000);
+        }
+
+        function closeTab() {
+            if (window.opener) {
+                window.close();
+            } else {
+                window.location.href = '/';
+            }
+        }
+    </script>
+</body>
+</html>

templates/home.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    
+</body>
+</html>

templates/logbackintoservice.html

@@ -0,0 +1,459 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Approve Service | {{ appName }}</title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@400;500;600&display=swap');
+        
+        :root {
+            --brand-primary: #6366f1;
+            --brand-hover: #4f46e5;
+            --brand-success: #10b981;
+            --brand-error: #ef4444;
+            --text-main: #0f172a;
+            --text-muted: #64748b;
+            --bg-body: #f8fafc;
+            --border-color: #e2e8f0;
+            --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+            --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+            --radius-xl: 2rem;
+            --radius-lg: 0.75rem;
+        }
+
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: var(--bg-body);
+            background-image: 
+                radial-gradient(at 0% 0%, hsla(253,16%,95%,1) 0, transparent 50%), 
+                radial-gradient(at 100% 0%, hsla(225,39%,90%,1) 0, transparent 50%);
+            height: 100vh;
+            width: 100vw;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 1rem;
+            overflow: hidden;
+        }
+
+        .login-card {
+            max-width: 448px;
+            width: 100%;
+            background: #ffffff;
+            border-radius: var(--radius-xl);
+            box-shadow: var(--shadow-xl);
+            border: 1px solid var(--border-color);
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+
+        .card-content {
+            padding: 2.5rem;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .brand-header {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            margin-bottom: 2rem;
+        }
+
+        .brand-icon {
+            width: 32px;
+            height: 32px;
+            background: var(--brand-primary);
+            border-radius: 8px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+            font-size: 0.875rem;
+        }
+
+        .brand-name {
+            font-family: 'Space Grotesk', sans-serif;
+            font-size: 1.25rem;
+            font-weight: 700;
+            color: var(--text-main);
+            letter-spacing: -0.025em;
+        }
+
+        h2 {
+            font-family: 'Space Grotesk', sans-serif;
+            font-size: 1.875rem;
+            font-weight: 700;
+            color: var(--text-main);
+            margin-bottom: 0.5rem;
+            letter-spacing: -0.025em;
+        }
+
+        .description {
+            color: var(--text-muted);
+            font-size: 0.875rem;
+            margin-bottom: 2rem;
+            line-height: 1.5;
+        }
+
+        .form-group {
+            margin-bottom: 1.5rem;
+        }
+
+        .input-container {
+            display: flex;
+            align-items: center;
+            background: #ffffff;
+            border: 2px solid var(--border-color);
+            border-radius: var(--radius-lg);
+            padding: 0 1rem;
+            transition: all 0.3s ease;
+        }
+
+        .input-container:focus-within {
+            border-color: var(--brand-primary);
+            box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
+        }
+
+        .input-container i {
+            color: var(--text-muted);
+            margin-right: 0.75rem;
+            font-size: 1rem;
+        }
+
+        input {
+            width: 100%;
+            border: none;
+            outline: none;
+            padding: 0.875rem 0;
+            font-size: 1rem;
+            color: var(--text-main);
+            background: transparent;
+        }
+
+        .btn {
+            width: 100%;
+            padding: 1rem;
+            border-radius: var(--radius-lg);
+            border: none;
+            font-size: 1rem;
+            font-weight: 700;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.5rem;
+            transition: all 0.3s ease;
+        }
+
+        .btn-primary {
+            background: var(--brand-primary);
+            color: white;
+            box-shadow: 0 4px 10px rgba(99, 102, 241, 0.2);
+        }
+
+        .btn-primary:hover:not(:disabled) {
+            background: var(--brand-hover);
+            transform: translateY(-1px);
+        }
+
+        .btn-primary:disabled {
+            opacity: 0.7;
+            cursor: not-allowed;
+        }
+
+        .btn-text {
+            background: transparent;
+            color: var(--text-muted);
+            border: none;
+            font-size: 0.875rem;
+            font-weight: 500;
+            margin-top: 1rem;
+            cursor: pointer;
+            transition: color 0.2s;
+        }
+
+        .btn-text:hover {
+            color: var(--brand-primary);
+        }
+
+        .back-link {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            color: var(--text-muted);
+            font-size: 0.75rem;
+            font-weight: 700;
+            text-decoration: none;
+            margin-bottom: 1.5rem;
+            cursor: pointer;
+            transition: color 0.2s;
+        }
+
+        .back-link:hover {
+            color: var(--brand-primary);
+        }
+
+        .identity-chip {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            background: var(--bg-body);
+            border: 1px solid var(--border-color);
+            padding: 0.375rem 0.75rem;
+            border-radius: 0.5rem;
+            font-size: 0.75rem;
+            color: var(--text-muted);
+            width: fit-content;
+            margin-bottom: 1.5rem;
+        }
+
+        .hidden { display: none !important; }
+
+        .error-box {
+            background: #fef2f2;
+            border-left: 4px solid var(--brand-error);
+            color: #b91c1c;
+            padding: 0.75rem;
+            border-radius: 0 0.5rem 0.5rem 0;
+            font-size: 0.75rem;
+            margin-bottom: 1.5rem;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .success-state {
+            text-align: center;
+            padding: 1rem 0;
+        }
+
+        .success-icon {
+            width: 64px;
+            height: 64px;
+            background: #ecfdf5;
+            color: var(--brand-success);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.5rem;
+            margin: 0 auto 1.5rem;
+        }
+
+        .step-transition {
+            animation: fadeInScale 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+        }
+
+        @keyframes fadeInScale {
+            from { opacity: 0; transform: scale(0.99) translateY(5px); }
+            to { opacity: 1; transform: scale(1) translateY(0); }
+        }
+
+        .loader {
+            width: 18px;
+            height: 18px;
+            border: 2px solid rgba(255,255,255,0.3);
+            border-top-color: #fff;
+            border-radius: 50%;
+            animation: spin 0.8s linear infinite;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+
+        .toggle-btn {
+            background: none;
+            border: none;
+            color: var(--text-muted);
+            cursor: pointer;
+            padding: 0.5rem;
+        }
+
+        /* Mobile and popup responsiveness */
+        @media (max-width: 768px) {
+            body {
+                padding: 0;
+                align-items: stretch;
+                justify-content: stretch;
+            }
+
+            .login-card {
+                max-width: none;
+                width: 100%;
+                height: 100vh;
+                border-radius: 0;
+                border: none;
+                box-shadow: none;
+            }
+
+            .card-content {
+                padding: 1.5rem;
+                height: 100%;
+                justify-content: flex-start;
+                padding-top: 2rem;
+            }
+
+            .brand-header {
+                margin-bottom: 1.5rem;
+            }
+
+            h2 {
+                font-size: 1.5rem;
+            }
+
+            .description {
+                font-size: 0.75rem;
+            }
+        }
+    </style>
+</head>
+<body>
+
+    <div class="login-card">
+        <div class="card-content">
+            <!-- Brand -->
+            <div class="brand-header">
+                <div class="brand-icon">
+                    <i class="fa-solid fa-key"></i>
+                </div>
+                <span class="brand-name">{{ appName }}</span>
+            </div>
+
+            <!-- Stage 1: Service Request -->
+            <div id="stage1" class="step-transition">
+                <h2>Sign In</h2>
+                <p class="description">Do you want to log back into <strong>{{ serviceName }}</strong>?</p>
+
+                <div style="display: flex; flex-direction: column; gap: 1rem; margin-top: 2rem;">
+                    <button type="button" class="btn btn-primary" onclick="toStage2()">
+                        <i class="fa-solid fa-arrow-right" style="font-size: 0.75rem; opacity: 0.7;"></i>
+                        Next
+                    </button>
+                </div>
+            </div>
+
+            <!-- Stage 2: Approval -->
+            <div id="stage2" class="step-transition hidden">
+                <div class="back-link" onclick="backToStage1()">
+                    <i class="fa-solid fa-chevron-left"></i>
+                    Back
+                </div>
+                <div class="success-state">
+                    <div class="success-icon">
+                        <i class="fa-solid fa-check"></i>
+                    </div>
+                    <h2>You are logging into</h2>
+                    <p style="color: var(--text-muted); font-size: 1.125rem; font-weight: 600; margin-bottom: 1.5rem;">{{ serviceName }}</p>
+                    <div style="display: flex; flex-direction: column; gap: 1rem;">
+                        <button type="button" class="btn btn-primary" id="approveBtn" onclick="approveService()">
+                            <span id="approveLoader" class="loader hidden"></span>
+                            <span id="approveText">Approve</span>
+                        </button>
+                        <button type="button" class="btn" id="denyBtn" style="background: transparent; color: var(--text-muted); border: 2px solid var(--border-color);" onclick="denyService()">
+                            <span id="denyLoader" class="loader hidden" style="border-color: rgba(100, 116, 139, 0.3); border-top-color: #64748b;"></span>
+                            <i id="denyIcon" class="fa-solid fa-xmark" style="font-size: 0.75rem; opacity: 0.7;"></i>
+                            <span id="denyText">Deny</span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <div id="stage3" class="step-transition hidden">
+                <div class="success-state">
+                    <div class="success-icon" style="background: #fef2f2; color: var(--brand-error);">
+                        <i class="fa-solid fa-xmark"></i>
+                    </div>
+                    <h2>Access Denied</h2>
+                    <p class="description">You have denied access to <strong>{{ serviceName }}</strong>.</p>
+                    <button type="button" class="btn btn-primary" onclick="closeTab()" style="background: var(--brand-error); margin-top: 1.5rem;">
+                        <i class="fa-solid fa-xmark" style="font-size: 0.75rem; opacity: 0.7;"></i>
+                        Close Tab
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Check if in popup and apply fullscreen styling
+        if (window.opener || window.self !== window.top) {
+            document.documentElement.style.width = '100vw';
+            document.documentElement.style.height = '100vh';
+            document.body.style.width = '100vw';
+            document.body.style.height = '100vh';
+            document.querySelector('.login-card').style.maxWidth = 'none';
+            document.querySelector('.login-card').style.width = '100%';
+            document.querySelector('.login-card').style.height = '100vh';
+            document.querySelector('.login-card').style.borderRadius = '0';
+            document.querySelector('.login-card').style.border = 'none';
+            document.querySelector('.login-card').style.boxShadow = 'none';
+        }
+
+        const stages = {
+            1: document.getElementById('stage1'),
+            2: document.getElementById('stage2'),
+            3: document.getElementById('stage3')
+        };
+
+        function switchStage(to) {
+            Object.values(stages).forEach(s => s.classList.add('hidden'));
+            stages[to].classList.remove('hidden');
+        }
+
+        function toStage2() {
+            switchStage(2);
+        }
+
+        function backToStage1() {
+            switchStage(1);
+        }
+
+        function approveService() {
+            const btn = document.getElementById('approveBtn');
+            const loader = document.getElementById('approveLoader');
+            const text = document.getElementById('approveText');
+
+            btn.disabled = true;
+            loader.classList.remove('hidden');
+            text.innerText = 'Completing...';
+
+            // Empty function - to be implemented
+        }
+
+        function denyService() {
+            const btn = document.getElementById('denyBtn');
+            const loader = document.getElementById('denyLoader');
+            const icon = document.getElementById('denyIcon');
+            const text = document.getElementById('denyText');
+            
+            btn.disabled = true;
+            loader.classList.remove('hidden');
+            icon.classList.add('hidden');
+            text.innerText = 'Denying...';
+
+            setTimeout(() => {
+                switchStage(3);
+            }, 1000);
+        }
+
+        function closeTab() {
+            if (window.opener) {
+                window.close();
+            } else {
+                window.location.href = '/';
+            }
+        }
+    </script>
+</body>
+</html>

templates/login.html

@@ -280,6 +280,43 @@
             cursor: pointer;
             padding: 0.5rem;
         }
+
+        /* Mobile and popup responsiveness */
+        @media (max-width: 768px) {
+            body {
+                padding: 0;
+                align-items: stretch;
+                justify-content: stretch;
+            }
+
+            .login-card {
+                max-width: none;
+                width: 100%;
+                height: 100vh;
+                border-radius: 0;
+                border: none;
+                box-shadow: none;
+            }
+
+            .card-content {
+                padding: 1.5rem;
+                height: 100%;
+                justify-content: flex-start;
+                padding-top: 2rem;
+            }
+
+            .brand-header {
+                margin-bottom: 1.5rem;
+            }
+
+            h2 {
+                font-size: 1.5rem;
+            }
+
+            .description {
+                font-size: 0.75rem;
+            }
+        }
     </style>
 </head>
 <body>
@@ -313,6 +350,10 @@
                         <i class="fa-solid fa-arrow-right" style="font-size: 0.75rem; opacity: 0.7;" id="nextIcon"></i>
                     </button>
                 </form>
+
+                <div style="text-align: center; margin-top: 1.5rem;">
+                    <p style="color: var(--text-muted); font-size: 0.875rem;">Don't have an account? <a href="/signup" style="color: var(--brand-primary); text-decoration: none; font-weight: 600;">Sign up</a></p>
+                </div>
             </div>
 
             <!-- Stage 2: Verification -->
@@ -396,6 +437,20 @@
     </div>
 
     <script>
+        // Check if in popup and apply fullscreen styling
+        if (window.opener || window.self !== window.top) {
+            document.documentElement.style.width = '100vw';
+            document.documentElement.style.height = '100vh';
+            document.body.style.width = '100vw';
+            document.body.style.height = '100vh';
+            document.querySelector('.login-card').style.maxWidth = 'none';
+            document.querySelector('.login-card').style.width = '100%';
+            document.querySelector('.login-card').style.height = '100vh';
+            document.querySelector('.login-card').style.borderRadius = '0';
+            document.querySelector('.login-card').style.border = 'none';
+            document.querySelector('.login-card').style.boxShadow = 'none';
+        }
+
         const stages = {
             1: document.getElementById('stage1'),
             2: document.getElementById('stage2'),

templates/logout.html

@@ -0,0 +1,187 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Logged Out | {{ appName }}</title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@400;500;600&display=swap');
+        
+        :root {
+            --brand-primary: #6366f1;
+            --brand-hover: #4f46e5;
+            --brand-success: #10b981;
+            --text-main: #0f172a;
+            --text-muted: #64748b;
+            --bg-body: #f8fafc;
+            --border-color: #e2e8f0;
+            --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+            --radius-xl: 2rem;
+            --radius-lg: 0.75rem;
+        }
+
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: var(--bg-body);
+            background-image: 
+                radial-gradient(at 0% 0%, hsla(253,16%,95%,1) 0, transparent 50%), 
+                radial-gradient(at 100% 0%, hsla(225,39%,90%,1) 0, transparent 50%);
+            height: 100vh;
+            width: 100vw;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 1rem;
+            overflow: hidden;
+        }
+
+        .logout-card {
+            max-width: 448px;
+            width: 100%;
+            background: #ffffff;
+            border-radius: var(--radius-xl);
+            box-shadow: var(--shadow-xl);
+            border: 1px solid var(--border-color);
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+
+        .card-content {
+            padding: 2.5rem;
+            display: flex;
+            flex-direction: column;
+            text-align: center;
+        }
+
+        .logout-icon {
+            width: 80px;
+            height: 80px;
+            background: #ecfdf5;
+            color: var(--brand-success);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 2rem;
+            margin: 0 auto 2rem;
+        }
+
+        h1 {
+            font-family: 'Space Grotesk', sans-serif;
+            font-size: 1.875rem;
+            font-weight: 700;
+            color: var(--text-main);
+            margin-bottom: 1rem;
+            letter-spacing: -0.025em;
+        }
+
+        .description {
+            color: var(--text-muted);
+            font-size: 1rem;
+            margin-bottom: 2rem;
+            line-height: 1.5;
+        }
+
+        .btn {
+            width: 100%;
+            padding: 1rem;
+            border-radius: var(--radius-lg);
+            border: none;
+            font-size: 1rem;
+            font-weight: 700;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.5rem;
+            transition: all 0.3s ease;
+            text-decoration: none;
+        }
+
+        .btn-primary {
+            background: var(--brand-primary);
+            color: white;
+            box-shadow: 0 4px 10px rgba(99, 102, 241, 0.2);
+        }
+
+        .btn-primary:hover {
+            background: var(--brand-hover);
+            transform: translateY(-1px);
+        }
+
+        /* Mobile and popup responsiveness */
+        @media (max-width: 768px) {
+            body {
+                padding: 0;
+                align-items: stretch;
+                justify-content: stretch;
+            }
+
+            .logout-card {
+                max-width: none;
+                width: 100%;
+                height: 100vh;
+                border-radius: 0;
+                border: none;
+                box-shadow: none;
+            }
+
+            .card-content {
+                padding: 1.5rem;
+                height: 100%;
+                justify-content: center;
+            }
+
+            h1 {
+                font-size: 1.5rem;
+            }
+
+            .description {
+                font-size: 0.875rem;
+            }
+        }
+    </style>
+</head>
+<body>
+
+    <script>
+        // Check if in popup and apply fullscreen styling
+        if (window.opener || window.self !== window.top) {
+            document.documentElement.style.width = '100vw';
+            document.documentElement.style.height = '100vh';
+            document.body.style.width = '100vw';
+            document.body.style.height = '100vh';
+            document.querySelector('.logout-card').style.maxWidth = 'none';
+            document.querySelector('.logout-card').style.width = '100%';
+            document.querySelector('.logout-card').style.height = '100vh';
+            document.querySelector('.logout-card').style.borderRadius = '0';
+            document.querySelector('.logout-card').style.border = 'none';
+            document.querySelector('.logout-card').style.boxShadow = 'none';
+        }
+    </script>
+
+    <div class="logout-card">
+        <div class="card-content">
+            <div class="logout-icon">
+                <i class="fa-solid fa-check"></i>
+            </div>
+            
+            <h1>You have been logged out</h1>
+            <p class="description">Your session has ended. You have been successfully logged out of your account.</p>
+            
+            <a href="/login" class="btn btn-primary">
+                <i class="fa-solid fa-arrow-left"></i>
+                Back to Login
+            </a>
+        </div>
+    </div>
+</body>
+</html>

templates/signup.html

@@ -0,0 +1,683 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sign Up | {{ appName }}</title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@400;500;600&display=swap');
+        
+        :root {
+            --brand-primary: #6366f1;
+            --brand-hover: #4f46e5;
+            --brand-success: #10b981;
+            --brand-error: #ef4444;
+            --text-main: #0f172a;
+            --text-muted: #64748b;
+            --bg-body: #f8fafc;
+            --border-color: #e2e8f0;
+            --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+            --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+            --radius-xl: 2rem;
+            --radius-lg: 0.75rem;
+        }
+
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: var(--bg-body);
+            background-image: 
+                radial-gradient(at 0% 0%, hsla(253,16%,95%,1) 0, transparent 50%), 
+                radial-gradient(at 100% 0%, hsla(225,39%,90%,1) 0, transparent 50%);
+            height: 100vh;
+            width: 100vw;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 1rem;
+            overflow: hidden;
+        }
+
+        .login-card {
+            max-width: 448px;
+            width: 100%;
+            background: #ffffff;
+            border-radius: var(--radius-xl);
+            box-shadow: var(--shadow-xl);
+            border: 1px solid var(--border-color);
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+
+        .card-content {
+            padding: 2.5rem;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .brand-header {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            margin-bottom: 2rem;
+        }
+
+        .brand-icon {
+            width: 32px;
+            height: 32px;
+            background: var(--brand-primary);
+            border-radius: 8px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+            font-size: 0.875rem;
+        }
+
+        .brand-name {
+            font-family: 'Space Grotesk', sans-serif;
+            font-size: 1.25rem;
+            font-weight: 700;
+            color: var(--text-main);
+            letter-spacing: -0.025em;
+        }
+
+        h2 {
+            font-family: 'Space Grotesk', sans-serif;
+            font-size: 1.875rem;
+            font-weight: 700;
+            color: var(--text-main);
+            margin-bottom: 0.5rem;
+            letter-spacing: -0.025em;
+        }
+
+        .description {
+            color: var(--text-muted);
+            font-size: 0.875rem;
+            margin-bottom: 2rem;
+            line-height: 1.5;
+        }
+
+        .form-group {
+            margin-bottom: 1.5rem;
+        }
+
+        .input-container {
+            display: flex;
+            align-items: center;
+            background: #ffffff;
+            border: 2px solid var(--border-color);
+            border-radius: var(--radius-lg);
+            padding: 0 1rem;
+            transition: all 0.3s ease;
+        }
+
+        .input-container:focus-within {
+            border-color: var(--brand-primary);
+            box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
+        }
+
+        .input-container i {
+            color: var(--text-muted);
+            margin-right: 0.75rem;
+            font-size: 1rem;
+        }
+
+        input {
+            width: 100%;
+            border: none;
+            outline: none;
+            padding: 0.875rem 0;
+            font-size: 1rem;
+            color: var(--text-main);
+            background: transparent;
+        }
+
+        .btn {
+            width: 100%;
+            padding: 1rem;
+            border-radius: var(--radius-lg);
+            border: none;
+            font-size: 1rem;
+            font-weight: 700;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.5rem;
+            transition: all 0.3s ease;
+        }
+
+        .btn-primary {
+            background: var(--brand-primary);
+            color: white;
+            box-shadow: 0 4px 10px rgba(99, 102, 241, 0.2);
+        }
+
+        .btn-primary:hover:not(:disabled) {
+            background: var(--brand-hover);
+            transform: translateY(-1px);
+        }
+
+        .btn-primary:disabled {
+            opacity: 0.7;
+            cursor: not-allowed;
+        }
+
+        .btn-text {
+            background: transparent;
+            color: var(--text-muted);
+            border: none;
+            font-size: 0.875rem;
+            font-weight: 500;
+            margin-top: 1rem;
+            cursor: pointer;
+            transition: color 0.2s;
+        }
+
+        .btn-text:hover {
+            color: var(--brand-primary);
+        }
+
+        .back-link {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            color: var(--text-muted);
+            font-size: 0.75rem;
+            font-weight: 700;
+            text-decoration: none;
+            margin-bottom: 1.5rem;
+            cursor: pointer;
+            transition: color 0.2s;
+        }
+
+        .back-link:hover {
+            color: var(--brand-primary);
+        }
+
+        .identity-chip {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            background: var(--bg-body);
+            border: 1px solid var(--border-color);
+            padding: 0.375rem 0.75rem;
+            border-radius: 0.5rem;
+            font-size: 0.75rem;
+            color: var(--text-muted);
+            width: fit-content;
+            margin-bottom: 1.5rem;
+        }
+
+        .hidden { display: none !important; }
+
+        .error-box {
+            background: #fef2f2;
+            border-left: 4px solid var(--brand-error);
+            color: #b91c1c;
+            padding: 0.75rem;
+            border-radius: 0 0.5rem 0.5rem 0;
+            font-size: 0.75rem;
+            margin-bottom: 1.5rem;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .success-state {
+            text-align: center;
+            padding: 1rem 0;
+        }
+
+        .success-icon {
+            width: 64px;
+            height: 64px;
+            background: #ecfdf5;
+            color: var(--brand-success);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.5rem;
+            margin: 0 auto 1.5rem;
+        }
+
+        .step-transition {
+            animation: fadeInScale 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+        }
+
+        @keyframes fadeInScale {
+            from { opacity: 0; transform: scale(0.99) translateY(5px); }
+            to { opacity: 1; transform: scale(1) translateY(0); }
+        }
+
+        .loader {
+            width: 18px;
+            height: 18px;
+            border: 2px solid rgba(255,255,255,0.3);
+            border-top-color: #fff;
+            border-radius: 50%;
+            animation: spin 0.8s linear infinite;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+
+        .toggle-btn {
+            background: none;
+            border: none;
+            color: var(--text-muted);
+            cursor: pointer;
+            padding: 0.5rem;
+        }
+
+        /* Mobile and popup responsiveness */
+        @media (max-width: 768px) {
+            body {
+                padding: 0;
+                align-items: stretch;
+                justify-content: stretch;
+            }
+
+            .login-card {
+                max-width: none;
+                width: 100%;
+                height: 100vh;
+                border-radius: 0;
+                border: none;
+                box-shadow: none;
+            }
+
+            .card-content {
+                padding: 1.5rem;
+                height: 100%;
+                justify-content: flex-start;
+                padding-top: 2rem;
+            }
+
+            .brand-header {
+                margin-bottom: 1.5rem;
+            }
+
+            h2 {
+                font-size: 1.5rem;
+            }
+
+            .description {
+                font-size: 0.75rem;
+            }
+        }
+    </style>
+</head>
+<body>
+
+    <div class="login-card">
+        <div class="card-content">
+            <!-- Brand -->
+            <div class="brand-header">
+                <div class="brand-icon">
+                    <i class="fa-solid fa-key"></i>
+                </div>
+                <span class="brand-name">{{ appName }}</span>
+            </div>
+
+            <!-- Stage 1: Email -->
+            <div id="stage1" class="step-transition">
+                <h2>Create Account</h2>
+                <p class="description">Let's get you started with your new account</p>
+
+                <form id="emailForm" onsubmit="toStage2(event)">
+                    <div class="form-group">
+                        <div class="input-container">
+                            <i class="fa-solid fa-envelope"></i>
+                            <input type="email" id="email" required placeholder="name@company.com">
+                        </div>
+                    </div>
+
+                    <button type="submit" id="nextBtn" class="btn btn-primary">
+                        <span id="nextLoader" class="loader hidden"></span>
+                        <span id="nextText">Next</span>
+                        <i class="fa-solid fa-arrow-right" style="font-size: 0.75rem; opacity: 0.7;" id="nextIcon"></i>
+                    </button>
+                </form>
+            </div>
+
+            <!-- Stage 2: Name & Username -->
+            <div id="stage2" class="step-transition hidden">
+                <div class="back-link" onclick="backToStage1()">
+                    <i class="fa-solid fa-chevron-left"></i>
+                    Change email
+                </div>
+
+                <h2>Personal Info</h2>
+                <div class="identity-chip">
+                    <i class="fa-solid fa-envelope"></i>
+                    <span id="displayEmail"></span>
+                </div>
+
+                <form id="infoForm" onsubmit="toStage3(event)">
+                    <div class="form-group">
+                        <div class="input-container">
+                            <i class="fa-solid fa-user"></i>
+                            <input type="text" id="name" required placeholder="Full name">
+                        </div>
+                    </div>
+
+                    <div class="form-group">
+                        <div class="input-container">
+                            <i class="fa-solid fa-at"></i>
+                            <input type="text" id="username" required placeholder="Username">
+                        </div>
+                    </div>
+
+                    <button type="submit" id="infoBtn" class="btn btn-primary">
+                        <span id="infoLoader" class="loader hidden"></span>
+                        <span id="infoText">Next</span>
+                        <i class="fa-solid fa-arrow-right" style="font-size: 0.75rem; opacity: 0.7;" id="infoIcon"></i>
+                    </button>
+                </form>
+            </div>
+
+            <!-- Stage 3: Password -->
+            <div id="stage3" class="step-transition hidden">
+                <div class="back-link" onclick="backToStage2()">
+                    <i class="fa-solid fa-chevron-left"></i>
+                    Back
+                </div>
+
+                <h2>Set Password</h2>
+                <p class="description">Create a strong password for your account</p>
+
+                <form id="passwordForm" onsubmit="handleSignup(event)">
+                    <div class="form-group">
+                        <div class="input-container">
+                            <i class="fa-solid fa-lock"></i>
+                            <input type="password" id="password" required placeholder="Enter password" autocomplete="new-password">
+                            <button type="button" class="toggle-btn" onclick="togglePassword()">
+                                <i id="eyeIcon" class="fa-solid fa-eye"></i>
+                            </button>
+                        </div>
+                    </div>
+
+                    <div class="form-group">
+                        <div class="input-container">
+                            <i class="fa-solid fa-lock"></i>
+                            <input type="password" id="confirmPassword" required placeholder="Confirm password" autocomplete="new-password">
+                            <button type="button" class="toggle-btn" onclick="toggleConfirmPassword()">
+                                <i id="confirmEyeIcon" class="fa-solid fa-eye"></i>
+                            </button>
+                        </div>
+                    </div>
+
+                    <div id="passwordError" class="error-box hidden">
+                        <i class="fa-solid fa-circle-exclamation"></i>
+                        <span id="passwordErrorText">Passwords do not match</span>
+                    </div>
+
+                    <button type="submit" id="signupBtn" class="btn btn-primary">
+                        <span id="signupLoader" class="loader hidden"></span>
+                        <span id="signupText">Create Account</span>
+                    </button>
+                </form>
+            </div>
+
+            <!-- Success Stage -->
+            <div id="successStage" class="step-transition hidden">
+                <div class="success-state">
+                    <div class="success-icon">
+                        <i class="fa-solid fa-check"></i>
+                    </div>
+                    <h2>Account Created!</h2>
+                    <p class="description">Welcome to {{ appName }}! Your account has been created successfully.</p>
+                    <button class="btn btn-primary" onclick="window.location.href='/'">
+                        Go to Dashboard
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Check if in popup and apply fullscreen styling
+        if (window.opener || window.self !== window.top) {
+            document.documentElement.style.width = '100vw';
+            document.documentElement.style.height = '100vh';
+            document.body.style.width = '100vw';
+            document.body.style.height = '100vh';
+            document.querySelector('.login-card').style.maxWidth = 'none';
+            document.querySelector('.login-card').style.width = '100%';
+            document.querySelector('.login-card').style.height = '100vh';
+            document.querySelector('.login-card').style.borderRadius = '0';
+            document.querySelector('.login-card').style.border = 'none';
+            document.querySelector('.login-card').style.boxShadow = 'none';
+        }
+
+        const stages = {
+            1: document.getElementById('stage1'),
+            2: document.getElementById('stage2'),
+            3: document.getElementById('stage3'),
+            success: document.getElementById('successStage')
+        };
+        
+        const emailInput = document.getElementById('email');
+        const nameInput = document.getElementById('name');
+        const usernameInput = document.getElementById('username');
+        const passwordInput = document.getElementById('password');
+        const confirmPasswordInput = document.getElementById('confirmPassword');
+        const displayEmail = document.getElementById('displayEmail');
+        const passwordError = document.getElementById('passwordError');
+        const passwordErrorText = document.getElementById('passwordErrorText');
+
+	async function sendSignupRequest(email, name, username, password) {
+	    try {
+                const response = await fetch("{{ url_for('handleSignup') }}", {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify({ 
+                        "email": email, 
+                        "name": name,
+                        "username": username, 
+                        "password": password 
+                    }),
+                });
+                if (!response.ok) {
+                    return { success: false, message: "Signup failed" };
+                }
+                const result = await response.json();
+                return { success: true, result };
+            } catch (error) {
+                console.error(error.message);
+                return { success: false, message: error.message };
+            }
+	}
+
+	async function sendLoginRequest(username, password) {
+	    try {
+                const response = await fetch("{{ url_for('handleLogin') }}", {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify({ "username": username, "password": password }),
+                });
+                if (!response.ok) {
+                    return false;
+                }
+                const result = await response.json();
+                if (result != "Invalid username or password") {
+                    document.cookie = `auth_token=${result}`;
+                    return true;
+                } else {
+                    return false;
+                }
+            } catch (error) {
+                console.error(error.message);
+                return false;
+            }
+	}
+
+        function switchStage(to) {
+            Object.values(stages).forEach(s => s.classList.add('hidden'));
+            stages[to].classList.remove('hidden');
+        }
+
+        function toStage2(e) {
+            e.preventDefault();
+            const btn = document.getElementById('nextBtn');
+            const loader = document.getElementById('nextLoader');
+            const text = document.getElementById('nextText');
+            const icon = document.getElementById('nextIcon');
+            
+            btn.disabled = true;
+            loader.classList.remove('hidden');
+            icon.classList.add('hidden');
+            text.innerText = 'Verifying...';
+
+            setTimeout(() => {
+                const email = emailInput.value;
+                displayEmail.innerText = email;
+                switchStage(2);
+                nameInput.value = '';
+                usernameInput.value = '';
+                nameInput.focus();
+                
+                btn.disabled = false;
+                loader.classList.add('hidden');
+                icon.classList.remove('hidden');
+                text.innerText = 'Next';
+            }, 600);
+        }
+
+        function toStage3(e) {
+            e.preventDefault();
+            const btn = document.getElementById('infoBtn');
+            const loader = document.getElementById('infoLoader');
+            const text = document.getElementById('infoText');
+            const icon = document.getElementById('infoIcon');
+            
+            btn.disabled = true;
+            loader.classList.remove('hidden');
+            icon.classList.add('hidden');
+            text.innerText = 'Next...';
+
+            setTimeout(() => {
+                switchStage(3);
+                passwordError.classList.add('hidden');
+                passwordInput.value = '';
+                confirmPasswordInput.value = '';
+                passwordInput.focus();
+                
+                btn.disabled = false;
+                loader.classList.add('hidden');
+                icon.classList.remove('hidden');
+                text.innerText = 'Next';
+            }, 600);
+        }
+
+        function backToStage1() {
+            switchStage(1);
+            emailInput.focus();
+        }
+
+        function backToStage2() {
+            switchStage(2);
+            nameInput.focus();
+        }
+
+        function togglePassword() {
+            const eyeIcon = document.getElementById('eyeIcon');
+            if (passwordInput.type === 'password') {
+                passwordInput.type = 'text';
+                eyeIcon.classList.replace('fa-eye', 'fa-eye-slash');
+            } else {
+                passwordInput.type = 'password';
+                eyeIcon.classList.replace('fa-eye-slash', 'fa-eye');
+            }
+        }
+
+        function toggleConfirmPassword() {
+            const eyeIcon = document.getElementById('confirmEyeIcon');
+            if (confirmPasswordInput.type === 'password') {
+                confirmPasswordInput.type = 'text';
+                eyeIcon.classList.replace('fa-eye', 'fa-eye-slash');
+            } else {
+                confirmPasswordInput.type = 'password';
+                eyeIcon.classList.replace('fa-eye-slash', 'fa-eye');
+            }
+        }
+
+        async function handleSignup(e) {
+            e.preventDefault();
+            
+            const password = passwordInput.value.trim();
+            const confirmPassword = confirmPasswordInput.value.trim();
+
+            if (password !== confirmPassword) {
+                passwordErrorText.innerText = 'Passwords do not match';
+                passwordError.classList.remove('hidden');
+                return;
+            }
+
+            if (password.length < 6) {
+                passwordErrorText.innerText = 'Password must be at least 6 characters';
+                passwordError.classList.remove('hidden');
+                return;
+            }
+
+            const btn = document.getElementById('signupBtn');
+            const loader = document.getElementById('signupLoader');
+            const text = document.getElementById('signupText');
+
+            passwordError.classList.add('hidden');
+            btn.disabled = true;
+            loader.classList.remove('hidden');
+            text.innerText = 'Creating account...';
+
+            const result = await sendSignupRequest(
+                emailInput.value, 
+                nameInput.value,
+                usernameInput.value,
+                password
+            );
+
+            setTimeout(() => {
+                if (result.success) {
+                    text.innerText = 'Account created!';
+                    btn.style.backgroundColor = 'var(--brand-success)';
+                    
+                    setTimeout(async () => {
+                        text.innerText = 'Logging in...';
+                        const loginSuccess = await sendLoginRequest(usernameInput.value, password);
+                        
+                        if (loginSuccess) {
+                            text.innerText = 'Welcome!';
+                            setTimeout(() => window.location.href = '/', 500);
+                        } else {
+                            text.innerText = 'Redirecting...';
+                            setTimeout(() => window.location.href = '/', 1000);
+                        }
+                    }, 800);
+                } else {
+                    passwordErrorText.innerText = result.message || 'Signup failed';
+                    passwordError.classList.remove('hidden');
+                    btn.disabled = false;
+                    loader.classList.add('hidden');
+                    text.innerText = 'Create Account';
+                }
+            }, 1000);
+        }
+    </script>
+</body>
+</html>