215 lines
10 KiB
PHP
215 lines
10 KiB
PHP
@extends('layout.layout')
|
|
|
|
@php
|
|
$title = 'Ubah Password';
|
|
$subTitle = 'Profil Pengguna';
|
|
@endphp
|
|
|
|
@section('content')
|
|
|
|
<div class="card basic-data-table">
|
|
<div class="card-body">
|
|
<div
|
|
class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-3 gap-3">
|
|
<div>
|
|
<h5 class="mb-0">Ubah Password</h5>
|
|
</div>
|
|
<div class="d-flex gap-2">
|
|
<a href="{{ route('profile.index') }}" class="btn btn-secondary btn-sm d-flex align-items-center gap-2">
|
|
<iconify-icon icon="iconoir:arrow-left"></iconify-icon>
|
|
<span>Kembali</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
@if (session('success'))
|
|
<div class="alert alert-success">{{ session('success') }}</div>
|
|
@endif
|
|
|
|
@if ($errors->any())
|
|
<div class="alert alert-danger">
|
|
<ul class="mb-0">
|
|
@foreach ($errors->all() as $error)
|
|
<li>{{ $error }}</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
@endif
|
|
|
|
<form method="POST" action="{{ route('profile.update-password') }}" id="passwordChangeForm">
|
|
@csrf
|
|
@method('PUT')
|
|
|
|
<div class="row g-3">
|
|
<div class="col-12">
|
|
<div class="alert alert-warning d-flex align-items-center">
|
|
<iconify-icon icon="material-symbols:warning" class="me-2"></iconify-icon>
|
|
<div>
|
|
<strong>Peringatan Keamanan:</strong> Setelah mengubah password, Anda akan otomatis logout
|
|
dan diarahkan ke halaman login. Pastikan Anda mengingat password baru sebelum melanjutkan.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-md-6">
|
|
<label class="form-label">Password Saat Ini <span class="text-danger">*</span></label>
|
|
<div class="position-relative">
|
|
<input type="password" name="current_password" id="current_password" class="form-control pe-5"
|
|
required placeholder="Masukkan password saat ini">
|
|
<button type="button"
|
|
class="btn btn-link position-absolute end-0 top-50 translate-middle-y pe-3 text-secondary toggle-password"
|
|
data-target="#current_password">
|
|
<iconify-icon icon="solar:eye-linear" class="eye-open"></iconify-icon>
|
|
<iconify-icon icon="solar:eye-closed-linear" class="eye-closed d-none"></iconify-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12"></div>
|
|
|
|
<div class="col-12 col-md-6">
|
|
<label class="form-label">Password Baru <span class="text-danger">*</span></label>
|
|
<div class="position-relative">
|
|
<input type="password" name="password" id="new_password" class="form-control pe-5" required
|
|
placeholder="Masukkan password baru">
|
|
<button type="button"
|
|
class="btn btn-link position-absolute end-0 top-50 translate-middle-y pe-3 text-secondary toggle-password"
|
|
data-target="#new_password">
|
|
<iconify-icon icon="solar:eye-linear" class="eye-open"></iconify-icon>
|
|
<iconify-icon icon="solar:eye-closed-linear" class="eye-closed d-none"></iconify-icon>
|
|
</button>
|
|
</div>
|
|
<div class="form-text">Password harus minimal 8 karakter, mengandung huruf besar, huruf
|
|
kecil,
|
|
angka, dan simbol khusus.</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-md-6">
|
|
<label class="form-label">Konfirmasi Password Baru <span class="text-danger">*</span></label>
|
|
<div class="position-relative">
|
|
<input type="password" name="password_confirmation" id="confirm_password"
|
|
class="form-control pe-5" required placeholder="Konfirmasi password baru">
|
|
<button type="button"
|
|
class="btn btn-link position-absolute end-0 top-50 translate-middle-y pe-3 text-secondary toggle-password"
|
|
data-target="#confirm_password">
|
|
<iconify-icon icon="solar:eye-linear" class="eye-open"></iconify-icon>
|
|
<iconify-icon icon="solar:eye-closed-linear" class="eye-closed d-none"></iconify-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4 d-flex gap-2">
|
|
<button type="submit" class="btn btn-primary d-flex align-items-center gap-2" id="changePasswordBtn">
|
|
<iconify-icon icon="material-symbols:save"></iconify-icon>
|
|
<span>Ubah Password</span>
|
|
</button>
|
|
<a href="{{ route('profile.index') }}" class="btn btn-light">Batal</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Custom Confirmation Modal -->
|
|
<div class="modal fade" id="confirmPasswordChangeModal" tabindex="-1" aria-labelledby="confirmPasswordChangeModalLabel"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header border-0 pb-0">
|
|
<div class="d-flex align-items-center">
|
|
<div class="me-3">
|
|
<div
|
|
class="w-48-px h-48-px bg-warning-subtle rounded-circle d-flex align-items-center justify-content-center">
|
|
<iconify-icon icon="material-symbols:warning" class="text-warning fs-3"></iconify-icon>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h5 class="modal-title mb-1" id="confirmPasswordChangeModalLabel">Konfirmasi Ubah Password</h5>
|
|
<p class="text-muted mb-0 small">Pastikan Anda yakin dengan keputusan ini</p>
|
|
</div>
|
|
</div>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body pt-2">
|
|
<div class="alert alert-warning border-0 bg-warning-subtle">
|
|
<div class="d-flex">
|
|
<iconify-icon icon="material-symbols:info" class="text-warning me-2 mt-1"></iconify-icon>
|
|
<div>
|
|
<strong>Perhatian:</strong>
|
|
<ul class="mb-0 mt-2">
|
|
<li>Anda akan <strong>otomatis logout</strong> dari semua perangkat</li>
|
|
<li>Perlu <strong>login ulang</strong> dengan password baru</li>
|
|
<li>Pastikan Anda <strong>mengingat password baru</strong> sebelum melanjutkan</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="mb-0">Apakah Anda yakin ingin mengubah password sekarang?</p>
|
|
</div>
|
|
<div class="modal-footer border-0 pt-0 d-flex align-items-center justify-content-center">
|
|
<button type="button" class="btn btn-light d-flex align-items-center" data-bs-dismiss="modal">
|
|
<iconify-icon icon="material-symbols:close" class="me-1"></iconify-icon>
|
|
Batal
|
|
</button>
|
|
<button type="button" class="btn btn-warning d-flex align-items-center" id="confirmPasswordChange">
|
|
<iconify-icon icon="material-symbols:lock-reset" class="me-1"></iconify-icon>
|
|
Ya, Ubah Password
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Password toggle functionality
|
|
$('.toggle-password').on('click', function() {
|
|
const target = $(this).data('target');
|
|
const input = $(target);
|
|
const eyeOpen = $(this).find('.eye-open');
|
|
const eyeClosed = $(this).find('.eye-closed');
|
|
|
|
if (input.attr('type') === 'password') {
|
|
input.attr('type', 'text');
|
|
eyeOpen.addClass('d-none');
|
|
eyeClosed.removeClass('d-none');
|
|
} else {
|
|
input.attr('type', 'password');
|
|
eyeOpen.removeClass('d-none');
|
|
eyeClosed.addClass('d-none');
|
|
}
|
|
});
|
|
|
|
// Custom modal confirmation before password change
|
|
$('#passwordChangeForm').on('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
// Show custom modal instead of alert
|
|
$('#confirmPasswordChangeModal').modal('show');
|
|
});
|
|
|
|
// Handle modal confirmation
|
|
$('#confirmPasswordChange').on('click', function() {
|
|
// Hide modal
|
|
$('#confirmPasswordChangeModal').modal('hide');
|
|
|
|
// Add loading state to button
|
|
const btn = $(this);
|
|
const originalText = btn.html();
|
|
btn.html(
|
|
'<span class="spinner-border spinner-border-sm me-2" role="status"></span>Mengubah Password...'
|
|
);
|
|
btn.prop('disabled', true);
|
|
|
|
// Submit form after modal closes
|
|
setTimeout(function() {
|
|
$('#passwordChangeForm')[0].submit();
|
|
}, 300);
|
|
});
|
|
});
|
|
</script>
|
|
@endpush
|