vmall/apps/mall/pages/register.vue

<script setup lang="ts">
import { ApiError } from "@vmall/shared";

const { t } = useI18n();
const { $api } = useNuxtApp();
const session = useSessionStore();
const router = useRouter();
const route = useRoute();

const displayName = ref("");
const email = ref("");
const password = ref("");
const confirmPassword = ref("");
const errorKey = ref("");
const submitting = ref(false);

/**
 * Where to go after registering. Same-origin absolute paths only, so a crafted
 * query cannot turn registration into an open redirect.
 */
const redirectTarget = computed((): string => {
  const raw = route.query.redirect;
  const value = Array.isArray(raw) ? raw[0] : raw;
  return typeof value === "string" && value.startsWith("/") && !value.startsWith("//")
    ? value
    : "/";
});

/** Mirrors the auth API's rule so a short password fails here, not as a 400. */
const MIN_PASSWORD_LENGTH = 8;

function validate(): boolean {
  if (!displayName.value || !email.value || !password.value || !confirmPassword.value) {
    errorKey.value = "auth.validationRequired";
    return false;
  }
  if (!/^\S+@\S+\.\S+$/.test(email.value)) {
    errorKey.value = "auth.validationEmail";
    return false;
  }
  if (password.value.length < MIN_PASSWORD_LENGTH) {
    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;
  try {
    const auth = await $api.register(email.value, password.value, displayName.value);
    session.setAuth(auth);
    await router.push(redirectTarget.value);
  } catch (error) {
    errorKey.value =
      error instanceof ApiError && error.status === 409 ? "auth.emailTaken" : "auth.requestFailed";
  } finally {
    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">
      <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.registerTab") }}</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.displayName')">
          <VInput
            v-model.trim="displayName"
            type="text"
            autocomplete="name"
            :placeholder="t('auth.displayNamePlaceholder')"
          />
        </VField>
        <VField :label="t('common.email')">
          <VInput
            v-model.trim="email"
            type="email"
            autocomplete="email"
            :placeholder="t('auth.emailPlaceholder')"
          />
        </VField>
        <VField :label="t('common.password')">
          <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>
        <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.registerAction") }}
        </VBtn>
      </form>
      <div class="text-muted mt-4 flex flex-wrap items-center gap-2 text-xs">
        <span>{{ t("auth.haveAccount") }}</span>
        <NuxtLink class="text-primary hover:text-primary-hover" to="/login">{{
          t("auth.loginNow")
        }}</NuxtLink>
        <NuxtLink class="text-primary hover:text-primary-hover" to="/forgot-password">{{
          t("auth.forgotPassword")
        }}</NuxtLink>
      </div>
    </VCard>
  </section>
</template>