254 lines
11 KiB
PHP
254 lines
11 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'Login - Shop Bibit Cabai Bondowoso')
|
|
|
|
@section('content')
|
|
<div class="container py-5">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-6 col-lg-5">
|
|
<div class="card border-0 shadow-lg">
|
|
<div class="card-header bg-success text-white text-center py-4">
|
|
<h3 class="mb-0">
|
|
<i class="fas fa-seedling me-2"></i>Masuk ke Akun Anda
|
|
</h3>
|
|
</div>
|
|
|
|
<div class="card-body p-4">
|
|
@if(session('success'))
|
|
<div class="alert alert-success alert-dismissible fade show" role="alert">
|
|
<i class="fas fa-check-circle me-2"></i>{{ session('success') }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
@endif
|
|
|
|
<form method="POST" action="{{ route('login') }}" id="loginForm">
|
|
@csrf
|
|
|
|
<div class="mb-3">
|
|
<label for="email" class="form-label">Email <span class="text-danger">*</span></label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="fas fa-envelope"></i></span>
|
|
<input type="email"
|
|
class="form-control @error('email') is-invalid @enderror"
|
|
id="email"
|
|
name="email"
|
|
value="{{ old('email') }}"
|
|
required
|
|
autocomplete="email"
|
|
autofocus
|
|
placeholder="contoh@gmail.com">
|
|
</div>
|
|
<div class="form-text text-muted">
|
|
<small><i class="fas fa-info-circle"></i> Harus menggunakan email @gmail.com</small>
|
|
</div>
|
|
@error('email')
|
|
<div class="text-danger mt-1"><small>{{ $message }}</small></div>
|
|
@enderror
|
|
<div id="emailError" class="text-danger mt-1" style="display: none;">
|
|
<small>Email harus menggunakan domain @gmail.com dan tidak boleh mengandung spasi</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="password" class="form-label">Password <span class="text-danger">*</span></label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="fas fa-lock"></i></span>
|
|
<input type="password"
|
|
class="form-control @error('password') is-invalid @enderror"
|
|
id="password"
|
|
name="password"
|
|
required
|
|
autocomplete="current-password"
|
|
placeholder="Minimal 8 karakter">
|
|
<button class="btn btn-outline-secondary" type="button" id="togglePassword">
|
|
<i class="fas fa-eye" id="eyeIcon"></i>
|
|
</button>
|
|
</div>
|
|
<div class="form-text text-muted">
|
|
<small><i class="fas fa-info-circle"></i> Password minimal 8 karakter, tanpa spasi</small>
|
|
</div>
|
|
@error('password')
|
|
<div class="text-danger mt-1"><small>{{ $message }}</small></div>
|
|
@enderror
|
|
<div id="passwordError" class="text-danger mt-1" style="display: none;">
|
|
<small>Password minimal 8 karakter dan tidak boleh mengandung spasi</small>
|
|
</div>
|
|
</div>
|
|
<div class="text-end mb-3">
|
|
<a href="{{ route('password.request') }}" class="text-success text-decoration-none small">
|
|
<i class="fas fa-question-circle me-1"></i>Lupa Password?
|
|
</a>
|
|
</div>
|
|
<div class="mb-3 form-check">
|
|
<input type="checkbox" class="form-check-input @error('remember') is-invalid @enderror" id="remember" name="remember" required>
|
|
<label class="form-check-label" for="remember">
|
|
Ingat saya <span class="text-danger">*</span>
|
|
</label>
|
|
@error('remember')
|
|
<div class="text-danger mt-1"><small>{{ $message }}</small></div>
|
|
@enderror
|
|
<div id="rememberError" class="text-danger mt-1" style="display: none;">
|
|
<small>Anda harus mencentang "Ingat saya" untuk melanjutkan</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-grid">
|
|
<button type="submit" class="btn btn-success btn-lg" id="submitBtn" disabled>
|
|
<i class="fas fa-sign-in-alt me-2"></i>Masuk
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<hr class="my-4">
|
|
|
|
<div class="text-center">
|
|
<p class="mb-0">Belum punya akun?
|
|
<a href="{{ route('register') }}" class="text-success text-decoration-none fw-bold">
|
|
Daftar di sini
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const form = document.getElementById('loginForm');
|
|
const emailInput = document.getElementById('email');
|
|
const passwordInput = document.getElementById('password');
|
|
const rememberCheckbox = document.getElementById('remember');
|
|
const togglePassword = document.getElementById('togglePassword');
|
|
const eyeIcon = document.getElementById('eyeIcon');
|
|
const submitBtn = document.getElementById('submitBtn');
|
|
|
|
// Toggle password visibility
|
|
togglePassword.addEventListener('click', function() {
|
|
const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
|
|
passwordInput.setAttribute('type', type);
|
|
eyeIcon.classList.toggle('fa-eye');
|
|
eyeIcon.classList.toggle('fa-eye-slash');
|
|
});
|
|
|
|
// Real-time validation for email
|
|
emailInput.addEventListener('input', function() {
|
|
const emailError = document.getElementById('emailError');
|
|
const gmailPattern = /@gmail\.com$/;
|
|
const hasSpaces = /\s/.test(this.value);
|
|
|
|
if ((!gmailPattern.test(this.value) || hasSpaces) && this.value.length > 0) {
|
|
emailError.style.display = 'block';
|
|
this.classList.add('is-invalid');
|
|
} else {
|
|
emailError.style.display = 'none';
|
|
this.classList.remove('is-invalid');
|
|
}
|
|
checkFormValidity();
|
|
});
|
|
|
|
// Real-time validation for password
|
|
passwordInput.addEventListener('input', function() {
|
|
const passwordError = document.getElementById('passwordError');
|
|
const hasSpaces = /\s/.test(this.value);
|
|
|
|
if (this.value.length < 8 || hasSpaces) {
|
|
passwordError.style.display = 'block';
|
|
this.classList.add('is-invalid');
|
|
} else {
|
|
passwordError.style.display = 'none';
|
|
this.classList.remove('is-invalid');
|
|
}
|
|
checkFormValidity();
|
|
});
|
|
|
|
// Real-time validation for remember checkbox
|
|
rememberCheckbox.addEventListener('change', function() {
|
|
const rememberError = document.getElementById('rememberError');
|
|
if (!this.checked) {
|
|
rememberError.style.display = 'block';
|
|
this.classList.add('is-invalid');
|
|
} else {
|
|
rememberError.style.display = 'none';
|
|
this.classList.remove('is-invalid');
|
|
}
|
|
checkFormValidity();
|
|
});
|
|
|
|
// Check form validity and enable/disable submit button
|
|
function checkFormValidity() {
|
|
const emailValid = emailInput.value.length > 0 &&
|
|
/@gmail\.com$/.test(emailInput.value) &&
|
|
!/\s/.test(emailInput.value);
|
|
const passwordValid = passwordInput.value.length >= 8 &&
|
|
!/\s/.test(passwordInput.value);
|
|
const rememberValid = rememberCheckbox.checked;
|
|
|
|
if (emailValid && passwordValid && rememberValid) {
|
|
submitBtn.disabled = false;
|
|
submitBtn.classList.remove('btn-secondary');
|
|
submitBtn.classList.add('btn-success');
|
|
} else {
|
|
submitBtn.disabled = true;
|
|
submitBtn.classList.remove('btn-success');
|
|
submitBtn.classList.add('btn-secondary');
|
|
}
|
|
}
|
|
|
|
// Prevent spaces in email and password fields
|
|
emailInput.addEventListener('keydown', function(e) {
|
|
if (e.key === ' ') {
|
|
e.preventDefault();
|
|
}
|
|
});
|
|
|
|
passwordInput.addEventListener('keydown', function(e) {
|
|
if (e.key === ' ') {
|
|
e.preventDefault();
|
|
}
|
|
});
|
|
|
|
// Form validation before submit
|
|
form.addEventListener('submit', function(e) {
|
|
let isValid = true;
|
|
|
|
// Check email validation
|
|
const gmailPattern = /@gmail\.com$/;
|
|
const emailHasSpaces = /\s/.test(emailInput.value);
|
|
if (!gmailPattern.test(emailInput.value) || emailHasSpaces) {
|
|
document.getElementById('emailError').style.display = 'block';
|
|
emailInput.classList.add('is-invalid');
|
|
isValid = false;
|
|
}
|
|
|
|
// Check password validation
|
|
const passwordHasSpaces = /\s/.test(passwordInput.value);
|
|
if (passwordInput.value.length < 8 || passwordHasSpaces) {
|
|
document.getElementById('passwordError').style.display = 'block';
|
|
passwordInput.classList.add('is-invalid');
|
|
isValid = false;
|
|
}
|
|
|
|
// Check remember checkbox
|
|
if (!rememberCheckbox.checked) {
|
|
document.getElementById('rememberError').style.display = 'block';
|
|
rememberCheckbox.classList.add('is-invalid');
|
|
isValid = false;
|
|
}
|
|
|
|
if (!isValid) {
|
|
e.preventDefault();
|
|
// Scroll to first error
|
|
const firstError = document.querySelector('.is-invalid');
|
|
if (firstError) {
|
|
firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
}
|
|
}
|
|
});
|
|
|
|
// Initialize form state
|
|
checkFormValidity();
|
|
});
|
|
</script>
|
|
@endsection |