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="bg-bg text-text min-h-screen px-5 py-10 font-sans">
    <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="bg-success mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full text-3xl text-white"
          >
            ✓
          </div>
          <h1 class="m-0 text-xl font-semibold">{{ t("auth.resetSuccess") }}</h1>
          <p class="text-muted my-3.5 mb-7 text-sm leading-relaxed">
            {{ 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="border-border mb-6 flex items-baseline gap-4 border-b pb-3.5">
          <h1 class="m-0 text-xl font-semibold">{{ t("auth.forgotTab") }}</h1>
          <NuxtLink class="text-primary hover:text-primary-hover text-sm" 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="text-danger -mt-1 mb-3 text-xs">{{ 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>