New Backend changes

pages/login.vue

@@ -1,118 +1,32 @@
-<script setup >
-
-import {useProfileStore} from "~/stores/profile.js";
-import {useCapacitor} from "~/composables/useCapacitor.js";
-
+<script setup lang="ts">
 definePageMeta({
   layout: "notLoggedIn"
 })
 
-const supabase = useSupabaseClient()
-const user = useSupabaseUser()
-const router = useRouter()
-const colorMode = useColorMode()
+const auth = useAuthStore()
 const toast = useToast()
-const profileStore = useProfileStore()
-
-const isLight = computed({
-  get () {
-    return colorMode.value !== 'dark'
-  },
-  set () {
-    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
-  }
-})
-
-
-const email = ref("")
-const password = ref("")
-
-const fields = [{
-  name: 'email',
-  type: 'text',
-  label: 'Email',
-  placeholder: 'E-Mail Adresse'
-}, {
-  name: 'password',
-  label: 'Password',
-  type: 'password',
-  placeholder: 'Passwort'
-}]
-
-const authenticateWithAzure = async () => {
-  const { data, error } = await supabase.auth.signInWithOAuth({
-    provider: 'azure',
-    options: {
-      scopes: 'email',
-    },
-  })
-
-  console.log(data)
-  console.log(error)
-}
-
-const onSubmit = async (data) => {
-
-  const {error, data:{ user}} = await supabase.auth.signInWithPassword({
-    email: data.email,
-    password: data.password
-  })
-  if(error) {
-    if(error.toString().toLowerCase().includes("invalid")){
-      toast.add({title:"Zugangsdaten falsch",color:"rose"})
-    }
-
-  } else {
-    //console.log("Login Successful")
-    profileStore.initializeData(user.id)
-
-    if(await useCapacitor().getIsPhone()) {
-      router.push("/mobile")
-    } else {
-      router.push("/")
-    }
 
 
 
 
+const doLogin = async (data:any) => {
+  try {
+    await auth.login(data.email, data.password)
+    // Weiterleiten nach erfolgreichem Login
+    toast.add({title:"Einloggen erfolgreich"})
+    return navigateTo("/")
+  } catch (err: any) {
+    toast.add({title:"Zugangsdaten falsch. Bitte überprüfen Sie Ihre Eingaben",color:"rose"})
   }
 }
-
 </script>
 
 <template>
-<!--  <div id="loginSite">
-    <div id="loginForm">
-      <UFormGroup
-          label="E-Mail:"
-      >
-        <UInput
-            v-model="email"
-        />
-      </UFormGroup>
-      <UFormGroup
-          label="Passwort:"
-      >
-        <UInput
-            v-model="password"
-            type="password"
-            @keyup.enter="onSubmit"
-        />
-      </UFormGroup>
-      <UButton
-          @click="onSubmit"
-          class="mt-3"
-      >
-        Einloggen
-      </UButton>
-    </div>
-
-  </div>-->
   <UCard class="max-w-sm w-full mx-auto mt-5">
 
     <UColorModeImage
-      light="/Logo.png"
-      dark="/Logo_Dark.png"
+        light="/Logo.png"
+        dark="/Logo_Dark.png"
     />
 
     <UAuthForm
@@ -131,29 +45,13 @@ const onSubmit = async (data) => {
             placeholder: 'Dein Passwort'
           }]"
         :loading="false"
-        @submit="onSubmit"
-        :providers="[{label: 'MS365',icon: 'i-simple-icons-microsoft',color: 'gray',click: authenticateWithAzure}]"
+        @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>
-
-
-
-</template>
-
-<style scoped>
-#loginSite {
-  display: flex;
-  align-content: center;
-  justify-content: center;
-
-}
-
-#loginForm {
-  width: 30vw;
-  height: 30vh;
-}
-</style>
+</template>