101 lines
3.7 KiB
JavaScript
101 lines
3.7 KiB
JavaScript
import { showModal, closeModal } from "./Modal Login.js";
|
|
import { loginRequest } from "./API Login.js";
|
|
|
|
document.getElementById('loginForm').addEventListener('submit', async function(e) {
|
|
e.preventDefault();
|
|
|
|
const username = document.getElementById('username').value.trim();
|
|
const password = document.getElementById('password').value.trim();
|
|
|
|
// Validasi input kosong
|
|
if (!username || !password) {
|
|
showModal('error', 'Login Gagal!', 'Username dan password tidak boleh kosong.');
|
|
return;
|
|
}
|
|
|
|
// Loading state
|
|
const submitBtn = this.querySelector('button[type="submit"]');
|
|
const originalText = submitBtn.textContent;
|
|
submitBtn.innerHTML = '<span>Memproses...</span>';
|
|
submitBtn.disabled = true;
|
|
|
|
try {
|
|
const data = await loginRequest(username, password);
|
|
|
|
if (data.success) {
|
|
// Simpan data user ke localStorage
|
|
localStorage.setItem('authToken', data.token);
|
|
localStorage.setItem('username', data.username);
|
|
|
|
// Tampilkan modal sukses
|
|
showModal('success', 'Login Berhasil!', `Selamat datang, ${data.username}!`);
|
|
|
|
} else {
|
|
// Handle error dari backend
|
|
showModal('error', 'Login Gagal!', data.message || 'Username atau password salah.');
|
|
}
|
|
} catch (error) {
|
|
console.error('Login Error:', error);
|
|
|
|
// Handle berbagai jenis error
|
|
let errorMessage = 'Terjadi kesalahan koneksi ke server.';
|
|
|
|
if (error.message === 'Failed to fetch') {
|
|
errorMessage = 'Tidak dapat terhubung ke server. Periksa koneksi internet Anda.';
|
|
} else if (error.message.includes('timeout')) {
|
|
errorMessage = 'Request timeout. Server tidak merespons.';
|
|
} else if (error.response) {
|
|
// Error dari server dengan response
|
|
errorMessage = error.response.data?.message || 'Terjadi kesalahan pada server.';
|
|
} else if (error.status === 401) {
|
|
errorMessage = 'Username atau password salah.';
|
|
} else if (error.status === 403) {
|
|
errorMessage = 'Akun Anda diblokir. Hubungi administrator.';
|
|
} else if (error.status === 500) {
|
|
errorMessage = 'Terjadi kesalahan pada server. Coba lagi nanti.';
|
|
}
|
|
|
|
showModal('error', 'Error!', errorMessage);
|
|
} finally {
|
|
// Kembalikan button ke state normal
|
|
submitBtn.textContent = originalText;
|
|
submitBtn.disabled = false;
|
|
}
|
|
});
|
|
|
|
// Link register
|
|
document.getElementById('registerLink').addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
showModal('error', 'Info', 'Halaman Register sedang dalam pengembangan.');
|
|
});
|
|
|
|
// Clear error visual saat user mulai mengetik
|
|
document.getElementById('username').addEventListener('input', function() {
|
|
this.style.borderColor = '';
|
|
});
|
|
|
|
document.getElementById('password').addEventListener('input', function() {
|
|
this.style.borderColor = '';
|
|
});
|
|
|
|
// Optional: Tambahkan visual error pada input
|
|
function setInputError(inputId) {
|
|
const input = document.getElementById(inputId);
|
|
if (input) {
|
|
input.style.borderColor = '#ff0080';
|
|
input.style.boxShadow = '0 0 20px rgba(255, 0, 128, 0.3)';
|
|
}
|
|
}
|
|
|
|
// Optional: Check apakah user sudah login saat buka halaman
|
|
window.addEventListener('DOMContentLoaded', function() {
|
|
const token = localStorage.getItem('authToken');
|
|
const username = localStorage.getItem('username');
|
|
|
|
// Jika sudah ada token, redirect ke homepage
|
|
if (token && username) {
|
|
// Optional: Validasi token dulu ke backend
|
|
console.log('User sudah login:', username);
|
|
// window.location.href = 'homepage.html'; // Uncomment untuk auto redirect
|
|
}
|
|
}); |