registra

src/pages/LoginPage.vue

@@ -1,4 +1,4 @@
-<template>{{ store.user }}{{ store.error }}
+<template>
   <div class="bg-light-green window-height window-width row justify-center items-center">
     <div class="column">
       <div class="row">
@@ -21,13 +21,26 @@
         <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-input square filled v-model="email" type="email" label="email">
+                <template v-slot:append>
+                  <q-icon name="close" @click="email = ''" class="cursor-pointer" />
+                </template>
+              </q-input>
+              <q-input square filled v-model="password" type="password" label="password">
+                <template v-slot:append>
+                  <q-icon name="close" @click="password = ''" class="cursor-pointer" />
+                </template>
+              </q-input>
+              <q-input square filled v-model="repassword" type="password" label="confirm password">
+                <template v-slot:append>
+                  <q-icon name="close" @click="repassword = ''" class="cursor-pointer" />
+                </template>
+              </q-input>
             </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-btn unelevated color="light-green-7" size="lg" class="full-width" label="Register" @click='registrar'
+              :disable="email.length < 3 || password.length < 6 || repassword.length < 6 || password !== repassword" />
           </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>
@@ -43,6 +56,8 @@
 import { ref } from 'vue'
 import { supabaseStore } from '../stores/supabaseStore'
 const store = supabaseStore()
+import useSupabase from '../boot/supabase'
+const { supabase } = useSupabase()
 
 let email = ref('')
 let password = ref('')
@@ -50,7 +65,21 @@ let repassword = ref('')
 let onLogin = ref(true)
 
 const registrar = async () => {
-  store.registrar(email.value, password.value)
+  try {
+    const { data, error } = await supabase.auth.signUp({
+      email: email.value,
+      password: password.value,
+    })
+    if (error) throw error
+    store.user = data.user
+    alert('Check your email for verification link')
+    onLogin.value = true
+  }
+  catch (error) {
+    if (error instanceof Error) {
+      alert(error.message)
+    }
+  }
 }
 </script>
 

src/stores/supabaseStore.js

@@ -1,13 +1,10 @@
 import { defineStore, acceptHMRUpdate } from 'pinia'
-import useSupabase from '../boot/supabase'
-const { supabase } = useSupabase()
 
 export const supabaseStore = defineStore('supabaseStore', {
   state: () => ({
     // counter: 0
     prueba: 'prueba',
     user: null,
-    error: null
   }),
 
   getters: {
@@ -21,22 +18,6 @@ export const supabaseStore = defineStore('supabaseStore', {
     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
-    }
-
-    }
   }
 })