87 lines
2.1 KiB
JavaScript
87 lines
2.1 KiB
JavaScript
/*LOGIN VALIDATION*/
|
|
document.getElementById("loginForm").addEventListener("submit", function(e) {
|
|
e.preventDefault();
|
|
|
|
const username = document.getElementById("username").value.trim();
|
|
const password = document.getElementById("password").value.trim();
|
|
const errorBox = document.getElementById("errorBox");
|
|
|
|
errorBox.style.display = "none";
|
|
errorBox.innerText = "";
|
|
|
|
if (!username || !password) {
|
|
showError("Username dan password harus diisi");
|
|
return;
|
|
}
|
|
|
|
if (password.length < 6) {
|
|
showError("Password minimal 6 karakter");
|
|
return;
|
|
}
|
|
|
|
const usersData = localStorage.getItem("users");
|
|
const users = usersData ? JSON.parse(usersData) : [];
|
|
|
|
const user = users.find(u => u.username === username);
|
|
|
|
if (!user) {
|
|
showError("Username tidak ditemukan");
|
|
return;
|
|
}
|
|
|
|
if (user.password !== password) {
|
|
showError("Password salah");
|
|
return;
|
|
}
|
|
|
|
// Login sukses
|
|
localStorage.setItem("loggedInUser", JSON.stringify(user));
|
|
window.location.href = "mainboard.html";
|
|
});
|
|
|
|
function showError(msg) {
|
|
const errorBox = document.getElementById("errorBox");
|
|
errorBox.innerText = msg;
|
|
errorBox.style.display = "block";
|
|
}
|
|
|
|
function toggleDemo() {
|
|
const box = document.getElementById("demoBox");
|
|
const btn = document.querySelector(".demo-toggle");
|
|
|
|
box.classList.toggle("show");
|
|
|
|
// Ubah teks tombol
|
|
if (box.classList.contains("show")) {
|
|
btn.textContent = "Sembunyikan Demo Akun ▲";
|
|
} else {
|
|
btn.textContent = "Lihat Demo Akun ▼";
|
|
}
|
|
}
|
|
|
|
|
|
/* GLITTER EFFECT*/
|
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const card = document.querySelector(".login-card");
|
|
|
|
if (!card) return;
|
|
|
|
// Tambah glitter 20x
|
|
for (let i = 0; i < 20; i++) {
|
|
const g = document.createElement("div");
|
|
g.className = "glitter";
|
|
|
|
// Random posisi ledakan glitter
|
|
g.style.setProperty("--x", (Math.random() * 200 - 100) + "px");
|
|
g.style.setProperty("--y", (Math.random() * 200 - 100) + "px");
|
|
|
|
g.style.left = (Math.random() * 100) + "%";
|
|
g.style.top = (Math.random() * 100) + "%";
|
|
|
|
g.style.animationDelay = (Math.random() * 2) + "s";
|
|
|
|
card.appendChild(g);
|
|
}
|
|
});
|