create-nuxt-base 0.3.17 → 1.0.3

package/nuxt-base-template/app/pages/auth/2fa.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+// ============================================================================
+// Imports
+// ============================================================================
+import type { FormSubmitEvent } from '@nuxt/ui';
+import type { InferOutput } from 'valibot';
+
+import * as v from 'valibot';
+
+import { authClient } from '~/lib/auth-client';
+
+// ============================================================================
+// Composables
+// ============================================================================
+const toast = useToast();
+
+// ============================================================================
+// Page Meta
+// ============================================================================
+definePageMeta({
+  layout: 'slim',
+});
+
+// ============================================================================
+// Variables
+// ============================================================================
+const loading = ref<boolean>(false);
+const useBackupCode = ref<boolean>(false);
+const trustDevice = ref<boolean>(false);
+
+const schema = v.object({
+  code: v.pipe(v.string('Code ist erforderlich'), v.minLength(6, 'Code muss mindestens 6 Zeichen haben')),
+});
+
+type Schema = InferOutput<typeof schema>;
+
+// ============================================================================
+// Functions
+// ============================================================================
+async function onSubmit(payload: FormSubmitEvent<Schema>): Promise<void> {
+  loading.value = true;
+
+  try {
+    if (useBackupCode.value) {
+      const { error } = await authClient.twoFactor.verifyBackupCode({
+        code: payload.data.code,
+      });
+
+      if (error) {
+        toast.add({
+          color: 'error',
+          description: error.message || 'Backup-Code ungültig',
+          title: 'Fehler',
+        });
+        return;
+      }
+    } else {
+      const { error } = await authClient.twoFactor.verifyTotp({
+        code: payload.data.code,
+        trustDevice: trustDevice.value,
+      });
+
+      if (error) {
+        toast.add({
+          color: 'error',
+          description: error.message || 'Code ungültig',
+          title: 'Fehler',
+        });
+        return;
+      }
+    }
+
+    await navigateTo('/app');
+  } finally {
+    loading.value = false;
+  }
+}
+
+function toggleBackupCode(): void {
+  useBackupCode.value = !useBackupCode.value;
+}
+</script>
+
+<template>
+  <UPageCard class="w-md" variant="naked">
+    <div class="flex flex-col gap-6">
+      <div class="flex flex-col items-center gap-2">
+        <UIcon name="i-lucide-shield-check" class="size-12 text-primary" />
+        <h1 class="text-xl font-semibold">Zwei-Faktor-Authentifizierung</h1>
+        <p class="text-center text-sm text-muted">
+          {{ useBackupCode ? 'Gib einen deiner Backup-Codes ein' : 'Gib den 6-stelligen Code aus deiner Authenticator-App ein' }}
+        </p>
+      </div>
+
+      <UForm :schema="schema" class="flex flex-col gap-4" @submit="onSubmit">
+        <UFormField :label="useBackupCode ? 'Backup-Code' : 'Authentifizierungscode'" name="code">
+          <UInput
+            name="code"
+            :placeholder="useBackupCode ? 'Backup-Code eingeben' : '000000'"
+            size="lg"
+            class="text-center font-mono text-lg tracking-widest"
+            autocomplete="one-time-code"
+          />
+        </UFormField>
+
+        <UCheckbox v-if="!useBackupCode" v-model="trustDevice" label="Diesem Gerät vertrauen" />
+
+        <UButton type="submit" block :loading="loading"> Verifizieren </UButton>
+      </UForm>
+
+      <div class="flex flex-col items-center gap-2">
+        <UButton variant="link" color="neutral" @click="toggleBackupCode">
+          {{ useBackupCode ? 'Authenticator-Code verwenden' : 'Backup-Code verwenden' }}
+        </UButton>
+
+        <ULink to="/auth/login" class="text-sm text-muted hover:text-primary"> Zurück zur Anmeldung </ULink>
+      </div>
+    </div>
+  </UPageCard>
+</template>

package/nuxt-base-template/app/pages/auth/forgot-password.vue

@@ -7,6 +7,14 @@ import type { InferOutput } from 'valibot';
 
 import * as v from 'valibot';
 
