Restructured Project Rep

pages/login.vue

@@ -0,0 +1,127 @@
+<script setup >
+
+definePageMeta({
+  layout: "notLoggedIn"
+})
+
+const supabase = useSupabaseClient()
+const user = useSupabaseUser()
+const router = useRouter()
+const colorMode = useColorMode()
+const dataStore = useDataStore()
+
+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 onSubmit = async (data) => {
+
+  const {error, data:{ user}} = await supabase.auth.signInWithPassword({
+    email: data.email,
+    password: data.password
+  })
+  if(error) {
+    console.log(error.toString())
+  } else {
+    console.log("Login Successful")
+    dataStore.initializeData(user.id)
+    router.push("/")
+
+
+  }
+}
+
+</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"
+    />
+
+<!--    <img
+        :src="!isLight  ? '/spaces.svg' : '/spaces_hell.svg'"
+        alt="Logo"
+        class="w-full mx-auto"
+    />-->
+
+    <UAuthForm
+        title="Login"
+        description="Geben Sie Ihre Anmeldedaten ein um Zugriff auf Ihren Account zu bekommen"
+        align="bottom"
+        :fields="fields"
+        :loading="false"
+        @submit="onSubmit"
+    >
+
+    </UAuthForm>
+  </UCard>
+
+
+
+</template>
+
+<style scoped>
+#loginSite {
+  display: flex;
+  align-content: center;
+  justify-content: center;
+
+}
+
+#loginForm {
+  width: 30vw;
+  height: 30vh;
+}
+</style>