115 lines
3.9 KiB
JavaScript
115 lines
3.9 KiB
JavaScript
const card = document.getElementById("authCard");
|
|
const loginForm = document.getElementById("loginForm");
|
|
const registerForm = document.getElementById("registerForm");
|
|
|
|
// 1. FUNGSI MENGATUR TINGGI (RESIZE OTOMATIS)
|
|
function setHeight() {
|
|
const isActive = card.classList.contains("active");
|
|
// Hitung tinggi form yang sedang aktif (termasuk jika ada error box)
|
|
const formHeight = isActive ? registerForm.offsetHeight : loginForm.offsetHeight;
|
|
|
|
// Terapkan tinggi ke card
|
|
card.style.height = formHeight + "px";
|
|
}
|
|
|
|
// 2. FUNGSI PINDAH LOGIN <-> REGISTER
|
|
function toggleAuth(mode) {
|
|
// Reset Error Box saat pindah
|
|
document.getElementById("loginError").style.display = "none";
|
|
document.getElementById("regError").style.display = "none";
|
|
|
|
if (mode === 'register') {
|
|
card.classList.add("active");
|
|
} else {
|
|
card.classList.remove("active");
|
|
}
|
|
|
|
// Tunggu animasi slide sebentar, baru resize
|
|
setTimeout(setHeight, 50);
|
|
}
|
|
|
|
// 3. DETEKSI ERROR DARI PHP
|
|
window.addEventListener("DOMContentLoaded", function() {
|
|
setHeight(); // Set tinggi awal
|
|
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const errorStatus = urlParams.get('error');
|
|
|
|
if (errorStatus === 'gagal') {
|
|
const errorBox = document.getElementById("loginError");
|
|
errorBox.innerText = "Username atau Password salah!";
|
|
errorBox.style.display = "block";
|
|
|
|
setHeight();
|
|
window.history.replaceState(null, null, window.location.pathname);
|
|
}
|
|
});
|
|
|
|
window.addEventListener("resize", setHeight);
|
|
|
|
// 4. EFEK GLITTER (HIASAN)
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
for (let i = 0; i < 15; i++) {
|
|
const g = document.createElement("div");
|
|
g.className = "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);
|
|
}
|
|
});
|
|
|
|
// ==========================================
|
|
// 5. VALIDASI REGISTER (YANG BARU DITAMBAHKAN)
|
|
// ==========================================
|
|
if (registerForm) {
|
|
registerForm.addEventListener("submit", function(event) {
|
|
// Tahan pengiriman form ke PHP dulu
|
|
event.preventDefault();
|
|
|
|
// Ambil nilai dari inputan (Pastikan ID di HTML sudah sesuai ya!)
|
|
const username = document.getElementById("regUser").value;
|
|
const email = document.getElementById("regEmail").value;
|
|
const password = document.getElementById("regPass").value;
|
|
const confirmPassword = document.getElementById("regConfirm").value;
|
|
|
|
// Fungsi helper untuk menampilkan error di kotak merah Register
|
|
function showError(pesan) {
|
|
const errorBox = document.getElementById("regError");
|
|
errorBox.innerText = pesan;
|
|
errorBox.style.display = "block";
|
|
setHeight(); // PENTING: Resize kartu agar pesan error muat
|
|
}
|
|
|
|
// --- Mulai Cek Validasi ---
|
|
|
|
// 1. Cek Kosong
|
|
if (!username || !email || !password || !confirmPassword) {
|
|
showError("Semua field harus diisi!");
|
|
return;
|
|
}
|
|
|
|
// 2. Cek Format Email
|
|
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
|
|
showError("Format email tidak valid");
|
|
return;
|
|
}
|
|
|
|
// 3. Cek Panjang Password
|
|
if (password.length < 6) {
|
|
showError("Password minimal 6 karakter");
|
|
return;
|
|
}
|
|
|
|
// 4. Cek Kesamaan Password
|
|
if (password !== confirmPassword) {
|
|
showError("Password dan konfirmasi password tidak cocok");
|
|
return;
|
|
}
|
|
|
|
// Jika semua aman, baru kirim ke auth.php
|
|
this.submit();
|
|
});
|
|
} |