Chengdong Zhang
0d0e10b97b
- Add tailwindcss v4 + @tailwindcss/vite to mall, shop-admin, admin - Add @vmall/shared/theme.css tokens with html[data-accent] presets - Add @vmall/ui kit (VBtn/VBadge/VField/VInput/VCard/VPanel/VTable/VPage, VAccentSwatch, useAccent) as a Nuxt module - Convert all three apps to kit + utilities; delete ui.css/mall.css and every <style scoped>; consoles get accent presets, mall locked to red - Fix VCard boolean prop default (padding) and PDP/store stale useAsyncData keys on param navigation - Archive adopt-tailwind-design-system; new frontend-ui capability spec
92 lines
3.4 KiB
Vue
92 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
import { ApiError } from "@vmall/shared";
|
|
|
|
const { t } = useI18n();
|
|
const { $api } = useNuxtApp();
|
|
const session = useSessionStore();
|
|
const router = useRouter();
|
|
|
|
const displayName = ref("");
|
|
const email = ref("");
|
|
const password = ref("");
|
|
const confirmPassword = ref("");
|
|
const errorKey = ref("");
|
|
const submitting = ref(false);
|
|
|
|
/** 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("/");
|
|
} catch (error) {
|
|
errorKey.value = error instanceof ApiError && error.status === 409
|
|
? "auth.emailTaken"
|
|
: "auth.requestFailed";
|
|
} finally {
|
|
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">
|
|
<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.registerTab") }}</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.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="-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.registerAction") }}
|
|
</VBtn>
|
|
</form>
|
|
<div class="mt-4 flex flex-wrap items-center gap-2 text-xs text-muted">
|
|
<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>
|
|
|
|
|