169 lines
7.4 KiB
PHP
169 lines
7.4 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 email Anda dan 6 digit kode yang diberikan Admin via WhatsApp.</p>
|
|
</div>
|
|
|
|
<form id="formVerifyOtp" onsubmit="verifikasiOTP(event)">
|
|
<div class="mb-3">
|
|
<label class="form-label fw-bold">Email Anda</label>
|
|
<input class="form-control" type="email" id="inputEmail"
|
|
placeholder="email@contoh.com" required autocomplete="email">
|
|
</div>
|
|
<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)">
|
|
{{-- Hidden email passed from OTP step --}}
|
|
<input type="hidden" id="verifiedEmail">
|
|
|
|
{{-- 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>
|
|
function lihatPassword(targetId, btn) {
|
|
const input = document.getElementById(targetId);
|
|
const icon = btn.querySelector('i');
|
|
if (input.type === 'password') {
|
|
input.type = 'text';
|
|
icon.classList.replace('bi-eye-slash-fill', 'bi-eye-fill');
|
|
} else {
|
|
input.type = 'password';
|
|
icon.classList.replace('bi-eye-fill', 'bi-eye-slash-fill');
|
|
}
|
|
}
|
|
|
|
// Fungsi Verifikasi OTP (real backend call)
|
|
function verifikasiOTP(e) {
|
|
e.preventDefault();
|
|
const email = document.getElementById('inputEmail').value;
|
|
const otp = document.getElementById('inputOtp').value;
|
|
|
|
Swal.fire({ title: 'Memverifikasi...', didOpen: () => Swal.showLoading(), allowOutsideClick: false });
|
|
|
|
fetch('{{ route("reset.verify-otp") }}', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
|
},
|
|
body: JSON.stringify({ email, otp })
|
|
})
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
if (data.status === 'success') {
|
|
// Pass verified email to the password step
|
|
document.getElementById('verifiedEmail').value = data.email;
|
|
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' });
|
|
} else {
|
|
Swal.fire({ icon: 'error', title: 'Gagal', text: data.message || 'Kode OTP salah.' });
|
|
}
|
|
})
|
|
.catch(() => {
|
|
Swal.fire({ icon: 'error', title: 'Error', text: 'Terjadi kesalahan. Silakan coba lagi.' });
|
|
});
|
|
}
|
|
|
|
// Fungsi Simpan Password (real backend call)
|
|
function simpanPassword(e) {
|
|
e.preventDefault();
|
|
const email = document.getElementById('verifiedEmail').value;
|
|
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...', didOpen: () => Swal.showLoading(), allowOutsideClick: false });
|
|
|
|
fetch('{{ route("reset.update-password") }}', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
|
},
|
|
body: JSON.stringify({ email, password: pass, password_confirmation: conf })
|
|
})
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
if (data.status === 'success') {
|
|
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'; });
|
|
} else {
|
|
Swal.fire({ icon: 'error', title: 'Gagal', text: data.message || 'Gagal menyimpan password.' });
|
|
}
|
|
})
|
|
.catch(() => {
|
|
Swal.fire({ icon: 'error', title: 'Error', text: 'Terjadi kesalahan. Silakan coba lagi.' });
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.letter-spacing-2 {
|
|
letter-spacing: 0.5em;
|
|
font-weight: bold;
|
|
color: #0d6efd;
|
|
}
|
|
</style>
|
|
</x-guest-layout> |