Remodel for Mobile

pages/login.vue

@@ -6,7 +6,7 @@ definePageMeta({
 const auth = useAuthStore()
 const toast = useToast()
 
-
+const platformIsNative = useCapacitor().getIsNative()
 
 
 const doLogin = async (data:any) => {
@@ -14,7 +14,7 @@ const doLogin = async (data:any) => {
     await auth.login(data.email, data.password)
     // Weiterleiten nach erfolgreichem Login
     toast.add({title:"Einloggen erfolgreich"})
-    if(useCapacitor().getIsNative()) {
+    if(platformIsNative) {
       return navigateTo("/mobile")
     } else {
       return navigateTo("/")
@@ -26,7 +26,7 @@ const doLogin = async (data:any) => {
 </script>
 
 <template>
-  <UCard class="max-w-sm w-full mx-auto mt-5">
+  <UCard class="max-w-sm w-full mx-auto mt-5" v-if="!platformIsNative">
 
     <UColorModeImage
         light="/Logo.png"
@@ -67,4 +67,35 @@ const doLogin = async (data:any) => {
       </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>