elearning/Frontend-Learner/components/profile/PasswordChangeForm.vue

<script setup lang="ts">
/**
 * @file PasswordChangeForm.vue
 * @description From for changing user password
 */

const props = defineProps<{
  modelValue: any; // passwordForm (currentPassword, newPassword, confirmPassword)
  loading: boolean;
  flat?: 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="[!flat ? 'card-premium p-6 md:p-8' : '']" class="h-fit">
        <div v-if="!flat" class="flex items-center gap-3 mb-8">
            <div class="w-10 h-10 rounded-xl bg-amber-50 dark:bg-amber-900/30 flex items-center justify-center">
                <q-icon name="lock" class="text-amber-600 dark:text-amber-400 text-xl" />
            </div>
            <h2 class="text-xl font-black text-slate-900 dark:text-white">
                {{ $t('profile.security') }}
            </h2>
        </div>
        
        <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>