79 lines
3.0 KiB
PHP
79 lines
3.0 KiB
PHP
<x-layout title="Password Reset">
|
|
<section class="bg-linear-135 h-screen from-[#EFF6FF] to-[#FCF3F8] flex flex-col justify-center items-center wrapper">
|
|
<div class="absolute md:top-20 top-10 left-4 md:left-10">
|
|
<a href="{{route('password.reset.show')}}" class="flex hover:underline">
|
|
<x-heroicon-o-arrow-left class="w-4 mr-2"/>
|
|
Back to Reset password
|
|
</a>
|
|
</div>
|
|
<x-ui.card class="sm:w-96 w-full">
|
|
<div class="flex flex-col items-center space-y-5">
|
|
<x-logo class="w-fit"/>
|
|
<h1 class="font-bold text-2xl">Verify OTP</h1>
|
|
</div>
|
|
|
|
@session('error')
|
|
<x-ui.alert variant="error">
|
|
{{$value}}
|
|
</x-ui.alert>
|
|
@endsession
|
|
|
|
@session('success')
|
|
<x-ui.alert variant="success">
|
|
{{$value}}
|
|
</x-ui.alert>
|
|
@endsession
|
|
|
|
<form action="{{route('password.reset.verify')}}" method="post" class="flex flex-col space-y-5">
|
|
@csrf
|
|
<x-ui.input label="OTP" description="Type OTP that send in your email or vis SMS" name="otp" type="text"/>
|
|
<x-ui.button variant="neutral">Reset Password</x-ui.button>
|
|
</form>
|
|
|
|
<div id="otp-timer-container" class="mt-3 text-center text-sm text-gray-600">
|
|
<div id="timer-display">
|
|
Didn't receive code? Resend in
|
|
<span id="countdown-timer" class="font-mono font-bold text-blue-600">--:--</span>
|
|
</div>
|
|
|
|
<div id="resend-action" class="hidden">
|
|
<p class="mb-2">Didn't receive the email or SMS?</p>
|
|
<a href="{{ route('password.reset.resend') }}"
|
|
class="text-blue-600 hover:underline font-bold">
|
|
Resend OTP
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
</x-ui.card>
|
|
</section>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
let secondsLeft = {{ ($expiryMinutes ?? 0) * 60 }};
|
|
|
|
const timerDisplay = document.getElementById('timer-display');
|
|
const resendAction = document.getElementById('resend-action');
|
|
const countdownSpan = document.getElementById('countdown-timer');
|
|
|
|
function updateTimer() {
|
|
if (secondsLeft <= 0) {
|
|
timerDisplay.classList.add('hidden');
|
|
resendAction.classList.remove('hidden');
|
|
clearInterval(interval);
|
|
return;
|
|
}
|
|
|
|
const minutes = Math.floor(secondsLeft / 60);
|
|
const seconds = secondsLeft % 60;
|
|
|
|
countdownSpan.textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
|
|
secondsLeft--;
|
|
}
|
|
|
|
updateTimer();
|
|
const interval = setInterval(updateTimer, 950);
|
|
});
|
|
</script>
|
|
</x-layout>
|