hugo/Outpost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Hugo H
2025-12-23 22:06:29 +00:00
parent 5fef4ac7c8
commit 43736d68bb
11 changed files with 2202 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
config.json Normal file
View File

@@ -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"]
}
}

189
db.py
View File

@@ -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(

25
initdb.py
View File

@@ -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

0
logout.html Normal file
View File

76
main.py
View File

@@ -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']
db.createUser(displayName, username, email, password, DB_USER, DB_PASSWORD, DB_HOST, DB_NAME)
except:
return jsonify("An error occured")
name = request.json['name']
root_group = db.getGroupByName("root", DB_USER, DB_PASSWORD, DB_HOST, DB_NAME)
group_id = root_group['id'] if root_group else None
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)

518
templates/approveservice.html Normal file
View File

@@ -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>

11
templates/home.html Normal file
View File

@@ -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>

459
templates/logbackintoservice.html Normal file
View File

@@ -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>

55
templates/login.html
View File

@@ -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'),

187
templates/logout.html Normal file
View File

@@ -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>

683
templates/signup.html Normal file
View File

@@ -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>