253 lines
5.1 KiB
PHP
253 lines
5.1 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Verifikasi OTP</title>
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
*{
|
|
margin:0;
|
|
padding:0;
|
|
box-sizing:border-box;
|
|
font-family:'Poppins',sans-serif;
|
|
}
|
|
|
|
body{
|
|
height:100vh;
|
|
display:flex;
|
|
justify-content:center;
|
|
align-items:center;
|
|
background:#f5f5f5;
|
|
}
|
|
|
|
.card{
|
|
width:420px;
|
|
background:white;
|
|
padding:40px;
|
|
border-radius:20px;
|
|
box-shadow:0 10px 30px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
h2{
|
|
text-align:center;
|
|
color:#b30000;
|
|
margin-bottom:10px;
|
|
}
|
|
|
|
p{
|
|
text-align:center;
|
|
font-size:14px;
|
|
color:#666;
|
|
margin-bottom:25px;
|
|
}
|
|
|
|
.otp-container{
|
|
display:flex;
|
|
justify-content:space-between;
|
|
margin-bottom:25px;
|
|
}
|
|
|
|
.otp-container input{
|
|
width:55px;
|
|
height:55px;
|
|
text-align:center;
|
|
font-size:22px;
|
|
border-radius:12px;
|
|
border:1px solid #ddd;
|
|
}
|
|
|
|
.otp-container input:focus{
|
|
border-color:#b30000;
|
|
outline:none;
|
|
}
|
|
|
|
input[type=password]{
|
|
width:100%;
|
|
padding:14px;
|
|
border-radius:14px;
|
|
border:1px solid #ddd;
|
|
margin-bottom:15px;
|
|
}
|
|
|
|
button{
|
|
width:100%;
|
|
padding:14px;
|
|
border:none;
|
|
border-radius:14px;
|
|
background:#b30000;
|
|
color:white;
|
|
font-weight:600;
|
|
cursor:pointer;
|
|
}
|
|
|
|
.error{
|
|
color:red;
|
|
font-size:13px;
|
|
margin-bottom:15px;
|
|
text-align:center;
|
|
}
|
|
|
|
.success{
|
|
color:green;
|
|
font-size:13px;
|
|
margin-bottom:15px;
|
|
text-align:center;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="card">
|
|
|
|
<h2>Verifikasi OTP</h2>
|
|
|
|
<p>
|
|
Masukkan kode OTP yang dikirim ke email Anda
|
|
</p>
|
|
|
|
@if(session('forgot_error'))
|
|
<div class="error">
|
|
{{ session('forgot_error') }}
|
|
</div>
|
|
@endif
|
|
@if ($errors->any())
|
|
|
|
<div class="error">
|
|
|
|
@foreach ($errors->all() as $error)
|
|
|
|
<div>{{ $error }}</div>
|
|
|
|
@endforeach
|
|
|
|
</div>
|
|
|
|
@endif
|
|
|
|
@if(session('success'))
|
|
<div class="success">
|
|
{{ session('success') }}
|
|
</div>
|
|
@endif
|
|
|
|
<form method="POST" action="/verify-otp">
|
|
|
|
@csrf
|
|
|
|
<input type="hidden" name="id_petugas" value="{{ session('reset_id_petugas') }}">
|
|
<input type="hidden" name="email" value="{{ session('reset_email') }}">
|
|
|
|
<div class="otp-container">
|
|
<input type="text" maxlength="1" class="otp-input">
|
|
<input type="text" maxlength="1" class="otp-input">
|
|
<input type="text" maxlength="1" class="otp-input">
|
|
<input type="text" maxlength="1" class="otp-input">
|
|
<input type="text" maxlength="1" class="otp-input">
|
|
<input type="text" maxlength="1" class="otp-input">
|
|
</div>
|
|
|
|
<input type="hidden" name="otp" id="otp" required>
|
|
|
|
<input type="password" name="password" placeholder="Password Baru" required>
|
|
|
|
<input type="password" name="password_confirmation" placeholder="Konfirmasi Password Baru" required>
|
|
|
|
<button type="submit">
|
|
Verifikasi OTP
|
|
</button>
|
|
|
|
</form>
|
|
|
|
</div>
|
|
<script>
|
|
|
|
const inputs = document.querySelectorAll('.otp-input');
|
|
const otpField = document.getElementById('otp');
|
|
|
|
inputs.forEach((input, index) => {
|
|
|
|
input.addEventListener('input', () => {
|
|
|
|
// Hanya angka
|
|
input.value = input.value.replace(/[^0-9]/g, '');
|
|
|
|
// Fokus otomatis
|
|
if(input.value.length === 1 && index < inputs.length - 1){
|
|
|
|
inputs[index + 1].focus();
|
|
}
|
|
|
|
gabungkanOtp();
|
|
});
|
|
|
|
input.addEventListener('keydown', (e) => {
|
|
|
|
if(e.key === 'Backspace' &&
|
|
input.value === '' &&
|
|
index > 0){
|
|
|
|
inputs[index - 1].focus();
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
function gabungkanOtp(){
|
|
|
|
let otp = '';
|
|
|
|
inputs.forEach(input => {
|
|
|
|
otp += input.value;
|
|
|
|
});
|
|
|
|
otpField.value = otp;
|
|
}
|
|
|
|
// VALIDASI FORM
|
|
document.querySelector('form').addEventListener('submit', function(e){
|
|
|
|
if(otpField.value.length < 6){
|
|
|
|
e.preventDefault();
|
|
|
|
alert('Masukkan 6 digit kode OTP.');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
function gabungkanOtp(){
|
|
|
|
let otp = '';
|
|
|
|
inputs.forEach(input => {
|
|
|
|
otp += input.value;
|
|
|
|
});
|
|
|
|
otpField.value = otp;
|
|
}
|
|
|
|
// VALIDASI FORM
|
|
document.querySelector('form').addEventListener('submit', function(e){
|
|
|
|
if(otpField.value.length < 6){
|
|
|
|
e.preventDefault();
|
|
|
|
alert('Masukkan 6 digit kode OTP.');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html> |