index.html
<!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 rel="stylesheet" href="styles.css">
</head>
<body>
<div class="login-container">
<h2>Login</h2>
<form id="loginForm">
<div class="input-group">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</div>
<div class="input-group">
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit">Login</button>
</form>
<div id="message"></div>
</div>
<script src="script.js"></script>
</body>
</html>
styles.css
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
.login-container {
width: 300px;
margin: 100px auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
h2 {
margin-bottom: 20px;
}
.input-group {
margin-bottom: 15px;
text-align: left;
}
.input-group label {
display: block;
margin-bottom: 5px;
}
.input-group input {
width: 100%;
padding: 8px;
box-sizing: border-box;
}
button {
width: 100%;
padding: 10px;
background-color: #007BFF;
color: #fff;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
#message {
margin-top: 20px;
color: red;
}
script.js
// ข้อมูลผู้ใช้และรหัสผ่านจำลอง
const users = {
admin: { username: "admin", password: "admin123", role: "admin" },
user: { username: "user", password: "user123", role: "user" }
};
// จัดการการล็อกอิน
document.getElementById('loginForm').addEventListener('submit', function(event) {
event.preventDefault(); // ป้องกันการรีเฟรชหน้า
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
const messageDiv = document.getElementById('message');
let user = null;
// ตรวจสอบข้อมูลผู้ใช้
if (users.admin.username === username && users.admin.password === password) {
user = users.admin;
} else if (users.user.username === username && users.user.password === password) {
user = users.user;
}
if (user) {
messageDiv.style.color = 'green';
messageDiv.textContent = `Login successful! Welcome, ${user.role}`;
// เรียกฟังก์ชันเปลี่ยนหน้าเพื่อตามสิทธิ์ของผู้ใช้
setTimeout(() => {
redirectToDashboard(user.role);
}, 1000); // รอ 1 วินาทีเพื่อแสดงข้อความ
} else {
messageDiv.style.color = 'red';
messageDiv.textContent = 'Invalid username or password!';
}
});
// ฟังก์ชันเปลี่ยนหน้าไปยังแดชบอร์ดของแต่ละสิทธิ์
function redirectToDashboard(role) {
if (role === 'admin') {
window.location.href = 'admin_dashboard.html';
} else if (role === 'user') {
window.location.href = 'user_dashboard.html';
}
}
admin_dashboard.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Dashboard</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="login-container">
<h2>Admin Dashboard</h2>
<p>Welcome, admin! You have full control over the system.</p>
<button onclick="logout()">Logout</button>
</div>
<script>
function logout() {
window.location.href = 'index.html';
}
</script>
</body>
</html>
user_dashboard.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Dashboard</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="login-container">
<h2>User Dashboard</h2>
<p>Welcome, regular user!</p>
<button onclick="logout()">Logout</button>
</div>
<script>
function logout() {
window.location.href = 'index.html';
}
</script>
</body>
</html>
