3. Zwischenstand

frontend/pages/login.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { FormSubmitEvent } from '#ui/types'
+
 definePageMeta({
   layout: "notLoggedIn"
 })
@@ -7,16 +9,23 @@ const auth = useAuthStore()
 const toast = useToast()
 const router = useRouter()
 
-const doLogin = async (data:any) => {
+const state = reactive({
+  email: '',
+  password: ''
+})
+
+const loading = ref(false)
+
+const doLogin = async (event: FormSubmitEvent<typeof state>) => {
+  loading.value = true
   try {
-    await auth.login(data.email, data.password)
-    // Weiterleiten nach erfolgreichem Login
+    await auth.login(event.data.email, event.data.password)
     toast.add({title:"Einloggen erfolgreich"})
-
     await router.push("/")
-
   } catch (err: any) {
     toast.add({title:"Zugangsdaten falsch. Bitte überprüfen Sie Ihre Eingaben",color:"error"})
+  } finally {
+    loading.value = false
   }
 }
 </script>
@@ -29,60 +38,42 @@ const doLogin = async (data:any) => {
         dark="/Logo_Dark.png"
     />
 
-    <UAuthForm
-        title="Login"
-        description="Geben Sie Ihre Anmeldedaten ein um Zugriff auf Ihren Account zu erhalten."
-        align="bottom"
-        :fields="[{
-            name: 'email',
-            type: 'text',
-            label: 'Email',
-            placeholder: 'Deine E-Mail Adresse'
-          }, {
-            name: 'password',
-            label: 'Passwort',
-            type: 'password',
-            placeholder: 'Dein Passwort'
-          }]"
-        :loading="false"
-        @submit="doLogin"
-        :submit-button="{label: 'Weiter'}"
-        divider="oder"
-    >
-      <template #password-hint>
-        <NuxtLink to="/password-reset" class="text-primary font-medium">Passwort vergessen?</NuxtLink>
-      </template>
-    </UAuthForm>
-  </UCard>
-<!--  <div v-else class="mt-20 m-2 p-2">
-    <UColorModeImage
-        light="/Logo.png"
-        dark="/Logo_Dark.png"
-    />
+    <div class="mt-6 space-y-5">
+      <div class="space-y-1">
+        <h1 class="text-xl font-semibold">Login</h1>
+        <p class="text-sm text-muted">
+          Geben Sie Ihre Anmeldedaten ein um Zugriff auf Ihren Account zu erhalten.
+        </p>
+      </div>
 
-    <UAuthForm
-        title="Login"
-        description="Geben Sie Ihre Anmeldedaten ein um Zugriff auf Ihren Account zu erhalten."
-        align="bottom"
-        :fields="[{
-            name: 'email',
-            type: 'text',
-            label: 'Email',
-            placeholder: 'Deine E-Mail Adresse'
-          }, {
-            name: 'password',
-            label: 'Passwort',
-            type: 'password',
-            placeholder: 'Dein Passwort'
-          }]"
-        :loading="false"
-        @submit="doLogin"
-        :submit-button="{label: 'Weiter'}"
-        divider="oder"
-    >
-      <template #password-hint>
-        <NuxtLink to="/password-reset" class="text-primary font-medium">Passwort vergessen?</NuxtLink>
-      </template>
-    </UAuthForm>
-  </div>-->
-</template>
+      <UForm :state="state" class="space-y-4" @submit="doLogin">
+        <UFormField label="E-Mail" name="email">
+          <UInput
+              v-model="state.email"
+              type="email"
+              class="w-full"
+              placeholder="Deine E-Mail Adresse"
+              autocomplete="email"
+          />
+        </UFormField>
+
+        <UFormField label="Passwort" name="password">
+          <template #hint>
+            <NuxtLink to="/password-reset" class="text-primary font-medium">Passwort vergessen?</NuxtLink>
+          </template>
+          <UInput
+              v-model="state.password"
+              type="password"
+              class="w-full"
+              placeholder="Dein Passwort"
+              autocomplete="current-password"
+          />
+        </UFormField>
+
+        <UButton type="submit" block class="w-full" :loading="loading">
+          Weiter
+        </UButton>
+      </UForm>
+    </div>
+  </UCard>
+</template>