151 lines
2.9 KiB
Vue
151 lines
2.9 KiB
Vue
<script setup >
|
|
|
|
import {useProfileStore} from "~/stores/profile.js";
|
|
|
|
definePageMeta({
|
|
layout: "notLoggedIn"
|
|
})
|
|
|
|
const supabase = useSupabaseClient()
|
|
const user = useSupabaseUser()
|
|
const router = useRouter()
|
|
const colorMode = useColorMode()
|
|
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)
|
|
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_Hell_Weihnachten.png"
|
|
dark="/Logo_Dunkel_Weihnachten.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="onSubmit"
|
|
:providers="[{label: 'MS365',icon: 'i-simple-icons-microsoft',color: 'gray',click: authenticateWithAzure}]"
|
|
:submit-button="{label: 'Weiter'}"
|
|
divider="oder"
|
|
>
|
|
|
|
</UAuthForm>
|
|
</UCard>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
#loginSite {
|
|
display: flex;
|
|
align-content: center;
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
#loginForm {
|
|
width: 30vw;
|
|
height: 30vh;
|
|
}
|
|
</style> |