73 lines
1.7 KiB
Vue
73 lines
1.7 KiB
Vue
<template>
|
|
<!-- <VMain class="main d-flex align-center justify-center"> -->
|
|
<VRow no-gutters class="main">
|
|
<VCol cols="6" class="d-flex align-center justify-center">
|
|
<VCard class="card" title="Login Area" width="400" rounded="lg">
|
|
<VCardText>
|
|
<VBtn v-for="provider in providers" :key="provider.id" @click="signIn(provider.id)" class="mb-8" color="blue"
|
|
size="large" block>
|
|
Sign in with {{ provider.name }}
|
|
</VBtn>
|
|
</VCardText>
|
|
</VCard>
|
|
</VCol>
|
|
</VRow>
|
|
<!-- </VMain> -->
|
|
</template>
|
|
|
|
<script setup>
|
|
// import { useField, useForm } from 'vee-validate'
|
|
|
|
definePageMeta({
|
|
layout: 'auth',
|
|
auth: {
|
|
unauthenticatedOnly: true,
|
|
navigateAuthenticatedTo: '/homepage',
|
|
},
|
|
})
|
|
|
|
const { signIn, getProviders } = useAuth()
|
|
const providers = await getProviders()
|
|
|
|
// const { handleSubmit, handleReset } = useForm({
|
|
// validationSchema: {
|
|
// username (value) {
|
|
// if (value?.length >= 2) return true
|
|
|
|
// return 'Name needs to be at least 2 characters.'
|
|
// },
|
|
// password (value) {
|
|
// return true
|
|
// if (value?.length > 9 && /[0-9-]+/.test(value)) return true
|
|
|
|
// return 'Phone number needs to be at least 9 digits.'
|
|
// },
|
|
// },
|
|
// })
|
|
|
|
// const username = useField('username')
|
|
// const password = useField('password')
|
|
|
|
// const submit = handleSubmit(values => {
|
|
// alert(JSON.stringify(values, null, 2))
|
|
// })
|
|
|
|
// const show = ref(false)
|
|
</script>
|
|
|
|
<style scoped>
|
|
.main {
|
|
min-height: 300px;
|
|
background-image: url('/background.jpg');
|
|
background-size: cover;
|
|
}
|
|
|
|
.card {
|
|
/* From https://css.glass */
|
|
background: rgba(0, 0, 0, 0.28);
|
|
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
|
backdrop-filter: blur(11.1px);
|
|
-webkit-backdrop-filter: blur(11.1px);
|
|
}
|
|
</style>
|