modal

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();
+            }
+        }
+    });
+}

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 username = document.getElementById("username").value.trim();
-    const password = document.getElementById('password').value.trim();
+    const password = document.getElementById("password").value.trim();
-    const confirmPassword = document.getElementById('confirmPassword').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.');
+        showModal("error", "Password Tidak Cocok!", "Password dan Confirm Password harus sama.");
-        setInputError('password');
+        setInputError("password");
-        setInputError('confirmPassword');
+        setInputError("confirmPassword");
         return;
     }
 
-    // Loading state button
+    // Button loading state
-    const submitBtn = this.querySelector('button[type="submit"]');
+    const submitBtn = this.querySelector("button[type='submit']");
     const originalText = submitBtn.textContent;
-    submitBtn.innerHTML = '<span>Memproses...</span>';
+    submitBtn.innerHTML = "<span>Memproses...</span>";
     submitBtn.disabled = true;
 
     try {
         const data = await registerRequest(username, password);
 
-        // FORMAT API TEMENMU:
+        // API temenmu return: { status: "success", message: "..." }
-        // { status: "success", message: "..."}
-        // { status: "error", message: "..." }
-
         if (data.status === "success") {
-            showModal('success', 'Register Berhasil!', data.message || "Akun berhasil dibuat!");
+            showModal("success", "Register Berhasil!", data.message);
-
-            // Setelah klik OK → ke login
-            document.getElementById("modalOkBtn").onclick = () => {
-                closeModal();
-                window.location.href = "Login.html";
-            };
 
         } else {
-            // Jika error dari API
+            showModal("error", "Register Gagal!", data.message || "Terjadi kesalahan.");
-            showModal('error', 'Register Gagal!', data.message || 'Terjadi kesalahan.');
+            setInputError("username");
-            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') {
+        if (error.message === "Failed to fetch") {
-            errorMessage = 'Tidak dapat terhubung ke server.';
+            msg = "Tidak dapat terhubung ke server.";
-        } else if (error.message.includes('timeout')) {
-            errorMessage = 'Server tidak merespons (timeout).';
         }
 
-        showModal('error', 'Error!', errorMessage);
+        showModal("error", "Error!", msg);
+
     } finally {
         submitBtn.textContent = originalText;
         submitBtn.disabled = false;
     }
 });
 
-// Clear error saat mengetik
+// Hilangkan efek error saat user mengetik
-document.getElementById('username').addEventListener('input', clearInputStyle);
+document.getElementById("username").addEventListener("input", clearInputStyle);
-document.getElementById('password').addEventListener('input', clearInputStyle);
+document.getElementById("password").addEventListener("input", clearInputStyle);
-document.getElementById('confirmPassword').addEventListener('input', clearInputStyle);
+document.getElementById("confirmPassword").addEventListener("input", clearInputStyle);
 
 // Efek error merah neon
-function setInputError(inputId) {
+function setInputError(id) {
-    const input = document.getElementById(inputId);
+    const el = document.getElementById(id);
-    input.style.borderColor = '#ff0080';
+    el.style.borderColor = "#ff0080";
-    input.style.boxShadow = '0 0 20px rgba(255, 0, 128, 0.3)';
+    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.borderColor = "";
-    this.style.boxShadow = '';
+    this.style.boxShadow = "";
 }