Codeai / backend /public /auth.html
zhlajiex
Fix: Update Hugging Face Inference API endpoint to router.huggingface.co and stabilize auth
fa1e2bc
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<title>ACCESS | TITAN v9.0</title>
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='30' fill='black'/><path d='M50 15 L35 55 H48 L40 85 L65 45 H52 L60 15 Z' fill='white'/></svg>">
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Inter:wght@300;600;900&display=swap" rel="stylesheet">
<style>
:root { --bg: #030303; --panel: rgba(20, 20, 20, 0.6); --border: rgba(255, 255, 255, 0.08); --glass: blur(30px); }
body {
background: var(--bg); color: #fff; font-family: 'Inter', sans-serif;
min-height: 100dvh; display: flex; align-items: center; justify-content: center;
background-image: radial-gradient(circle at 50% 0%, #111 0%, #000 80%);
}
.glass-card {
background: var(--panel); backdrop-filter: var(--glass);
border: 1px solid var(--border); border-radius: 2rem;
padding: 3rem; width: 100%; max-width: 420px;
box-shadow: 0 40px 100px rgba(0,0,0,0.8);
}
input {
background: rgba(0,0,0,0.3) !important; border: 1px solid var(--border) !important;
border-radius: 1rem !important; padding: 1.2rem !important;
color: #fff !important; font-size: 14px !important; font-family: 'JetBrains Mono' !important;
width: 100%; transition: 0.3s;
}
input:focus { border-color: #fff !important; background: rgba(255,255,255,0.05) !important; }
.btn-auth {
background: #fff; color: #000; padding: 1.2rem; border-radius: 1rem;
font-weight: 900; text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px;
width: 100%; transition: 0.3s;
}
.btn-auth:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(255,255,255,0.15); }
</style>
</head>
<body class="p-6">
<div class="glass-card space-y-8">
<div class="text-center">
<h1 class="text-2xl font-black tracking-tight mb-2 uppercase" id="header-title">Identify</h1>
<p class="text-[10px] font-bold tracking-[0.4em] text-gray-500 uppercase">Titan Secure Gateway</p>
</div>
<form id="auth-form" class="space-y-4">
<div id="name-field" class="hidden"><input type="text" id="name" placeholder="ARCHITECT NAME"></div>
<input type="email" id="email" placeholder="NEURAL ID (EMAIL)" required>
<input type="password" id="password" placeholder="PASSPHRASE" required>
<div id="key-field" class="hidden"><input type="text" id="accessKey" placeholder="ACCESS TOKEN"></div>
<button type="submit" id="submit-btn" class="btn-auth">Authenticate</button>
</form>
<div class="pt-6 border-t border-white/5 text-center space-y-4">
<button type="button" id="toggle-mode" class="text-[9px] font-bold text-gray-500 uppercase tracking-widest hover:text-white transition">
New User? Initialize Protocol
</button>
</div>
</div>
<script>
const form = document.getElementById('auth-form');
const modeBtn = document.getElementById('toggle-mode');
const nameField = document.getElementById('name-field');
const keyField = document.getElementById('key-field');
const header = document.getElementById('header-title');
const submitBtn = document.getElementById('submit-btn');
let isLogin = true;
// Auto-login check
window.onload = () => {
const token = localStorage.getItem('token');
if (token) window.location.href = '/chat';
};
modeBtn.onclick = () => {
isLogin = !isLogin;
nameField.classList.toggle('hidden', isLogin);
keyField.classList.toggle('hidden', isLogin);
header.innerText = isLogin ? 'Identify' : 'Initialize';
submitBtn.innerText = isLogin ? 'Authenticate' : 'Create Node';
modeBtn.innerText = isLogin ? 'New User? Initialize Protocol' : 'Existing Node? Identify';
};
// Smart Uplink Detection
const API_BASE = window.location.origin;
form.onsubmit = async (e) => {
e.preventDefault();
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
const payload = isLogin
? { email, password }
: {
email, password,
name: document.getElementById('name').value,
accessKey: document.getElementById('accessKey').value
};
try {
const res = await fetch(`${API_BASE}${isLogin ? '/api/auth/login' : '/api/auth/register'}`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload)
});
const data = await res.json();
if (data.success) {
if (isLogin) {
console.log("Neural Token Received. Length:", data.token.length);
localStorage.setItem('token', data.token);
window.location.href = '/chat';
} else {
alert('Node Initialized. Please Identify.');
location.reload();
}
} else {
alert('Access Denied: ' + data.error);
}
} catch (err) {
alert('System Offline.');
}
};
</script>
</body>
</html>