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
150
Frontend-Learner/components/profile/PasswordChangeForm.vue
Normal file
150
Frontend-Learner/components/profile/PasswordChangeForm.vue
Normal file
|
|
@ -0,0 +1,150 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file PasswordChangeForm.vue
|
||||
* @description From for changing user password
|
||||
*/
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: any; // passwordForm (currentPassword, newPassword, confirmPassword)
|
||||
loading: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: any): void;
|
||||
(e: 'submit'): void;
|
||||
}>();
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const passwordRules = [
|
||||
(val: string) => !!val || t('common.required'),
|
||||
(val: string) => val.length >= 6 || t('common.passwordTooShort'),
|
||||
(val: string) => val !== props.modelValue.currentPassword || 'รหัสผ่านใหม่ต้องไม่ซ้ำกับรหัสผ่านปัจจุบัน'
|
||||
];
|
||||
|
||||
const confirmPasswordRules = [
|
||||
(val: string) => !!val || t('common.required'),
|
||||
(val: string) => val === props.modelValue.newPassword || t('common.passwordsDoNotMatch')
|
||||
];
|
||||
|
||||
const showCurrentPassword = ref(false);
|
||||
const showNewPassword = ref(false);
|
||||
const showConfirmPassword = ref(false);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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="emit('submit')" 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="modelValue.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="modelValue.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="modelValue.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="loading"
|
||||
/>
|
||||
</div>
|
||||
</q-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.card-premium {
|
||||
@apply bg-white dark:bg-[#1e293b] border-slate-200 dark:border-white/5;
|
||||
border-radius: 1.5rem;
|
||||
border-width: 1px;
|
||||
box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.dark .card-premium {
|
||||
box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.premium-q-input :deep(.q-field__control) {
|
||||
border-radius: 12px;
|
||||
}
|
||||
.dark .premium-q-input :deep(.q-field__control) {
|
||||
background: #0f172a;
|
||||
}
|
||||
.dark .premium-q-input :deep(.q-field__native) {
|
||||
color: white;
|
||||
}
|
||||
.dark .premium-q-input :deep(.q-field__label) {
|
||||
color: #94a3b8;
|
||||
}
|
||||
</style>
|
||||
214
Frontend-Learner/components/profile/ProfileEditForm.vue
Normal file
214
Frontend-Learner/components/profile/ProfileEditForm.vue
Normal file
|
|
@ -0,0 +1,214 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file ProfileEditForm.vue
|
||||
* @description From for editing user personal information
|
||||
*/
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: any; // userData (firstName, lastName, phone, etc.)
|
||||
loading: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: any): void;
|
||||
(e: 'submit'): void;
|
||||
(e: 'upload', file: File): void;
|
||||
}>();
|
||||
|
||||
const { t } = useI18n();
|
||||
const fileInput = ref<HTMLInputElement | null>(null);
|
||||
|
||||
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 triggerUpload = () => {
|
||||
fileInput.value?.click();
|
||||
};
|
||||
|
||||
const handleFileUpload = (event: Event) => {
|
||||
const target = event.target as HTMLInputElement;
|
||||
if (target.files && target.files[0]) {
|
||||
emit('upload', target.files[0]);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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="modelValue.photoURL"
|
||||
:first-name="modelValue.firstName"
|
||||
:last-name="modelValue.lastName"
|
||||
size="80"
|
||||
class="rounded-2xl border-2 border-slate-100 dark:border-white/10"
|
||||
/>
|
||||
|
||||
<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="modelValue.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="emit('submit')" 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="modelValue.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="modelValue.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="modelValue.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="modelValue.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="modelValue.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="loading"
|
||||
/>
|
||||
</div>
|
||||
</q-form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.card-premium {
|
||||
@apply bg-white dark:bg-[#1e293b] border-slate-200 dark:border-white/5;
|
||||
border-radius: 1.5rem;
|
||||
border-width: 1px;
|
||||
box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.dark .card-premium {
|
||||
box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.premium-q-input :deep(.q-field__control) {
|
||||
border-radius: 12px;
|
||||
}
|
||||
.dark .premium-q-input :deep(.q-field__control) {
|
||||
background: #0f172a;
|
||||
}
|
||||
.dark .premium-q-input :deep(.q-field__native) {
|
||||
color: white;
|
||||
}
|
||||
.dark .premium-q-input :deep(.q-field__label) {
|
||||
color: #94a3b8;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue