98 lines
3.2 KiB
JavaScript
98 lines
3.2 KiB
JavaScript
import { showModal, closeModal, setupModalOk, setupOutsideClose } from "./Modal_Register.js";
|
|
import { registerRequest } from "./Register_Request.js";
|
|
|
|
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();
|
|
|
|
if (!username || !password || !confirmPassword) {
|
|
showModal("error", "Register Failed!", "All fields are required.");
|
|
return;
|
|
}
|
|
|
|
if (password !== confirmPassword) {
|
|
showModal("error", "Password Mismatch!", "Password and Confirm Password must match.");
|
|
setInputError("password");
|
|
setInputError("confirmPassword");
|
|
return;
|
|
}
|
|
|
|
const submitBtn = this.querySelector("button[type='submit']");
|
|
submitBtn.disabled = true;
|
|
|
|
try {
|
|
const data = await registerRequest(username, password);
|
|
|
|
if (data.status === "success") {
|
|
|
|
showModal("success", "Register Successful!", data.message);
|
|
|
|
const pendingScore = localStorage.getItem('lastScore');
|
|
if (pendingScore && typeof saveScore === "function") {
|
|
console.log("Menyimpan skor pending: " + pendingScore);
|
|
saveScore(pendingScore);
|
|
} else if (typeof score !== 'undefined') {
|
|
saveScore(score);
|
|
}
|
|
|
|
const okBtn = document.getElementById("modalOkBtn");
|
|
|
|
if (okBtn) {
|
|
okBtn.addEventListener("click", function() {
|
|
|
|
sessionStorage.setItem("loggedInUser", username);
|
|
|
|
window.location.href = "Homepage.html";
|
|
}, { once: true });
|
|
|
|
} else {
|
|
|
|
console.warn("OK button not found, redirecting automatically.");
|
|
setTimeout(() => {
|
|
|
|
sessionStorage.setItem("loggedInUser", username);
|
|
window.location.href = "Homepage.html";
|
|
}, 2000);
|
|
}
|
|
|
|
} 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;
|
|
}
|
|
});
|
|
|
|
document.getElementById("username").addEventListener("input", clearInputStyle);
|
|
document.getElementById("password").addEventListener("input", clearInputStyle);
|
|
document.getElementById("confirmPassword").addEventListener("input", clearInputStyle);
|
|
|
|
function setInputError(id) {
|
|
const el = document.getElementById(id);
|
|
if(el) {
|
|
el.style.borderColor = "#ff0080";
|
|
el.style.boxShadow = "0 0 20px rgba(255, 0, 128, 0.3)";
|
|
}
|
|
}
|
|
|
|
function clearInputStyle() {
|
|
this.style.borderColor = "";
|
|
this.style.boxShadow = "";
|
|
} |