File size: 5.15Kb
<?php
include "connection/connection.php";
if (isset($_SESSION['id'])) {
// Redirect user to the dashboard
header("Location: dashboard.php");
exit(); // Stop script execution
}
// Process the login form
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$email = trim($_POST['email']);
$password = trim($_POST['password']);
// Validate that fields are not empty
if (empty($email) || empty($password)) {
$error = "Please fill in all fields.";
} else {
// Search for the user in the database
$sql = "SELECT * FROM usuarios WHERE correo_electronico = ?";
$stmt = $conn->prepare($sql);
$stmt->bind_param("s", $email);
$stmt->execute();
$result = $stmt->get_result();
if ($result->num_rows === 1) {
$user = $result->fetch_assoc();
// Verify the password
if (password_verify($password, $user['contrasena_hash'])) {
// Start session
$_SESSION['id'] = $user['id'];
$_SESSION['nombre_usuario'] = $user['nombre_usuario'];
$_SESSION['correo_electronico'] = $user['correo_electronico'];
// Redirect to dashboard
header("Location: dashboard.php");
exit;
} else {
$error = "Incorrect password.";
}
} else {
$error = "No account found with this email address.";
}
$stmt->close();
}
}
$conn->close();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<!-- Link to Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background: linear-gradient(to right, #6a11cb, #2575fc);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.login-card {
background-color: #f8f9fa;
padding: 20px;
border-radius: 10px;
}
.form-control {
border-radius: 10px;
}
.btn-primary {
background-color: #6a11cb;
border: none;
border-radius: 10px;
}
.btn-primary:hover {
background-color: #2575fc;
}
.register-link {
text-align: center;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-4">
<div class="login-card">
<h2>Login</h2>
<?php if (isset($error)): ?>
<div class="alert alert-danger" role="alert">
<?php echo $error; ?>
</div>
<?php endif; ?>
<form action="" method="POST">
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" class="form-control" id="email" name="email" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<div class="input-group">
<input type="password" class="form-control" id="password" name="password" required>
<div class="input-group-append">
<button type="button" class="btn btn-outline-secondary" id="togglePassword">
Show
</button>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary btn-block">Login</button>
</form>
<div class="register-link">
<p>Don't have an account? <a href="register.php">Register</a></p>
</div>
</div>
</div>
</div>
</div>
<!-- Link to jQuery and Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Script to toggle password visibility -->
<script>
document.getElementById('togglePassword').addEventListener('click', function () {
const passwordField = document.getElementById('password');
const type = passwordField.getAttribute('type') === 'password' ? 'text' : 'password';
passwordField.setAttribute('type', type);
this.textContent = type === 'password' ? 'Show' : 'Hide';
});
</script>
</body>
</html>