create-nuxt-base 2.1.1 → 2.1.2

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [2.1.2](https://github.com/lenneTech/nuxt-base-starter/compare/v2.1.1...v2.1.2) (2026-01-24)
+
+
+### Bug Fixes
+
+* **forms:** restore UForm/UAuthForm with Valibot schema validation ([aa5e93c](https://github.com/lenneTech/nuxt-base-starter/commit/aa5e93cdd19193cc4dd1153fc4f629407b0273f0))
+
 ### [2.1.1](https://github.com/lenneTech/nuxt-base-starter/compare/v2.1.0...v2.1.1) (2026-01-24)
 
 

package/nuxt-base-template/app/pages/app/settings/security.vue

@@ -2,6 +2,11 @@
 // ============================================================================
 // Imports
 // ============================================================================
+import type { FormSubmitEvent } from '@nuxt/ui';
+import type { InferOutput } from 'valibot';
+
+import * as v from 'valibot';
+
 import ModalBackupCodes from '~/components/Modal/ModalBackupCodes.vue';
 
 // ============================================================================
@@ -34,10 +39,21 @@ const passkeyLoading = ref<boolean>(false);
 const newPasskeyName = ref<string>('');
 const showAddPasskey = ref<boolean>(false);
 
-// Form states - using reactive for direct v-model binding
-const enable2FAPassword = ref('');
-const disable2FAPassword = ref('');
-const totpCode = ref('');
+// Form states for UForm (required for proper data binding)
+const enable2FAForm = reactive({ password: '' });
+const disable2FAForm = reactive({ password: '' });
+const totpForm = reactive({ code: '' });
+
+const passwordSchema = v.object({
+  password: v.pipe(v.string('Passwort ist erforderlich'), v.minLength(1, 'Passwort ist erforderlich')),
+});
+
+const totpSchema = v.object({
+  code: v.pipe(v.string('Code ist erforderlich'), v.length(6, 'Code muss 6 Ziffern haben')),
+});
+
+type PasswordSchema = InferOutput<typeof passwordSchema>;
+type TotpSchema = InferOutput<typeof totpSchema>;
 
 // ============================================================================
 // Lifecycle Hooks
@@ -114,21 +130,12 @@ async function deletePasskey(id: string): Promise<void> {
   }
 }
 
-async function disable2FA(): Promise<void> {
-  if (!disable2FAPassword.value) {
-    toast.add({
-      color: 'error',
-      description: 'Passwort ist erforderlich',
-      title: 'Validierungsfehler',
-    });
-    return;
-  }
-
+async function disable2FA(payload: FormSubmitEvent<PasswordSchema>): Promise<void> {
   loading.value = true;
 
   try {
     const { error } = await authClient.twoFactor.disable({
-      password: disable2FAPassword.value,
+      password: payload.data.password,
     });
 
     if (error) {
@@ -152,27 +159,18 @@ async function disable2FA(): Promise<void> {
     });
 
     show2FADisable.value = false;
-    disable2FAPassword.value = '';
+    disable2FAForm.password = '';
   } finally {
     loading.value = false;
   }
 }
 
-async function enable2FA(): Promise<void> {
-  if (!enable2FAPassword.value) {
-    toast.add({
-      color: 'error',
-      description: 'Passwort ist erforderlich',
-      title: 'Validierungsfehler',
-    });
-    return;
-  }
-
+async function enable2FA(payload: FormSubmitEvent<PasswordSchema>): Promise<void> {
   loading.value = true;
 
   try {
     const { data, error } = await authClient.twoFactor.enable({
-      password: enable2FAPassword.value,
+      password: payload.data.password,
     });
 
     if (error) {
@@ -187,7 +185,7 @@ async function enable2FA(): Promise<void> {
     totpUri.value = data?.totpURI ?? '';
     backupCodes.value = data?.backupCodes ?? [];
     showTotpSetup.value = true;
-    enable2FAPassword.value = '';
+    enable2FAForm.password = '';
   } finally {
     loading.value = false;
   }
@@ -220,21 +218,12 @@ async function openBackupCodesModal(codes: string[] = []): Promise<void> {
   await modal.open();
 }
 
-async function verifyTotp(): Promise<void> {
-  if (!totpCode.value || totpCode.value.length !== 6) {
-    toast.add({
-      color: 'error',
-      description: 'Code muss 6 Ziffern haben',
-      title: 'Validierungsfehler',
-    });
-    return;
-  }
-
+async function verifyTotp(payload: FormSubmitEvent<TotpSchema>): Promise<void> {
   loading.value = true;
 
   try {
     const { error } = await authClient.twoFactor.verifyTotp({
-      code: totpCode.value,
+      code: payload.data.code,
     });
 
     if (error) {
@@ -258,7 +247,7 @@ async function verifyTotp(): Promise<void> {
     });
 
     showTotpSetup.value = false;
-    totpCode.value = '';
+    totpForm.code = '';
     await openBackupCodesModal(backupCodes.value);
   } finally {
     loading.value = false;
@@ -299,12 +288,12 @@ async function verifyTotp(): Promise<void> {
         </div>
 
         <template v-if="!is2FAEnabled && !showTotpSetup">
-          <form class="space-y-4" @submit.prevent="enable2FA">
-            <UFormField label="Passwort bestätigen" name="password" class="w-full">
-              <UInput v-model="enable2FAPassword" type="password" placeholder="Dein Passwort" class="w-full" />
+          <UForm :schema="passwordSchema" :state="enable2FAForm" class="space-y-4" @submit="enable2FA">
+            <UFormField label="Passwort bestätigen" name="password">
+              <UInput v-model="enable2FAForm.password" type="password" placeholder="Dein Passwort" />
             </UFormField>
             <UButton type="submit" :loading="loading"> 2FA aktivieren </UButton>
-          </form>
+          </UForm>
         </template>
 
         <template v-if="showTotpSetup">
@@ -315,15 +304,15 @@ async function verifyTotp(): Promise<void> {
               <img v-if="totpUri" :src="`https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(totpUri)}`" alt="TOTP QR Code" class="rounded-lg" />
             </div>
 
-            <form class="space-y-4" @submit.prevent="verifyTotp">
-              <UFormField label="Verifizierungscode" name="code" class="w-full">
-                <UInput v-model="totpCode" placeholder="000000" class="w-full text-center font-mono" />
+            <UForm :schema="totpSchema" :state="totpForm" class="space-y-4" @submit="verifyTotp">
+              <UFormField label="Verifizierungscode" name="code">
+                <UInput v-model="totpForm.code" placeholder="000000" class="text-center font-mono" />
               </UFormField>
               <div class="flex gap-2">
                 <UButton type="submit" :loading="loading"> Verifizieren </UButton>
                 <UButton variant="outline" color="neutral" @click="showTotpSetup = false"> Abbrechen </UButton>
               </div>
-            </form>
+            </UForm>
           </div>
         </template>
 
@@ -335,16 +324,16 @@ async function verifyTotp(): Promise<void> {
         </template>
 
         <template v-if="show2FADisable">
-          <form class="space-y-4" @submit.prevent="disable2FA">
+          <UForm :schema="passwordSchema" :state="disable2FAForm" class="space-y-4" @submit="disable2FA">
             <UAlert color="warning" icon="i-lucide-alert-triangle"> 2FA zu deaktivieren verringert die Sicherheit deines Kontos. </UAlert>
-            <UFormField label="Passwort bestätigen" name="password" class="w-full">
-              <UInput v-model="disable2FAPassword" type="password" placeholder="Dein Passwort" class="w-full" />
+            <UFormField label="Passwort bestätigen" name="password">
+              <UInput v-model="disable2FAForm.password" type="password" placeholder="Dein Passwort" />
             </UFormField>
             <div class="flex gap-2">
               <UButton type="submit" color="error" :loading="loading"> 2FA deaktivieren </UButton>
               <UButton variant="outline" color="neutral" @click="show2FADisable = false"> Abbrechen </UButton>
             </div>
-          </form>
+          </UForm>
         </template>
       </div>
     </UCard>

package/nuxt-base-template/app/pages/auth/register.vue

@@ -2,6 +2,9 @@
 // ============================================================================
 // Imports
 // ============================================================================
+import type { AuthFormField, FormSubmitEvent } from '@nuxt/ui';
+import type { InferOutput } from 'valibot';
+
 import * as v from 'valibot';
 
 // ============================================================================
@@ -9,6 +12,7 @@ import * as v from 'valibot';
 // ============================================================================
 const toast = useToast();
 const { signUp, signIn, registerPasskey } = useLtAuth();
+const { translateError } = useLtErrorTranslation();
 
 // ============================================================================
 // Page Meta
@@ -24,13 +28,36 @@ const loading = ref<boolean>(false);
 const showPasskeyPrompt = ref<boolean>(false);
 const passkeyLoading = ref<boolean>(false);
 
-// Form state - using refs for direct v-model binding
-const formState = reactive({
-  name: '',
-  email: '',
-  password: '',
-  confirmPassword: '',
-});
+const fields: AuthFormField[] = [
+  {
+    label: 'Name',
+    name: 'name',
+    placeholder: 'Name eingeben',
+    required: true,
+    type: 'text',
+  },
+  {
+    label: 'E-Mail',
+    name: 'email',
+    placeholder: 'E-Mail eingeben',
+    required: true,
+    type: 'email',
+  },
+  {
+    label: 'Passwort',
+    name: 'password',
+    placeholder: 'Passwort eingeben',
+    required: true,
+    type: 'password',
+  },
+  {
+    label: 'Passwort bestätigen',
+    name: 'confirmPassword',
+    placeholder: 'Passwort wiederholen',
+    required: true,
+    type: 'password',
+  },
+];
 
 const schema = v.pipe(
   v.object({
@@ -45,47 +72,38 @@ const schema = v.pipe(
   ),
 );
 
+type Schema = InferOutput<typeof schema>;
+
 // ============================================================================
 // Functions
 // ============================================================================
-async function onSubmit(): Promise<void> {
-  // Validate
-  const result = v.safeParse(schema, formState);
-  if (!result.success) {
-    const firstError = result.issues[0];
-    toast.add({
-      color: 'error',
-      description: firstError.message,
-      title: 'Validierungsfehler',
-    });
-    return;
-  }
-
+async function onSubmit(payload: FormSubmitEvent<Schema>): Promise<void> {
   loading.value = true;
 
   try {
     // Step 1: Sign up
     const signUpResult = await signUp.email({
-      email: formState.email,
-      name: formState.name,
-      password: formState.password,
+      email: payload.data.email,
+      name: payload.data.name,
+      password: payload.data.password,
     });
 
     const signUpError = 'error' in signUpResult ? signUpResult.error : null;
 
     if (signUpError) {
+      const errorMessage = signUpError.message || 'Registrierung fehlgeschlagen';
       toast.add({
         color: 'error',
-        description: signUpError.message || 'Registrierung fehlgeschlagen',
-        title: 'Fehler',
+        description: translateError(errorMessage),
+        title: 'Registrierung fehlgeschlagen',
       });
       return;
     }
 
     // Step 2: Sign in to create session (required for passkey registration)
     const signInResult = await signIn.email({
-      email: formState.email,
-      password: formState.password,
+      email: payload.data.email,
+      password: payload.data.password,
     });
 
     const signInError = 'error' in signInResult ? signInResult.error : null;
@@ -152,65 +170,25 @@ async function skipPasskey(): Promise<void> {
 <template>
   <UPageCard class="w-md" variant="naked">
     <template v-if="!showPasskeyPrompt">
-      <div class="flex flex-col items-center gap-4">
-        <UIcon name="i-lucide-user-plus" class="size-12 text-primary" />
-        <h1 class="text-2xl font-semibold">Registrieren</h1>
-      </div>
-
-      <form class="mt-6 flex flex-col gap-4" @submit.prevent="onSubmit">
-        <UFormField label="Name" name="name" required class="w-full">
-          <UInput
-            v-model="formState.name"
-            name="name"
-            type="text"
-            placeholder="Name eingeben"
-            autocomplete="name"
-            class="w-full"
-          />
-        </UFormField>
-
-        <UFormField label="E-Mail" name="email" required class="w-full">
-          <UInput
-            v-model="formState.email"
-            name="email"
-            type="email"
-            placeholder="E-Mail eingeben"
-            autocomplete="email"
-            class="w-full"
-          />
-        </UFormField>
-
-        <UFormField label="Passwort" name="password" required class="w-full">
-          <UInput
-            v-model="formState.password"
-            name="password"
-            type="password"
-            placeholder="Passwort eingeben"
-            autocomplete="new-password"
-            class="w-full"
-          />
-        </UFormField>
-
-        <UFormField label="Passwort bestätigen" name="confirmPassword" required class="w-full">
-          <UInput
-            v-model="formState.confirmPassword"
-            name="confirmPassword"
-            type="password"
-            placeholder="Passwort wiederholen"
-            autocomplete="new-password"
-            class="w-full"
-          />
-        </UFormField>
-
-        <UButton type="submit" block :loading="loading">
-          Konto erstellen
-        </UButton>
-      </form>
-
-      <p class="mt-4 text-center text-sm text-muted">
-        Bereits ein Konto?
-        <ULink to="/auth/login" class="text-primary font-medium">Anmelden</ULink>
-      </p>
+      <UAuthForm
+        :schema="schema"
+        title="Registrieren"
+        icon="i-lucide-user-plus"
+        :fields="fields"
+        :loading="loading"
+        :submit="{
+          label: 'Konto erstellen',
+          block: true,
+        }"
+        @submit="onSubmit"
+      >
+        <template #footer>
+          <p class="text-center text-sm text-muted">
+            Bereits ein Konto?
+            <ULink to="/auth/login" class="text-primary font-medium">Anmelden</ULink>
+          </p>
+        </template>
+      </UAuthForm>
     </template>
 
     <template v-else>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nuxt-base",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "Starter to generate a configured environment with VueJS, Nuxt, Tailwind, Eslint, Unit Tests, Playwright etc.",
   "license": "MIT",
   "author": "lenne.Tech GmbH",