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 = "";
}