2526-web/kelompok06-2048
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Frontend

Browse Source
This commit is contained in:
Evelyn Sucitro 2025-11-14 23:23:25 +07:00
parent 0d93e2e806
commit a501b4845e
5 changed files with 298 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
Animation Login.js
View File

@ -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();

22
Login.css
View File

@ -37,12 +37,30 @@ body {
z-index: 2; z-index: 2;
background: rgba(30, 0, 50, 0.6); background: rgba(30, 0, 50, 0.6);
backdrop-filter: blur(10px); 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; border-radius: 20px;
padding: 50px 40px; padding: 50px 40px;
width: 90%; width: 90%;
max-width: 400px; 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 { h1 {

79
Login.html
View File

@ -1,45 +1,52 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login</title> <title>Login</title>
<link rel="stylesheet" href="Login.css"> <link rel="stylesheet" href="Login.css" />
</head> </head>
<body> <body>
<div id="particles"></div> <div id="particles"></div>
<div class="container"> <div class="container">
<h1>Login</h1> <h1>Login</h1>
<form id="loginForm"> <form id="loginForm">
<div class="input-group"> <div class="input-group">
<input type="text" id="username" placeholder="Username" required> <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>
</div> </div>
<!-- Custom Modal --> <div class="input-group">
<div id="customModal" class="modal"> <input
<div class="modal-content"> type="password"
<div class="modal-icon" id="modalIcon"></div> id="password"
<h2 id="modalTitle"></h2> placeholder="Password"
<p id="modalMessage"></p> required
<button id="modalOkBtn" class="modal-btn">OK</button> />
</div>
</div> </div>
<script src="Login.js"></script> <button type="submit" class="btn">Login</button>
<script src="Animation Login.js"></script> </form>
</body>
<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> </html>

101
Login.js
View File

@ -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
}
});

50
Modal.js Normal file
View File

@ -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();
}
}
});
}