+import { authClient } from '~/lib/auth-client';
+
+// ============================================================================
+// Composables
+// ============================================================================
+const toast = useToast();
+const config = useRuntimeConfig();
+
 // ============================================================================
 // Page Meta
 // ============================================================================
@@ -17,18 +25,21 @@ definePageMeta({
 // ============================================================================
 // Variables
 // ============================================================================
+const loading = ref<boolean>(false);
+const emailSent = ref<boolean>(false);
+
 const fields: AuthFormField[] = [
   {
-    label: 'Email',
+    label: 'E-Mail',
     name: 'email',
-    placeholder: 'Enter your email',
+    placeholder: 'E-Mail eingeben',
     required: true,
     type: 'email',
   },
 ];
 
 const schema = v.object({
-  email: v.pipe(v.string('Email is required'), v.email('Has to be a valid email address')),
+  email: v.pipe(v.string('E-Mail ist erforderlich'), v.email('Bitte eine gültige E-Mail eingeben')),
 });
 
 type Schema = InferOutput<typeof schema>;
@@ -37,28 +48,68 @@ type Schema = InferOutput<typeof schema>;
 // Functions
 // ============================================================================
 async function onSubmit(payload: FormSubmitEvent<Schema>): Promise<void> {
-  console.debug('Forgot password request for:', payload.data.email);
+  loading.value = true;
+
+  try {
+    const { error } = await authClient.requestPasswordReset({
+      email: payload.data.email,
+      redirectTo: `${config.public.siteUrl}/auth/reset-password`,
+    });
+
+    if (error) {
+      toast.add({
+        color: 'error',
+        description: error.message || 'Anfrage fehlgeschlagen',
+        title: 'Fehler',
+      });
+      return;
+    }
+
+    emailSent.value = true;
+  } finally {
+    loading.value = false;
+  }
 }
 </script>
 
 <template>
   <UPageCard class="w-md" variant="naked">
-    <UAuthForm
-      :schema="schema"
-      title="Forgot password"
-      icon="i-heroicons-lock-closed"
-      :fields="fields"
-      loadingAuto
-      :submit="{
-        label: 'Continue',
-        block: true,
-      }"
-      @submit="onSubmit"
-    >
-      <template #footer>
-        Back to
-        <ULink to="/auth/login" class="text-primary font-medium" tabindex="-1">Sign In</ULink>
-      </template>
-    </UAuthForm>
+    <template v-if="!emailSent">
+      <UAuthForm
+        :schema="schema"
+        title="Passwort vergessen"
+        icon="i-lucide-lock"
+        :fields="fields"
+        :loading="loading"
+        :submit="{
+          label: 'Link anfordern',
+          block: true,
+        }"
+        @submit="onSubmit"
+      >
+        <template #description>
+          <p class="text-sm text-muted">Gib deine E-Mail-Adresse ein und wir senden dir einen Link zum Zurücksetzen deines Passworts.</p>
+        </template>
+
+        <template #footer>
+          <p class="text-center text-sm text-muted">
+            Zurück zur
+            <ULink to="/auth/login" class="text-primary font-medium">Anmeldung</ULink>
+          </p>
+        </template>
+      </UAuthForm>
+    </template>
+
+    <template v-else>
+      <div class="flex flex-col items-center gap-6">
+        <UIcon name="i-lucide-mail-check" class="size-16 text-success" />
+        <div class="text-center">
+          <h2 class="text-xl font-semibold">E-Mail gesendet</h2>
+          <p class="mt-2 text-sm text-muted">Wir haben dir eine E-Mail mit einem Link zum Zurücksetzen deines Passworts gesendet. Bitte überprüfe auch deinen Spam-Ordner.</p>
+        </div>
+
+        <UButton to="/auth/login" variant="outline" color="neutral"> Zurück zur Anmeldung </UButton>
+      </div>
+    </template>
   </UPageCard>
 </template>

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

@@ -7,6 +7,13 @@ import type { InferOutput } from 'valibot';
 
 import * as v from 'valibot';
 
