115 lines
6.1 KiB
PHP
115 lines
6.1 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Buat Password Baru | 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">
|
|
|
|
<div class="text-center mb-8">
|
|
<a href="{{ route('home') }}" class="font-heading font-bold text-2xl text-white hover:opacity-80 transition whitespace-nowrap inline-block"><i class="bi bi-droplet-half text-cyan-400 text-3xl align-middle"></i><span class="align-middle">FiFresh</span><span class="text-accent align-middle">Checker</span></a>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-3xl shadow-2xl px-8 py-10">
|
|
<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-1">Buat Password Baru</h2>
|
|
<p class="text-gray-500 text-sm text-center mb-6">
|
|
Untuk akun <strong class="text-primary">{{ session('reset_email') }}</strong>
|
|
</p>
|
|
|
|
<form method="POST" action="{{ route('password.direct.store') }}" class="space-y-5">
|
|
@csrf
|
|
|
|
{{-- 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-12 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="Minimal 8 karakter" required>
|
|
<button type="button" onclick="togglePassword('password', 'icon-pass-new')"
|
|
class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-primary transition-colors">
|
|
<i id="icon-pass-new" class="bi bi-eye text-lg"></i>
|
|
</button>
|
|
</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-12 py-3 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition"
|
|
placeholder="Ulangi password baru" required>
|
|
<button type="button" onclick="togglePassword('password_confirmation', 'icon-pass-confirm')"
|
|
class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-primary transition-colors">
|
|
<i id="icon-pass-confirm" class="bi bi-eye text-lg"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
<div class="text-center pt-1">
|
|
<a href="{{ route('password.request') }}" 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
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<p class="text-center text-white/30 text-xs mt-6">© 2026 FiFreshChecker. Tugas Akhir D3 Manajemen Informatika.</p>
|
|
</div>
|
|
|
|
<script>
|
|
function togglePassword(inputId, iconId) {
|
|
const input = document.getElementById(inputId);
|
|
const icon = document.getElementById(iconId);
|
|
if (input.type === 'password') {
|
|
input.type = 'text';
|
|
icon.classList.replace('bi-eye', 'bi-eye-slash');
|
|
} else {
|
|
input.type = 'password';
|
|
icon.classList.replace('bi-eye-slash', 'bi-eye');
|
|
}
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html> |