105 lines
4.6 KiB
PHP
105 lines
4.6 KiB
PHP
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
|
|
<style>
|
|
/* Tambahkan CSS custom Anda di sini jika diperlukan */
|
|
body {
|
|
background-color: #f8f9fa; /* Contoh warna latar belakang */
|
|
}
|
|
.card {
|
|
border-radius: 12px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="d-flex justify-content-center align-items-center vh-100">
|
|
<div class="card shadow-lg p-4" style="width: 400px;">
|
|
<div class="card-body">
|
|
<h1 class="text-center mb-4">Login</h1>
|
|
|
|
<form method="POST" action="{{ route('login') }}">
|
|
@csrf
|
|
<div class="mb-3">
|
|
<label for="email" class="form-label">Email Address</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="bi bi-envelope"></i></span>
|
|
<input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autofocus>
|
|
</div>
|
|
@error('email')
|
|
<span class="text-danger small">{{ $message }}</span>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="password" class="form-label">Password</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="bi bi-lock"></i></span>
|
|
<input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required>
|
|
<button type="button" class="btn btn-outline-secondary" id="togglePassword">
|
|
<i class="bi bi-eye"></i>
|
|
</button>
|
|
</div>
|
|
@error('password')
|
|
<span class="text-danger small">{{ $message }}</span>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="mb-3 text-start mt-3 mr-1">
|
|
<a class="small" href="{{ route('password.request') }}">Forgot Your Password?</a>
|
|
</div>
|
|
|
|
<!-- <div class="mb-3 form-check">
|
|
<input class="form-check-input" type="checkbox" name="remember" id="remember">
|
|
<label class="form-check-label" for="remember">
|
|
Remember Me
|
|
</label>
|
|
</div> -->
|
|
|
|
<div class="d-grid">
|
|
<button type="submit" class="btn btn-primary">
|
|
Login
|
|
</button>
|
|
</div>
|
|
|
|
<!-- <div class="text-center mt-3">
|
|
<p class="small">Don't have an account? <a href="register">Register here</a></p>
|
|
</div> -->
|
|
|
|
</form>
|
|
|
|
{{-- Pesan Error Jika Email/Password Salah --}}
|
|
@if (session('error'))
|
|
<div class="alert alert-danger mt-3">
|
|
{{ session('error') }}
|
|
</div>
|
|
@endif
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
|
|
<script>
|
|
document.getElementById('togglePassword').addEventListener('click', function () {
|
|
let passwordField = document.getElementById('password');
|
|
let icon = this.querySelector('i');
|
|
|
|
if (passwordField.type === 'password') {
|
|
passwordField.type = 'text';
|
|
icon.classList.remove('bi-eye');
|
|
icon.classList.add('bi-eye-slash');
|
|
} else {
|
|
passwordField.type = 'password';
|
|
icon.classList.remove('bi-eye-slash');
|
|
icon.classList.add('bi-eye');
|
|
}
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html> |