76 lines
3.0 KiB
PHP
76 lines
3.0 KiB
PHP
<x-guest-layout>
|
|
<x-auth-session-status class="mb-4" :status="session('status')" />
|
|
|
|
<form method="POST" action="{{ route('login') }}">
|
|
@csrf
|
|
|
|
<div class="text-center mb-4">
|
|
<h3 class="fw-bold text-primary">Login Siswa</h3>
|
|
<p class="text-muted">Masukan NISN dan kata sandi Anda.</p>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="nisn" class="form-label">Nomor Induk Siswa Nasional (NISN)</label>
|
|
<input id="nisn" class="form-control bg-body-tertiary @error('nisn') is-invalid @enderror"
|
|
type="text" name="nisn" value="{{ old('nisn') }}" required autofocus autocomplete="username" />
|
|
@error('nisn')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="password" class="form-label">Kata Sandi</label>
|
|
<div class="input-group">
|
|
<input id="password" class="form-control bg-body-tertiary @error('password') is-invalid @enderror"
|
|
type="password" name="password" required autocomplete="current-password" />
|
|
<span class="input-group-text bg-body-tertiary" id="togglePassword" style="cursor: pointer;">
|
|
<i class="bi bi-eye-slash-fill"></i>
|
|
</span>
|
|
@error('password')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-end align-items-center mb-3">
|
|
@if (Route::has('password.request'))
|
|
<a class="text-decoration-none small" href="{{ route('password.request') }}">
|
|
Lupa password?
|
|
</a>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="d-grid">
|
|
<button type="submit" class="btn btn-primary btn-lg">
|
|
Masuk
|
|
</button>
|
|
</div>
|
|
|
|
<p class="mt-4 text-center text-muted small">
|
|
Belum punya akun?
|
|
<a href="{{ route('register') }}" class="fw-semibold text-decoration-none">Daftar sekarang</a>
|
|
</p>
|
|
</form>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
const togglePassword = document.querySelector('#togglePassword');
|
|
const passwordInput = document.querySelector('#password');
|
|
const icon = togglePassword.querySelector('i');
|
|
|
|
togglePassword.addEventListener('click', function() {
|
|
const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
|
|
passwordInput.setAttribute('type', type);
|
|
|
|
if (type === 'password') {
|
|
icon.classList.remove('bi-eye-fill');
|
|
icon.classList.add('bi-eye-slash-fill');
|
|
} else {
|
|
icon.classList.remove('bi-eye-slash-fill');
|
|
icon.classList.add('bi-eye-fill');
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</x-guest-layout>
|