Frontend

2025-11-14 23:23:25 +07:00 · 2025-11-14 23:23:25 +07:00 · a501b4845e
commit a501b4845e
parent 0d93e2e806
5 changed files with 298 additions and 41 deletions
--- a/Login.js
+++ b/Login.js
@ -0,0 +1,81 @@
+// Particle System
+const particlesContainer = document.getElementById('particles');
+const particleCount = 150;
+const particles = [];
+
+class Particle {
+    constructor() {
+        this.element = document.createElement('div');
+        this.element.className = 'particle';
+        this.reset();
+        particlesContainer.appendChild(this.element);
+    }
+
+    reset() {
+        this.x = Math.random() * window.innerWidth;
+        this.y = Math.random() * window.innerHeight;
+        this.vx = (Math.random() - 0.5) * 1.2;
+        this.vy = (Math.random() - 0.5) * 1.2;
+        this.size = Math.random() * 3 + 2;
+
+        const colors = [
+            '#00d9ff', '#ff00ff', '#00ffff',
+            '#ff0080', '#9d00ff', '#00ff88'
+        ];
+
+        const color = colors[Math.floor(Math.random() * colors.length)];
+        this.element.style.background = color;
+        this.element.style.boxShadow = `0 0 15px ${color}`;
+        this.element.style.width = `${this.size}px`;
+        this.element.style.height = `${this.size}px`;
+
+        this.updatePosition();
+    }
+
+    updatePosition() {
+        this.element.style.left = `${this.x}px`;
+        this.element.style.top = `${this.y}px`;
+    }
+
+    move() {
+        this.x += this.vx;
+        this.y += this.vy;
+
+        if (this.x < -10) this.x = window.innerWidth + 10;
+        if (this.x > window.innerWidth + 10) this.x = -10;
+        if (this.y < -10) this.y = window.innerHeight + 10;
+        if (this.y > window.innerHeight + 10) this.y = -10;
+
+        this.updatePosition();
+    }
+}
+
+// Create particles with even distribution
+const cols = 15;
+const rows = 10;
+let particleIndex = 0;
+
+for (let i = 0; i < rows; i++) {
+    for (let j = 0; j < cols; j++) {
+        if (particleIndex >= particleCount) break;
+
+        const particle = new Particle();
+
+        // Even distribution + slight random offset
+        particle.x = (j / cols) * window.innerWidth + (Math.random() - 0.5) * 100;
+        particle.y = (i / rows) * window.innerHeight + (Math.random() - 0.5) * 100;
+        particle.updatePosition();
+
+        particles.push(particle);
+        particleIndex++;
+    }
+    if (particleIndex >= particleCount) break;
+}
+
+// Animate
+function animate() {
+    particles.forEach(p => p.move());
+    requestAnimationFrame(animate);
+}
+
+animate();
--- a/Login.css
+++ b/Login.css
@ -37,12 +37,30 @@ body {
    z-index: 2;
    background: rgba(30, 0, 50, 0.6);
    backdrop-filter: blur(10px);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 2px solid rgba(0, 217, 255, 0.3);
    border-radius: 20px;
    padding: 50px 40px;
    width: 90%;
    max-width: 400px;
-    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
+                0 0 40px rgba(0, 217, 255, 0.3),
+                inset 0 0 30px rgba(0, 217, 255, 0.1);
+    animation: glowBorder 3s ease-in-out infinite;
+}
+
+@keyframes glowBorder {
+    0%, 100% {
+        border-color: rgba(0, 217, 255, 0.4);
+        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
+                    0 0 40px rgba(0, 217, 255, 0.3),
+                    inset 0 0 30px rgba(0, 217, 255, 0.1);
+    }
+    50% {
+        border-color: rgba(255, 0, 255, 0.5);
+        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
+                    0 0 50px rgba(255, 0, 255, 0.4),
+                    inset 0 0 40px rgba(255, 0, 255, 0.15);
+    }
 }

 h1 {
--- a/Login.html
+++ b/Login.html
@ -1,45 +1,52 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>Login</title>
-        <link rel="stylesheet" href="Login.css">
-    </head>
-    <body>
-        <div id="particles"></div>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Login</title>
+    <link rel="stylesheet" href="Login.css" />
+  </head>
+  <body>
+    <div id="particles"></div>

-        <div class="container">
-            <h1>Login</h1>
+    <div class="container">
+      <h1>Login</h1>

-            <form id="loginForm">
-                <div class="input-group">
-                    <input type="text" id="username" placeholder="Username" required>
-                </div>
-            
-                <div class="input-group">
-                    <input type="password" id="password" placeholder="Password" required>
-                </div>
-            
-                <button type="submit" class="btn">Enter</button>
-            </form>
-        
-            <div class="register-link">
-                Don't Have Account? <a href="Register.html" id="registerLink">Register</a>
-            </div>
+      <form id="loginForm">
+        <div class="input-group">
+          <input type="text" id="username" placeholder="Username" required />
        </div>

-        <!-- Custom Modal -->
-        <div id="customModal" class="modal">
-            <div class="modal-content">
-                <div class="modal-icon" id="modalIcon"></div>
-                <h2 id="modalTitle"></h2>
-                <p id="modalMessage"></p>
-                <button id="modalOkBtn" class="modal-btn">OK</button>
-            </div>
+        <div class="input-group">
+          <input
+            type="password"
+            id="password"
+            placeholder="Password"
+            required
+          />
        </div>

-        <script src="Login.js"></script>
-        <script src="Animation Login.js"></script>
-    </body>
+        <button type="submit" class="btn">Login</button>
+      </form>
+
+      <div class="register-link">
+        Don't Have Account?
+        <a href="Register.html" id="registerLink">Register</a>
+      </div>
+    </div>
+
+    <div id="customModal" class="modal">
+      <div class="modal-content">
+        <div class="modal-icon" id="modalIcon"></div>
+        <h2 id="modalTitle"></h2>
+        <p id="modalMessage"></p>
+        <button id="modalOkBtn" class="modal-btn">OK</button>
+      </div>
+    </div>
+
+    <script src="Login.js"></script>
+    <script src="Animation Login.js"></script>
+    <script src="Modal.js"></script>
+    <script src="API Login.js"></script>
+  </body>
 </html>
--- a/Login.js
+++ b/Login.js
@ -0,0 +1,101 @@
+import { showModal, closeModal } from "./Modal.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
+    }
+});
--- a/Modal.js
+++ b/Modal.js
@ -0,0 +1,50 @@
+export function showModal(type, title, message) {
+    const modal = document.getElementById('customModal');
+    const modalIcon = document.getElementById('modalIcon');
+    const modalTitle = document.getElementById('modalTitle');
+    const modalMessage = document.getElementById('modalMessage');
+
+    modalIcon.className = 'modal-icon';
+
+    if (type === 'success') {
+        modalIcon.classList.add('success');
+        modalTitle.textContent = title || 'Login Berhasil!';
+    } else {
+        modalIcon.classList.add('error');
+        modalTitle.textContent = title || 'Login Gagal!';
+    }
+
+    modalMessage.textContent = message;
+    modal.classList.add('show');
+}
+
+export function closeModal() {
+    const modal = document.getElementById('customModal');
+    modal.classList.remove('show');
+}
+
+export function setupModalOk() {
+    document.getElementById('modalOkBtn').addEventListener('click', function() {
+        const modalIcon = document.getElementById('modalIcon');
+
+        if (modalIcon.classList.contains('success')) {
+            window.location.href = 'homepage.html';
+        } else {
+            closeModal();
+        }
+    });
+}
+
+export function setupOutsideClose() {
+    document.getElementById('customModal').addEventListener('click', function(e) {
+        const modalIcon = document.getElementById('modalIcon');
+
+        if (e.target === this) {
+            if (modalIcon.classList.contains('success')) {
+                window.location.href = 'homepage.html';
+            } else {
+                closeModal();
+            }
+        }
+    });
+}