3. Zwischenstand

frontend/pages/password-reset.vue

@@ -1,28 +1,34 @@
 <script setup lang="ts">
+import type { FormSubmitEvent } from '#ui/types'
+
 definePageMeta({
   layout: "notLoggedIn"
 })
 
-const auth = useAuthStore()
 const toast = useToast()
 
+const state = reactive({
+  email: ''
+})
 
+const loading = ref(false)
 
-
-const doReset = async (data:any) => {
+const doReset = async (event: FormSubmitEvent<typeof state>) => {
+  loading.value = true
   try {
-    const res = await useNuxtApp().$api("/auth/password/reset", {
+    await useNuxtApp().$api("/auth/password/reset", {
       method: "POST",
       body: {
-        email: data.email
+        email: event.data.email
       }
     })
 
-    // Weiterleiten nach erfolgreichem Login
     toast.add({title:"Zurücksetzen erfolgreich"})
     return navigateTo("/login")
   } catch (err: any) {
     toast.add({title:"Problem beim zurücksetzen",color:"error"})
+  } finally {
+    loading.value = false
   }
 }
 </script>
@@ -35,21 +41,29 @@ const doReset = async (data:any) => {
         dark="/Logo_Dark.png"
     />
 
-    <UAuthForm
-        title="Passwort zurücksetzen"
-        description="Geben Sie Ihre E-Mail ein um ein neues Passwort per E-Mail zu erhalten."
-        align="bottom"
-        :fields="[{
-            name: 'email',
-            type: 'text',
-            label: 'Email',
-            placeholder: 'Deine E-Mail Adresse'
-          }]"
-        :loading="false"
-        @submit="doReset"
-        :submit-button="{label: 'Zurücksetzen'}"
-        divider="oder"
-    >
-    </UAuthForm>
+    <div class="mt-6 space-y-5">
+      <div class="space-y-1">
+        <h1 class="text-xl font-semibold">Passwort zurücksetzen</h1>
+        <p class="text-sm text-muted">
+          Geben Sie Ihre E-Mail ein um ein neues Passwort per E-Mail zu erhalten.
+        </p>
+      </div>
+
+      <UForm :state="state" class="space-y-4" @submit="doReset">
+        <UFormField label="E-Mail" name="email">
+          <UInput
+              v-model="state.email"
+              type="email"
+              class="w-full"
+              placeholder="Deine E-Mail Adresse"
+              autocomplete="email"
+          />
+        </UFormField>
+
+        <UButton type="submit" block class="w-full" :loading="loading">
+          Zurücksetzen
+        </UButton>
+      </UForm>
+    </div>
   </UCard>
-</template>
+</template>