190 lines
6.3 KiB
PHP
190 lines
6.3 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Lupa Password</title>
|
|
<!-- Bootstrap CSS -->
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
|
|
<!-- Font Awesome -->
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
|
<style>
|
|
body {
|
|
background-color: #f8f9fa;
|
|
padding-top: 40px;
|
|
padding-bottom: 40px;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.forgot-password-container {
|
|
max-width: 500px;
|
|
margin: 0 auto;
|
|
padding: 30px;
|
|
background-color: white;
|
|
border-radius: 10px;
|
|
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
|
}
|
|
.header {
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
}
|
|
.header h3 {
|
|
color: #344767;
|
|
font-weight: 600;
|
|
}
|
|
.header .icon {
|
|
font-size: 50px;
|
|
color: #0d6efd;
|
|
margin-bottom: 15px;
|
|
}
|
|
.form-group {
|
|
margin-bottom: 20px;
|
|
}
|
|
.form-label {
|
|
font-weight: 500;
|
|
color: #344767;
|
|
}
|
|
.btn-submit {
|
|
background-color: #0d6efd;
|
|
color: white;
|
|
padding: 12px 20px;
|
|
border-radius: 5px;
|
|
font-weight: 500;
|
|
width: 100%;
|
|
margin-top: 15px;
|
|
}
|
|
.btn-submit:hover {
|
|
background-color: #0b5ed7;
|
|
}
|
|
.back-link {
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
}
|
|
.alert {
|
|
border-radius: 5px;
|
|
padding: 15px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.alert-danger {
|
|
background-color: #f8d7da;
|
|
border-color: #f5c2c7;
|
|
color: #842029;
|
|
}
|
|
.alert-success {
|
|
background-color: #d1e7dd;
|
|
border-color: #badbcc;
|
|
color: #0f5132;
|
|
}
|
|
.input-group-text {
|
|
background-color: transparent;
|
|
}
|
|
.divider {
|
|
display: flex;
|
|
align-items: center;
|
|
text-align: center;
|
|
margin: 20px 0;
|
|
}
|
|
.divider::before, .divider::after {
|
|
content: '';
|
|
flex: 1;
|
|
border-bottom: 1px solid #dee2e6;
|
|
}
|
|
.divider span {
|
|
padding: 0 10px;
|
|
color: #6c757d;
|
|
font-size: 14px;
|
|
}
|
|
.helper-text {
|
|
font-size: 14px;
|
|
color: #6c757d;
|
|
margin-top: 5px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="forgot-password-container">
|
|
<div class="header">
|
|
<div class="icon">
|
|
<i class="fas fa-lock"></i>
|
|
</div>
|
|
<h3>Lupa Password?</h3>
|
|
<p class="text-muted">Masukkan email Anda untuk mengatur ulang password</p>
|
|
</div>
|
|
|
|
@if(session('error'))
|
|
<div class="alert alert-danger" role="alert">
|
|
<i class="fas fa-exclamation-circle me-2"></i>{{ session('error') }}
|
|
</div>
|
|
@endif
|
|
|
|
@if(session('success'))
|
|
<div class="alert alert-success" role="alert">
|
|
<i class="fas fa-check-circle me-2"></i>{{ session('success') }}
|
|
</div>
|
|
@endif
|
|
|
|
<form action="{{ route('password.verify') }}" method="POST" class="needs-validation" novalidate>
|
|
@csrf
|
|
<div class="form-group">
|
|
<label for="email" class="form-label">Email Terdaftar</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="fas fa-envelope"></i></span>
|
|
<input type="email" name="email" id="email" class="form-control @error('email') is-invalid @enderror" placeholder="nama@contoh.com" value="{{ old('email') }}" required>
|
|
@error('email')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
<div class="helper-text">
|
|
<i class="fas fa-info-circle me-1"></i>Kami akan mengirimkan tautan untuk mengatur ulang password Anda.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="divider">
|
|
<span>PULIHKAN AKUN</span>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-submit">
|
|
<i class="fas fa-paper-plane me-2"></i>Kirim Tautan Reset
|
|
</button>
|
|
|
|
<div class="back-link">
|
|
<a href="{{ route('login') }}" class="text-decoration-none">
|
|
<i class="fas fa-arrow-left me-1"></i>Kembali ke halaman login
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bootstrap & jQuery JS -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
// Form validation
|
|
(function() {
|
|
'use strict';
|
|
window.addEventListener('load', function() {
|
|
const forms = document.getElementsByClassName('needs-validation');
|
|
Array.prototype.filter.call(forms, function(form) {
|
|
form.addEventListener('submit', function(event) {
|
|
if (form.checkValidity() === false) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
}
|
|
form.classList.add('was-validated');
|
|
}, false);
|
|
});
|
|
}, false);
|
|
})();
|
|
|
|
// Auto-hide alerts after 5 seconds
|
|
window.setTimeout(function() {
|
|
$(".alert").fadeTo(500, 0).slideUp(500, function(){
|
|
$(this).remove();
|
|
});
|
|
}, 5000);
|
|
</script>
|
|
</body>
|
|
</html> |