93 lines
4.2 KiB
PHP
93 lines
4.2 KiB
PHP
@extends('layouts.auth')
|
|
|
|
@section('content')
|
|
<div class="login-container">
|
|
<div class="login-background">
|
|
<div class="floating-elements">
|
|
<div class="floating-element"></div>
|
|
<div class="floating-element"></div>
|
|
<div class="floating-element"></div>
|
|
<div class="floating-element"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="login-card-wrapper">
|
|
<div class="login-card">
|
|
<div class="login-header">
|
|
<div class="logo-container">
|
|
<img src="{{ asset('images/logo-black.png') }}" alt="SMK Muhammadiyah 1 Berbek" class="login-logo">
|
|
</div>
|
|
<h2 class="login-title">Ubah Password Baru</h2>
|
|
<p class="login-subtitle">Silakan masukkan password baru Anda untuk akun <strong>{{ $email }}</strong></p>
|
|
</div>
|
|
|
|
<form class="login-form" method="POST" action="{{ route('password.update') }}">
|
|
@csrf
|
|
<input type="hidden" name="email" value="{{ $email }}">
|
|
|
|
<div class="form-group">
|
|
<label for="password" class="form-label">Password Baru</label>
|
|
<div class="input-group">
|
|
<input type="password" class="form-control @error('password') is-invalid @enderror"
|
|
id="password" name="password" placeholder="Masukkan password baru" required>
|
|
<button type="button" class="password-toggle border-0" id="togglePassword">
|
|
<i class="fas fa-eye"></i>
|
|
</button>
|
|
@error('password')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="password_confirmation" class="form-label">Konfirmasi Password Baru</label>
|
|
<div class="input-group">
|
|
<input type="password" class="form-control"
|
|
id="password_confirmation" name="password_confirmation" placeholder="Konfirmasi password baru" required>
|
|
<button type="button" class="password-toggle border-0" id="togglePasswordConfirmation">
|
|
<i class="fas fa-eye"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="login-btn">
|
|
<span class="btn-text">Ubah Password</span>
|
|
<i class="fas fa-arrow-right btn-icon"></i>
|
|
</button>
|
|
|
|
<div class="back-to-home">
|
|
<a href="{{ route('login') }}" class="back-btn text-decoration-none">
|
|
<i class="fas fa-chevron-left"></i>
|
|
<span>Kembali ke Login</span>
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const togglePasswordConfirmation = document.getElementById('togglePasswordConfirmation');
|
|
const passwordConfirmationInput = document.getElementById('password_confirmation');
|
|
|
|
if (togglePasswordConfirmation && passwordConfirmationInput) {
|
|
togglePasswordConfirmation.addEventListener('click', function() {
|
|
const type = passwordConfirmationInput.getAttribute('type') === 'password' ? 'text' : 'password';
|
|
passwordConfirmationInput.setAttribute('type', type);
|
|
const eyeIcon = this.querySelector('i');
|
|
if (type === 'password') {
|
|
eyeIcon.classList.remove('fa-eye-slash');
|
|
eyeIcon.classList.add('fa-eye');
|
|
} else {
|
|
eyeIcon.classList.remove('fa-eye');
|
|
eyeIcon.classList.add('fa-eye-slash');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
@endpush
|