ED:Font color
This commit is contained in:
supalerk-ar66
parent
d8d3dff2e7
commit
563564ee58
14 changed files with 162 additions and 83 deletions
|
|
@ -16,6 +16,7 @@ useHead({
|
|||
})
|
||||
|
||||
const { currentUser } = useAuth()
|
||||
const { errors, validate, clearFieldError } = useFormValidation()
|
||||
const isEditing = ref(false)
|
||||
|
||||
// User Profile Data Management
|
||||
|
|
@ -23,17 +24,37 @@ const userData = ref({
|
|||
firstName: currentUser.value.firstName,
|
||||
lastName: currentUser.value.lastName,
|
||||
email: currentUser.value.email,
|
||||
phone: '081-234-5678',
|
||||
phone: '0812345678',
|
||||
joinDate: '12 ธ.ค. 2024',
|
||||
studentId: 'STU 68203',
|
||||
photoURL: '', // Added missing property
|
||||
prefix: 'นาย' // Added missing property
|
||||
photoURL: '',
|
||||
prefix: 'นาย'
|
||||
})
|
||||
|
||||
// Password Form (Separate from userData for security/logic)
|
||||
const passwordForm = reactive({
|
||||
currentPassword: '',
|
||||
newPassword: '',
|
||||
confirmPassword: ''
|
||||
})
|
||||
|
||||
// Validation Rules
|
||||
const validationRules = {
|
||||
firstName: { rules: { required: true }, label: 'ชื่อ' },
|
||||
lastName: { rules: { required: true }, label: 'นามสกุล' },
|
||||
email: { rules: { required: true, email: true }, label: 'อีเมล' },
|
||||
phone: { rules: { required: true, pattern: /^0[0-9]{8,9}$/ }, label: 'เบอร์โทรศัพท์' },
|
||||
newPassword: { rules: { minLength: 6 }, label: 'รหัสผ่านใหม่' },
|
||||
confirmPassword: { rules: { match: 'newPassword' }, label: 'ยืนยันรหัสผ่าน' }
|
||||
}
|
||||
|
||||
const fileInput = ref<HTMLInputElement | null>(null)
|
||||
|
||||
const toggleEdit = (edit: boolean) => {
|
||||
isEditing.value = edit
|
||||
// Clear errors when toggling modes
|
||||
if(edit === false) {
|
||||
// Logic to reset form if canceling could go here
|
||||
}
|
||||
}
|
||||
|
||||
const triggerUpload = () => {
|
||||
|
|
@ -54,9 +75,20 @@ const handleFileUpload = (event: Event) => {
|
|||
|
||||
// Save Profile Updates (Mock Implementation)
|
||||
const saveProfile = () => {
|
||||
// Combine data for validation
|
||||
const formData = {
|
||||
...userData.value,
|
||||
...passwordForm
|
||||
}
|
||||
|
||||
if (!validate(formData, validationRules)) return
|
||||
|
||||
currentUser.value.firstName = userData.value.firstName
|
||||
currentUser.value.lastName = userData.value.lastName
|
||||
currentUser.value.email = userData.value.email
|
||||
|
||||
// Successful save
|
||||
alert('บันทึกข้อมูลเรียบร้อยแล้ว')
|
||||
isEditing.value = false
|
||||
}
|
||||
</script>
|
||||
|
|
@ -95,7 +127,7 @@ const saveProfile = () => {
|
|||
</div>
|
||||
<div class="pb-2">
|
||||
<h2 class="text-3xl font-black text-white mb-1">{{ userData.firstName }} {{ userData.lastName }}</h2>
|
||||
<p class="text-slate-400 font-bold uppercase tracking-widest text-[10px]">Student ID: STU-88293</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -157,7 +189,7 @@ const saveProfile = () => {
|
|||
<!-- Form Inputs -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-400">คำนำหน้า</label>
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-300">คำนำหน้า</label>
|
||||
<select v-model="userData.prefix" class="premium-input w-full">
|
||||
<option>นาย</option>
|
||||
<option>นาง</option>
|
||||
|
|
@ -166,21 +198,49 @@ const saveProfile = () => {
|
|||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-400">ชื่อ</label>
|
||||
<input v-model="userData.firstName" type="text" class="premium-input w-full">
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-300">ชื่อ</label>
|
||||
<input
|
||||
v-model="userData.firstName"
|
||||
type="text"
|
||||
class="premium-input w-full"
|
||||
:class="{ '!border-red-500': errors.firstName }"
|
||||
@input="clearFieldError('firstName')"
|
||||
>
|
||||
<span v-if="errors.firstName" class="text-red-500 text-[10px] mt-1 font-bold">{{ errors.firstName }}</span>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-400">นามสกุล</label>
|
||||
<input v-model="userData.lastName" type="text" class="premium-input w-full">
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-300">นามสกุล</label>
|
||||
<input
|
||||
v-model="userData.lastName"
|
||||
type="text"
|
||||
class="premium-input w-full"
|
||||
:class="{ '!border-red-500': errors.lastName }"
|
||||
@input="clearFieldError('lastName')"
|
||||
>
|
||||
<span v-if="errors.lastName" class="text-red-500 text-[10px] mt-1 font-bold">{{ errors.lastName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-400">อีเมล</label>
|
||||
<input v-model="userData.email" type="email" class="premium-input w-full">
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-300">อีเมล</label>
|
||||
<input
|
||||
v-model="userData.email"
|
||||
type="email"
|
||||
class="premium-input w-full"
|
||||
:class="{ '!border-red-500': errors.email }"
|
||||
@input="clearFieldError('email')"
|
||||
>
|
||||
<span v-if="errors.email" class="text-red-500 text-[10px] mt-1 font-bold">{{ errors.email }}</span>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-400">เบอร์โทรศัพท์</label>
|
||||
<input v-model="userData.phone" type="text" class="premium-input w-full">
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-300">เบอร์โทรศัพท์</label>
|
||||
<input
|
||||
v-model="userData.phone"
|
||||
type="text"
|
||||
class="premium-input w-full"
|
||||
:class="{ '!border-red-500': errors.phone }"
|
||||
@input="clearFieldError('phone')"
|
||||
>
|
||||
<span v-if="errors.phone" class="text-red-500 text-[10px] mt-1 font-bold">{{ errors.phone }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -189,16 +249,30 @@ const saveProfile = () => {
|
|||
<h3 class="text-lg font-black text-white mb-6">ความปลอดภัย</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-400">รหัสผ่านปัจจุบัน</label>
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-300">รหัสผ่านปัจจุบัน</label>
|
||||
<input type="password" class="premium-input w-full" placeholder="••••••••">
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-400">รหัสผ่านใหม่</label>
|
||||
<input type="password" class="premium-input w-full">
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-300">รหัสผ่านใหม่</label>
|
||||
<input
|
||||
v-model="passwordForm.newPassword"
|
||||
type="password"
|
||||
class="premium-input w-full"
|
||||
:class="{ '!border-red-500': errors.newPassword }"
|
||||
@input="clearFieldError('newPassword')"
|
||||
>
|
||||
<span v-if="errors.newPassword" class="text-red-500 text-[10px] mt-1 font-bold">{{ errors.newPassword }}</span>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-400">ยืนยันรหัสผ่านใหม่</label>
|
||||
<input type="password" class="premium-input w-full">
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-300">ยืนยันรหัสผ่านใหม่</label>
|
||||
<input
|
||||
v-model="passwordForm.confirmPassword"
|
||||
type="password"
|
||||
class="premium-input w-full"
|
||||
:class="{ '!border-red-500': errors.confirmPassword }"
|
||||
@input="clearFieldError('confirmPassword')"
|
||||
>
|
||||
<span v-if="errors.confirmPassword" class="text-red-500 text-[10px] mt-1 font-bold">{{ errors.confirmPassword }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -225,14 +299,14 @@ const saveProfile = () => {
|
|||
}
|
||||
|
||||
.info-group .label {
|
||||
@apply text-xs font-black uppercase tracking-widest text-slate-400 block mb-2;
|
||||
@apply text-xs font-black uppercase tracking-widest text-slate-300 block mb-2;
|
||||
}
|
||||
.info-group .value {
|
||||
@apply text-lg font-bold text-white;
|
||||
}
|
||||
|
||||
.premium-input {
|
||||
@apply bg-slate-100 dark:bg-slate-800/50 border border-slate-300 dark:border-white/5 rounded-2xl px-6 py-3.5 text-slate-900 dark:text-white focus:border-blue-500 outline-none transition-all;
|
||||
@apply bg-slate-100 dark:bg-slate-900 border border-slate-300 dark:border-white/10 rounded-2xl px-6 py-3.5 text-slate-900 dark:text-white focus:border-blue-500 outline-none transition-all placeholder:text-slate-400;
|
||||
}
|
||||
|
||||
.btn-premium-edit {
|
||||
|
|
@ -240,7 +314,7 @@ const saveProfile = () => {
|
|||
}
|
||||
|
||||
.btn-upload {
|
||||
@apply px-6 py-2.5 bg-white dark:bg-white text-slate-900 dark:text-slate-900 rounded-xl text-xs font-black hover:bg-blue-50 transition-all;
|
||||
@apply px-6 py-2.5 bg-blue-600 text-white rounded-xl text-xs font-black hover:bg-blue-500 transition-all shadow-lg shadow-blue-600/20;
|
||||
}
|
||||
|
||||
.btn-save-premium {
|
||||
|
|
@ -248,7 +322,7 @@ const saveProfile = () => {
|
|||
}
|
||||
|
||||
.btn-cancel-premium {
|
||||
@apply bg-slate-200 dark:bg-slate-800 text-slate-900 dark:text-slate-400 rounded-2xl py-4 font-black hover:bg-slate-300 dark:hover:bg-slate-700 dark:hover:text-white transition-all;
|
||||
@apply bg-slate-200 dark:bg-slate-700 text-slate-900 dark:text-white rounded-2xl py-4 font-black hover:bg-slate-300 dark:hover:bg-slate-600 transition-all;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue