chamomind/elearning
7
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages 3 Wiki Activity Actions

feat: scaffold Nuxt 3 application with initial core pages, components, and comprehensive 'My Courses' view.

Browse source
This commit is contained in:
supalerk-ar66 2026-01-26 10:06:22 +07:00
parent af7890cc8f
commit 0c0121eac7
7 changed files with 308 additions and 238 deletions
Download patch file Download diff file Expand all files Collapse all files

48
Frontend-Learner/components/course/CourseCard.vue
View file

@ -122,21 +122,45 @@ const displayDescription = computed(() => getLocalizedText(props.description))
</div>
<!-- Actions -->
<button v-if="showViewDetails" class="btn-premium-primary w-full mt-auto dark:!text-white" @click="emit('viewDetails')">
{{ $t('menu.viewDetails') }}
</button>
<q-btn
v-if="showViewDetails"
unelevated
rounded
class="w-full mt-auto font-black"
style="background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white;"
:label="$t('menu.viewDetails')"
@click="emit('viewDetails')"
/>
<NuxtLink v-if="showContinue" :to="`/classroom/learning?course_id=${id}`" class="btn-premium-primary w-full mt-auto shadow-lg shadow-blue-600/20">
{{ $t('course.continueLearning') }}
</NuxtLink>
<q-btn
v-if="showContinue"
:to="`/classroom/learning?course_id=${id}`"
unelevated
rounded
class="w-full mt-auto font-black shadow-lg shadow-blue-600/20"
style="background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white;"
:label="$t('course.continueLearning')"
/>
<div v-if="completed && (showCertificate || showStudyAgain)" class="flex flex-col gap-2 mt-auto">
<NuxtLink v-if="showStudyAgain" :to="`/classroom/learning?course_id=${id}`" class="btn-premium-primary w-full dark:!text-white">
{{ $t('course.studyAgain') }}
</NuxtLink>
<button v-if="showCertificate" class="btn-premium-success w-full shadow-lg shadow-emerald-600/20" @click="emit('viewCertificate')">
{{ $t('course.downloadCertificate') }}
</button>
<q-btn
v-if="showStudyAgain"
:to="`/classroom/learning?course_id=${id}`"
unelevated
rounded
class="w-full font-black"
style="background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white;"
:label="$t('course.studyAgain')"
/>
<q-btn
v-if="showCertificate"
unelevated
rounded
class="w-full font-black shadow-lg shadow-emerald-600/20"
style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white;"
:label="$t('course.downloadCertificate')"
@click="emit('viewCertificate')"
/>
</div>
</div>
</div>

3
Frontend-Learner/nuxt.config.ts
View file

