diff --git a/Modal Register.js b/Modal Register.js index e69de29..9a18417 100644 --- a/Modal Register.js +++ b/Modal Register.js @@ -0,0 +1,50 @@ +export function showModal(type, title, message) { + const modal = document.getElementById("customModal"); + const modalIcon = document.getElementById("modalIcon"); + const modalTitle = document.getElementById("modalTitle"); + const modalMessage = document.getElementById("modalMessage"); + + // Reset class + modalIcon.className = "modal-icon"; + + if (type === "success") { + modalIcon.classList.add("success"); + modalTitle.textContent = title || "Register Berhasil!"; + } else { + modalIcon.classList.add("error"); + modalTitle.textContent = title || "Register Gagal!"; + } + + modalMessage.textContent = message; + modal.classList.add("show"); +} + +export function closeModal() { + document.getElementById("customModal").classList.remove("show"); +} + +export function setupModalOk() { + document.getElementById("modalOkBtn").addEventListener("click", () => { + const modalIcon = document.getElementById("modalIcon"); + + if (modalIcon.classList.contains("success")) { + window.location.href = "Login.html"; // Register sukses → ke Login + } else { + closeModal(); + } + }); +} + +export function setupOutsideClose() { + document.getElementById("customModal").addEventListener("click", (e) => { + const modalIcon = document.getElementById("modalIcon"); + + if (e.target === e.currentTarget) { + if (modalIcon.classList.contains("success")) { + window.location.href = "Login.html"; + } else { + closeModal(); + } + } + }); +} diff --git a/Register.js b/Register.js index 6b19dff..c49cb56 100644 --- a/Register.js +++ b/Register.js @@ -1,87 +1,80 @@ -import { showModal, closeModal } from "./Modal.js"; +import { showModal, closeModal, setupModalOk, setupOutsideClose } from "./Modal Register.js"; import { registerRequest } from "./API Register.js"; -document.getElementById('registerForm').addEventListener('submit', async function(e) { +// Aktifkan tombol modal +setupModalOk(); +setupOutsideClose(); + +document.getElementById("registerForm").addEventListener("submit", async function (e) { e.preventDefault(); - const username = document.getElementById('username').value.trim(); - const password = document.getElementById('password').value.trim(); - const confirmPassword = document.getElementById('confirmPassword').value.trim(); + const username = document.getElementById("username").value.trim(); + const password = document.getElementById("password").value.trim(); + const confirmPassword = document.getElementById("confirmPassword").value.trim(); - // Validasi input kosong + // Validasi kosong if (!username || !password || !confirmPassword) { - showModal('error', 'Register Gagal!', 'Semua field harus diisi.'); + showModal("error", "Register Gagal!", "Semua field wajib diisi."); return; } - // Password tidak cocok + // Validasi password tidak sama if (password !== confirmPassword) { - showModal('error', 'Password Tidak Cocok!', 'Password dan konfirmasi password harus sama.'); - setInputError('password'); - setInputError('confirmPassword'); + showModal("error", "Password Tidak Cocok!", "Password dan Confirm Password harus sama."); + setInputError("password"); + setInputError("confirmPassword"); return; } - // Loading state button - const submitBtn = this.querySelector('button[type="submit"]'); + // Button loading state + const submitBtn = this.querySelector("button[type='submit']"); const originalText = submitBtn.textContent; - submitBtn.innerHTML = 'Memproses...'; + submitBtn.innerHTML = "Memproses..."; submitBtn.disabled = true; try { const data = await registerRequest(username, password); - // FORMAT API TEMENMU: - // { status: "success", message: "..."} - // { status: "error", message: "..." } - + // API temenmu return: { status: "success", message: "..." } if (data.status === "success") { - showModal('success', 'Register Berhasil!', data.message || "Akun berhasil dibuat!"); - - // Setelah klik OK → ke login - document.getElementById("modalOkBtn").onclick = () => { - closeModal(); - window.location.href = "Login.html"; - }; + showModal("success", "Register Berhasil!", data.message); } else { - // Jika error dari API - showModal('error', 'Register Gagal!', data.message || 'Terjadi kesalahan.'); - setInputError('username'); + showModal("error", "Register Gagal!", data.message || "Terjadi kesalahan."); + setInputError("username"); } } catch (error) { console.error("Register Error:", error); - let errorMessage = 'Terjadi kesalahan koneksi.'; + let msg = "Terjadi kesalahan koneksi."; - if (error.message === 'Failed to fetch') { - errorMessage = 'Tidak dapat terhubung ke server.'; - } else if (error.message.includes('timeout')) { - errorMessage = 'Server tidak merespons (timeout).'; + if (error.message === "Failed to fetch") { + msg = "Tidak dapat terhubung ke server."; } - showModal('error', 'Error!', errorMessage); + showModal("error", "Error!", msg); + } finally { submitBtn.textContent = originalText; submitBtn.disabled = false; } }); -// Clear error saat mengetik -document.getElementById('username').addEventListener('input', clearInputStyle); -document.getElementById('password').addEventListener('input', clearInputStyle); -document.getElementById('confirmPassword').addEventListener('input', clearInputStyle); +// Hilangkan efek error saat user mengetik +document.getElementById("username").addEventListener("input", clearInputStyle); +document.getElementById("password").addEventListener("input", clearInputStyle); +document.getElementById("confirmPassword").addEventListener("input", clearInputStyle); // Efek error merah neon -function setInputError(inputId) { - const input = document.getElementById(inputId); - input.style.borderColor = '#ff0080'; - input.style.boxShadow = '0 0 20px rgba(255, 0, 128, 0.3)'; +function setInputError(id) { + const el = document.getElementById(id); + el.style.borderColor = "#ff0080"; + el.style.boxShadow = "0 0 20px rgba(255, 0, 128, 0.3)"; } -// Hilangkan error style +// Hilangkan error visual function clearInputStyle() { - this.style.borderColor = ''; - this.style.boxShadow = ''; + this.style.borderColor = ""; + this.style.boxShadow = ""; }