143 lines
4.8 KiB
PHP
143 lines
4.8 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
|
<title>Admin Login - AutoEdu</title>
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<style>
|
|
:root {
|
|
--theme-navy: #2D355B;
|
|
--theme-red: #822424;
|
|
--theme-yellow: #FFEA85;
|
|
--theme-bg: #F6F6F6;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--theme-bg);
|
|
height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: 'Segoe UI', sans-serif;
|
|
}
|
|
|
|
.login-card {
|
|
width: 100%;
|
|
max-width: 400px;
|
|
border: none;
|
|
border-radius: 16px;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
|
overflow: hidden;
|
|
background: #fff;
|
|
}
|
|
|
|
.login-header {
|
|
background: var(--theme-navy);
|
|
color: #fff;
|
|
padding: 25px 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.btn-theme-red {
|
|
background-color: var(--theme-red);
|
|
color: #fff;
|
|
border: none;
|
|
padding: 12px;
|
|
font-weight: 600;
|
|
border-radius: 8px;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.btn-theme-red:hover {
|
|
background-color: #a32d2d;
|
|
color: #fff;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="login-card">
|
|
<div class="login-header">
|
|
<i class="fa-solid fa-user-shield fa-2x mb-2" style="color: var(--theme-yellow);"></i>
|
|
<h5 class="fw-bold mb-0">Admin Login</h5>
|
|
</div>
|
|
|
|
<div class="p-4">
|
|
<!-- Error Alert -->
|
|
<div id="errorAlert" class="alert alert-danger d-none py-2 text-center small" role="alert"></div>
|
|
|
|
<form id="adminLoginForm">
|
|
<div class="mb-3">
|
|
<label class="form-label fw-semibold text-dark">Username</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="fa-solid fa-user"></i></span>
|
|
<input type="text" id="username" class="form-control" placeholder="Username" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="form-label fw-semibold text-dark">Password</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="fa-solid fa-lock"></i></span>
|
|
<input type="password" id="password" class="form-control" placeholder="Password" required>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-theme-red w-100" id="loginBtn">
|
|
<i class="fa-solid fa-right-to-bracket me-2"></i> Login
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.getElementById('adminLoginForm').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
const username = document.getElementById('username').value;
|
|
const password = document.getElementById('password').value;
|
|
const errorAlert = document.getElementById('errorAlert');
|
|
const loginBtn = document.getElementById('loginBtn');
|
|
const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
|
|
|
|
errorAlert.classList.add('d-none');
|
|
loginBtn.disabled = true;
|
|
loginBtn.innerHTML = '<i class="fa-solid fa-spinner fa-spin me-2"></i> Logging in...';
|
|
|
|
fetch('/admin/login', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Accept': 'application/json',
|
|
'X-CSRF-TOKEN': csrfToken
|
|
},
|
|
body: JSON.stringify({ username: username, password: password })
|
|
})
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
window.location.href = '/admin/adminmycourses';
|
|
} else {
|
|
errorAlert.innerText = data.message || 'Login failed!';
|
|
errorAlert.classList.remove('d-none');
|
|
loginBtn.disabled = false;
|
|
loginBtn.innerHTML = '<i class="fa-solid fa-right-to-bracket me-2"></i> Login';
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.error('Error:', err);
|
|
errorAlert.innerText = 'Server error occurred!';
|
|
errorAlert.classList.remove('d-none');
|
|
loginBtn.disabled = false;
|
|
loginBtn.innerHTML = '<i class="fa-solid fa-right-to-bracket me-2"></i> Login';
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html> |