Files
FEDEO/spaces/pages/login.vue
2024-03-01 22:48:03 +01:00

127 lines
2.2 KiB
Vue

<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="/spaces_hell.svg"
dark="/spaces.svg"
/>
<!-- <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>