327 lines
10 KiB
PHP
327 lines
10 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{{ session('step') == 'otp' ? 'Verify OTP' : 'Forgot Password' }}</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background: white;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
}
|
|
|
|
.container {
|
|
background: #ffffff;
|
|
width: 100%;
|
|
max-width: 420px;
|
|
border-radius: 16px;
|
|
padding: 40px 36px;
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
.icon-wrap {
|
|
width: 64px;
|
|
height: 64px;
|
|
background: #943835e3;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto 20px;
|
|
}
|
|
|
|
.icon-wrap svg {
|
|
width: 30px;
|
|
height: 30px;
|
|
stroke: #eeff8f;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 22px;
|
|
color: #1f2937;
|
|
text-align: center;
|
|
margin-bottom: 8px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
p.subtitle {
|
|
text-align: center;
|
|
color: #6b7280;
|
|
font-size: 14px;
|
|
margin-bottom: 28px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.alert-success {
|
|
background: #ecfdf5;
|
|
border: 1px solid #a7f3d0;
|
|
color: #047857;
|
|
padding: 12px 14px;
|
|
border-radius: 10px;
|
|
font-size: 14px;
|
|
margin-bottom: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.alert-danger {
|
|
background: #fef2f2;
|
|
border: 1px solid #fecaca;
|
|
color: #dc2626;
|
|
padding: 12px 14px;
|
|
border-radius: 10px;
|
|
font-size: 14px;
|
|
margin-bottom: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #374151;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
input[type="email"] {
|
|
width: 100%;
|
|
padding: 12px 14px;
|
|
border: 1.5px solid #e5e7eb;
|
|
border-radius: 10px;
|
|
font-size: 14px;
|
|
color: #1f2937;
|
|
transition: all 0.2s ease;
|
|
outline: none;
|
|
}
|
|
|
|
input[type="email"]:focus {
|
|
border-color: #8b5cf6;
|
|
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
|
|
}
|
|
|
|
input[type="email"]::placeholder {
|
|
color: #9ca3af;
|
|
}
|
|
|
|
.text-danger {
|
|
color: #dc2626;
|
|
font-size: 12.5px;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.otp-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.otp-input {
|
|
width: 48px;
|
|
height: 52px;
|
|
text-align: center;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: #1f2937;
|
|
border: 1.5px solid #e5e7eb;
|
|
border-radius: 10px;
|
|
outline: none;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.otp-input:focus {
|
|
border-color: #943835e3;
|
|
box-shadow: 0 0 0 3px rgba(148, 56, 53, 0.15);
|
|
}
|
|
|
|
button[type="submit"] {
|
|
width: 100%;
|
|
padding: 13px;
|
|
background: #943835e3;
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 10px;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
|
}
|
|
|
|
button[type="submit"]:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 8px 20px rgba(148, 56, 53, 0.35);
|
|
}
|
|
|
|
button[type="submit"]:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.resend-box {
|
|
text-align: center;
|
|
margin-top: 22px;
|
|
font-size: 13.5px;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.resend-box button {
|
|
background: none;
|
|
border: none;
|
|
color: #231d77e3;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.back-link {
|
|
display: block;
|
|
text-align: center;
|
|
margin-top: 22px;
|
|
font-size: 13.5px;
|
|
color: #6b7280;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.back-link:hover {
|
|
color: #231d77e3;
|
|
text-decoration: underline;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
|
|
{{-- SUCCESS & ERROR ALERTS --}}
|
|
@if (session('status'))
|
|
<div class="alert-success">{{ session('status') }}</div>
|
|
@endif
|
|
|
|
@if ($errors->has('otp'))
|
|
<div class="alert-danger">{{ $errors->first('otp') }}</div>
|
|
@endif
|
|
|
|
{{-- SECTION 2: VERIFY OTP (Shows when session step is 'otp') --}}
|
|
@if (session('step') === 'otp')
|
|
<div class="icon-wrap">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751A11.959 11.959 0 0112 2.714z" />
|
|
</svg>
|
|
</div>
|
|
|
|
<h1>Enter OTP Code</h1>
|
|
<p class="subtitle">We've sent a 6-digit verification code to <br><strong>{{ session('email', old('email')) }}</strong></p>
|
|
|
|
<form method="POST" action="{{ route('password.verify.otp') }}" id="otp-form">
|
|
@csrf
|
|
<input type="hidden" name="email" value="{{ session('email', old('email')) }}">
|
|
<input type="hidden" name="otp" id="full-otp">
|
|
|
|
<div class="otp-container">
|
|
<input type="text" maxlength="1" class="otp-input" autofocus autocomplete="off">
|
|
<input type="text" maxlength="1" class="otp-input" autocomplete="off">
|
|
<input type="text" maxlength="1" class="otp-input" autocomplete="off">
|
|
<input type="text" maxlength="1" class="otp-input" autocomplete="off">
|
|
<input type="text" maxlength="1" class="otp-input" autocomplete="off">
|
|
<input type="text" maxlength="1" class="otp-input" autocomplete="off">
|
|
</div>
|
|
|
|
<button type="submit">Verify & Continue</button>
|
|
</form>
|
|
|
|
<div class="resend-box">
|
|
Didn't receive the code?
|
|
<form method="POST" action="{{ route('password.email') }}" style="display: inline;">
|
|
@csrf
|
|
<input type="hidden" name="email" value="{{ session('email', old('email')) }}">
|
|
<button type="submit">Resend OTP</button>
|
|
</form>
|
|
</div>
|
|
|
|
{{-- SECTION 1: FORGOT PASSWORD (Default view) --}}
|
|
@else
|
|
<div class="icon-wrap">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z" />
|
|
</svg>
|
|
</div>
|
|
|
|
<h1>Forgot Password?</h1>
|
|
<p class="subtitle">No worries! Enter your email and we'll send you a link to reset your password.</p>
|
|
|
|
<form method="POST" action="{{ route('password.email') }}">
|
|
@csrf
|
|
<div class="form-group">
|
|
<label for="email">Email Address</label>
|
|
<input
|
|
id="email"
|
|
type="email"
|
|
name="email"
|
|
value="{{ old('email') }}"
|
|
placeholder="you@example.com"
|
|
required
|
|
autofocus
|
|
>
|
|
@error('email')
|
|
<div class="text-danger">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
|
|
<button type="submit">Send OTP</button>
|
|
</form>
|
|
@endif
|
|
|
|
<a href="/signin" class="back-link">← Back to Login</a>
|
|
</div>
|
|
|
|
@if (session('step') === 'otp')
|
|
<script>
|
|
const inputs = document.querySelectorAll('.otp-input');
|
|
const form = document.getElementById('otp-form');
|
|
const fullOtpInput = document.getElementById('full-otp');
|
|
|
|
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();
|
|
}
|
|
});
|
|
|
|
input.addEventListener('paste', (e) => {
|
|
const pasteData = e.clipboardData.getData('text').trim();
|
|
if (pasteData.length === inputs.length) {
|
|
pasteData.split('').forEach((char, i) => {
|
|
inputs[i].value = char;
|
|
});
|
|
inputs[inputs.length - 1].focus();
|
|
}
|
|
});
|
|
});
|
|
|
|
form.addEventListener('submit', (e) => {
|
|
let otpValue = '';
|
|
inputs.forEach(input => otpValue += input.value);
|
|
fullOtpInput.value = otpValue;
|
|
});
|
|
</script>
|
|
@endif
|
|
</body>
|
|
</html> |