164 lines
6.3 KiB
HTML
164 lines
6.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="Login1.css">
|
|
<title>Space Odyssey</title>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="stars"></div>
|
|
<div class="neon-grid"></div>
|
|
|
|
<div class="layout">
|
|
<div class="left-panel">
|
|
<div class="title-container">
|
|
<h1 class="main-title">SPACE<br>ODYSSEY</h1>
|
|
<div class="subtitle" id="subtitle">Initializing Spaceship</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="right-panel">
|
|
<div class="form-box">
|
|
<div class="form-content">
|
|
<h2 class="form-title" id="formTitle">Access Terminal</h2>
|
|
|
|
<label for="username" id="loginLabel">Username</label>
|
|
<input type="text" id="username" placeholder="Enter callsign..." autocomplete="username">
|
|
|
|
<label for="password">Password</label>
|
|
<input type="password" id="password" placeholder="Enter access code..."
|
|
autocomplete="current-password">
|
|
|
|
<div class="button-group">
|
|
<button class="btn-send" type="button" id="connectBtn">Connect</button>
|
|
<div class="signup-text">
|
|
<span id="toggleText">Don't have a terminal?</span> <a href="#" id="toggleLink">Sign up</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="user-list" id="userList"></div>
|
|
|
|
<script>
|
|
let mode = 'login';
|
|
let userCounter = 0;
|
|
|
|
const els = {
|
|
subtitle: document.getElementById('subtitle'),
|
|
formTitle: document.getElementById('formTitle'),
|
|
loginLabel: document.getElementById('loginLabel'),
|
|
username: document.getElementById('username'),
|
|
password: document.getElementById('password'),
|
|
connectBtn: document.getElementById('connectBtn'),
|
|
toggleText: document.getElementById('toggleText'),
|
|
toggleLink: document.getElementById('toggleLink'),
|
|
userList: document.getElementById('userList'),
|
|
};
|
|
|
|
function showToast(htmlText) {
|
|
const userId = 'user_' + userCounter++;
|
|
const userCard = document.createElement('div');
|
|
userCard.className = 'user-card';
|
|
userCard.id = userId;
|
|
userCard.innerHTML = `<div class="user-name">${htmlText}</div>`;
|
|
els.userList.appendChild(userCard);
|
|
|
|
setTimeout(() => {
|
|
userCard.classList.add('usercardfade-out');
|
|
setTimeout(() => userCard.remove(), 500);
|
|
}, 3000);
|
|
}
|
|
|
|
function setMode(nextMode) {
|
|
mode = nextMode;
|
|
|
|
if (mode === 'login') {
|
|
els.formTitle.textContent = 'Access Terminal';
|
|
els.subtitle.textContent = 'Initializing Spaceship';
|
|
els.loginLabel.textContent = 'Username';
|
|
els.username.placeholder = 'Enter callsign...';
|
|
els.password.autocomplete = 'current-password';
|
|
els.connectBtn.textContent = 'Connect';
|
|
els.toggleText.textContent = "Don't have a terminal?";
|
|
els.toggleLink.textContent = 'Sign up';
|
|
} else {
|
|
els.formTitle.textContent = 'Create Terminal';
|
|
els.subtitle.textContent = 'Registering Pilot';
|
|
els.loginLabel.textContent = 'Username';
|
|
els.username.placeholder = 'Choose callsign...';
|
|
els.password.autocomplete = 'new-password';
|
|
els.connectBtn.textContent = 'Register';
|
|
els.toggleText.textContent = 'Already have a terminal?';
|
|
els.toggleLink.textContent = 'Log in';
|
|
}
|
|
}
|
|
|
|
async function postJson(url, payload) {
|
|
const res = await fetch(url, {
|
|
method: 'POST',
|
|
credentials: 'include',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload),
|
|
});
|
|
|
|
let data = null;
|
|
try { data = await res.json(); } catch (_) { }
|
|
if (!res.ok) {
|
|
const msg = (data && data.error) ? data.error : `Request failed (${res.status})`;
|
|
throw new Error(msg);
|
|
}
|
|
return data;
|
|
}
|
|
|
|
async function submitAuth() {
|
|
const username = els.username.value.trim();
|
|
const password = els.password.value;
|
|
|
|
if (!username || !password) {
|
|
showToast('✗ Please enter <strong>username</strong> and <strong>password</strong>.');
|
|
return;
|
|
}
|
|
|
|
els.connectBtn.disabled = true;
|
|
|
|
try {
|
|
if (mode === 'login') {
|
|
const out = await postJson('./api/login.php', { login: username, password });
|
|
showToast(`✓ You have logged on as <strong>${out.user.username}</strong>`);
|
|
setTimeout(() => { window.location.href = './Main.html'; }, 700);
|
|
} else {
|
|
const out = await postJson('./api/register.php', { username, password });
|
|
showToast(`✓ Terminal created for <strong>${out.user.username}</strong>`);
|
|
setTimeout(() => { window.location.href = './Main.html'; }, 700);
|
|
}
|
|
} catch (e) {
|
|
showToast(`✗ <strong>${e.message}</strong>`);
|
|
} finally {
|
|
els.connectBtn.disabled = false;
|
|
}
|
|
}
|
|
|
|
els.connectBtn.addEventListener('click', submitAuth);
|
|
els.toggleLink.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
setMode(mode === 'login' ? 'register' : 'login');
|
|
els.password.value = '';
|
|
els.password.focus();
|
|
});
|
|
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Enter') submitAuth();
|
|
});
|
|
|
|
setMode('login');
|
|
</script>
|
|
</body>
|
|
|
|
</html> |