80 lines
2.5 KiB
JavaScript
80 lines
2.5 KiB
JavaScript
import { showModal, closeModal, setupModalOk, setupOutsideClose } from "./Modal_Register.js";
|
|
import { registerRequest } from "./Register_Request.js";
|
|
|
|
// 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();
|
|
|
|
// Validasi kosong
|
|
if (!username || !password || !confirmPassword) {
|
|
showModal("error", "Register Failed!", "All fields are required.");
|
|
return;
|
|
}
|
|
|
|
// Validasi password tidak sama
|
|
if (password !== confirmPassword) {
|
|
showModal("error", "Password Mismatch!", "Password and Confirm Password must match.");
|
|
setInputError("password");
|
|
setInputError("confirmPassword");
|
|
return;
|
|
}
|
|
|
|
// Button loading state
|
|
const submitBtn = this.querySelector("button[type='submit']");
|
|
const originalText = submitBtn.textContent;
|
|
|
|
submitBtn.disabled = true;
|
|
|
|
try {
|
|
const data = await registerRequest(username, password);
|
|
|
|
// API temenmu return: { status: "success", message: "..." }
|
|
if (data.status === "success") {
|
|
showModal("success", "Register Successful!", data.message);
|
|
|
|
} else {
|
|
showModal("error", "Register Failed!", data.message || "An error occurred.");
|
|
setInputError("username");
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error("Register Error:", error);
|
|
|
|
let msg = "A connection error occurred.";
|
|
|
|
if (error.message === "Failed to fetch") {
|
|
msg = "Unable to connect to server.";
|
|
}
|
|
|
|
showModal("error", "Error!", msg);
|
|
|
|
} finally {
|
|
submitBtn.disabled = false;
|
|
}
|
|
});
|
|
|
|
// 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(id) {
|
|
const el = document.getElementById(id);
|
|
el.style.borderColor = "#ff0080";
|
|
el.style.boxShadow = "0 0 20px rgba(255, 0, 128, 0.3)";
|
|
}
|
|
|
|
// Hilangkan error visual
|
|
function clearInputStyle() {
|
|
this.style.borderColor = "";
|
|
this.style.boxShadow = "";
|
|
}
|