TIF_NGANJUK_E41220778/resources/views/profile/partials/update-password-form.blade.php

103 lines
4.4 KiB
PHP

<section>
<header>
<h2 class="h5 fw-bold text-dark">
{{ __('Update Password') }}
</h2>
<p class="mt-1 text-muted small">
{{ __('Pastikan akun Anda menggunakan kata sandi yang panjang dan acak untuk menjaga keamanan.') }}
</p>
</header>
<form method="post" action="{{ route('password.update') }}" class="mt-4">
@csrf
@method('put')
{{-- Current Password --}}
<div class="mb-3">
<label for="update_password_current_password" class="form-label">{{ __('Kata Sandi Saat Ini') }}</label>
<div class="input-group">
<input id="update_password_current_password" name="current_password" type="password"
class="form-control @error('current_password', 'updatePassword') is-invalid @enderror"
autocomplete="current-password">
<button class="btn btn-outline-secondary toggle-password" type="button">
<i class="bi bi-eye-slash"></i>
</button>
@error('current_password', 'updatePassword')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
</div>
{{-- New Password --}}
<div class="mb-3">
<label for="update_password_password" class="form-label">{{ __('Kata Sandi Baru') }}</label>
<div class="input-group">
<input id="update_password_password" name="password" type="password"
class="form-control @error('password', 'updatePassword') is-invalid @enderror"
autocomplete="new-password">
<button class="btn btn-outline-secondary toggle-password" type="button">
<i class="bi bi-eye-slash"></i>
</button>
@error('password', 'updatePassword')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
</div>
{{-- Confirm Password --}}
<div class="mb-3">
<label for="update_password_password_confirmation" class="form-label">{{ __('Konfirmasi Kata Sandi') }}</label>
<div class="input-group">
<input id="update_password_password_confirmation" name="password_confirmation" type="password"
class="form-control @error('password_confirmation', 'updatePassword') is-invalid @enderror"
autocomplete="new-password">
<button class="btn btn-outline-secondary toggle-password" type="button">
<i class="bi bi-eye-slash"></i>
</button>
@error('password_confirmation', 'updatePassword')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
</div>
<div class="d-flex align-items-center gap-3 mt-4">
<button type="submit" class="btn btn-primary px-4 shadow-sm">
<i class="bi bi-save me-1"></i> {{ __('Simpan Perubahan') }}
</button>
</div>
</form>
<script>
document.addEventListener('DOMContentLoaded', function() {
const toggleButtons = document.querySelectorAll('.toggle-password');
toggleButtons.forEach(button => {
button.addEventListener('click', function() {
const input = this.parentElement.querySelector('input');
const icon = this.querySelector('i');
if (input.type === 'password') {
input.type = 'text';
icon.classList.remove('bi-eye-slash');
icon.classList.add('bi-eye');
} else {
input.type = 'password';
icon.classList.remove('bi-eye');
icon.classList.add('bi-eye-slash');
}
});
});
@if (session('status') === 'password-updated')
Swal.fire({
icon: 'success',
title: 'Berhasil!',
text: 'Kata sandi baru sudah berhasil diperbarui.',
showConfirmButton: false,
timer: 3000,
timerProgressBar: true
});
@endif
});
</script>
</section>