index file
<div
class="auth-modal <?= $active_form === 'register' ? 'show
slide' : ($active_form === 'login' ? 'show' : ''); ?>">
<button type="button" class="close-btn-modal"><i class='bx bx-
x'></i></button>
<div class="form-box login">
<h2>Login</h2>
<form action="auth_process.php" method="POST">
<div class="input-box">
<input type="email" name="email" placeholder="Email"
required>
<i class='bx bx-envelope'></i>
</div>
<div class="input-box">
<input type="password" name="password"
placeholder="Password" required>
<i class='bx bx-lock'></i>
</div>
<button type="submit" name="login_btn"
class="btn">Login</button>
<p>Don't have an account? <a href="#" class="register-
link">Register</a></p>
</form>
</div>
<div class="form-box register">
<h2>Register</h2>
<form action="auth_process.php" method="POST">
<div class="input-box">
<input type="text" name="name" placeholder="name"
required>
<i class='bx bx-user'></i>
</div>
<div class="input-box">
<input type="email" name="email" placeholder="Email"
required>
<i class='bx bx-envelope'></i>
</div>
<div class="input-box">
<input type="password" name="password"
placeholder="Password" required>
<i class='bx bx-lock'></i>
</div>
<button type="submit" name="register_btn"
class="btn">Register</button>
<p>Already have an account? <a href="#" class="login-
link">Login</a></p>
</form>
</div>
</div>
header
<div class="user-auth">
<button type="button" class="login-btn-modal">Login</button>
</div>
<?php if (isset($_SESSION['role']) && $_SESSION['role'] ===
'admin'): ?>
<a href="admin/[Link]">Admin Panel</a>
<?php endif; ?>
<div class="menu-toggle">
<span></span><span></span><span></span>
</div>
Role redirect
if (isset($_SESSION['role'])) {
if ($_SESSION['role'] === 'admin') {
header("Location: admin/[Link]");
exit;
}
if ($_SESSION['role'] === 'user') {
header("Location: [Link]");
exit;
}
}
auth process file
<?php
session_start();
require_once '[Link]';
/* REGISTER PROCESS */
if (isset($_POST['register_btn'])) {
$name = trim($_POST['name'] ?? '');
$email = trim($_POST['email'] ?? '');
$password = password_hash($_POST['password'], PASSWORD_DEFAULT);
$stmt = $conn->prepare("SELECT id FROM users WHERE email = ?");
$stmt->bind_param("s", $email);
$stmt->execute();
$check = $stmt->get_result();
if ($check->num_rows > 0) {
$_SESSION['alerts'][] = [
'type' => 'error',
'message' => 'Email is already registered!'
];
$_SESSION['active_form'] = 'register';
} else {
$stmt = $conn->prepare(
"INSERT INTO users (name, email, password) VALUES (?, ?, ?)"
);
$stmt->bind_param("sss", $name, $email, $password);
$stmt->execute();
$_SESSION['alerts'][] = [
'type' => 'success',
'message' => 'Registration successful. Please login.'
];
$_SESSION['active_form'] = 'login';
}
header("Location: [Link]");
exit;
}
/* LOGIN PROCESS */
if (isset($_POST['login_btn'])) {
$email = trim($_POST['email'] ?? '');
$password = $_POST['password'] ?? '';
$stmt = $conn->prepare(
"SELECT id, name, password, role, status, profile_image
FROM users
WHERE email = ?"
);
$stmt->bind_param("s", $email);
$stmt->execute();
$result = $stmt->get_result();
if ($result->num_rows === 1) {
$user = $result->fetch_assoc();
/* BLOCKED USER */
if ($user['status'] === 'blocked') {
$_SESSION['alerts'][] = [
'type' => 'error',
'message' => 'Your account is blocked by admin'
];
header("Location: [Link]");
exit;
}
/* PASSWORD */
if (password_verify($password, $user['password'])) {
/* SET SESSION */
$_SESSION['user_id'] = $user['id'];
$_SESSION['name'] = $user['name'];
$_SESSION['role'] = $user['role'];
$_SESSION['profile_image'] = $user['profile_image'];
/* SAVE LOGIN LOG */
$ip = $_SERVER['REMOTE_ADDR'] ?? 'UNKNOWN';
$userAgent = $_SERVER['HTTP_USER_AGENT'] ?? 'UNKNOWN';
$logStmt = $conn->prepare(
"INSERT INTO login_logs (user_id, login_time, ip_address)
VALUES (?, ?, ?)"
);
$logStmt->bind_param("iss", $user['id'], $ip, $userAgent);
$logStmt->execute();
if ($user['role'] === 'admin') {
header("Location: admin/[Link]");
} else {
header("Location: [Link]");
}
exit;
}
/* LOGIN FAILED */
$_SESSION['alerts'][] = [
'type' => 'error',
'message' => 'Incorrect email or password!'
];
$_SESSION['active_form'] = 'login';
header("Location: [Link]");
exit;
}
header("Location: [Link]");
exit;
css file
.auth-modal {
position: fixed;
width: 420px;
height: 440px;
background: rgba(0, 0, 0, .3);
border: 2px solid rgba(255, 255, 255, .3);
border-radius: 20px;
box-shadow: 0 0 30px rgba(0, 0, 0, .3);
backdrop-filter: blur(10px);
color: #000;
inset: 0;
margin: auto;
display: flex;
align-items: center;
overflow: hidden;
transform: scale(0);
transition: height .2s ease, transform .5s ease;
z-index: 9999999999;
}
.[Link] {
transform: scale(1);
.[Link] {
height: 520px;
}
.auth-modal .form-box {
width: 100%;
padding: 40px;
}
.auth-modal .[Link],
.[Link] .[Link] {
transform: translateX(0);
transition: transform .18s ease;
}
.[Link] .[Link] {
transform: translateX(-400px);
transition: none;
}
.auth-modal .[Link]{
position: absolute;
transform: translateX(400px);
}
.form-box h2 {
font-size: 35px;
text-align: center;
}
.input-box {
position: relative;
width: 100%;
height: 50px;
margin: 30px 0;
}
.input-box input {
width: 100%;
height: 100%;
background: transparent;
border: 2px solid rgba(255, 255, 255, .3);
outline: none;
border-radius: 40px;
font-size: 16px;
color: #fff;
padding: 20px 45px 20px 20px;
}
.input-box input::placeholder {
color: #fff;
}
.input-box i {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 20px;
}
.btn {
width: 100%;
height: 45px;
background: #fff;
border-radius: 40px;
border: none;
box-shadow: 0 0 10px rgba(0, 0, 0, .1);
font-size: 16px;
color: #222;
font-weight: 500;
cursor: pointer;
}
.form-box p {
font-size: 14.5px;
text-align: center;
margin: 25px 0 10px;
}
.form-box p a {
color: #fff;
text-decoration: none;
font-weight: 600;
}
.form-box p a:hover {
text-decoration: underline;
}
.auth-modal .close-btn-modal {
position: absolute;
top: 0;
right: 0;
width: 45px;
height: 45px;
background: #fff;
border: none;
border-bottom-left-radius: 20px;
font-size: 35px;
color: #222;
cursor: pointer;
z-index: 1;
}