132b040418
Tambahkan halaman /dashboard/profile beserta API ganti password untuk user yang sedang login. Rapikan AuthSeeder agar idempotent dan bisa ambil admin email/password dari env.
131 lines
6.7 KiB
PHP
131 lines
6.7 KiB
PHP
<?php
|
|
$user = $user ?? null;
|
|
$roles = $user && !empty($user['roles']) ? $user['roles'] : [];
|
|
$roleLabels = array_map(function ($r) { return $r['role_name'] ?? $r['role_code'] ?? ''; }, $roles);
|
|
?>
|
|
<div class="space-y-6">
|
|
<div>
|
|
<h1 class="text-xl font-semibold">Profil Akun</h1>
|
|
<p class="text-gray-600 dark:text-gray-400 mt-1">Informasi akun dan pengaturan ganti password.</p>
|
|
</div>
|
|
|
|
<!-- Info Akun -->
|
|
<div class="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-sm p-6">
|
|
<h2 class="text-base font-semibold text-gray-900 dark:text-gray-100 mb-4">Informasi Akun</h2>
|
|
<dl class="space-y-3">
|
|
<div>
|
|
<dt class="text-sm text-gray-500 dark:text-gray-400">Nama</dt>
|
|
<dd class="text-gray-900 dark:text-gray-100 font-medium"><?= esc($user['name'] ?? '-') ?></dd>
|
|
</div>
|
|
<div>
|
|
<dt class="text-sm text-gray-500 dark:text-gray-400">Email</dt>
|
|
<dd class="text-gray-900 dark:text-gray-100"><?= esc($user['email'] ?? '-') ?></dd>
|
|
</div>
|
|
<div>
|
|
<dt class="text-sm text-gray-500 dark:text-gray-400">Role</dt>
|
|
<dd class="text-gray-900 dark:text-gray-100"><?= esc(implode(', ', $roleLabels) ?: '-') ?></dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
|
|
<!-- Form Ganti Password -->
|
|
<div class="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-sm p-6">
|
|
<h2 class="text-base font-semibold text-gray-900 dark:text-gray-100 mb-4">Ganti Password</h2>
|
|
<form id="form-change-password" class="space-y-4 max-w-md">
|
|
<div>
|
|
<label for="current-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Password Saat Ini <span class="text-red-500">*</span></label>
|
|
<input type="password" id="current-password" name="current_password" required autocomplete="current-password"
|
|
class="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary focus:border-transparent"
|
|
placeholder="Masukkan password saat ini">
|
|
</div>
|
|
<div>
|
|
<label for="new-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Password Baru <span class="text-red-500">*</span></label>
|
|
<input type="password" id="new-password" name="new_password" required minlength="6" autocomplete="new-password"
|
|
class="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary focus:border-transparent"
|
|
placeholder="Minimal 6 karakter">
|
|
</div>
|
|
<div>
|
|
<label for="new-password-confirm" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Konfirmasi Password Baru <span class="text-red-500">*</span></label>
|
|
<input type="password" id="new-password-confirm" name="new_password_confirm" required minlength="6" autocomplete="new-password"
|
|
class="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary focus:border-transparent"
|
|
placeholder="Ulangi password baru">
|
|
<p id="password-match-error" class="mt-1 text-sm text-red-600 dark:text-red-400 hidden">Password baru dan konfirmasi tidak sama.</p>
|
|
</div>
|
|
<button type="submit" id="btn-submit" class="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-primary text-white font-medium hover:bg-primary-hover transition-colors">
|
|
<i class="bx bx-lock-alt"></i>
|
|
Ganti Password
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="toast-container" class="fixed bottom-6 right-6 z-[60] flex flex-col gap-2 pointer-events-none"></div>
|
|
|
|
<script>
|
|
(function() {
|
|
var baseUrl = '<?= base_url() ?>'.replace(/\/$/, '');
|
|
var apiChangePassword = baseUrl + '/api/auth/change-password';
|
|
|
|
var form = document.getElementById('form-change-password');
|
|
var btnSubmit = document.getElementById('btn-submit');
|
|
var currentPassword = document.getElementById('current-password');
|
|
var newPassword = document.getElementById('new-password');
|
|
var newPasswordConfirm = document.getElementById('new-password-confirm');
|
|
var passwordMatchError = document.getElementById('password-match-error');
|
|
var toastContainer = document.getElementById('toast-container');
|
|
|
|
function showToast(message, type) {
|
|
type = type || 'success';
|
|
var el = document.createElement('div');
|
|
el.className = 'pointer-events-auto px-4 py-3 rounded-lg shadow-lg text-sm font-medium ' + (type === 'success' ? 'bg-green-600 text-white' : 'bg-red-600 text-white');
|
|
el.textContent = message;
|
|
toastContainer.appendChild(el);
|
|
setTimeout(function() { if (el.parentNode) el.parentNode.removeChild(el); }, 3000);
|
|
}
|
|
|
|
function postOpts(body) {
|
|
return {
|
|
method: 'POST',
|
|
credentials: 'same-origin',
|
|
headers: { 'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json' },
|
|
body: JSON.stringify(body)
|
|
};
|
|
}
|
|
|
|
form.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
passwordMatchError.classList.add('hidden');
|
|
|
|
if (newPassword.value !== newPasswordConfirm.value) {
|
|
passwordMatchError.classList.remove('hidden');
|
|
return;
|
|
}
|
|
|
|
if (newPassword.value.length < 6) {
|
|
showToast('Password baru minimal 6 karakter', 'error');
|
|
return;
|
|
}
|
|
|
|
btnSubmit.disabled = true;
|
|
fetch(apiChangePassword, postOpts({
|
|
current_password: currentPassword.value,
|
|
new_password: newPassword.value
|
|
}))
|
|
.then(function(res) { return res.json().then(function(j) { return { ok: res.ok, data: j }; }); })
|
|
.then(function(r) {
|
|
btnSubmit.disabled = false;
|
|
if (!r.ok) {
|
|
showToast(r.data && r.data.message ? r.data.message : 'Gagal mengganti password', 'error');
|
|
return;
|
|
}
|
|
showToast('Password berhasil diubah');
|
|
form.reset();
|
|
})
|
|
.catch(function() {
|
|
btnSubmit.disabled = false;
|
|
showToast('Gagal mengganti password', 'error');
|
|
});
|
|
});
|
|
})();
|
|
</script>
|