195 lines
6.7 KiB
PHP
195 lines
6.7 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<title>Reset Password - SIDAKDesa</title>
|
|
<meta name="description"
|
|
content="Halaman reset password SIDAKDesa untuk mengatur ulang kata sandi akun secara aman dan mudah.">
|
|
<meta name="keywords" content="reset password SIDAKDesa, lupa password, atur ulang kata sandi, SIDAKDesa, Desa Pelem">
|
|
<meta name="author" content="Desa Pelem">
|
|
<meta name="robots" content="noindex, nofollow">
|
|
<meta name="theme-color" content="#ffffff">
|
|
|
|
<link rel="canonical" href="{{ url()->current() }}">
|
|
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:title" content="Reset Password - SIDAKDesa">
|
|
<meta property="og:description"
|
|
content="Atur ulang password akun SIDAKDesa dengan aman untuk kembali mengakses layanan digital Desa Pelem.">
|
|
<meta property="og:url" content="{{ url()->current() }}">
|
|
<meta property="og:image" content="{{ asset('assets/images/njk-logo.png') }}">
|
|
<meta property="og:site_name" content="SIDAKDesa">
|
|
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:title" content="Reset Password - SIDAKDesa">
|
|
<meta name="twitter:description"
|
|
content="Atur ulang password akun SIDAKDesa dengan aman untuk kembali mengakses layanan digital Desa Pelem.">
|
|
<meta name="twitter:image" content="{{ asset('assets/images/njk-logo.png') }}">
|
|
|
|
<link rel="icon" type="image/png" href="{{ asset('assets/images/njk-logo.png') }}">
|
|
<link rel="shortcut icon" href="{{ asset('assets/images/njk-logo.png') }}">
|
|
<link rel="apple-touch-icon" href="{{ asset('assets/images/njk-logo.png') }}">
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
|
|
|
<style>
|
|
body {
|
|
background: #ffffff;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
.login-wrapper {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
}
|
|
|
|
.logo-col {
|
|
background: #ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.logo-card {
|
|
background: #f4f6f8;
|
|
border-radius: 20px;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
|
|
padding: 2rem;
|
|
text-align: center;
|
|
max-width: 480px;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.logo-card img {
|
|
display: block max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.brand-img {
|
|
width: clamp(220px, 70%, 360px);
|
|
}
|
|
|
|
.illu-img {
|
|
width: clamp(280px, 85%, 440px);
|
|
}
|
|
|
|
@media (min-width:1200px) {
|
|
.logo-col {
|
|
padding: 3rem;
|
|
}
|
|
|
|
.logo-card {
|
|
max-width: 520px;
|
|
}
|
|
}
|
|
|
|
@media (max-width:991.98px) {
|
|
.logo-col {
|
|
padding: 1.25rem;
|
|
}
|
|
|
|
.logo-card {
|
|
margin-bottom: 1rem;
|
|
}
|
|
}
|
|
|
|
.form-col {
|
|
background: #ffffff;
|
|
padding: 3rem 2rem;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.btn-teal {
|
|
background-color: #168a85;
|
|
border: none;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-teal:hover {
|
|
background-color: #11716c;
|
|
color: #fff;
|
|
}
|
|
|
|
.text-forgot-password {
|
|
color: #168a85;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="login-wrapper">
|
|
<div class="row g-0 w-100" style="max-width: 1100px; background: transparent;">
|
|
{{-- Kolom kiri: card logo & ilustrasi --}}
|
|
<div class="col-lg-6 logo-col">
|
|
<div class="logo-card">
|
|
<img src="{{ asset('assets/images/sidak-desa.jpg') }}" alt="Logo SIDAKDesa"
|
|
class="img-fluid mb-4 brand-img">
|
|
<img src="{{ asset('assets/images/icon_lupa_sandi.png') }}" alt="Ilustrasi Lupa Sandi"
|
|
class="img-fluid illu-img">
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Kolom kanan: form reset password --}}
|
|
<div class="col-lg-6 form-col">
|
|
<div class="w-100" style="max-width: 500px;">
|
|
{{-- <a href="{{ route('login') }}" class="btn btn-light mb-4"
|
|
style="border-radius:8px; border:1px solid #ddd;">
|
|
← Halaman Login
|
|
</a> --}}
|
|
<h3 class="fw-bold mb-2">Reset Kata Sandi</h3>
|
|
<p class="text-muted mb-4">Silakan masukkan kata sandi baru Anda.</p>
|
|
|
|
{{-- Tampilkan error validasi --}}
|
|
@if ($errors->any())
|
|
<div class="alert alert-danger mt-4">
|
|
<ul class="mb-0">
|
|
@foreach ($errors->all() as $error)
|
|
<li>{{ $error }}</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
@endif
|
|
|
|
<form action="{{ route('password.update') }}" method="POST">
|
|
@csrf
|
|
|
|
{{-- Token dan email --}}
|
|
<input type="hidden" name="token" value="{{ $token }}">
|
|
<input type="hidden" name="email" value="{{ old('email', $email) }}">
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Kata Sandi Baru</label>
|
|
<input type="password" name="password" class="form-control form-control-lg"
|
|
placeholder="Masukkan Kata Sandi Baru" required autofocus>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label class="form-label">Konfirmasi Kata Sandi</label>
|
|
<input type="password" name="password_confirmation" class="form-control form-control-lg"
|
|
placeholder="Ulangi Kata Sandi Baru" required>
|
|
</div>
|
|
|
|
<div class="d-grid gap-3">
|
|
<button type="submit" class="btn btn-teal btn-lg">Reset Password</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|