feat: Implement core e-learning features including video playback, user profile management, and course discovery.
This commit is contained in:
supalerk-ar66
parent
2cd1d481aa
commit
a648c41b72
11 changed files with 1085 additions and 747 deletions
|
|
@ -50,44 +50,29 @@ const passwordForm = reactive({
|
|||
})
|
||||
|
||||
|
||||
const nameRules = [(val: string) => !!val || t('common.required')]
|
||||
const emailRules = [
|
||||
(val: string) => !!val || t('common.required'),
|
||||
(val: string) => /.+@.+\..+/.test(val) || t('common.invalidEmail')
|
||||
]
|
||||
const phoneRules = [
|
||||
(val: string) => !!val || t('common.required'),
|
||||
(val: string) => /^0[0-9]{8,9}$/.test(val) || t('common.invalidPhone')
|
||||
]
|
||||
const passwordRules = [
|
||||
(val: string) => !!val || t('common.required'),
|
||||
(val: string) => val.length >= 6 || t('common.passwordTooShort'),
|
||||
(val: string) => val !== passwordForm.currentPassword || 'รหัสผ่านใหม่ต้องไม่ซ้ำกับรหัสผ่านปัจจุบัน'
|
||||
]
|
||||
const confirmPasswordRules = [
|
||||
(val: string) => !!val || t('common.required'),
|
||||
(val: string) => val === passwordForm.newPassword || t('common.passwordsDoNotMatch')
|
||||
]
|
||||
// Rules have been moved to components
|
||||
|
||||
const showCurrentPassword = ref(false)
|
||||
const showNewPassword = ref(false)
|
||||
const showConfirmPassword = ref(false)
|
||||
|
||||
const fileInput = ref<HTMLInputElement | null>(null)
|
||||
const fileInput = ref<HTMLInputElement | null>(null) // Used in view mode (outside component)
|
||||
|
||||
const toggleEdit = (edit: boolean) => {
|
||||
isEditing.value = edit
|
||||
}
|
||||
|
||||
const triggerUpload = () => {
|
||||
fileInput.value?.click()
|
||||
}
|
||||
// Updated to accept File object directly (or Event for view mode compatibility if needed)
|
||||
const handleFileUpload = async (fileOrEvent: File | Event) => {
|
||||
let file: File | null = null
|
||||
|
||||
const handleFileUpload = async (event: Event) => {
|
||||
const target = event.target as HTMLInputElement
|
||||
if (target.files && target.files[0]) {
|
||||
const file = target.files[0]
|
||||
if (fileOrEvent instanceof File) {
|
||||
file = fileOrEvent
|
||||
} else {
|
||||
// Fallback for native input change event
|
||||
const target = (fileOrEvent as Event).target as HTMLInputElement
|
||||
if (target.files && target.files[0]) {
|
||||
file = target.files[0]
|
||||
}
|
||||
}
|
||||
|
||||
if (file) {
|
||||
// แสดงรูป Preview ก่อนอัปโหลด
|
||||
const reader = new FileReader()
|
||||
reader.onload = (e) => {
|
||||
|
|
@ -103,13 +88,17 @@ const handleFileUpload = async (event: Event) => {
|
|||
if (result.success && result.data?.avatar_url) {
|
||||
userData.value.photoURL = result.data.avatar_url
|
||||
} else {
|
||||
// ถ้า error (เช่น 500) ก็ยังคงรูป preview ไว้ หรือจะ alert ก็ได้
|
||||
console.error('Upload failed:', result.error)
|
||||
alert(result.error || t('profile.updateError'))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Trigger upload for VIEW mode avatar click
|
||||
const triggerUpload = () => {
|
||||
fileInput.value?.click()
|
||||
}
|
||||
|
||||
|
||||
|
||||
const handleUpdateProfile = async () => {
|
||||
|
|
@ -277,241 +266,19 @@ onMounted(() => {
|
|||
|
||||
<div v-else class="grid grid-cols-1 lg:grid-cols-2 gap-8 fade-in">
|
||||
|
||||
<div class="card-premium p-8 h-fit">
|
||||
<h2 class="text-xl font-bold flex items-center gap-3 text-slate-900 dark:text-white mb-6">
|
||||
<q-icon name="person" class="text-blue-500 text-2xl" />
|
||||
{{ $t('profile.editPersonalDesc') }}
|
||||
</h2>
|
||||
|
||||
<div class="flex flex-col gap-6">
|
||||
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="relative group cursor-pointer" @click="triggerUpload">
|
||||
<UserAvatar
|
||||
:photo-u-r-l="userData.photoURL"
|
||||
:first-name="userData.firstName"
|
||||
:last-name="userData.lastName"
|
||||
size="80"
|
||||
class="rounded-2xl border-2 border-slate-100 dark:border-white/10"
|
||||
/>
|
||||
|
||||
<!-- Hover Overlay only if has photo (optional) or always? User didn't specify, keeping simple clickable -->
|
||||
<div class="absolute inset-0 bg-black/40 rounded-2xl flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<q-icon name="camera_alt" class="text-white text-xl" />
|
||||
</div>
|
||||
<!-- Hidden Input -->
|
||||
<input ref="fileInput" type="file" class="hidden" accept="image/*" @change="handleFileUpload" >
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="font-bold text-slate-900 dark:text-white mb-1">{{ $t('profile.yourAvatar') }}</div>
|
||||
|
||||
<!-- Buttons Row -->
|
||||
<div class="flex items-center gap-3">
|
||||
<template v-if="userData.photoURL">
|
||||
<q-btn
|
||||
unelevated
|
||||
rounded
|
||||
color="primary"
|
||||
:label="$t('profile.changeAvatar')"
|
||||
class="font-bold shadow-lg shadow-blue-500/30"
|
||||
@click="triggerUpload"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<q-btn
|
||||
unelevated
|
||||
rounded
|
||||
color="primary"
|
||||
:label="$t('profile.uploadNew')"
|
||||
class="font-bold shadow-lg shadow-blue-500/30"
|
||||
@click="triggerUpload"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Add Limit Text -->
|
||||
<div class="mt-1 text-xs text-slate-500 dark:text-slate-400">
|
||||
{{ $t('profile.uploadLimit') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-separator class="bg-slate-100 dark:bg-white/5" />
|
||||
|
||||
<q-form @submit="handleUpdateProfile" class="flex flex-col gap-6">
|
||||
|
||||
<div class="grid grid-cols-1 gap-4">
|
||||
<div class="space-y-1">
|
||||
<label class="text-xs font-bold text-slate-500 dark:text-slate-400 ml-1 uppercase">{{ $t('profile.prefix') }}</label>
|
||||
<q-select
|
||||
v-model="userData.prefix"
|
||||
:options="['นาย', 'นาง', 'นางสาว']"
|
||||
outlined
|
||||
dense
|
||||
rounded
|
||||
class="premium-q-input"
|
||||
popup-content-class="text-slate-900"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="text-xs font-bold text-slate-500 dark:text-slate-400 ml-1 uppercase">{{ $t('profile.firstName') }}</label>
|
||||
<q-input
|
||||
v-model="userData.firstName"
|
||||
outlined dense rounded
|
||||
class="premium-q-input"
|
||||
:rules="nameRules"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs font-bold text-slate-500 dark:text-slate-400 ml-1 uppercase">{{ $t('profile.lastName') }}</label>
|
||||
<q-input
|
||||
v-model="userData.lastName"
|
||||
outlined dense rounded
|
||||
class="premium-q-input"
|
||||
:rules="nameRules"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="flex justify-between items-end mb-1">
|
||||
<label class="text-xs font-bold text-slate-500 dark:text-slate-400 ml-1 uppercase">{{ $t('profile.email') }}</label>
|
||||
|
||||
</div>
|
||||
<q-input
|
||||
v-model="userData.email"
|
||||
type="email"
|
||||
outlined dense rounded
|
||||
class="premium-q-input"
|
||||
:rules="emailRules"
|
||||
hide-bottom-space
|
||||
disable
|
||||
:hint="$t('profile.emailHint')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="text-xs font-bold text-slate-500 dark:text-slate-400 ml-1 uppercase">{{ $t('profile.phone') }}</label>
|
||||
<q-input
|
||||
v-model="userData.phone"
|
||||
outlined dense rounded
|
||||
class="premium-q-input"
|
||||
:rules="phoneRules"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-2">
|
||||
<q-btn
|
||||
type="submit"
|
||||
unelevated
|
||||
rounded
|
||||
color="primary"
|
||||
class="w-full py-3 font-bold text-base shadow-lg shadow-blue-500/20"
|
||||
:label="$t('common.save')"
|
||||
:loading="isProfileSaving"
|
||||
/>
|
||||
</div>
|
||||
</q-form>
|
||||
|
||||
</div> <!-- Close the wrapper div -->
|
||||
</div>
|
||||
<ProfileEditForm
|
||||
v-model="userData"
|
||||
:loading="isProfileSaving"
|
||||
@submit="handleUpdateProfile"
|
||||
@upload="handleFileUpload"
|
||||
/>
|
||||
|
||||
|
||||
<div class="card-premium p-8 h-fit">
|
||||
<h2 class="text-xl font-bold flex items-center gap-3 text-slate-900 dark:text-white mb-6">
|
||||
<q-icon name="lock" class="text-amber-500 text-2xl" />
|
||||
{{ $t('profile.security') }}
|
||||
</h2>
|
||||
|
||||
<q-form @submit="handleUpdatePassword" class="flex flex-col gap-6">
|
||||
<div class="text-sm text-slate-500 dark:text-slate-400 mb-2">
|
||||
{{ $t('profile.securityDesc') }}
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="text-xs font-bold text-slate-500 dark:text-slate-400 ml-1 uppercase">{{ $t('profile.currentPassword') }}</label>
|
||||
<q-input
|
||||
v-model="passwordForm.currentPassword"
|
||||
:type="showCurrentPassword ? 'text' : 'password'"
|
||||
outlined dense rounded
|
||||
class="premium-q-input"
|
||||
placeholder=""
|
||||
:rules="[val => !!val || $t('common.required')]"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
:name="showCurrentPassword ? 'visibility_off' : 'visibility'"
|
||||
class="cursor-pointer text-slate-400"
|
||||
@click="showCurrentPassword = !showCurrentPassword"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
<q-separator class="bg-slate-100 dark:bg-white/5 my-2" />
|
||||
|
||||
<div>
|
||||
<label class="text-xs font-bold text-slate-500 dark:text-slate-400 ml-1 uppercase">{{ $t('profile.newPassword') }}</label>
|
||||
<q-input
|
||||
v-model="passwordForm.newPassword"
|
||||
:type="showNewPassword ? 'text' : 'password'"
|
||||
outlined dense rounded
|
||||
class="premium-q-input"
|
||||
:placeholder="$t('profile.newPasswordHint')"
|
||||
:rules="passwordRules"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
:name="showNewPassword ? 'visibility_off' : 'visibility'"
|
||||
class="cursor-pointer text-slate-400"
|
||||
@click="showNewPassword = !showNewPassword"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="text-xs font-bold text-slate-500 dark:text-slate-400 ml-1 uppercase">{{ $t('profile.confirmNewPassword') }}</label>
|
||||
<q-input
|
||||
v-model="passwordForm.confirmPassword"
|
||||
:type="showConfirmPassword ? 'text' : 'password'"
|
||||
outlined dense rounded
|
||||
class="premium-q-input"
|
||||
:placeholder="$t('profile.confirmPasswordHint')"
|
||||
:rules="confirmPasswordRules"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
:name="showConfirmPassword ? 'visibility_off' : 'visibility'"
|
||||
class="cursor-pointer text-slate-400"
|
||||
@click="showConfirmPassword = !showConfirmPassword"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-2">
|
||||
<q-btn
|
||||
type="submit"
|
||||
unelevated
|
||||
rounded
|
||||
class="w-full py-3 font-bold text-base shadow-lg shadow-amber-500/20"
|
||||
style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white;"
|
||||
:label="$t('profile.changePasswordBtn')"
|
||||
:loading="isPasswordSaving"
|
||||
/>
|
||||
</div>
|
||||
</q-form>
|
||||
</div>
|
||||
<PasswordChangeForm
|
||||
v-model="passwordForm"
|
||||
:loading="isPasswordSaving"
|
||||
@submit="handleUpdatePassword"
|
||||
/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue