feat: tambah profil akun dan ganti password
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.
This commit is contained in:
mwpn
130
app/Views/dashboard/profile.php
Normal file
130
app/Views/dashboard/profile.php
Normal file
@@ -0,0 +1,130 @@
|
||||
<?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>
|
||||
Reference in New Issue
Block a user