|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>WiFi Attendance Tracker - Login</title> |
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> |
|
|
<style> |
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
min-height: 100vh; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.login-container { |
|
|
background: white; |
|
|
padding: 2rem; |
|
|
border-radius: 15px; |
|
|
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); |
|
|
width: 100%; |
|
|
max-width: 400px; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.login-header { |
|
|
margin-bottom: 2rem; |
|
|
} |
|
|
|
|
|
.login-header i { |
|
|
font-size: 3rem; |
|
|
color: #667eea; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.login-header h1 { |
|
|
color: #333; |
|
|
font-size: 1.8rem; |
|
|
margin-bottom: 0.5rem; |
|
|
} |
|
|
|
|
|
.login-header p { |
|
|
color: #666; |
|
|
font-size: 0.9rem; |
|
|
} |
|
|
|
|
|
.form-group { |
|
|
margin-bottom: 1.5rem; |
|
|
text-align: left; |
|
|
} |
|
|
|
|
|
.form-group label { |
|
|
display: block; |
|
|
margin-bottom: 0.5rem; |
|
|
color: #333; |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
.password-input-container { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.form-group input { |
|
|
width: 100%; |
|
|
padding: 0.75rem; |
|
|
border: 2px solid #e1e5e9; |
|
|
border-radius: 8px; |
|
|
font-size: 1rem; |
|
|
transition: border-color 0.3s ease; |
|
|
} |
|
|
|
|
|
.form-group input:focus { |
|
|
outline: none; |
|
|
border-color: #667eea; |
|
|
} |
|
|
|
|
|
.toggle-password { |
|
|
position: absolute; |
|
|
right: 10px; |
|
|
top: 50%; |
|
|
transform: translateY(-50%); |
|
|
background: none; |
|
|
border: none; |
|
|
color: #666; |
|
|
cursor: pointer; |
|
|
font-size: 1rem; |
|
|
} |
|
|
|
|
|
.login-btn { |
|
|
width: 100%; |
|
|
padding: 0.75rem; |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
color: white; |
|
|
border: none; |
|
|
border-radius: 8px; |
|
|
font-size: 1rem; |
|
|
font-weight: 600; |
|
|
cursor: pointer; |
|
|
transition: transform 0.2s ease; |
|
|
} |
|
|
|
|
|
.login-btn:hover { |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
|
|
|
.login-btn:disabled { |
|
|
opacity: 0.6; |
|
|
cursor: not-allowed; |
|
|
transform: none; |
|
|
} |
|
|
|
|
|
.error-message { |
|
|
background: #fee; |
|
|
color: #c33; |
|
|
padding: 0.75rem; |
|
|
border-radius: 8px; |
|
|
margin-bottom: 1rem; |
|
|
border-left: 4px solid #c33; |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.loading { |
|
|
display: none; |
|
|
margin-top: 1rem; |
|
|
} |
|
|
|
|
|
.loading i { |
|
|
animation: spin 1s linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes spin { |
|
|
0% { transform: rotate(0deg); } |
|
|
100% { transform: rotate(360deg); } |
|
|
} |
|
|
|
|
|
.footer { |
|
|
margin-top: 2rem; |
|
|
padding-top: 1rem; |
|
|
border-top: 1px solid #eee; |
|
|
color: #666; |
|
|
font-size: 0.8rem; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="login-container"> |
|
|
<div class="login-header"> |
|
|
<i class="fas fa-wifi"></i> |
|
|
<h1>WiFi Attendance Tracker</h1> |
|
|
<p>Please enter your password to access the dashboard</p> |
|
|
</div> |
|
|
|
|
|
<div id="errorMessage" class="error-message"></div> |
|
|
|
|
|
<form id="loginForm"> |
|
|
<div class="form-group"> |
|
|
<label for="password">Dashboard Password</label> |
|
|
<div class="password-input-container"> |
|
|
<input type="password" id="password" name="password" required placeholder="Enter dashboard password" autocomplete="current-password"> |
|
|
<button type="button" class="toggle-password" onclick="togglePassword()"> |
|
|
<i class="fas fa-eye" id="toggleIcon"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button type="submit" class="login-btn" id="loginBtn"> |
|
|
<i class="fas fa-sign-in-alt"></i> Access Dashboard |
|
|
</button> |
|
|
</form> |
|
|
|
|
|
<div class="loading" id="loading"> |
|
|
<i class="fas fa-spinner"></i> Authenticating... |
|
|
</div> |
|
|
|
|
|
<div class="footer"> |
|
|
<p>Default password: <strong>admin123</strong></p> |
|
|
<p>Advanced Employee Management System</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
function togglePassword() { |
|
|
const passwordInput = document.getElementById('password'); |
|
|
const toggleIcon = document.getElementById('toggleIcon'); |
|
|
|
|
|
if (passwordInput.type === 'password') { |
|
|
passwordInput.type = 'text'; |
|
|
toggleIcon.className = 'fas fa-eye-slash'; |
|
|
} else { |
|
|
passwordInput.type = 'password'; |
|
|
toggleIcon.className = 'fas fa-eye'; |
|
|
} |
|
|
} |
|
|
|
|
|
function showError(message) { |
|
|
const errorDiv = document.getElementById('errorMessage'); |
|
|
errorDiv.textContent = message; |
|
|
errorDiv.style.display = 'block'; |
|
|
} |
|
|
|
|
|
function hideError() { |
|
|
const errorDiv = document.getElementById('errorMessage'); |
|
|
errorDiv.style.display = 'none'; |
|
|
} |
|
|
|
|
|
function setLoading(loading) { |
|
|
const loginBtn = document.getElementById('loginBtn'); |
|
|
const loadingDiv = document.getElementById('loading'); |
|
|
const form = document.getElementById('loginForm'); |
|
|
|
|
|
if (loading) { |
|
|
loginBtn.disabled = true; |
|
|
loadingDiv.style.display = 'block'; |
|
|
form.style.opacity = '0.6'; |
|
|
} else { |
|
|
loginBtn.disabled = false; |
|
|
loadingDiv.style.display = 'none'; |
|
|
form.style.opacity = '1'; |
|
|
} |
|
|
} |
|
|
|
|
|
document.getElementById('loginForm').addEventListener('submit', async function(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const password = document.getElementById('password').value; |
|
|
|
|
|
if (!password) { |
|
|
showError('Please enter a password'); |
|
|
return; |
|
|
} |
|
|
|
|
|
hideError(); |
|
|
setLoading(true); |
|
|
|
|
|
try { |
|
|
const response = await fetch('/api/login', { |
|
|
method: 'POST', |
|
|
headers: { |
|
|
'Content-Type': 'application/json', |
|
|
}, |
|
|
body: JSON.stringify({ password: password }) |
|
|
}); |
|
|
|
|
|
const result = await response.json(); |
|
|
|
|
|
if (result.success) { |
|
|
|
|
|
window.location.href = '/dashboard'; |
|
|
} else { |
|
|
showError(result.message || 'Invalid password'); |
|
|
} |
|
|
} catch (error) { |
|
|
console.error('Login error:', error); |
|
|
showError('Connection error. Please try again.'); |
|
|
} finally { |
|
|
setLoading(false); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
document.getElementById('password').focus(); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('password').addEventListener('keypress', function(e) { |
|
|
if (e.key === 'Enter') { |
|
|
document.getElementById('loginForm').dispatchEvent(new Event('submit')); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
|
|
|
