MIF_E31230356/resources/views/auth/login-guru.blade.php

92 lines
2.4 KiB
PHP

@extends('layouts.auth')
@section('title', 'Login Guru')
@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 GURU</h1>
@if ($errors->any())
<div id="toast-error" class="toast-error">
{{ $errors->first() }}
</div>
@endif
<form method="POST" action="{{ route('guru.login.submit') }}">
@csrf
<div class="form-card">
{{-- NIP --}}
<div class="input-group">
<img src="{{ asset('icons/username.svg') }}" class="input-icon">
<input type="text" name="nip"
class="form-input"
placeholder="NIP"
value="{{ old('nip') }}"
required>
</div>
{{-- Password --}}
<div class="input-group password-wrapper">
<img src="{{ asset('icons/password.svg') }}" class="input-icon">
<input type="password"
name="password"
class="form-input password-input"
placeholder="Password"
required>
<button type="button" class="toggle-password">
<img src="{{ asset('icons/show.svg') }}" class="eye-icon">
</button>
</div>
{{-- Remember --}}
<div class="remember-wrapper">
<label class="remember-label">
<input type="checkbox" name="remember">
<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>
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') }}";
});
const toast = document.getElementById('toast-error');
if (toast) {
setTimeout(() => toast.remove(), 4000);
}
});
</script>
@endsection