138 lines
6.9 KiB
PHP
138 lines
6.9 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Reset Password | FiFreshChecker</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['Inter', 'sans-serif'],
|
|
heading: ['Poppins', 'sans-serif']
|
|
},
|
|
colors: {
|
|
primary: '#0A66C2',
|
|
'primary-dark': '#004182',
|
|
accent: '#00C4CC'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Poppins:wght@500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
.hero-gradient {
|
|
background: linear-gradient(135deg, #0B192C 0%, #1A365D 50%, #0A66C2 100%);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="font-sans antialiased hero-gradient min-h-screen flex items-center justify-center px-4 py-12">
|
|
|
|
<div class="w-full max-w-md">
|
|
|
|
{{-- Logo --}}
|
|
<div class="text-center mb-8">
|
|
<a href="{{ route('home') }}" class="inline-flex items-center gap-2 font-heading font-bold text-2xl text-white hover:opacity-80 transition">
|
|
<i class="bi bi-droplet-half text-cyan-400 text-3xl"></i>
|
|
FiFresh<span class="text-accent">Checker</span>
|
|
</a>
|
|
</div>
|
|
|
|
{{-- Card --}}
|
|
<div class="bg-white rounded-3xl shadow-2xl px-8 py-10">
|
|
|
|
{{-- Icon --}}
|
|
<div class="flex justify-center mb-6">
|
|
<div class="w-16 h-16 bg-primary/10 rounded-2xl flex items-center justify-center">
|
|
<i class="bi bi-shield-lock text-primary text-3xl"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="font-heading text-2xl font-bold text-gray-900 text-center mb-2">Buat Password Baru</h2>
|
|
<p class="text-gray-500 text-sm text-center mb-6 leading-relaxed">
|
|
Masukkan password baru kamu di bawah ini.
|
|
</p>
|
|
|
|
<form method="POST" action="{{ route('password.store') }}" class="space-y-5">
|
|
@csrf
|
|
<input type="hidden" name="token" value="{{ $request->route('token') }}">
|
|
|
|
{{-- Email --}}
|
|
<div>
|
|
<label for="email" class="block text-sm font-semibold text-gray-700 mb-1.5">Alamat Email</label>
|
|
<div class="relative">
|
|
<span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400">
|
|
<i class="bi bi-envelope"></i>
|
|
</span>
|
|
<input id="email" type="email" name="email"
|
|
value="{{ old('email', $request->email) }}"
|
|
class="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition @error('email') border-red-400 @enderror"
|
|
placeholder="contoh@email.com" required autofocus autocomplete="username">
|
|
</div>
|
|
@error('email')
|
|
<p class="mt-1.5 text-xs text-red-500 flex items-center gap-1">
|
|
<i class="bi bi-exclamation-circle"></i> {{ $message }}
|
|
</p>
|
|
@enderror
|
|
</div>
|
|
|
|
{{-- Password Baru --}}
|
|
<div>
|
|
<label for="password" class="block text-sm font-semibold text-gray-700 mb-1.5">Password Baru</label>
|
|
<div class="relative">
|
|
<span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400">
|
|
<i class="bi bi-lock"></i>
|
|
</span>
|
|
<input id="password" type="password" name="password"
|
|
class="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition @error('password') border-red-400 @enderror"
|
|
placeholder="••••••••" required autocomplete="new-password">
|
|
</div>
|
|
@error('password')
|
|
<p class="mt-1.5 text-xs text-red-500 flex items-center gap-1">
|
|
<i class="bi bi-exclamation-circle"></i> {{ $message }}
|
|
</p>
|
|
@enderror
|
|
</div>
|
|
|
|
{{-- Konfirmasi Password --}}
|
|
<div>
|
|
<label for="password_confirmation" class="block text-sm font-semibold text-gray-700 mb-1.5">Konfirmasi Password</label>
|
|
<div class="relative">
|
|
<span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400">
|
|
<i class="bi bi-lock-fill"></i>
|
|
</span>
|
|
<input id="password_confirmation" type="password" name="password_confirmation"
|
|
class="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition @error('password_confirmation') border-red-400 @enderror"
|
|
placeholder="••••••••" required autocomplete="new-password">
|
|
</div>
|
|
@error('password_confirmation')
|
|
<p class="mt-1.5 text-xs text-red-500 flex items-center gap-1">
|
|
<i class="bi bi-exclamation-circle"></i> {{ $message }}
|
|
</p>
|
|
@enderror
|
|
</div>
|
|
|
|
{{-- Submit --}}
|
|
<button type="submit"
|
|
class="w-full bg-primary hover:bg-primary-dark text-white font-bold py-3 rounded-xl transition-all hover:shadow-lg text-sm flex items-center justify-center gap-2">
|
|
<i class="bi bi-check-circle"></i> Simpan Password Baru
|
|
</button>
|
|
|
|
{{-- Back to login --}}
|
|
<div class="text-center pt-1">
|
|
<a href="{{ route('login') }}" class="text-sm text-gray-500 hover:text-primary transition-colors flex items-center justify-center gap-1.5">
|
|
<i class="bi bi-arrow-left text-xs"></i> Kembali ke halaman masuk
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<p class="text-center text-white/30 text-xs mt-6">© 2026 FiFreshChecker. Tugas Akhir D3 Manajemen Informatika.</p>
|
|
</div>
|
|
|
|
</body>
|
|
</html> |