<?php
// Enable error reporting for debugging
error_reporting(E_ALL);
ini_set('display_errors', 1);
// Start session
session_start();
// Check if installation is complete
if (!file_exists('installed.php')) {
header('Location: install.php');
exit;
}
// Check if already logged in
if (isset($_SESSION['user_id']) && isset($_SESSION['role'])) {
// Determine where to redirect based on role
$destination = 'index.php'; // default changed to index.php to avoid redirect loop
if ($_SESSION['role'] == 'student') {
$destination = 'student/index.php';
} elseif ($_SESSION['role'] == 'instructor') {
$destination = 'faculty/index.php';
} elseif ($_SESSION['role'] == 'admin') {
$destination = 'admin/index.php';
}
header("Location: $destination");
exit;
}
// Include database configuration
require_once 'admin/database/db_config.php';
require_once 'includes/oauth_config.php';
// Get site settings
$site_logo = 'assets/img/logo.png'; // Default logo
$site_name = 'Popular Computer';
$primary_color = '#4e73df';
$secondary_color = '#224abe';
// Try to fetch settings from database
try {
$settings_query = "SELECT * FROM site_settings";
$settings_result = $conn->query($settings_query);
if ($settings_result && $settings_result->num_rows > 0) {
while ($row = $settings_result->fetch_assoc()) {
if ($row['setting_key'] == 'site_logo') {
$site_logo = $row['setting_value'];
} else if ($row['setting_key'] == 'site_name') {
$site_name = $row['setting_value'];
} else if ($row['setting_key'] == 'primary_color') {
$primary_color = $row['setting_value'];
} else if ($row['setting_key'] == 'secondary_color') {
$secondary_color = $row['setting_value'];
}
}
}
} catch (Exception $e) {
error_log("Error fetching site settings: " . $e->getMessage());
}
// Process login form
$error_message = '';
$success_message = '';
// Check for message parameter
if (isset($_GET['message'])) {
$success_message = $_GET['message'];
}
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
// Validate login credentials
$username = trim($_POST['username']);
$password = trim($_POST['password']);
if (empty($username) || empty($password)) {
$error_message = "Username and password are required.";
} else {
try {
// Check users table first
$check_users_table = mysqli_query($conn, "SHOW TABLES LIKE 'users'");
if (mysqli_num_rows($check_users_table) > 0) {
$user_query = "SELECT * FROM users WHERE username = ? OR email = ?";
$stmt = $conn->prepare($user_query);
$stmt->bind_param("ss", $username, $username);
$stmt->execute();
$result = $stmt->get_result();
if ($result && $result->num_rows > 0) {
$user = $result->fetch_assoc();
if (password_verify($password, $user['password'])) {
// Set session variables
$_SESSION['user_id'] = $user['id'];
$_SESSION['username'] = $user['username'];
$_SESSION['role'] = $user['role'] ?? 'student';
$_SESSION['email'] = $user['email'] ?? '';
// Check if activities table exists before logging
$check_activities = mysqli_query($conn, "SHOW TABLES LIKE 'activities'");
if (mysqli_num_rows($check_activities) > 0) {
// Log successful login
$login_activity_query = "INSERT INTO activities (user_id, user_type, activity_type, activity_description, ip_address, created_at)
VALUES (?, ?, 'login', 'User logged in successfully', ?, NOW())";
$stmt = $conn->prepare($login_activity_query);
$ip = $_SERVER['REMOTE_ADDR'];
$role = $user['role'] ?? 'student';
$stmt->bind_param("iss", $user['id'], $role, $ip);
$stmt->execute();
}
// Redirect based on role
$redirect_url = isset($_SESSION['redirect_url']) ? $_SESSION['redirect_url'] : '';
unset($_SESSION['redirect_url']); // Clear the redirect URL
// Set destination based on role
$destination = 'index.php'; // default
if ($user['role'] == 'student') {
$destination = $redirect_url ?: 'student/index.php';
} elseif ($user['role'] == 'faculty' || $user['role'] == 'instructor') {
$destination = $redirect_url ?: 'faculty/index.php';
} elseif ($user['role'] == 'admin' || $user['role'] == 'director') {
$destination = $redirect_url ?: 'admin/index.php';
}
header("Location: $destination");
exit;
} else {
$error_message = "Invalid password.";
}
} else {
// No user found in users table, check for other tables (legacy support)
$error_message = "Invalid username or password.";
}
} else {
$error_message = "User authentication system is not set up properly. Please contact the administrator.";
}
} catch (Exception $e) {
$error_message = "An error occurred during login. Please try again later.";
error_log("Login error: " . $e->getMessage());
}
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login - Popular Computer Institute</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
position: relative;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
#particles-js {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
.login-container {
position: relative;
z-index: 2;
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
padding: 20px;
padding-top: 40px;
margin: 20px 0;
width: 100%;
max-width: 400px;
backdrop-filter: blur(10px);
transform: translateY(0);
transition: transform 0.3s ease;
}
.login-container:hover {
transform: translateY(-5px);
}
.login-header {
text-align: center;
}
.login-header img {
width: 70px;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
.login-header h2 {
color: #333;
font-weight: 600;
}
.form-floating {
margin-bottom: 20px;
}
.form-control {
border-radius: 10px;
padding: 10px 15px;
border: 2px solid #e1e5eb;
transition: all 0.3s ease;
}
.form-control:focus {
border-color: #4e73df;
box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
}
.btn-login {
background: linear-gradient(135deg, #4e73df 0%, #224abe 100%);
border: none;
border-radius: 10px;
padding: 12px;
font-weight: 600;
width: 100%;
transition: all 0.3s ease;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(78, 115, 223, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(78, 115, 223, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(78, 115, 223, 0);
}
}
.form-check {
margin: 15px 0;
}
.links {
text-align: center;
margin-top: 10px;
}
.links a {
color: #4e73df;
text-decoration: none;
font-size: 14px;
transition: color 0.3s ease;
}
.links a:hover {
color: #224abe;
}
.alert {
border-radius: 10px;
margin-bottom: 20px;
}
.social-login {
margin-top: 10px;
text-align: center;
}
.social-login p {
color: #666;
position: relative;
}
.social-login p::before,
.social-login p::after {
content: "";
position: absolute;
top: 50%;
width: 45%;
height: 1px;
background: #ddd;
}
.social-login p::before { left: 0; }
.social-login p::after { right: 0; }
.social-buttons {
display: flex;
justify-content: center;
/* gap: 15px; */
}
.social-btn {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
transition: all 0.3s ease;
}
.social-btn:hover {
transform: translateY(-3px);
}
.google { background: #DB4437; }
.facebook { background: #4267B2; }
.twitter { background: #1DA1F2; }
/* Loading spinner */
.spinner {
display: none;
width: 20px;
height: 20px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: #fff;
animation: spin 0.8s linear infinite;
/* margin-right: 8px; */
position: absolute;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.btn-login.loading .spinner {
display: inline-block;
}
.btn-login.loading span {
display: none;
}
</style>
</head>
<body>
<div id="particles-js"></div>
<div class="login-container">
<div class="login-header">
<img src="<?php echo htmlspecialchars($site_logo); ?>" alt="<?php echo htmlspecialchars($site_name); ?> Logo">
<h2>Welcome Back!</h2>
<p class="text-muted">Please login to your account</p>
</div>
<?php if (isset($error_message) && !empty($error_message)): ?>
<div class="alert alert-danger">
<i class="fas fa-exclamation-circle me-2"></i>
<?php echo htmlspecialchars($error_message); ?>
</div>
<?php endif; ?>
<?php if (isset($_SESSION['error'])): ?>
<div class="alert alert-danger">
<i class="fas fa-exclamation-circle me-2"></i>
<?php
echo htmlspecialchars($_SESSION['error']);
unset($_SESSION['error']);
?>
</div>
<?php endif; ?>
<?php if (isset($_SESSION['register_success'])): ?>
<div class="alert alert-success">
<i class="fas fa-check-circle me-2"></i>
<?php
echo htmlspecialchars($_SESSION['register_success']);
unset($_SESSION['register_success']);
?>
</div>
<?php endif; ?>
<form method="POST" action="" id="loginForm">
<div class="form-floating">
<input type="text" class="form-control" id="username" name="username" placeholder="Username or Email" required>
<label for="username">Username or Email</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="password" name="password" placeholder="Password" required>
<label for="password">Password</label>
</div>
<!-- <div class="form-check">
<input class="form-check-input" type="checkbox" id="remember" name="remember">
<label class="form-check-label" for="remember">
Remember me
</label>
</div> -->
<button type="submit" class="btn btn-primary btn-login" id="loginButton">
<div class="spinner"></div>
<span><i class="fas fa-sign-in-alt me-2"></i>Login</span>
</button>
</form>
<div class="links">
<a href="forgot-password.php">Forgot Password?</a>
<span class="mx-2">|</span>
<a href="register.php">Create Account</a>
</div>
<div class="social-login">
<p>Or login with</p>
<a href="<?php echo getOAuthLoginUrl('google'); ?>" class="btn btn-light w-100 border d-flex align-items-center justify-content-center gap-2 py-2">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 48 48">
<path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/>
<path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/>
<path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"/>
<path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/>
</svg>
Sign in with Google
</a>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
// Initialize particles.js
particlesJS("particles-js", {
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 3,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 100,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
});
// Form submit loading state
document.getElementById('loginForm').addEventListener('submit', function() {
document.getElementById('loginButton').classList.add('loading');
});
</script>
</body>
</html>