+import { authClient } from '~/lib/auth-client';
+
+// ============================================================================
+// Composables
+// ============================================================================
+const toast = useToast();
+
 // ============================================================================
 // Page Meta
 // ============================================================================
@@ -17,35 +24,79 @@ definePageMeta({
 // ============================================================================
 // Variables
 // ============================================================================
+const loading = ref<boolean>(false);
+const passkeyLoading = ref<boolean>(false);
+
 const fields: AuthFormField[] = [
   {
-    label: 'Email',
+    label: 'E-Mail',
     name: 'email',
-    placeholder: 'Enter your email',
+    placeholder: 'E-Mail eingeben',
     required: true,
     type: 'email',
   },
   {
-    label: 'Password',
+    label: 'Passwort',
     name: 'password',
-    placeholder: 'Enter your password',
+    placeholder: 'Passwort eingeben',
     required: true,
     type: 'password',
   },
 ];
 
 const schema = v.object({
-  email: v.pipe(v.string('Email is required'), v.email('Has to be a valid email address')),
-  password: v.pipe(v.string('Password is required'), v.minLength(5, 'Must be at least 5 characters')),
+  email: v.pipe(v.string('E-Mail ist erforderlich'), v.email('Bitte eine gültige E-Mail eingeben')),
+  password: v.pipe(v.string('Passwort ist erforderlich'), v.minLength(5, 'Mindestens 5 Zeichen erforderlich')),
 });
 
 type Schema = InferOutput<typeof schema>;
 
+async function onPasskeyLogin(): Promise<void> {
+  passkeyLoading.value = true;
+
+  try {
+    const { error } = await authClient.signIn.passkey();
+
+    if (error) {
+      toast.add({
+        color: 'error',
+        description: error.message || 'Passkey-Anmeldung fehlgeschlagen',
+        title: 'Fehler',
+      });
+      return;
+    }
+
+    await navigateTo('/app');
+  } finally {
+    passkeyLoading.value = false;
+  }
+}
+
 // ============================================================================
 // Functions
 // ============================================================================
 async function onSubmit(payload: FormSubmitEvent<Schema>): Promise<void> {
-  console.debug('Login request for:', payload.data.email);
+  loading.value = true;
+
+  try {
+    const { error } = await authClient.signIn.email({
+      email: payload.data.email,
+      password: payload.data.password,
+    });
+
+    if (error) {
+      toast.add({
+        color: 'error',
+        description: error.message || 'Anmeldung fehlgeschlagen',
+        title: 'Fehler',
+      });
+      return;
+    }
+
+    await navigateTo('/app');
+  } finally {
+    loading.value = false;
+  }
 }
 </script>
 
@@ -53,18 +104,31 @@ async function onSubmit(payload: FormSubmitEvent<Schema>): Promise<void> {
   <UPageCard class="w-md" variant="naked">
     <UAuthForm
       :schema="schema"
-      title="Login"
+      title="Anmelden"
       icon="i-lucide-user"
       :fields="fields"
-      loadingAuto
+      :loading="loading"
       :submit="{
-        label: 'Log In',
+        label: 'Anmelden',
         block: true,
       }"
       @submit="onSubmit"
     >
       <template #password-hint>
-        <ULink to="/auth/forgot-password" class="text-primary font-medium" tabindex="-1">Forgot your password? </ULink>
+        <ULink to="/auth/forgot-password" class="text-primary font-medium" tabindex="-1">Passwort vergessen?</ULink>
+      </template>
+
+      <template #footer>
+        <div class="flex flex-col gap-4">
+          <USeparator label="oder" />
+
+          <UButton block color="neutral" variant="outline" icon="i-lucide-key" :loading="passkeyLoading" @click="onPasskeyLogin"> Mit Passkey anmelden </UButton>
+
+          <p class="text-center text-sm text-muted">
+            Noch kein Konto?
+            <ULink to="/auth/register" class="text-primary font-medium">Registrieren</ULink>
+          </p>
+        </div>
       </template>
     </UAuthForm>
   </UPageCard>

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

@@ -0,0 +1,184 @@
+<script setup lang="ts">
+// ============================================================================
+// Imports
+// ============================================================================
+import type { AuthFormField, FormSubmitEvent } from '@nuxt/ui';
+import type { InferOutput } from 'valibot';
+
+import * as v from 'valibot';
+
+import { authClient } from '~/lib/auth-client';
+
+// ============================================================================
+// Composables
+// ============================================================================
+const toast = useToast();
+
+// ============================================================================
+// Page Meta
+// ============================================================================
+definePageMeta({
+  layout: 'slim',
+});
+
+// ============================================================================
+// Variables
+// ============================================================================
+const loading = ref<boolean>(false);
+const showPasskeyPrompt = ref<boolean>(false);
+const passkeyLoading = ref<boolean>(false);
+
+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({
+    confirmPassword: v.pipe(v.string('Passwortbestätigung ist erforderlich'), v.minLength(8, 'Mindestens 8 Zeichen erforderlich')),
+    email: v.pipe(v.string('E-Mail ist erforderlich'), v.email('Bitte eine gültige E-Mail eingeben')),
+    name: v.pipe(v.string('Name ist erforderlich'), v.minLength(2, 'Mindestens 2 Zeichen erforderlich')),
+    password: v.pipe(v.string('Passwort ist erforderlich'), v.minLength(8, 'Mindestens 8 Zeichen erforderlich')),
+  }),
+  v.forward(
+    v.partialCheck([['password'], ['confirmPassword']], (input) => input.password === input.confirmPassword, 'Passwörter stimmen nicht überein'),
+    ['confirmPassword'],
+  ),
+);
+
+type Schema = InferOutput<typeof schema>;
+
+async function addPasskey(): Promise<void> {
+  passkeyLoading.value = true;
+
+  try {
+    const { error } = await authClient.passkey.addPasskey({
+      name: 'Mein Gerät',
+    });
+
+    if (error) {
+      toast.add({
+        color: 'error',
+        description: error.message || 'Passkey konnte nicht hinzugefügt werden',
+        title: 'Fehler',
+      });
+      return;
+    }
+
+    toast.add({
+      color: 'success',
+      description: 'Passkey wurde erfolgreich hinzugefügt',
+      title: 'Erfolg',
+    });
+
+    await navigateTo('/app');
+  } finally {
+    passkeyLoading.value = false;
+  }
+}
+
+// ============================================================================
+// Functions
+// ============================================================================
+async function onSubmit(payload: FormSubmitEvent<Schema>): Promise<void> {
+  loading.value = true;
+
+  try {
+    const { error } = await authClient.signUp.email({
+      email: payload.data.email,
+      name: payload.data.name,
+      password: payload.data.password,
+    });
+
+    if (error) {
+      toast.add({
+        color: 'error',
+        description: error.message || 'Registrierung fehlgeschlagen',
+        title: 'Fehler',
+      });
+      return;
+    }
+
+    toast.add({
+      color: 'success',
+      description: 'Dein Konto wurde erfolgreich erstellt',
+      title: 'Willkommen!',
+    });
+
+    showPasskeyPrompt.value = true;
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function skipPasskey(): Promise<void> {
+  await navigateTo('/app');
+}
+</script>
+
+<template>
+  <UPageCard class="w-md" variant="naked">
+    <template v-if="!showPasskeyPrompt">
+      <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>
+      <div class="flex flex-col items-center gap-6">
+        <UIcon name="i-lucide-key" class="size-16 text-primary" />
+        <div class="text-center">
+          <h2 class="text-xl font-semibold">Passkey hinzufügen?</h2>
+          <p class="mt-2 text-sm text-muted">Mit einem Passkey kannst du dich schnell und sicher ohne Passwort anmelden.</p>
+        </div>
+
+        <div class="flex w-full flex-col gap-3">
+          <UButton block :loading="passkeyLoading" @click="addPasskey"> Passkey hinzufügen </UButton>
+          <UButton block variant="outline" color="neutral" @click="skipPasskey"> Später einrichten </UButton>
+        </div>
+      </div>
+    </template>
+  </UPageCard>
+</template>