vmall/apps/mall/pages/forgot-password.vue

<script setup lang="ts">
const { t } = useI18n();
const email = ref("");
const password = ref("");
const confirmPassword = ref("");
const code = ref("");
const errorKey = ref("");
const success = ref(false);
const submitting = ref(false);
const countdown = ref(0);
let timer: ReturnType<typeof setInterval> | undefined;

function startCountdown(): void {
  if (countdown.value > 0) return;
  countdown.value = 60;
  timer = setInterval(() => {
    countdown.value -= 1;
    if (countdown.value <= 0 && timer) {
      clearInterval(timer);
      timer = undefined;
    }
  }, 1000);
}

onUnmounted(() => {
  if (timer) clearInterval(timer);
});

function validate(): boolean {
  if (!email.value || !password.value || !confirmPassword.value || !code.value) {
    errorKey.value = "auth.validationRequired";
    return false;
  }
  if (!/^\S+@\S+\.\S+$/.test(email.value)) {
    errorKey.value = "auth.validationEmail";
    return false;
  }
  // Matches the shared validationPassword message and the auth API's rule.
  if (password.value.length < 8) {
    errorKey.value = "auth.validationPassword";
    return false;
  }
  if (password.value !== confirmPassword.value) {
    errorKey.value = "auth.validationMismatch";
    return false;
  }
  return true;
}

async function submit(): Promise<void> {
  errorKey.value = "";
  if (!validate()) return;
  submitting.value = true;
  await new Promise<void>((resolve) => setTimeout(resolve, 180));
  success.value = true;
  submitting.value = false;
}
</script>

<template>
  <section class="min-h-screen bg-bg px-5 py-10 font-sans text-text">
    <VCard class="mx-auto my-10 max-w-[420px] p-6 sm:p-10">
      <template v-if="success">
        <div class="pt-12 text-center">
          <div class="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-success text-3xl text-white">✓</div>
          <h1 class="m-0 text-xl font-semibold">{{ t("auth.resetSuccess") }}</h1>
          <p class="my-3.5 mb-7 text-sm leading-relaxed text-muted">{{ t("auth.resetSuccessHint") }}</p>
          <NuxtLink class="block" to="/login"><VBtn class="w-full" variant="primary">{{ t("auth.loginNow") }}</VBtn></NuxtLink>
        </div>
      </template>
      <template v-else>
        <div class="mb-6 flex items-baseline gap-4 border-b border-border pb-3.5">
          <h1 class="m-0 text-xl font-semibold">{{ t("auth.forgotTab") }}</h1>
          <NuxtLink class="text-sm text-primary hover:text-primary-hover" to="/login">{{ t("auth.loginTab") }}</NuxtLink>
        </div>
        <form @submit.prevent="submit">
          <VField :label="t('common.email')">
            <VInput v-model.trim="email" type="email" autocomplete="email" :placeholder="t('auth.emailPlaceholder')" />
          </VField>
          <VField :label="t('auth.newPassword')">
            <VInput v-model="password" type="password" autocomplete="new-password" :placeholder="t('auth.passwordPlaceholder')" />
          </VField>
          <VField :label="t('auth.confirmPassword')">
            <VInput v-model="confirmPassword" type="password" autocomplete="new-password" :placeholder="t('auth.confirmPasswordPlaceholder')" />
          </VField>
          <VField :label="t('auth.smsCode')">
            <div class="flex gap-2">
              <VInput v-model.trim="code" type="text" class="min-w-0 flex-1" :placeholder="t('auth.smsCodePlaceholder')" />
              <VBtn class="shrink-0 whitespace-nowrap" type="button" size="sm" :disabled="countdown > 0" @click="startCountdown">
                {{ countdown > 0 ? t("auth.codeCountdown", { n: countdown }) : t("auth.getCode") }}
              </VBtn>
            </div>
          </VField>
          <p v-if="errorKey" class="-mt-1 mb-3 text-xs text-danger">{{ t(errorKey) }}</p>
          <VBtn class="mt-1 w-full" variant="primary" type="submit" :disabled="submitting">{{ t("auth.resetAction") }}</VBtn>
        </form>
        <div class="mt-4 text-center text-xs">
          <NuxtLink class="text-primary hover:text-primary-hover" to="/login">{{ t("auth.loginNow") }}</NuxtLink>
        </div>
      </template>
    </VCard>
  </section>
</template>