Kelompok02-Memory-Card/assets/script.js

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 PESAN DARI PHP (UPDATED)
// ==========================================
window.addEventListener("DOMContentLoaded", function() {
    setHeight(); // Set tinggi awal

    const urlParams = new URLSearchParams(window.location.search);
    
    // 1. Tangkap Parameter
    const loginError = urlParams.get('error');           // Untuk Login Gagal
    const registerError = urlParams.get('register_error'); // Untuk Register Gagal
    const successStatus = urlParams.get('success');      // Untuk Register Sukses

    // 2. Logic Login Error
    if (loginError === 'gagal') {
        const errorBox = document.getElementById("loginError");
        errorBox.innerHTML = "<p>Username atau Password salah!</p>";
        errorBox.style.display = "block";
        setHeight();
    }

    // 3. Logic Register Error (PENTING: Pindah tab ke Register dulu)
    if (registerError) {
        // Otomatis pindah ke mode register supaya user liat errornya
        toggleAuth('register'); 
        
        const errorBox = document.getElementById("regError");
        errorBox.innerHTML = "<p>" + registerError + "</p>";
        errorBox.style.display = "block";
        
        // Tunggu transisi sebentar, lalu set tinggi lagi
        setTimeout(setHeight, 100);
    }

    // 4. Logic Register Sukses
    if (successStatus === 'register') {
        const errorBox = document.getElementById("loginError");
        // Pakai warna hijau biar kelihatan sukses
        errorBox.innerHTML = "<p style='color: #2ecc71;'>Register Berhasil! Silakan Login.</p>";
        errorBox.style.display = "block";
        setHeight();
    }

    // 5. Bersihkan URL (Supaya kalau di-refresh errornya hilang)
    if (loginError || registerError || successStatus) {
        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();
    });
}