Connection.php

@@ -1,9 +1,4 @@
 <?php
-header('Access-Control-Allow-Origin: *');
-header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
-header('Access-Control-Allow-Headers: Content-Type, Authorization');
-header('Content-Type: application/json');
-
 $DB_HOST = "202.46.28.160";
 $DB_PORT = 23316;
 $DB_USER = "evelyn";

Login.html

@@ -44,8 +44,9 @@
       </div>
     </div>
 
-    <!-- ✅ PENTING: Gunakan type="module" -->
+    <script src="Login.js"></script>
-    <script type="module" src="Login.js"></script>
+    <script src="Animation Login.js"></script>
-    <script src="Animation_Login.js"></script>
+    <script src="Modal Login.js"></script>
+    <script src="API Login.js"></script>
   </body>
-</html>
+</html>

Login.js

@@ -1,11 +1,5 @@
-import { showModal, setupModalOk, setupOutsideClose } from "./Modal_Login.js";
+import { showModal, closeModal } from "./Modal Login.js";
-import { loginRequest } from "./Login_Request.js";
+import { loginRequest } from "./API Login.js";
-
-// ✅ PENTING: Setup modal saat halaman load
-document.addEventListener('DOMContentLoaded', function() {
-    setupModalOk();
-    setupOutsideClose();
-});
 
 document.getElementById('loginForm').addEventListener('submit', async function(e) {
     e.preventDefault();
@@ -13,46 +7,95 @@ document.getElementById('loginForm').addEventListener('submit', async function(e
     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);
-        
-        console.log('Response dari server:', data); // Debug
 
         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
+    }
 });

Login.php

@@ -1,27 +1,13 @@
 <?php
-// ✅ CORS Headers HARUS di paling atas sebelum apapun
-header('Access-Control-Allow-Origin: *');
-header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
-header('Access-Control-Allow-Headers: Content-Type, Authorization');
-header('Access-Control-Max-Age: 86400');
-header('Content-Type: application/json');
-
-// ✅ Handle preflight OPTIONS request
-if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
-    http_response_code(200);
-    exit();
-}
-
 session_start();
+header('Content-Type: application/json');
 include 'Connection.php';
 
-// Ambil data dari JSON body
+$username = $_POST['username'] ?? '';
-$input = json_decode(file_get_contents('php://input'), true);
+$password = $_POST['password'] ?? '';
-$username = $input['username'] ?? '';
-$password = $input['password'] ?? '';
 
 if (empty($username) || empty($password)) {
-    echo json_encode(["success" => false, "message" => "Username dan password wajib diisi"]);
+    echo json_encode(["status" => "error", "message" => "Username dan password wajib diisi"]);
     exit;
 }
 
@@ -31,7 +17,7 @@ $stmt->execute();
 $stmt->store_result();
 
 if ($stmt->num_rows === 0) {
-    echo json_encode(["success" => false, "message" => "Username tidak ditemukan"]);
+    echo json_encode(["status" => "error", "message" => "Username tidak ditemukan"]);
     $stmt->close();
     $conn->close();
     exit;
@@ -42,14 +28,9 @@ $stmt->fetch();
 
 if (password_verify($password, $hashedPassword)) {
     $_SESSION['username'] = $username;
-    echo json_encode([
+    echo json_encode(["status" => "success", "message" => "Login berhasil"]);
-        "success" => true, 
-        "message" => "Login berhasil",
-        "username" => $username,
-        "token" => bin2hex(random_bytes(32))
-    ]);
 } else {
-    echo json_encode(["success" => false, "message" => "Password salah"]);
+    echo json_encode(["status" => "error", "message" => "Password salah"]);
 }
 
 $stmt->close();

Modal Login.js

@@ -28,7 +28,7 @@ export function setupModalOk() {
         const modalIcon = document.getElementById('modalIcon');
 
         if (modalIcon.classList.contains('success')) {
-            window.location.href = 'Homepage.html';
+            window.location.href = 'homepage.html';
         } else {
             closeModal();
         }
@@ -41,7 +41,7 @@ export function setupOutsideClose() {
 
         if (e.target === this) {
             if (modalIcon.classList.contains('success')) {
-                window.location.href = 'Homepage.html';
+                window.location.href = 'homepage.html';
             } else {
                 closeModal();
             }

Register.js

@@ -1,5 +1,5 @@
-import { showModal, closeModal, setupModalOk, setupOutsideClose } from "./Modal_Register.js";
+import { showModal, closeModal, setupModalOk, setupOutsideClose } from "./Modal Register.js";
-import { registerRequest } from "./Register_Request.js";
+import { registerRequest } from "./API Register.js";
 
 // Aktifkan tombol modal
 setupModalOk();