88 lines
2.9 KiB
JavaScript
88 lines
2.9 KiB
JavaScript
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 = '';
|
|
}
|