134 lines
4.8 KiB
PHP
134 lines
4.8 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
|
|
<head>
|
|
<title>Reset Password - GriyaPadi.id</title>
|
|
<link href="{{ asset('template/frontend/css/bootstrap.min.css') }}" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" />
|
|
<style>
|
|
body {
|
|
background-color: #f0f7e6;
|
|
height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.text-tani {
|
|
color: #81c408;
|
|
}
|
|
|
|
.valid-item {
|
|
color: #dc3545;
|
|
font-size: 0.8rem;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.valid-item.valid {
|
|
color: #198754;
|
|
}
|
|
|
|
.cursor-pointer {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="card border-0 shadow-sm p-4 bg-white" style="max-width: 400px; width: 100%;">
|
|
<div class="text-center mb-4">
|
|
<h4 class="fw-bold text-tani">Buat Password Baru</h4>
|
|
</div>
|
|
|
|
@if ($errors->any())
|
|
<div class="alert alert-danger small">{{ $errors->first() }}</div>
|
|
@endif
|
|
|
|
<form action="{{ route('password.update') }}" method="POST">
|
|
@csrf
|
|
<input type="hidden" name="token" value="{{ $token }}">
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label small fw-bold text-muted">Email</label>
|
|
<input type="email" name="email" class="form-control" value="{{ $email ?? old('email') }}" readonly>
|
|
</div>
|
|
|
|
{{-- Password Baru --}}
|
|
<div class="mb-2">
|
|
<label class="form-label small fw-bold text-muted">Password Baru</label>
|
|
<div class="input-group">
|
|
<input type="password" name="password" id="password" class="form-control border-end-0" required
|
|
onkeyup="checkPassword()">
|
|
<span class="input-group-text bg-white border-start-0 cursor-pointer"
|
|
onclick="togglePassword('password', 'icon-1')">
|
|
<i class="fas fa-eye text-muted" id="icon-1"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Indikator Validasi --}}
|
|
<div class="mb-3 ps-1">
|
|
<div id="req-length" class="valid-item"><i class="fas fa-times"></i> Minimal 8 Karakter</div>
|
|
<div id="req-number" class="valid-item"><i class="fas fa-times"></i> Ada Angka (0-9)</div>
|
|
<div id="req-upper" class="valid-item"><i class="fas fa-times"></i> Ada Huruf Kapital (A-Z)</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="form-label small fw-bold text-muted">Ulangi Password</label>
|
|
<div class="input-group">
|
|
<input type="password" name="password_confirmation" id="password_conf"
|
|
class="form-control border-end-0" required>
|
|
<span class="input-group-text bg-white border-start-0 cursor-pointer"
|
|
onclick="togglePassword('password_conf', 'icon-2')">
|
|
<i class="fas fa-eye text-muted" id="icon-2"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-grid">
|
|
<button type="submit" class="btn text-white fw-bold" style="background-color: #81c408;">Simpan
|
|
Password</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
function togglePassword(inputId, iconId) {
|
|
const input = document.getElementById(inputId);
|
|
const icon = document.getElementById(iconId);
|
|
if (input.type === "password") {
|
|
input.type = "text";
|
|
icon.classList.remove("fa-eye");
|
|
icon.classList.add("fa-eye-slash");
|
|
} else {
|
|
input.type = "password";
|
|
icon.classList.remove("fa-eye-slash");
|
|
icon.classList.add("fa-eye");
|
|
}
|
|
}
|
|
|
|
function checkPassword() {
|
|
const password = document.getElementById('password').value;
|
|
updateRequirement('req-length', password.length >= 8);
|
|
updateRequirement('req-number', /\d/.test(password));
|
|
updateRequirement('req-upper', /[A-Z]/.test(password));
|
|
}
|
|
|
|
function updateRequirement(id, isValid) {
|
|
const element = document.getElementById(id);
|
|
const icon = element.querySelector('i');
|
|
if (isValid) {
|
|
element.classList.add('valid');
|
|
icon.classList.remove('fa-times');
|
|
icon.classList.add('fa-check');
|
|
} else {
|
|
element.classList.remove('valid');
|
|
icon.classList.remove('fa-check');
|
|
icon.classList.add('fa-times');
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|