feat: scaffold Nuxt 3 application with initial core pages, components, and comprehensive 'My Courses' view.
This commit is contained in:
supalerk-ar66
parent
af7890cc8f
commit
0c0121eac7
7 changed files with 308 additions and 238 deletions
|
|
@ -165,12 +165,16 @@ const saveProfile = async () => {
|
|||
<div class="flex items-center justify-between mb-10">
|
||||
<h1 class="text-3xl font-black text-slate-900 dark:text-white">{{ $t('profile.myProfile') }}</h1>
|
||||
<div class="flex items-center gap-6">
|
||||
<button v-if="!isEditing" class="btn-premium-edit" @click="toggleEdit(true)">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
|
||||
</svg>
|
||||
{{ $t('profile.editProfile') }}
|
||||
</button>
|
||||
<q-btn
|
||||
v-if="!isEditing"
|
||||
unelevated
|
||||
rounded
|
||||
color="primary"
|
||||
class="font-bold"
|
||||
icon="edit"
|
||||
:label="$t('profile.editProfile')"
|
||||
@click="toggleEdit(true)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -219,11 +223,7 @@ const saveProfile = async () => {
|
|||
<!-- EDIT MODE: Edit Profile Form -->
|
||||
<div v-else class="card-premium p-8 md:p-12">
|
||||
<div class="flex items-center gap-4 mb-10">
|
||||
<button class="p-2 hover:bg-white/5 rounded-xl transition-colors" @click="toggleEdit(false)">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
||||
</svg>
|
||||
</button>
|
||||
<q-btn flat round icon="arrow_back" color="grey-7" @click="toggleEdit(false)" />
|
||||
<h2 class="text-2xl font-black text-slate-900 dark:text-white">{{ $t('profile.editPersonalDesc') }}</h2>
|
||||
</div>
|
||||
|
||||
|
|
@ -248,65 +248,91 @@ const saveProfile = async () => {
|
|||
<div class="text-center md:text-left">
|
||||
<h3 class="font-black text-slate-900 dark:text-white mb-2">{{ $t('profile.yourAvatar') }}</h3>
|
||||
<p class="text-xs text-slate-500 mb-4 uppercase tracking-widest font-bold">{{ $t('profile.avatarHint') }}</p>
|
||||
<button class="btn-upload" @click="triggerUpload">{{ $t('profile.uploadNew') }}</button>
|
||||
<q-btn
|
||||
unelevated
|
||||
rounded
|
||||
color="primary"
|
||||
size="sm"
|
||||
class="font-bold px-4"
|
||||
:label="$t('profile.uploadNew')"
|
||||
@click="triggerUpload"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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-500 dark:text-slate-300">{{ $t('profile.prefix') }}</label>
|
||||
<select v-model="userData.prefix" class="premium-input w-full">
|
||||
<option>นาย</option>
|
||||
<option>นาง</option>
|
||||
<option>นางสาว</option>
|
||||
</select>
|
||||
<div class="space-y-1">
|
||||
<div class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300 ml-1">{{ $t('profile.prefix') }}</div>
|
||||
<q-select
|
||||
v-model="userData.prefix"
|
||||
:options="['นาย', 'นาง', 'นางสาว']"
|
||||
outlined
|
||||
dense
|
||||
rounded
|
||||
bg-color="white"
|
||||
class="premium-q-input"
|
||||
popup-content-class="text-slate-900"
|
||||
/>
|
||||
</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-500 dark:text-slate-300">{{ $t('profile.firstName') }}</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 class="space-y-1">
|
||||
<div class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300 ml-1">{{ $t('profile.firstName') }}</div>
|
||||
<q-input
|
||||
v-model="userData.firstName"
|
||||
outlined
|
||||
dense
|
||||
rounded
|
||||
bg-color="white"
|
||||
class="premium-q-input"
|
||||
:error="!!errors.firstName"
|
||||
:error-message="errors.firstName"
|
||||
@update:model-value="clearFieldError('firstName')"
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300">{{ $t('profile.lastName') }}</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 class="space-y-1">
|
||||
<div class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300 ml-1">{{ $t('profile.lastName') }}</div>
|
||||
<q-input
|
||||
v-model="userData.lastName"
|
||||
outlined
|
||||
dense
|
||||
rounded
|
||||
bg-color="white"
|
||||
class="premium-q-input"
|
||||
:error="!!errors.lastName"
|
||||
:error-message="errors.lastName"
|
||||
@update:model-value="clearFieldError('lastName')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300">{{ $t('profile.email') }}</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 class="space-y-1">
|
||||
<div class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300 ml-1">{{ $t('profile.email') }}</div>
|
||||
<q-input
|
||||
v-model="userData.email"
|
||||
outlined
|
||||
dense
|
||||
rounded
|
||||
bg-color="white"
|
||||
class="premium-q-input"
|
||||
:error="!!errors.email"
|
||||
:error-message="errors.email"
|
||||
@update:model-value="clearFieldError('email')"
|
||||
type="email"
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300">{{ $t('profile.phone') }}</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 class="space-y-1">
|
||||
<div class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300 ml-1">{{ $t('profile.phone') }}</div>
|
||||
<q-input
|
||||
v-model="userData.phone"
|
||||
outlined
|
||||
dense
|
||||
rounded
|
||||
bg-color="white"
|
||||
class="premium-q-input"
|
||||
:error="!!errors.phone"
|
||||
:error-message="errors.phone"
|
||||
@update:model-value="clearFieldError('phone')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -314,92 +340,97 @@ const saveProfile = async () => {
|
|||
<div class="border-t border-slate-200 dark:border-white/5 pt-10 mb-10">
|
||||
<h3 class="text-lg font-black text-slate-900 dark:text-white mb-6">{{ $t('profile.security') }}</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-500 dark:text-slate-300">{{ $t('profile.currentPassword') }}</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
v-model="passwordForm.currentPassword"
|
||||
:type="showCurrentPassword ? 'text' : 'password'"
|
||||
class="premium-input w-full pr-12"
|
||||
placeholder="••••••••"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
@click="showCurrentPassword = !showCurrentPassword"
|
||||
class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 transition-colors"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg v-if="!showCurrentPassword" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
||||
</svg>
|
||||
<svg v-else xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div class="space-y-1">
|
||||
<div class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300 ml-1">{{ $t('profile.currentPassword') }}</div>
|
||||
<q-input
|
||||
v-model="passwordForm.currentPassword"
|
||||
:type="showCurrentPassword ? 'text' : 'password'"
|
||||
outlined
|
||||
dense
|
||||
rounded
|
||||
bg-color="white"
|
||||
class="premium-q-input"
|
||||
placeholder="••••••••"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
:name="showCurrentPassword ? 'visibility_off' : 'visibility'"
|
||||
class="cursor-pointer"
|
||||
@click="showCurrentPassword = !showCurrentPassword"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300">{{ $t('profile.newPassword') }}</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
v-model="passwordForm.newPassword"
|
||||
:type="showNewPassword ? 'text' : 'password'"
|
||||
class="premium-input w-full pr-12"
|
||||
:class="{ '!border-red-500': errors.newPassword }"
|
||||
@input="clearFieldError('newPassword')"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
@click="showNewPassword = !showNewPassword"
|
||||
class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 transition-colors"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg v-if="!showNewPassword" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
||||
</svg>
|
||||
<svg v-else xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<span v-if="errors.newPassword" class="text-red-500 text-[10px] mt-1 font-bold">{{ errors.newPassword }}</span>
|
||||
<div class="space-y-1">
|
||||
<div class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300 ml-1">{{ $t('profile.newPassword') }}</div>
|
||||
<q-input
|
||||
v-model="passwordForm.newPassword"
|
||||
:type="showNewPassword ? 'text' : 'password'"
|
||||
outlined
|
||||
dense
|
||||
rounded
|
||||
bg-color="white"
|
||||
class="premium-q-input"
|
||||
:error="!!errors.newPassword"
|
||||
:error-message="errors.newPassword"
|
||||
@update:model-value="clearFieldError('newPassword')"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
:name="showNewPassword ? 'visibility_off' : 'visibility'"
|
||||
class="cursor-pointer"
|
||||
@click="showNewPassword = !showNewPassword"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300">{{ $t('profile.confirmNewPassword') }}</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
v-model="passwordForm.confirmPassword"
|
||||
:type="showConfirmPassword ? 'text' : 'password'"
|
||||
class="premium-input w-full pr-12"
|
||||
:class="{ '!border-red-500': errors.confirmPassword }"
|
||||
@input="clearFieldError('confirmPassword')"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
@click="showConfirmPassword = !showConfirmPassword"
|
||||
class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 transition-colors"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg v-if="!showConfirmPassword" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
||||
</svg>
|
||||
<svg v-else xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<span v-if="errors.confirmPassword" class="text-red-500 text-[10px] mt-1 font-bold">{{ errors.confirmPassword }}</span>
|
||||
<div class="space-y-1">
|
||||
<div class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300 ml-1">{{ $t('profile.confirmNewPassword') }}</div>
|
||||
<q-input
|
||||
v-model="passwordForm.confirmPassword"
|
||||
:type="showConfirmPassword ? 'text' : 'password'"
|
||||
outlined
|
||||
dense
|
||||
rounded
|
||||
bg-color="white"
|
||||
class="premium-q-input"
|
||||
:error="!!errors.confirmPassword"
|
||||
:error-message="errors.confirmPassword"
|
||||
@update:model-value="clearFieldError('confirmPassword')"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
:name="showConfirmPassword ? 'visibility_off' : 'visibility'"
|
||||
class="cursor-pointer"
|
||||
@click="showConfirmPassword = !showConfirmPassword"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex flex-col md:flex-row gap-4 pt-6 border-t border-white/5">
|
||||
<button class="btn-save-premium flex-1" @click="saveProfile">{{ $t('common.save') }}</button>
|
||||
<button class="btn-cancel-premium md:w-32" @click="toggleEdit(false)">{{ $t('common.cancel') }}</button>
|
||||
<q-btn
|
||||
unelevated
|
||||
rounded
|
||||
color="primary"
|
||||
class="flex-1 py-3 text-lg font-bold shadow-lg"
|
||||
:label="$t('common.save')"
|
||||
@click="saveProfile"
|
||||
/>
|
||||
<q-btn
|
||||
unelevated
|
||||
rounded
|
||||
color="grey-3"
|
||||
text-color="grey-9"
|
||||
class="md:w-32 py-3 font-bold"
|
||||
:label="$t('common.cancel')"
|
||||
@click="toggleEdit(false)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -427,24 +458,17 @@ const saveProfile = async () => {
|
|||
@apply text-lg font-bold text-slate-900 dark:text-white;
|
||||
}
|
||||
|
||||
.premium-input {
|
||||
@apply bg-slate-50 dark:bg-slate-900 border border-slate-200 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;
|
||||
.premium-q-input :deep(.q-field__control) {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.btn-premium-edit {
|
||||
@apply flex items-center px-6 py-3 bg-blue-100 dark:bg-blue-600/10 text-blue-700 dark:text-blue-400 rounded-2xl text-sm font-black hover:bg-blue-600 hover:text-white transition-all border border-blue-300 dark:border-blue-500/20;
|
||||
.dark .premium-q-input :deep(.q-field__control) {
|
||||
background: #1e293b;
|
||||
}
|
||||
|
||||
.btn-upload {
|
||||
@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;
|
||||
.dark .premium-q-input :deep(.q-field__native) {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-save-premium {
|
||||
@apply bg-blue-600 text-white rounded-2xl py-4 font-black hover:bg-blue-500 transition-all shadow-lg dark:shadow-blue-600/20;
|
||||
}
|
||||
|
||||
.btn-cancel-premium {
|
||||
@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;
|
||||
.dark .premium-q-input :deep(.q-field__label) {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue