135 lines
5.5 KiB
PHP
135 lines
5.5 KiB
PHP
<x-guest-layout>
|
|
{{-- VERIFIKASI OTP --}}
|
|
<div id="step-otp">
|
|
<div class="mb-4 text-center">
|
|
<h4 class="fw-bold text-dark">Verifikasi Kode OTP</h4>
|
|
<p class="text-muted small">Masukkan 6 digit kode yang diberikan Admin via WhatsApp.</p>
|
|
</div>
|
|
|
|
<form id="formVerifyOtp" onsubmit="verifikasiOTP(event)">
|
|
<div class="mb-4">
|
|
<label class="form-label fw-bold">Kode OTP</label>
|
|
<input class="form-control text-center fs-3 letter-spacing-2 py-2" type="text" id="inputOtp"
|
|
placeholder="000000" maxlength="6" required autofocus autocomplete="off">
|
|
</div>
|
|
|
|
<div class="d-grid">
|
|
<button type="submit" class="btn btn-primary py-2 fw-bold">
|
|
Verifikasi Kode
|
|
</button>
|
|
</div>
|
|
|
|
<div class="text-center mt-3">
|
|
<a href="/login" class="text-decoration-none small text-muted">
|
|
<i class="bi bi-arrow-left me-1"></i>Kembali ke Login
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
{{-- PASSWORD BARU --}}
|
|
<div id="step-password" class="d-none">
|
|
<div class="mb-4 text-center">
|
|
<h4 class="fw-bold text-dark">Buat Kata Sandi Baru</h4>
|
|
<p class="text-muted small">OTP Valid! Silakan buat kata sandi baru Anda.</p>
|
|
</div>
|
|
|
|
<form id="formResetPassword" onsubmit="simpanPassword(event)">
|
|
{{-- Password Utama --}}
|
|
<div class="mb-3">
|
|
<label class="form-label">Kata Sandi Baru</label>
|
|
<div class="input-group">
|
|
<input id="password" class="form-control" type="password" name="password" required placeholder="Minimal 8 karakter"/>
|
|
<button class="btn btn-outline-secondary" type="button" onclick="lihatPassword('password', this)">
|
|
<i class="bi bi-eye-slash-fill"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Konfirmasi Password --}}
|
|
<div class="mb-4">
|
|
<label class="form-label">Konfirmasi Kata Sandi</label>
|
|
<div class="input-group">
|
|
<input id="password_confirmation" class="form-control" type="password" name="password_confirmation" required placeholder="Ulangi kata sandi"/>
|
|
<button class="btn btn-outline-secondary" type="button" onclick="lihatPassword('password_confirmation', this)">
|
|
<i class="bi bi-eye-slash-fill"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-grid">
|
|
<button type="submit" class="btn btn-primary py-2 fw-bold">
|
|
Simpan Kata Sandi
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
<script>
|
|
// Fungsi Toggle Lihat Password
|
|
function lihatPassword(targetId, btn) {
|
|
const input = document.getElementById(targetId);
|
|
const icon = btn.querySelector('i');
|
|
|
|
if (input.type === 'password') {
|
|
input.type = 'text';
|
|
icon.classList.remove('bi-eye-slash-fill');
|
|
icon.classList.add('bi-eye-fill');
|
|
} else {
|
|
input.type = 'password';
|
|
icon.classList.remove('bi-eye-fill');
|
|
icon.classList.add('bi-eye-slash-fill');
|
|
}
|
|
}
|
|
|
|
// Fungsi Verifikasi OTP
|
|
function verifikasiOTP(e) {
|
|
e.preventDefault();
|
|
const inputOtp = document.getElementById('inputOtp').value;
|
|
|
|
if(inputOtp !== '678901') {
|
|
Swal.fire({ icon: 'error', title: 'Gagal', text: 'Kode OTP salah! Coba cek lagi WA Admin.' });
|
|
return;
|
|
}
|
|
|
|
Swal.fire({ title: 'Memverifikasi...', timer: 800, didOpen: () => Swal.showLoading() }).then(() => {
|
|
document.getElementById('step-otp').classList.add('d-none');
|
|
document.getElementById('step-password').classList.remove('d-none');
|
|
document.getElementById('password').focus();
|
|
|
|
const Toast = Swal.mixin({ toast: true, position: 'top-end', showConfirmButton: false, timer: 3000 });
|
|
Toast.fire({ icon: 'success', title: 'Kode OTP Valid' });
|
|
});
|
|
}
|
|
|
|
// Fungsi Simpan Password
|
|
function simpanPassword(e) {
|
|
e.preventDefault();
|
|
const pass = document.getElementById('password').value;
|
|
const conf = document.getElementById('password_confirmation').value;
|
|
|
|
if(pass.length < 8) {
|
|
Swal.fire({ icon: 'warning', text: 'Kata sandi minimal 8 karakter!' }); return;
|
|
}
|
|
if(pass !== conf) {
|
|
Swal.fire({ icon: 'warning', text: 'Konfirmasi kata sandi tidak cocok!' }); return;
|
|
}
|
|
|
|
Swal.fire({ title: 'Menyimpan...', timer: 1500, didOpen: () => Swal.showLoading() }).then(() => {
|
|
Swal.fire({
|
|
icon: 'success', title: 'Berhasil!', text: 'Kata sandi Anda telah diperbarui. Silakan login.',
|
|
confirmButtonText: 'Ke Halaman Login', allowOutsideClick: false
|
|
}).then(() => { window.location.href = "/login"; });
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.letter-spacing-2 {
|
|
letter-spacing: 0.5em;
|
|
font-weight: bold;
|
|
color: #0d6efd;
|
|
}
|
|
</style>
|
|
</x-guest-layout> |