106 lines
5.1 KiB
PHP
106 lines
5.1 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Reset Password - RentalMobil</title>
|
|
@vite('resources/css/app.css')
|
|
<link href="https://fonts.googleapis.com/css2?family=Ancizar+Serif&family=Lora&display=swap" rel="stylesheet" />
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
.font-lora {
|
|
font-family: 'Lora', serif;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="bg-gradient-to-b from-[#e0e7ff] to-[#1e3a8a] min-h-screen flex items-center justify-center p-6 font-lora text-[#1e3a8a]">
|
|
|
|
<div class="max-w-md w-full bg-white rounded-lg shadow-lg border border-[#e0e7ff] p-8">
|
|
<h2 class="text-3xl font-bold mb-6 text-center">Reset Password</h2>
|
|
|
|
<form method="POST" action="{{ route('password.store') }}">
|
|
@csrf
|
|
|
|
<input type="hidden" name="token" value="{{ $request->route('token') }}">
|
|
|
|
<!-- Email Address -->
|
|
<div class="mb-4">
|
|
<label for="email" class="block text-sm font-semibold">Email</label>
|
|
<input id="email" type="email" name="email" required autofocus autocomplete="username"
|
|
value="{{ old('email', $request->email) }}"
|
|
class="mt-1 block w-full rounded-md bg-gray-100 border border-gray-300 shadow-sm focus:ring-[#1e3a8a] focus:border-[#1e3a8a]" />
|
|
@error('email')
|
|
<div class="text-sm text-red-600 mt-1">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
|
|
<!-- Password -->
|
|
<div class="mb-4 relative">
|
|
<label for="password" class="block text-sm font-semibold mb-2">Password</label>
|
|
<input id="password" type="password" name="password" required autocomplete="new-password"
|
|
class="pl-10 pr-10 py-3 block w-full rounded-lg bg-gray-100 border border-gray-300 shadow-sm
|
|
focus:ring-2 focus:ring-[#1e3a8a] focus:border-[#1e3a8a] transition duration-200" />
|
|
<button type="button" onclick="togglePassword('password', 'eye-open', 'eye-closed')"
|
|
class="absolute right-3 top-10 text-gray-500 hover:text-[#1e3a8a] focus:outline-none">
|
|
<svg id="eye-open" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
|
|
viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M2.458 12C3.732 7.943 7.522 5 12 5s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S3.732 16.057 2.458 12z" />
|
|
</svg>
|
|
<svg id="eye-closed" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 hidden" fill="none"
|
|
viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.542-7a9.967
|
|
9.967 0 012.29-4.043m3.405-2.222A9.953 9.953 0 0112 5c4.478 0
|
|
8.268 2.943 9.542 7a9.972 9.972 0 01-1.249 2.592M15 12a3 3
|
|
0 11-6 0 3 3 0 016 0zM3 3l18 18" />
|
|
</svg>
|
|
</button>
|
|
@error('password')
|
|
<p class="text-sm text-red-600 mt-1">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<!-- Confirm Password -->
|
|
<div class="mb-6">
|
|
<label for="password_confirmation" class="block text-sm font-semibold mb-2">Confirm Password</label>
|
|
<input id="password_confirmation" type="password" name="password_confirmation" required autocomplete="new-password"
|
|
class="pl-10 pr-10 py-3 block w-full rounded-lg bg-gray-100 border border-gray-300 shadow-sm
|
|
focus:ring-2 focus:ring-[#1e3a8a] focus:border-[#1e3a8a] transition duration-200" />
|
|
@error('password_confirmation')
|
|
<p class="text-sm text-red-600 mt-1">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<button type="submit"
|
|
class="w-full bg-[#1e3a8a] text-white font-semibold py-2 rounded-md shadow hover:bg-[#3344aa] transition">
|
|
{{ __('Reset Password') }}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
function togglePassword(inputId, eyeOpenId, eyeClosedId) {
|
|
const input = document.getElementById(inputId);
|
|
const eyeOpen = document.getElementById(eyeOpenId);
|
|
const eyeClosed = document.getElementById(eyeClosedId);
|
|
|
|
if (input.type === 'password') {
|
|
input.type = 'text';
|
|
eyeOpen.classList.add('hidden');
|
|
eyeClosed.classList.remove('hidden');
|
|
} else {
|
|
input.type = 'password';
|
|
eyeOpen.classList.remove('hidden');
|
|
eyeClosed.classList.add('hidden');
|
|
}
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|