From c2cdf4792ab702009cbcc59c217ad65fb8104c35 Mon Sep 17 00:00:00 2001
From: Jevinca Marvella <mjevincamarvella@gmail.com>
Date: Tue, 18 Nov 2025 13:00:47 +0700
Subject: [PATCH] frontend

---
 Register.js | 87 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 87 insertions(+)
 create mode 100644 Register.js

diff --git a/Register.js b/Register.js
new file mode 100644
index 0000000..6b19dff
--- /dev/null
+++ b/Register.js
@@ -0,0 +1,87 @@
+import { showModal, closeModal } from "./Modal.js";
+import { registerRequest } from "./API Register.js";
+
+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();
+
+    // Validasi input kosong
+    if (!username || !password || !confirmPassword) {
+        showModal('error', 'Register Gagal!', 'Semua field harus diisi.');
+        return;
+    }
+
+    // Password tidak cocok
+    if (password !== confirmPassword) {
+        showModal('error', 'Password Tidak Cocok!', 'Password dan konfirmasi password harus sama.');
+        setInputError('password');
+        setInputError('confirmPassword');
+        return;
+    }
+
+    // Loading state button
+    const submitBtn = this.querySelector('button[type="submit"]');
+    const originalText = submitBtn.textContent;
+    submitBtn.innerHTML = '<span>Memproses...</span>';
+    submitBtn.disabled = true;
+
+    try {
+        const data = await registerRequest(username, password);
+
+        // FORMAT API TEMENMU:
+        // { status: "success", message: "..."}
+        // { status: "error", 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";
+            };
+
+        } else {
+            // Jika error dari API
+            showModal('error', 'Register Gagal!', data.message || 'Terjadi kesalahan.');
+            setInputError('username');
+        }
+
+    } catch (error) {
+        console.error("Register Error:", error);
+
+        let errorMessage = '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).';
+        }
+
+        showModal('error', 'Error!', errorMessage);
+    } 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);
+
+// 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)';
+}
+
+// Hilangkan error style
+function clearInputStyle() {
+    this.style.borderColor = '';
+    this.style.boxShadow = '';
+}