first commit

pages/auth/login.vue

@@ -0,0 +1,72 @@
+<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>