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
|
|
@ -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">×</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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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