82 lines
2.7 KiB
PHP
82 lines
2.7 KiB
PHP
@extends('layouts.auth')
|
|
|
|
@section('title', 'Login Admin')
|
|
|
|
@section('content')
|
|
<link rel="stylesheet" href="{{ asset('css/login-admin.css') }}">
|
|
|
|
<section id="signin" class="signin-section">
|
|
<div class="signin-container">
|
|
<h1 class="signin-title">SIGN IN ADMIN</h1>
|
|
|
|
{{-- Toast Notifikasi Error --}}
|
|
@if ($errors->any())
|
|
<div id="toast-error" class="toast-error">
|
|
{{ $errors->first() }}
|
|
</div>
|
|
@endif
|
|
|
|
<form method="POST" action="{{ route('admin.login.submit') }}">
|
|
@csrf
|
|
<div class="form-card">
|
|
|
|
{{-- Username --}}
|
|
<div class="input-group">
|
|
<img src="{{ asset('icons/username.svg') }}" alt="Username icon" class="input-icon">
|
|
<input type="text" name="username" class="form-input" placeholder="Username" required
|
|
value="{{ old('username') }}">
|
|
</div>
|
|
|
|
{{-- Password --}}
|
|
<div class="input-group password-wrapper">
|
|
<img src="{{ asset('icons/password.svg') }}" alt="Password icon" class="input-icon">
|
|
<input type="password" name="password" class="form-input password-input" placeholder="Password" required>
|
|
|
|
{{-- Tombol show/hide pakai SVG --}}
|
|
<button type="button" class="toggle-password" aria-label="Toggle password visibility">
|
|
<img src="{{ asset('icons/show.svg') }}" alt="Show password" class="eye-icon">
|
|
</button>
|
|
</div>
|
|
|
|
{{-- Remember Me --}}
|
|
<div class="remember-wrapper">
|
|
<label class="remember-label">
|
|
<input type="checkbox" name="remember" {{ old('remember') ? 'checked' : '' }}>
|
|
<span>Remember me</span>
|
|
</label>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<button type="submit" class="submit-btn">SIGN IN</button>
|
|
</form>
|
|
|
|
<a href="{{ route('landing-page') }}" class="back-link">← Kembali ke Landing Page</a>
|
|
</div>
|
|
</section>
|
|
|
|
{{-- SCRIPT INTERAKTIF --}}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const toggleBtn = document.querySelector('.toggle-password');
|
|
const passwordInput = document.querySelector('.password-input');
|
|
const eyeIcon = toggleBtn.querySelector('img');
|
|
|
|
toggleBtn.addEventListener('click', () => {
|
|
const isVisible = passwordInput.type === 'text';
|
|
passwordInput.type = isVisible ? 'password' : 'text';
|
|
eyeIcon.src = isVisible
|
|
? "{{ asset('icons/show.svg') }}"
|
|
: "{{ asset('icons/hide.svg') }}";
|
|
eyeIcon.alt = isVisible ? "Show password" : "Hide password";
|
|
});
|
|
|
|
// Auto hide toast notification
|
|
const toast = document.getElementById('toast-error');
|
|
if (toast) {
|
|
setTimeout(() => toast.remove(), 4000);
|
|
}
|
|
});
|
|
</script>
|
|
@endsection
|