102 lines
7.0 KiB
PHP
102 lines
7.0 KiB
PHP
<?php require_once APP_ROOT . '/app/Views/layouts/header.php'; ?>
|
|
|
|
<div class="max-w-4xl mx-auto">
|
|
<div class="mb-6">
|
|
<h2 class="text-2xl font-bold text-slate-800 dark:text-white">ข้อมูลส่วนตัว (Profile)</h2>
|
|
<p class="text-slate-500 dark:text-slate-400 text-sm mt-1">จัดการข้อมูลส่วนตัวและเปลี่ยนรหัสผ่านของคุณ</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
|
|
<!-- Left Column: Personal Info -->
|
|
<div class="md:col-span-1 space-y-6">
|
|
<div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-100 dark:border-slate-700 p-6">
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-24 h-24 rounded-full bg-gradient-to-tr from-sky-400 to-indigo-500 flex items-center justify-center text-white text-3xl font-bold shadow-lg shadow-sky-500/30 mb-4">
|
|
<?= mb_substr(htmlspecialchars($user['first_name'] ?? 'U'), 0, 1) ?>
|
|
</div>
|
|
<h3 class="text-lg font-bold text-slate-800 dark:text-white">
|
|
<?= htmlspecialchars($user['first_name'] . ' ' . $user['last_name']) ?>
|
|
</h3>
|
|
<p class="text-sm font-medium text-sky-600 dark:text-sky-400 mt-1"><?= htmlspecialchars($roleName) ?></p>
|
|
</div>
|
|
|
|
<div class="mt-8 space-y-4">
|
|
<div>
|
|
<label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1">Username</label>
|
|
<div class="text-sm font-medium text-slate-700 dark:text-slate-300 bg-slate-50 dark:bg-slate-900/50 px-3 py-2 rounded-lg border border-slate-100 dark:border-slate-700">
|
|
<?= htmlspecialchars($user['username']) ?>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1">ชื่อ</label>
|
|
<div class="text-sm font-medium text-slate-700 dark:text-slate-300 bg-slate-50 dark:bg-slate-900/50 px-3 py-2 rounded-lg border border-slate-100 dark:border-slate-700">
|
|
<?= htmlspecialchars($user['first_name']) ?>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1">นามสกุล</label>
|
|
<div class="text-sm font-medium text-slate-700 dark:text-slate-300 bg-slate-50 dark:bg-slate-900/50 px-3 py-2 rounded-lg border border-slate-100 dark:border-slate-700">
|
|
<?= htmlspecialchars($user['last_name']) ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Column: Password Change -->
|
|
<div class="md:col-span-2">
|
|
<div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-100 dark:border-slate-700 p-6">
|
|
<h3 class="text-lg font-bold text-slate-800 dark:text-white mb-6 flex items-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-2 text-sky-500"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" /></svg>
|
|
เปลี่ยนรหัสผ่าน
|
|
</h3>
|
|
|
|
<form action="<?= BASE_URL ?>/profile/update-password" method="POST" class="space-y-5">
|
|
<div>
|
|
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">รหัสผ่านปัจจุบัน <span class="text-red-500">*</span></label>
|
|
<input type="password" name="current_password" required
|
|
class="w-full px-4 py-2.5 rounded-xl border border-slate-200 dark:border-slate-600 bg-slate-50 focus:bg-white dark:bg-slate-900/50 dark:focus:bg-slate-800 text-slate-800 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-sky-500/50 focus:border-sky-500 transition-all">
|
|
</div>
|
|
|
|
<hr class="border-slate-100 dark:border-slate-700">
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">รหัสผ่านใหม่ <span class="text-red-500">*</span></label>
|
|
<input type="password" name="new_password" required minlength="6"
|
|
class="w-full px-4 py-2.5 rounded-xl border border-slate-200 dark:border-slate-600 bg-slate-50 focus:bg-white dark:bg-slate-900/50 dark:focus:bg-slate-800 text-slate-800 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-sky-500/50 focus:border-sky-500 transition-all">
|
|
<p class="text-xs text-slate-500 mt-1">ต้องมีความยาวอย่างน้อย 6 ตัวอักษร</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">ยืนยันรหัสผ่านใหม่ <span class="text-red-500">*</span></label>
|
|
<input type="password" name="confirm_password" required minlength="6"
|
|
class="w-full px-4 py-2.5 rounded-xl border border-slate-200 dark:border-slate-600 bg-slate-50 focus:bg-white dark:bg-slate-900/50 dark:focus:bg-slate-800 text-slate-800 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-sky-500/50 focus:border-sky-500 transition-all">
|
|
</div>
|
|
|
|
<div class="pt-4">
|
|
<button type="submit" class="w-full md:w-auto px-6 py-2.5 bg-sky-500 hover:bg-sky-600 text-white font-medium rounded-xl transition-colors shadow-sm shadow-sky-500/20">
|
|
บันทึกการเปลี่ยนรหัสผ่าน
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.querySelector('form').addEventListener('submit', function(e) {
|
|
const newPass = document.querySelector('input[name="new_password"]').value;
|
|
const confPass = document.querySelector('input[name="confirm_password"]').value;
|
|
|
|
if (newPass !== confPass) {
|
|
e.preventDefault();
|
|
alert('รหัสผ่านใหม่และการยืนยันรหัสผ่านไม่ตรงกัน กรุณาตรวจสอบอีกครั้ง');
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<?php require_once APP_ROOT . '/app/Views/layouts/footer.php'; ?>
|