Added Frontend

frontend/pages/login.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: "notLoggedIn"
+})
+
+const auth = useAuthStore()
+const toast = useToast()
+const router = useRouter()
+
+const platformIsNative = useCapacitor().getIsNative()
+
+
+const doLogin = async (data:any) => {
+  try {
+    await auth.login(data.email, data.password)
+    // Weiterleiten nach erfolgreichem Login
+    toast.add({title:"Einloggen erfolgreich"})
+    if(platformIsNative) {
+      await router.push("/mobile")
+    } else {
+      await router.push("/")
+    }
+  } catch (err: any) {
+    toast.add({title:"Zugangsdaten falsch. Bitte überprüfen Sie Ihre Eingaben",color:"rose"})
+  }
+}
+</script>
+
+<template>
+  <UCard class="max-w-sm w-full mx-auto mt-5" v-if="!platformIsNative">
+
+    <UColorModeImage
+        light="/Logo.png"
+        dark="/Logo_Dark.png"
+    />
+
+    <UAlert
+        title="Achtung"
+      description="Es wurden alle Benutzerkonten zurückgesetzt. Bitte fordert über Passwort vergessen ein neues Passwort an."
+      color="rose"
+        variant="outline"
+        class="my-5"
+    >
+    </UAlert>
+
+    <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"
+    />
+
+    <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>