89 lines
4.2 KiB
PHP
89 lines
4.2 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Masuk - TaniDesa</title>
|
|
<link href="{{ asset('template/frontend/css/bootstrap.min.css') }}" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" />
|
|
|
|
<style>
|
|
body { background-color: #f0f7e6; height: 100vh; display: flex; align-items: center; justify-content: center; }
|
|
.card-auth { max-width: 400px; width: 100%; border: none; border-radius: 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.05); }
|
|
.text-tani { color: #81c408; }
|
|
.btn-tani { background-color: #81c408; border-color: #81c408; color: white; font-weight: bold; }
|
|
.btn-tani:hover { background-color: #6da705; color: white; }
|
|
.form-control:focus { border-color: #81c408; box-shadow: 0 0 0 0.25rem rgba(129, 196, 8, 0.25); }
|
|
.cursor-pointer { cursor: pointer; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="card card-auth bg-white p-4">
|
|
<div class="card-body">
|
|
<div class="text-center mb-4">
|
|
<a href="{{ url('/') }}" class="text-decoration-none">
|
|
<h2 class="fw-bold text-tani"><i class="fas fa-leaf me-2"></i>TaniDesa</h2>
|
|
</a>
|
|
<p class="text-muted small">Masuk untuk melanjutkan</p>
|
|
</div>
|
|
|
|
@if(session('success')) <div class="alert alert-success py-2 small">{{ session('success') }}</div> @endif
|
|
@if($errors->any()) <div class="alert alert-danger py-2 small">{{ $errors->first() }}</div> @endif
|
|
|
|
<form action="{{ route('login.proses') }}" method="POST">
|
|
@csrf
|
|
<div class="mb-3">
|
|
<label class="form-label text-muted small">Username</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text bg-white border-end-0 text-tani"><i class="fas fa-user"></i></span>
|
|
<input type="text" name="username" class="form-control border-start-0 ps-0" placeholder="Masukkan username" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label text-muted small">Password</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text bg-white border-end-0 text-tani"><i class="fas fa-lock"></i></span>
|
|
<input type="password" name="password" id="password" class="form-control border-start-0 border-end-0 ps-0" placeholder="Masukkan password" required>
|
|
{{-- Icon Mata --}}
|
|
<span class="input-group-text bg-white border-start-0 cursor-pointer" onclick="togglePassword('password', 'icon-pass')">
|
|
<i class="fas fa-eye text-muted" id="icon-pass"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-end mb-4">
|
|
<a href="{{ route('password.request') }}" class="small text-muted text-decoration-none">Lupa Password?</a>
|
|
</div>
|
|
|
|
<div class="d-grid gap-2">
|
|
<button type="submit" class="btn btn-tani rounded-pill py-2">MASUK</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="text-center mt-4">
|
|
<small class="text-muted">Belum punya akun? <a href="{{ route('register') }}" class="text-tani fw-bold text-decoration-none">Daftar</a></small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Script Show/Hide Password --}}
|
|
<script>
|
|
function togglePassword(inputId, iconId) {
|
|
const input = document.getElementById(inputId);
|
|
const icon = document.getElementById(iconId);
|
|
|
|
if (input.type === "password") {
|
|
input.type = "text";
|
|
icon.classList.remove("fa-eye");
|
|
icon.classList.add("fa-eye-slash");
|
|
} else {
|
|
input.type = "password";
|
|
icon.classList.remove("fa-eye-slash");
|
|
icon.classList.add("fa-eye");
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |