101 lines
5.5 KiB
PHP
101 lines
5.5 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Login & Register</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
|
|
<link rel="stylesheet" href="{{ asset('css/auth/auth.css') }}">
|
|
<script>
|
|
function toggleForm(showRegister) {
|
|
document.getElementById('loginForm').style.display = showRegister ? 'none' : 'block';
|
|
document.getElementById('registerForm').style.display = showRegister ? 'block' : 'none';
|
|
}
|
|
|
|
function togglePassword(id, iconId) {
|
|
const input = document.getElementById(id);
|
|
const icon = document.getElementById(iconId);
|
|
if (input.type === "password") {
|
|
input.type = "text";
|
|
icon.classList.remove("bi-eye-slash");
|
|
icon.classList.add("bi-eye");
|
|
} else {
|
|
input.type = "password";
|
|
icon.classList.remove("bi-eye");
|
|
icon.classList.add("bi-eye-slash");
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="container d-flex justify-content-center align-items-center vh-100">
|
|
<div class="auth-card p-4">
|
|
@if(session('success'))
|
|
<div class="alert alert-success fade-in">{{ session('success') }}</div>
|
|
@endif
|
|
@if($errors->any())
|
|
<div class="alert alert-danger fade-in">{{ $errors->first() }}</div>
|
|
@endif
|
|
|
|
<!-- Login Form -->
|
|
<div id="loginForm" class="fade-in">
|
|
<h3 class="text-center form-title mb-4">Masuk Akun</h3>
|
|
<form action="{{ route('login.post') }}" method="POST" autocomplete="off">
|
|
@csrf
|
|
<div class="input-group mb-3">
|
|
<span class="input-group-text"><i class="bi bi-envelope"></i></span>
|
|
<input type="email" name="email" class="form-control" placeholder="Email" required autocomplete="nope">
|
|
</div>
|
|
<div class="input-group mb-3">
|
|
<span class="input-group-text"><i class="bi bi-lock"></i></span>
|
|
<input type="password" id="loginPassword" name="password" class="form-control" placeholder="Password" required autocomplete="new-password">
|
|
<span class="input-group-text" onclick="togglePassword('loginPassword', 'loginEye')" style="cursor: pointer;">
|
|
<i id="loginEye" class="bi bi-eye-slash"></i>
|
|
</span>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary w-100">Login</button>
|
|
</form>
|
|
<div class="form-toggle text-center mt-3">
|
|
Belum punya akun? <a onclick="toggleForm(true)" style="cursor:pointer;">Daftar di sini</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Register Form -->
|
|
<div id="registerForm" style="display: none;" class="fade-in">
|
|
<h3 class="text-center form-title mb-4">Buat Akun</h3>
|
|
<form action="{{ route('register') }}" method="POST" autocomplete="off">
|
|
@csrf
|
|
<div class="input-group mb-3">
|
|
<span class="input-group-text"><i class="bi bi-person"></i></span>
|
|
<input type="text" name="name" class="form-control" placeholder="Nama Lengkap" required autocomplete="off">
|
|
</div>
|
|
<div class="input-group mb-3">
|
|
<span class="input-group-text"><i class="bi bi-envelope"></i></span>
|
|
<input type="email" name="email" class="form-control" placeholder="Email" required autocomplete="nope">
|
|
</div>
|
|
<div class="input-group mb-3">
|
|
<span class="input-group-text"><i class="bi bi-lock"></i></span>
|
|
<input type="password" id="regPassword" name="password" class="form-control" placeholder="Password" required autocomplete="new-password">
|
|
<span class="input-group-text" onclick="togglePassword('regPassword', 'regEye')" style="cursor: pointer;">
|
|
<i id="regEye" class="bi bi-eye-slash"></i>
|
|
</span>
|
|
</div>
|
|
<div class="input-group mb-3">
|
|
<span class="input-group-text"><i class="bi bi-shield-lock"></i></span>
|
|
<input type="password" id="confirmPassword" name="password_confirmation" class="form-control" placeholder="Konfirmasi Password" required autocomplete="new-password">
|
|
<span class="input-group-text" onclick="togglePassword('confirmPassword', 'confirmEye')" style="cursor: pointer;">
|
|
<i id="confirmEye" class="bi bi-eye-slash"></i>
|
|
</span>
|
|
</div>
|
|
<button type="submit" class="btn btn-success w-100">Register</button>
|
|
</form>
|
|
<div class="form-toggle text-center mt-3">
|
|
Sudah punya akun? <a onclick="toggleForm(false)" style="cursor:pointer;">Login di sini</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|