115 lines
5.2 KiB
PHP
115 lines
5.2 KiB
PHP
<x-guest-layout>
|
|
@if ($errors->has('forbidden'))
|
|
<div class="alert alert-danger border-0 d-flex align-items-center mb-4 shadow-sm" role="alert">
|
|
<i class="bi bi-exclamation-triangle-fill me-2 fs-5"></i>
|
|
<div>{{ $errors->first('forbidden') }}</div>
|
|
</div>
|
|
@endif
|
|
|
|
<form method="POST" action="{{ route('login') }}">
|
|
@csrf
|
|
<input type="hidden" name="role" value="{{ $role }}">
|
|
|
|
{{-- HEADER LOGIN --}}
|
|
<div class="text-center mb-4">
|
|
<div class="bg-primary bg-opacity-10 text-primary rounded-circle d-inline-flex align-items-center justify-content-center mb-3"
|
|
style="width: 70px; height: 70px;">
|
|
<i class="bi bi-shield-lock-fill fs-1"></i>
|
|
</div>
|
|
<h3 class="fw-bold text-dark">Login {{ Str::title($role) }}</h3>
|
|
<p class="text-muted small">
|
|
@if ($role == 'siswa')
|
|
Silakan masukkan <b>NISN</b> dan kata sandi.
|
|
@else
|
|
Silakan masukkan <b>NIP/NIK</b> dan kata sandi.
|
|
@endif
|
|
</p>
|
|
</div>
|
|
|
|
{{-- INPUT USERNAME (NISN/NIP) --}}
|
|
<div class="mb-3">
|
|
<label for="{{ $role == 'siswa' ? 'nisn' : 'nip' }}" class="form-label fw-semibold small">
|
|
{{ $role == 'siswa' ? 'Nomor Induk Siswa Nasional (NISN)' : 'NIP / NIK' }}
|
|
</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text bg-light text-muted border-end-0">
|
|
<i class="bi bi-person-fill"></i>
|
|
</span>
|
|
@if ($role == 'siswa')
|
|
<input id="nisn" class="form-control border-start-0 ps-2 bg-light" type="text" name="nisn"
|
|
placeholder="Contoh: 0012345678" required autofocus />
|
|
@else
|
|
<input id="nip" class="form-control border-start-0 ps-2 bg-light" type="text" name="nip"
|
|
placeholder="Contoh: 19800101..." required autofocus />
|
|
@endif
|
|
</div>
|
|
{{-- Error Message --}}
|
|
@if ($role == 'siswa')
|
|
<x-input-error :messages="$errors->get('nisn')" class="mt-1 small text-danger" />
|
|
@else
|
|
<x-input-error :messages="$errors->get('nip')" class="mt-1 small text-danger" />
|
|
@endif
|
|
</div>
|
|
|
|
{{-- INPUT PASSWORD --}}
|
|
<div class="mb-4">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<label for="password" class="form-label fw-semibold small">Kata Sandi</label>
|
|
</div>
|
|
<div class="input-group">
|
|
<span class="input-group-text bg-light text-muted border-end-0">
|
|
<i class="bi bi-lock-fill"></i>
|
|
</span>
|
|
<input id="password" class="form-control border-start-0 border-end-0 ps-2 bg-light" type="password"
|
|
name="password" placeholder="Masukan kata sandi" required />
|
|
<button class="btn btn-light border border-start-0 text-muted" type="button" id="togglePassword">
|
|
<i class="bi bi-eye-slash-fill"></i>
|
|
</button>
|
|
</div>
|
|
<x-input-error :messages="$errors->get('password')" class="mt-1 small text-danger" />
|
|
</div>
|
|
|
|
{{-- TOMBOL LOGIN --}}
|
|
<div class="d-grid mb-4">
|
|
<button type="submit" class="btn btn-primary py-2 fw-medium shadow-sm">
|
|
Masuk
|
|
</button>
|
|
</div>
|
|
|
|
{{-- BANTUAN / LUPA PASSWORD --}}
|
|
<div class="bg-light p-3 rounded-3 text-center border border-dashed">
|
|
<p class="text-muted small mb-1">Mengalami kendala login?</p>
|
|
<a href="https://wa.me/6281234567890?text=Halo%20Admin,%20saya%20lupa%20kata%20sandi%20akun%20saya."
|
|
target="_blank" class="text-decoration-none fw-bold text-success d-inline-flex align-items-center">
|
|
<i class="bi bi-whatsapp me-1"></i> Hubungi Petugas via WA
|
|
</a>
|
|
</div>
|
|
|
|
<p class="mt-4 text-center text-muted small">
|
|
Kembali ke <a href="/" class="fw-semibold text-decoration-none">halaman utama</a>.
|
|
</p>
|
|
</form>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const togglePassword = document.querySelector('#togglePassword');
|
|
const password = document.querySelector('#password');
|
|
const icon = togglePassword.querySelector('i');
|
|
|
|
if (togglePassword && password) {
|
|
togglePassword.addEventListener('click', function(e) {
|
|
const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
|
|
password.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> |