Your IP : 216.73.216.93
<?php
session_start();
include 'includes/config.php';
if (isset($_SESSION['user_id'])) {
header("Location: index.php");
exit();
}
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$email = trim($_POST['email']);
$password = $_POST['password'];
$sql = "SELECT * FROM users WHERE email = ?";
$stmt = $conn->prepare($sql);
$stmt->bind_param("s", $email);
$stmt->execute();
$result = $stmt->get_result();
if ($result->num_rows === 1) {
$user = $result->fetch_assoc();
// ✅ Check if email is verified
if ($user['is_verified'] == 0) {
$error = "Please verify your email before logging in. Check your inbox or spam folder.";
}
// ✅ Verify password
elseif (password_verify($password, $user['password'])) {
$_SESSION['user_id'] = $user['id'];
$_SESSION['user_name'] = $user['name'];
$_SESSION['user_role'] = $user['role'];
header("Location: index.php");
exit();
}
else {
$error = "Invalid password!";
}
} else {
$error = "No account found with this email!";
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login - eLearning</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
<style>
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
}
.login-card {
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
overflow: hidden;
border: none;
}
.login-header {
background: linear-gradient(45deg, #4e73df, #224abe);
color: white;
padding: 2rem;
text-align: center;
}
.login-body {
padding: 2.5rem;
background-color: white;
}
.form-control {
border-radius: 8px;
padding: 0.75rem 1rem;
border: 1px solid #e3e6f0;
}
.form-control:focus {
border-color: #4e73df;
box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
}
.btn-login {
background: linear-gradient(45deg, #4e73df, #224abe);
border: none;
border-radius: 8px;
padding: 0.75rem;
font-weight: 600;
transition: all 0.3s;
}
.btn-login:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.password-toggle {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
color: #6c757d;
}
.password-container {
position: relative;
}
.form-floating {
margin-bottom: 1.5rem;
}
.brand-logo {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.alert {
border-radius: 8px;
}
.back-link {
color: #4e73df;
transition: color 0.3s;
}
.back-link:hover {
color: #224abe;
}
.register-link {
color: #4e73df;
font-weight: 500;
text-decoration: none;
}
.register-link:hover {
color: #224abe;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6 col-lg-5">
<div class="card login-card">
<div class="login-header">
<div class="brand-logo">
<i class="bi bi-book-half"></i>
</div>
<h2 class="fw-bold">Gex Elearning Academy</h2>
<p class="mb-0">Sign in to your account</p>
</div>
<div class="card-body login-body">
<?php if(isset($error)): ?>
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<i class="bi bi-exclamation-triangle-fill me-2"></i>
<?php echo $error; ?>
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
<?php endif; ?>
<form method="POST" id="loginForm">
<div class="form-floating">
<input type="email" class="form-control" id="email" name="email" placeholder="name@example.com" required>
<label for="email"><i class="bi bi-envelope me-2"></i>Email Address</label>
<div class="invalid-feedback" id="emailError">
Please provide a valid email address.
</div>
</div>
<div class="form-floating password-container">
<input type="password" class="form-control" id="password" name="password" placeholder="Password" required>
<label for="password"><i class="bi bi-lock me-2"></i>Password</label>
<span class="password-toggle" id="togglePassword">
<i class="bi bi-eye"></i>
</span>
<div class="invalid-feedback" id="passwordError">
Please enter your password.
</div>
</div>
<div class="d-grid mb-3">
<button type="submit" class="btn btn-login btn-lg text-white">
<i class="bi bi-box-arrow-in-right me-2"></i>Sign In
</button>
</div>
<div class="text-center">
<p class="mb-2">Don't have an account? <a href="register.php" class="register-link">Register here</a></p>
<a href="index.php" class="back-link">
<i class="bi bi-arrow-left me-1"></i> Back to Home
</a>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Form validation
document.addEventListener('DOMContentLoaded', function() {
const form = document.getElementById('loginForm');
const emailInput = document.getElementById('email');
const passwordInput = document.getElementById('password');
const emailError = document.getElementById('emailError');
const passwordError = document.getElementById('passwordError');
// Toggle password visibility
const togglePassword = document.getElementById('togglePassword');
togglePassword.addEventListener('click', function() {
const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
passwordInput.setAttribute('type', type);
this.innerHTML = type === 'password' ? '<i class="bi bi-eye"></i>' : '<i class="bi bi-eye-slash"></i>';
});
// Email validation
emailInput.addEventListener('blur', function() {
if (!this.value) {
this.classList.add('is-invalid');
emailError.textContent = 'Email is required.';
} else if (!isValidEmail(this.value)) {
this.classList.add('is-invalid');
emailError.textContent = 'Please enter a valid email address.';
} else {
this.classList.remove('is-invalid');
this.classList.add('is-valid');
}
});
// Password validation
passwordInput.addEventListener('blur', function() {
if (!this.value) {
this.classList.add('is-invalid');
passwordError.textContent = 'Password is required.';
} else {
this.classList.remove('is-invalid');
this.classList.add('is-valid');
}
});
// Form submission
form.addEventListener('submit', function(e) {
let isValid = true;
// Validate email
if (!emailInput.value || !isValidEmail(emailInput.value)) {
emailInput.classList.add('is-invalid');
emailError.textContent = !emailInput.value ? 'Email is required.' : 'Please enter a valid email address.';
isValid = false;
} else {
emailInput.classList.remove('is-invalid');
}
// Validate password
if (!passwordInput.value) {
passwordInput.classList.add('is-invalid');
passwordError.textContent = 'Password is required.';
isValid = false;
} else {
passwordInput.classList.remove('is-invalid');
}
if (!isValid) {
e.preventDefault();
// Add shake animation to invalid fields
const invalidFields = form.querySelectorAll('.is-invalid');
invalidFields.forEach(field => {
field.classList.add('shake');
setTimeout(() => {
field.classList.remove('shake');
}, 500);
});
}
});
// Helper function to validate email
function isValidEmail(email) {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
}
});
</script>
</body>
</html>