login page

src/pages/LoginPage.vue

@@ -1 +1,61 @@
+<template>{{ store.user }}{{ store.error }}
+  <div class="bg-light-green window-height window-width row justify-center items-center">
+    <div class="column">
+      <div class="row">
+      </div>
+      <div class="row">
+        <q-card v-if="onLogin" square bordered class="q-pa-lg shadow-1">
+          <q-card-section>
+            <q-form class="q-gutter-md">
+              <q-input square filled clearable v-model="email" type="email" label="email" />
+              <q-input square filled clearable v-model="password" type="password" label="password" />
+            </q-form>
+          </q-card-section>
+          <q-card-actions class="q-px-md">
+            <q-btn unelevated color="light-green-7" size="lg" class="full-width" label="Login" @click='store.texto' />
+          </q-card-actions>
+          <q-card-section class="text-center q-pa-none">
+            <p class="text-grey-6 cursor-pointer" @click='onLogin = false'>Not reigistered? Created an Account</p>
+          </q-card-section>
+        </q-card>
+        <q-card v-else square bordered class="q-pa-lg shadow-1">
+          <q-card-section>
+            <q-form class="q-gutter-md">
+              <q-input square filled clearable v-model="email" type="email" label="email" />
+              <q-input square filled clearable v-model="password" type="password" label="password" />
+              <q-input square filled clearable v-model="repassword" type="password" label="confirm password" />
+            </q-form>
+          </q-card-section>
+          <q-card-actions class="q-px-md">
+            <q-btn unelevated color="light-green-7" size="lg" class="full-width" label="Register" @click='registrar' />
+          </q-card-actions>
+          <q-card-section class="text-center q-pa-none">
+            <p class="text-grey-6 cursor-pointer" @click='onLogin = true'>You are already registered, login now</p>
+          </q-card-section>
+        </q-card>
 
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="js">
+import { ref } from 'vue'
+import { supabaseStore } from '../stores/supabaseStore'
+const store = supabaseStore()
+
+let email = ref('')
+let password = ref('')
+let repassword = ref('')
+let onLogin = ref(true)
+
+const registrar = async () => {
+  store.registrar(email.value, password.value)
+}
+</script>
+
+<style>
+.q-card {
+  width: 360px;
+}
+</style>

src/stores/supabaseStore.js

@@ -1,9 +1,13 @@
 import { defineStore, acceptHMRUpdate } from 'pinia'
+import useSupabase from '../boot/supabase'
+const { supabase } = useSupabase()
 
 export const supabaseStore = defineStore('supabaseStore', {
   state: () => ({
     // counter: 0
-    prueba: 'prueba'
+    prueba: 'prueba',
+    user: null,
+    error: null
   }),
 
   getters: {
@@ -14,6 +18,25 @@ export const supabaseStore = defineStore('supabaseStore', {
     //increment() {
     //  this.counter++
     //}
+    texto() {
+      console.log('texto')
+    },
+     async registrar(email,password) {
+      const { data, error } = await supabase.auth.signUp(
+        {
+          email: email,
+          password: password,
+        }
+      )
+    console.log('data',data, 'error', error)
+    if (data){
+      this.user = data.user
+    }
+    if (error) {
+      this.error = error
+    }
+
+    }
   }
 })