MIF_E31220480/resources/views/Auth/reset-password.blade.php

108 lines
3.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>Reset Password - Kos Calista</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background: linear-gradient(to bottom, #acccf4, #ffffff);
font-family: 'Poppins', sans-serif;
}
.reset-card {
max-width: 460px;
background: #ffffff;
border-radius: 20px;
padding: 30px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.reset-title {
font-weight: bold;
text-align: center;
background: linear-gradient(to right, #007bff, #00bcd4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 32px;
margin-bottom: 25px;
}
.btn-gradient {
background: linear-gradient(to right, #007bff, #00bcd4);
border: none;
color: white;
font-weight: 600;
padding: 10px;
border-radius: 50px;
transition: 0.3s ease;
}
.btn-gradient:hover {
background: linear-gradient(to bottom, #60a5fa, #ffffff);
color: #000;
transform: scale(1.03);
}
.form-label {
font-weight: 500;
}
.form-control {
border-radius: 10px;
}
</style>
</head>
<body class="d-flex justify-content-center align-items-center vh-100">
<div class="reset-card">
<h2 class="reset-title">Reset Password</h2>
@if (session('success'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
{{ session('success') }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif
@if ($errors->any())
<div class="alert alert-danger alert-dismissible fade show" role="alert">
{{ $errors->first() }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif
<form action="{{ route('password.update') }}" method="POST">
@csrf
<input type="hidden" name="email" value="{{ $email }}">
<div class="mb-3">
<label class="form-label">Password Baru</label>
<input type="password" name="password" class="form-control" placeholder="Masukkan password baru" required>
</div>
<div class="mb-3">
<label class="form-label">Konfirmasi Password</label>
<input type="password" name="password_confirmation" class="form-control" placeholder="Ulangi password baru" required>
</div>
<button class="btn btn-gradient w-100">Reset Password</button>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Alert otomatis hilang setelah 3 detik
setTimeout(() => {
const alert = document.querySelector('.alert');
if (alert) {
const bsAlert = new bootstrap.Alert(alert);
bsAlert.close();
}
}, 3000);
</script>
</body>
</html>