Files
atlas/web/templates/login.html

82 lines
3.1 KiB
HTML

{{define "login-content"}}
<div class="min-h-screen flex items-center justify-center bg-slate-950">
<div class="max-w-md w-full mx-4">
<div class="bg-slate-800 rounded-lg border border-slate-700 p-8 shadow-xl">
<div class="text-center mb-8">
<div class="h-16 w-16 rounded-lg bg-slate-700 flex items-center justify-center font-bold text-2xl mx-auto mb-4">A</div>
<h1 class="text-3xl font-bold text-white mb-2">AtlasOS</h1>
<p class="text-slate-400">Storage Controller</p>
</div>
<form id="login-form" onsubmit="handleLogin(event)" class="space-y-6">
<div>
<label class="block text-sm font-medium text-slate-300 mb-2">Username</label>
<input type="text" name="username" id="username" required autofocus class="w-full px-4 py-3 bg-slate-900 border border-slate-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-600" placeholder="Enter your username">
</div>
<div>
<label class="block text-sm font-medium text-slate-300 mb-2">Password</label>
<input type="password" name="password" id="password" required class="w-full px-4 py-3 bg-slate-900 border border-slate-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-600" placeholder="Enter your password">
</div>
<div id="login-error" class="hidden text-red-400 text-sm"></div>
<button type="submit" class="w-full px-4 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium focus:outline-none focus:ring-2 focus:ring-blue-600">
Sign In
</button>
</form>
<div class="mt-6 text-center text-sm text-slate-400">
<p>Default credentials: <span class="font-mono text-slate-300">admin / admin</span></p>
</div>
</div>
</div>
</div>
<script>
async function handleLogin(e) {
e.preventDefault();
const formData = new FormData(e.target);
const errorEl = document.getElementById('login-error');
errorEl.classList.add('hidden');
try {
const res = await fetch('/api/v1/auth/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
username: formData.get('username'),
password: formData.get('password')
})
});
const data = await res.json().catch(() => null);
if (res.ok && data.token) {
// Store token in localStorage
localStorage.setItem('atlas_token', data.token);
// Store user info if available
if (data.user) {
localStorage.setItem('atlas_user', JSON.stringify(data.user));
}
// Redirect to dashboard or return URL
const returnUrl = new URLSearchParams(window.location.search).get('return') || '/';
window.location.href = returnUrl;
} else {
const errorMsg = (data && data.error) ? data.error : 'Login failed';
errorEl.textContent = errorMsg;
errorEl.classList.remove('hidden');
}
} catch (err) {
errorEl.textContent = `Error: ${err.message}`;
errorEl.classList.remove('hidden');
}
}
</script>
{{end}}
{{define "login.html"}}
{{template "base" .}}
{{end}}