146 lines
5.0 KiB
PHP
146 lines
5.0 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 - GriyaPadi.id</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;
|
|
}
|
|
|
|
.cursor-pointer {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.form-control:focus {
|
|
box-shadow: none;
|
|
border-color: #ced4da;
|
|
}
|
|
.input-group:focus-within {
|
|
box-shadow: 0 0 0 0.25rem rgba(129, 196, 8, 0.25);
|
|
border-radius: 0.375rem;
|
|
z-index: 3;
|
|
}
|
|
|
|
.input-group:focus-within .input-group-text,
|
|
.input-group:focus-within .form-control {
|
|
border-color: #81c408;
|
|
}
|
|
|
|
</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>GriyaPadi.id</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">Login</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> |