@ -33,6 +33,9 @@ export default defineNuxtConfig({
// การตั้งค่า Quasar Framework
quasar: {
extras: {
fontIcons: ["material-icons"],
},
plugins: ["Notify"], // เปิดใช้ Plugin Notify
config: {
brand: { // กำหนดชุดสีหลัก (Theme Colors)

1
Frontend-Learner/package-lock.json generated
View file

@ -10,6 +10,7 @@
"dependencies": {
"@heroicons/vue": "^2.2.0",
"@nuxtjs/tailwindcss": "^6.12.0",
"@quasar/extras": "^1.17.0",
"nuxt": "^3.11.2",
"nuxt-quasar-ui": "^3.0.0",
"quasar": "^2.15.2"

1
Frontend-Learner/package.json
View file

@ -12,6 +12,7 @@
"dependencies": {
"@heroicons/vue": "^2.2.0",
"@nuxtjs/tailwindcss": "^6.12.0",
"@quasar/extras": "^1.17.0",
"nuxt": "^3.11.2",
"nuxt-quasar-ui": "^3.0.0",
"quasar": "^2.15.2"

88
Frontend-Learner/pages/browse/discovery.vue
View file

@ -22,6 +22,8 @@ useHead({
const showDetail = ref(false);
// searchQuery: เก็บคำค้นหาที่ผู้ใช้พิมพ์
const searchQuery = ref("");
const sortOption = ref('เรียงตาม: ล่าสุด')
const sortOptions = ['เรียงตาม: ล่าสุด', 'ราคา: ต่ำไปสูง', 'ราคา: สูงไปต่ำ']
// isCategoryOpen: ควบคุมการเปิด/ปิดเมนูหมวดหมู่ด้านข้าง
const isCategoryOpen = ref(true);
@ -193,29 +195,32 @@ const { currentUser } = useAuth();
<!-- Right Side: Search & Sort -->
<div class="flex items-center gap-3">
<!-- Search Input -->
<div class="relative">
<input
v-model="searchQuery"
type="text"
class="pl-4 pr-10 py-2 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-900 dark:text-white focus:outline-none focus:border-slate-400 w-full md:w-64 text-sm"
placeholder="ค้นหาคอร์ส..."
/>
<svg xmlns="http://www.w3.org/2000/svg" class="absolute right-3 top-2.5 h-4 w-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</div>
<q-input
v-model="searchQuery"
dense
outlined
rounded
placeholder="ค้นหาคอร์ส..."
class="bg-white dark:bg-slate-800 w-full md:w-64"
bg-color="white"
dark:bg-color="slate-800"
>
<template v-slot:append>
<q-icon name="search" class="text-slate-400" />
</template>
</q-input>
<!-- Sort Dropdown (Dummy) -->
<div class="relative">
<select class="appearance-none pl-4 pr-10 py-2 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 text-sm focus:outline-none focus:border-slate-400 cursor-pointer">
<option>เรียงตาม: ล่าสุด</option>
<option>ราคา: ต่ำไปสูง</option>
<option>ราคา: สูงไปต่ำ</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-slate-500">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
</div>
</div>
<!-- Sort Dropdown -->
<q-select
v-model="sortOption"
:options="sortOptions"
dense
outlined
rounded
class="bg-white dark:bg-slate-800 w-40"
bg-color="white"
behavior="menu"
/>
</div>
</div>
@ -310,17 +315,17 @@ const { currentUser } = useAuth();
<!-- COURSE DETAIL VIEW: Detailed information about a specific course -->
<div v-else>
<button
@click="showDetail = false"
class="mb-6 inline-flex items-center gap-2 text-slate-500 hover:text-slate-900 dark:hover:text-white transition-colors font-medium"
>
<span>←</span> {{ $t('discovery.backToCatalog') }}
</button>
<q-btn
flat
icon="arrow_back"
:label="$t('discovery.backToCatalog')"
color="grey-7"
class="mb-6 font-medium"
@click="showDetail = false"
/>
<div v-if="isLoadingDetail" class="flex justify-center py-20">
<div class="spinner-border animate-spin inline-block w-8 h-8 border-4 border-blue-500 rounded-full border-t-transparent" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<q-spinner size="3rem" color="primary" />
</div>
<div v-else-if="selectedCourse" class="grid grid-cols-1 lg:grid-cols-12 gap-8">
@ -364,7 +369,7 @@ const { currentUser } = useAuth();
<div v-for="(chapter, index) in selectedCourse.chapters" :key="chapter.id" class="border border-slate-200 dark:border-slate-700 rounded-xl overflow-hidden">
<div class="bg-slate-50 dark:bg-slate-800/80 p-4 flex justify-between items-center cursor-pointer">
<div class="font-bold text-slate-800 dark:text-slate-200">
<span class="opacity-50 mr-2">Chapter {{ index + 1 }}</span>
<span class="opacity-50 mr-2">Chapter {{ Number(index) + 1 }}</span>
{{ getLocalizedText(chapter.title) }}
</div>
<span class="text-xs font-bold px-3 py-1 bg-white dark:bg-slate-700 rounded-full border border-slate-200 dark:border-slate-600">
@ -376,7 +381,7 @@ const { currentUser } = useAuth();
<div v-for="(lesson, lIndex) in chapter.lessons" :key="lesson.id" class="p-4 flex justify-between items-center hover:bg-slate-50 dark:hover:bg-slate-700/30 transition-colors">
<div class="flex items-center gap-3">
<div class="w-6 h-6 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center text-[10px] font-bold text-slate-500">
{{ lIndex + 1 }}
{{ Number(lIndex) + 1 }}
</div>
<span class="text-slate-700 dark:text-slate-300 font-medium text-sm">{{ getLocalizedText(lesson.title) }}</span>
</div>
@ -398,14 +403,19 @@ const { currentUser } = useAuth();
</h2>
</div>
<button
<q-btn
@click="handleEnroll(selectedCourse.id)"
class="w-full py-4 rounded-xl bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-bold text-lg shadow-lg hover:shadow-blue-500/30 hover:scale-[1.02] transform transition-all active:scale-95 disabled:opacity-70 disabled:cursor-not-allowed mb-4 flex items-center justify-center gap-2"
:disabled="isEnrolling"
unetab
unelevated
rounded
class="w-full py-3 text-lg font-bold bg-gradient-to-r from-blue-600 to-indigo-600 text-white shadow-lg"
:loading="isEnrolling"
:label="$t('course.enrollNow')"
>
<span v-if="isEnrolling" class="block w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin"></span>
{{ $t('course.enrollNow') }}
</button>
<template v-slot:loading>
<q-spinner-facebook />
</template>
</q-btn>
<div class="text-sm space-y-3 pt-4 border-t border-slate-100 dark:border-slate-700">
<div class="flex justify-between text-slate-600 dark:text-slate-400">

77
Frontend-Learner/pages/dashboard/my-courses.vue
View file

@ -94,25 +94,23 @@ const downloadCertificate = () => {
<!-- Filter Tabs -->
<div class="flex gap-2">
<button
<q-btn
v-for="filter in ['all', 'progress', 'completed']"
:key="filter"
@click="activeFilter = filter as any"
class="px-8 py-2.5 rounded-full text-base font-bold transition-all"
:class="activeFilter === filter
? 'bg-blue-600 text-white shadow-lg shadow-blue-500/30'
: 'text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-800'"
>
{{ $t(`myCourses.filter${filter.charAt(0).toUpperCase() + filter.slice(1)}`) }}
</button>
rounded
unelevated
:color="activeFilter === filter ? 'primary' : 'white'"
:text-color="activeFilter === filter ? 'white' : 'grey-8'"
class="font-bold px-6"
:label="$t(`myCourses.filter${filter.charAt(0).toUpperCase() + filter.slice(1)}`)"
/>
</div>
</div>
<!-- Courses Grid -->
<div v-if="isLoading" class="flex justify-center py-20">
<div class="spinner-border animate-spin inline-block w-8 h-8 border-4 border-blue-500 rounded-full border-t-transparent" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<q-spinner size="3rem" color="primary" />
</div>
<div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<template v-for="course in enrolledCourses" :key="course.id">
@ -149,11 +147,8 @@ const downloadCertificate = () => {
</div>
<!-- MODAL: Enrollment Success -->
<div
v-if="showEnrollModal"
class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm"
>
<div class="bg-white dark:bg-slate-800 rounded-3xl shadow-2xl p-8 max-w-sm w-full text-center relative overflow-hidden">
<q-dialog v-model="showEnrollModal" backdrop-filter="blur(4px)">
<q-card class="rounded-[1.5rem] shadow-2xl p-8 max-w-sm w-full text-center relative overflow-hidden bg-white dark:bg-slate-800">
<div class="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-green-400 to-emerald-600"></div>
<div class="w-16 h-16 bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400 rounded-full flex items-center justify-center text-3xl mx-auto mb-6">
✓
@ -161,24 +156,31 @@ const downloadCertificate = () => {
<h2 class="text-2xl font-bold mb-2 text-slate-900 dark:text-white">{{ $t('enrollment.successTitle') }}</h2>
<p class="text-slate-500 dark:text-slate-400 mb-8">{{ $t('enrollment.successDesc') }}</p>
<div class="flex flex-col gap-3">
<NuxtLink :to="`/classroom/learning?course_id=${route.query.course_id}`" class="w-full py-3 bg-blue-600 text-white rounded-xl font-bold hover:bg-blue-700 transition-colors shadow-lg shadow-blue-500/30">
{{ $t('enrollment.startNow') }}
</NuxtLink>
<button class="w-full py-3 text-slate-500 font-bold hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-xl transition-colors" @click="showEnrollModal = false">
{{ $t('enrollment.later') }}
</button>
<q-btn
:to="`/classroom/learning?course_id=${route.query.course_id}`"
unelevated
rounded
color="primary"
class="w-full py-3 text-lg font-bold shadow-lg"
:label="$t('enrollment.startNow')"
/>
<q-btn
flat
rounded
color="grey-7"
class="w-full py-3 font-bold"
:label="$t('enrollment.later')"
@click="showEnrollModal = false"
/>
</div>
</div>
</div>
</q-card>
</q-dialog>
<!-- MODAL: Certificate Preview -->
<div
v-if="showCertModal"
class="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/80 backdrop-blur-md"
>
<div class="relative bg-white text-slate-900 w-full max-w-2xl aspect-[1.414/1] shadow-2xl rounded-sm p-12 flex flex-col items-center text-center overflow-hidden">
<q-dialog v-model="showCertModal" backdrop-filter="blur(8px)" full-width full-height>
<div class="relative bg-white text-slate-900 w-full max-w-5xl aspect-[1.414/1] shadow-2xl rounded-sm p-12 flex flex-col items-center text-center overflow-hidden m-auto">
<!-- Close Button -->
<button class="absolute top-4 right-4 text-slate-400 hover:text-slate-600 text-3xl leading-none" @click="showCertModal = false">&times;</button>
<q-btn icon="close" flat round dense class="absolute top-4 right-4 text-slate-400" @click="showCertModal = false" />
<!-- Border Decoration -->
<div class="absolute inset-4 border-4 border-double border-slate-200 pointer-events-none"></div>
@ -216,13 +218,18 @@ const downloadCertificate = () => {
</div>
<div class="absolute bottom-6 left-0 w-full text-center">
<button class="bg-blue-600 text-white px-6 py-2 rounded-full shadow-lg hover:bg-blue-700 font-bold transition-transform hover:scale-105 active:scale-95 flex items-center gap-2 mx-auto" @click="downloadCertificate">
<svg 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
{{ $t('certificate.downloadPDF') }}
</button>
<q-btn
unelevated
rounded
color="primary"
icon="download"
:label="$t('certificate.downloadPDF')"
class="font-bold px-6"
@click="downloadCertificate"
/>
</div>
</div>
</div>
</q-dialog>
</div>
</template>

328
Frontend-Learner/pages/dashboard/profile.vue
View file

@ -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) {