authenticación terminada

src/layouts/MainLayout.vue

@@ -4,10 +4,10 @@
       <q-toolbar>
 
         <q-toolbar-title>
-          Quasar App
+          {{ store.user ? store.user.email : '' }}
         </q-toolbar-title>
 
-        <div>Quasar v{{ $q.version }}</div>
+        <div><q-btn color="secondary" @click="logout">Logout</q-btn></div>
       </q-toolbar>
     </q-header>
 
@@ -18,5 +18,26 @@
 </template>
 
 <script setup>
+import { supabaseStore } from '../stores/supabaseStore'
+import useSupabase from '../boot/supabase'
+import { useRouter } from 'vue-router'
 
+const store = supabaseStore()
+const { supabase } = useSupabase()
+const router = useRouter()
+
+const logout = async () => {
+  try {
+    const { error } = await supabase.auth.signOut()
+    if (error) throw error
+    store.user = null
+    store.session = null
+    router.push('/login')
+  } catch (error) {
+    if (error instanceof Error) {
+      alert(error.message)
+    }
+  }
+
+}
 </script>

src/pages/IndexPage.vue

@@ -4,14 +4,17 @@
       <div class="column">
         <div class="row"></div>
         <h1>Página principal</h1>
+        <h3 v-if="store.user">You are logged in as {{ store.user.email }}
+        </h3>
       </div>
     </div>
   </q-page>
 </template>
 
 <script setup>
-//import { supabaseStore } from '../stores/supabaseStore'
-//const store = supabaseStore()
+import { supabaseStore } from '../stores/supabaseStore'
 //import useSupabase from '../boot/supabase'
+
+const store = supabaseStore()
 //const { supabase } = useSupabase()
 </script>

src/pages/LoginPage.vue

@@ -7,17 +7,30 @@
         <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-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="isPwd ? 'password' : 'text'" label="password">
+                <template v-slot:append>
+                  <q-icon name="close" @click="password = ''" class="cursor-pointer" />
+                  <q-icon :name="isPwd ? 'visibility_off' : 'visibility'" class="cursor-pointer"
+                    @click="isPwd = !isPwd" />
+                </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="Login" @click='store.texto' />
+            <q-btn unelevated color="light-green-7" size="lg" class="full-width" label="Login" @click='login'
+              :disable="email.length < 3 || password.length < 6" />
           </q-card-actions>
           <q-card-section class="text-center q-pa-none">
             <p class="text-grey-6 cursor-pointer">
-              <span @click='onLogin = false'>Not reigistered? Created an Account</span><br>
-              <span @click='onLogin = false'>Not verified? Resend email</span>
+              <span @click='onLogin = false; email = ""; password = ""; repassword = "";'>Not reigistered? Created an
+                Account</span><br>
+              <span @click='onLogin = false; email = ""; password = ""; repassword = "";'>Not verified? Resend
+                email</span>
             </p>
           </q-card-section>
         </q-card>
@@ -29,14 +42,18 @@
                   <q-icon name="close" @click="email = ''" class="cursor-pointer" />
                 </template>
               </q-input>
-              <q-input square filled v-model="password" type="password" label="password">
+              <q-input square filled v-model="password" :type="isPwd1 ? 'password' : 'text'" label="password">
                 <template v-slot:append>
                   <q-icon name="close" @click="password = ''" class="cursor-pointer" />
+                  <q-icon :name="isPwd1 ? 'visibility_off' : 'visibility'" class="cursor-pointer"
+                    @click="isPwd1 = !isPwd1" />
                 </template>
               </q-input>
-              <q-input square filled v-model="repassword" type="password" label="confirm password">
+              <q-input square filled v-model="repassword" :type="isPwd2 ? 'password' : 'text'" label="confirm password">
                 <template v-slot:append>
                   <q-icon name="close" @click="repassword = ''" class="cursor-pointer" />
+                  <q-icon :name="isPwd2 ? 'visibility_off' : 'visibility'" class="cursor-pointer"
+                    @click="isPwd2 = !isPwd2" />
                 </template>
               </q-input>
             </q-form>
@@ -46,7 +63,9 @@
               :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>
+            <p class="text-grey-6 cursor-pointer" @click='onLogin = true; email = ""; password = ""; repassword = "";'>
+              You are
+              already registered?, Login now</p>
           </q-card-section>
         </q-card>
 
@@ -60,7 +79,9 @@ import { ref } from 'vue'
 import { supabaseStore } from '../stores/supabaseStore'
 import useSupabase from '../boot/supabase'
 import { useQuasar } from 'quasar'
+import { useRouter } from 'vue-router'
 
+const router = useRouter()
 const { supabase } = useSupabase()
 const store = supabaseStore()
 const $q = useQuasar()
@@ -69,6 +90,9 @@ let email = ref('')
 let password = ref('')
 let repassword = ref('')
 let onLogin = ref(true)
+let isPwd = ref(true)
+let isPwd1 = ref(true)
+let isPwd2 = ref(true)
 
 const registrar = async () => {
   try {
@@ -94,6 +118,36 @@ const registrar = async () => {
       alert(error.message)
     }
   }
+  finally {
+    $q.loading.hide()
+  }
+}
+
+const login = async () => {
+  try {
+    $q.loading.show({
+      delay: 200 // ms
+    })
+    const { data, error } = await supabase.auth.signInWithPassword({
+      email: email.value,
+      password: password.value,
+    })
+    //console.log('user', data.user, '\nsession', data.session)
+    if (error) throw error
+    if (!data.user.user_metadata.email_verified) throw new Error('User is not verified')
+    store.user = data.user
+    store.session = data.session
+    $q.loading.hide()
+    router.push('/')
+  }
+  catch (error) {
+    if (error instanceof Error) {
+      alert(error.message)
+    }
+  }
+  finally {
+    $q.loading.hide()
+  }
 }
 </script>
 

src/stores/supabaseStore.js

@@ -5,6 +5,7 @@ export const supabaseStore = defineStore('supabaseStore', {
     // counter: 0
     prueba: 'prueba',
     user: null,
+    session: null
   }),
 
   getters: {