83 lines
4.2 KiB
HTML
83 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Tonjum Technologies - Login</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
body {
|
|
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
|
|
min-height: 100vh;
|
|
}
|
|
.glass-card {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
backdrop-filter: blur(12px);
|
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="flex items-center justify-center p-4">
|
|
<div class="w-full max-w-md">
|
|
<div class="text-center mb-8">
|
|
<div class="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-indigo-600/20 border border-indigo-500/30 mb-4">
|
|
<svg class="w-8 h-8 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
</div>
|
|
<h1 class="text-3xl font-bold text-white">Tonjum Technologies</h1>
|
|
<p class="text-gray-400 mt-1">Business Records</p>
|
|
</div>
|
|
<div class="glass-card rounded-2xl p-8 shadow-xl">
|
|
<form id="loginForm" class="space-y-5">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-300 mb-2">Username</label>
|
|
<input type="text" id="username" required
|
|
class="w-full px-4 py-3 bg-gray-800/50 border border-gray-700 rounded-xl text-white placeholder-gray-500 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition-colors"
|
|
placeholder="Enter username">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-300 mb-2">Password</label>
|
|
<input type="password" id="password" required
|
|
class="w-full px-4 py-3 bg-gray-800/50 border border-gray-700 rounded-xl text-white placeholder-gray-500 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition-colors"
|
|
placeholder="Enter password">
|
|
</div>
|
|
<div id="errorMsg" class="hidden text-red-400 text-sm text-center"></div>
|
|
<button type="submit"
|
|
class="w-full py-3 px-4 bg-indigo-600 hover:bg-indigo-500 text-white font-medium rounded-xl transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-900">
|
|
Sign In
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
const API_BASE = '';
|
|
document.getElementById('loginForm').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const username = document.getElementById('username').value;
|
|
const password = document.getElementById('password').value;
|
|
const errorMsg = document.getElementById('errorMsg');
|
|
errorMsg.classList.add('hidden');
|
|
try {
|
|
const res = await fetch(API_BASE + '/api/auth/login', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({username, password})
|
|
});
|
|
const data = await res.json();
|
|
if (res.ok) {
|
|
localStorage.setItem('token', data.token);
|
|
window.location.href = '/dashboard';
|
|
} else {
|
|
errorMsg.textContent = data.message || 'Invalid credentials';
|
|
errorMsg.classList.remove('hidden');
|
|
}
|
|
} catch (err) {
|
|
errorMsg.textContent = 'Connection error';
|
|
errorMsg.classList.remove('hidden');
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|