130 lines
6.0 KiB
PHP
130 lines
6.0 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('styles')
|
|
<style>
|
|
.otp-input:focus {
|
|
box-shadow: 0 0 0 4px rgba(0, 105, 72, 0.1);
|
|
}
|
|
.glow-button {
|
|
box-shadow: 0 4px 14px 0 rgba(0, 105, 72, 0.25);
|
|
}
|
|
</style>
|
|
@endsection
|
|
|
|
@section('header-back')
|
|
<a href="{{ route('verification.index') }}" class="hover:opacity-80 transition-opacity active:scale-95 transition-transform flex items-center justify-center p-2 rounded-full">
|
|
<span class="material-symbols-outlined text-primary" data-icon="arrow_back">arrow_back</span>
|
|
</a>
|
|
@endsection
|
|
|
|
@section('content')
|
|
<main class="w-full max-w-md px-container-padding flex-1 flex flex-col mt-16 pb-xl">
|
|
<!-- Progress Indicator -->
|
|
<div class="mt-base flex gap-xs justify-center">
|
|
<div class="h-1.5 w-12 rounded-full bg-primary"></div>
|
|
<div class="h-1.5 w-12 rounded-full bg-primary"></div>
|
|
<div class="h-1.5 w-12 rounded-full bg-outline-variant"></div>
|
|
</div>
|
|
|
|
<!-- Hero Content -->
|
|
<div class="mt-2xl text-center">
|
|
<div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-secondary-container mb-lg">
|
|
<span class="material-symbols-outlined text-primary text-4xl" data-icon="app_registration">app_registration</span>
|
|
</div>
|
|
<h2 class="font-headline-xl text-headline-xl text-on-surface mb-sm">Belgiňizi tassyklaň</h2>
|
|
<p class="font-body-md text-body-md text-on-surface-variant max-w-[280px] mx-auto">
|
|
Şu belgä iberilen 4 sanly kody giriziň: <span class="font-semibold text-on-surface">+933 {{ $phone }}</span>
|
|
</p>
|
|
</div>
|
|
|
|
@if ($errors->any())
|
|
<div class="text-error text-center mt-md">
|
|
{{ $errors->first() }}
|
|
</div>
|
|
@endif
|
|
|
|
@if (session('status'))
|
|
<div class="text-primary text-center mt-md">
|
|
{{ session('status') }}
|
|
</div>
|
|
@endif
|
|
|
|
<form action="{{ route('verification.verify') }}" method="POST" id="otp-form">
|
|
@csrf
|
|
<input type="hidden" name="phone" value="{{ $phone }}">
|
|
<input type="hidden" name="otp" id="otp-hidden">
|
|
|
|
<!-- OTP Inputs -->
|
|
<div class="mt-2xl flex justify-center gap-md" id="otp-container">
|
|
<input autocomplete="one-time-code" class="otp-input w-16 h-20 text-center font-otp-digit text-otp-digit rounded-DEFAULT border-outline-variant bg-surface-container-lowest focus:border-primary focus:ring-0 transition-all" inputmode="numeric" maxlength="1" type="text"/>
|
|
<input class="otp-input w-16 h-20 text-center font-otp-digit text-otp-digit rounded-DEFAULT border-outline-variant bg-surface-container-lowest focus:border-primary focus:ring-0 transition-all" inputmode="numeric" maxlength="1" type="text"/>
|
|
<input class="otp-input w-16 h-20 text-center font-otp-digit text-otp-digit rounded-DEFAULT border-outline-variant bg-surface-container-lowest focus:border-primary focus:ring-0 transition-all" inputmode="numeric" maxlength="1" type="text"/>
|
|
<input class="otp-input w-16 h-20 text-center font-otp-digit text-otp-digit rounded-DEFAULT border-outline-variant bg-surface-container-lowest focus:border-primary focus:ring-0 transition-all" inputmode="numeric" maxlength="1" type="text"/>
|
|
</div>
|
|
|
|
<!-- Actions -->
|
|
<div class="mt-2xl space-y-md">
|
|
<button type="button" id="verify-btn" class="glow-button w-full h-14 bg-primary text-on-primary font-label-md text-label-md rounded-full hover:opacity-90 active:scale-[0.98] transition-all">
|
|
Tassykla
|
|
</button>
|
|
</div>
|
|
</form>
|
|
<div class="text-center mt-md">
|
|
<form action="{{ route('verification.resend') }}" method="POST" class="inline">
|
|
@csrf
|
|
<button type="submit" class="font-label-md text-label-md text-primary hover:underline transition-all">
|
|
Kody täzeden iber
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Info Card -->
|
|
<div class="mt-auto mb-xl p-md rounded-DEFAULT border border-outline-variant bg-surface-container-low">
|
|
<div class="flex gap-sm">
|
|
<span class="material-symbols-outlined text-on-surface-variant" data-icon="info">info</span>
|
|
<p class="font-body-sm text-body-sm text-on-surface-variant">
|
|
Muny hasabyňyzyň howpsuzlygyny üpjün etmek üçin ulanýarys. Belgiňiz başgalar bilen paýlaşylmaz.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
@endsection
|
|
|
|
@section('scripts')
|
|
<script>
|
|
const inputs = document.querySelectorAll('.otp-input');
|
|
const hiddenOtp = document.getElementById('otp-hidden');
|
|
const form = document.getElementById('otp-form');
|
|
const verifyBtn = document.getElementById('verify-btn');
|
|
|
|
inputs.forEach((input, index) => {
|
|
input.addEventListener('input', (e) => {
|
|
if (e.target.value.length === 1 && index < inputs.length - 1) {
|
|
inputs[index + 1].focus();
|
|
}
|
|
});
|
|
|
|
input.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Backspace' && !e.target.value && index > 0) {
|
|
inputs[index - 1].focus();
|
|
}
|
|
});
|
|
});
|
|
|
|
verifyBtn.addEventListener('click', () => {
|
|
let code = '';
|
|
inputs.forEach(input => code += input.value);
|
|
if (code.length === 4) {
|
|
hiddenOtp.value = code;
|
|
|
|
verifyBtn.innerHTML = '<span class="flex items-center justify-center gap-sm"><svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> Tassyklanýar...</span>';
|
|
|
|
setTimeout(() => {
|
|
form.submit();
|
|
}, 500); // small delay to show animation
|
|
} else {
|
|
alert('Haýyş, 4 sanly kody giriziň.');
|
|
}
|
|
});
|
|
</script>
|
|
@endsection |