verify-email done

quasar.config.js

@@ -91,7 +91,10 @@ export default defineConfig((/* ctx */) => {
       // directives: [],
 
       // Quasar plugins
-      plugins: []
+      plugins: [
+        'Notify',
+        'Loading'
+      ]
     },
 
     // animations: 'all', // --- includes all animations

src/pages/LoginPage.vue

@@ -15,7 +15,10 @@
             <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>
+            <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>
+            </p>
           </q-card-section>
         </q-card>
         <q-card v-else square bordered class="q-pa-lg shadow-1">
@@ -55,9 +58,12 @@
 <script setup lang="js">
 import { ref } from 'vue'
 import { supabaseStore } from '../stores/supabaseStore'
-const store = supabaseStore()
 import useSupabase from '../boot/supabase'
+import { useQuasar } from 'quasar'
+
 const { supabase } = useSupabase()
+const store = supabaseStore()
+const $q = useQuasar()
 
 let email = ref('')
 let password = ref('')
@@ -66,6 +72,10 @@ let onLogin = ref(true)
 
 const registrar = async () => {
   try {
+    repassword.value = ''
+    $q.loading.show({
+      delay: 200 // ms
+    })
     const { data, error } = await supabase.auth.signUp({
       email: email.value,
       password: password.value,
@@ -75,7 +85,8 @@ const registrar = async () => {
     })
     if (error) throw error
     store.user = data.user
-    alert('Check your email for verification link')
+    $q.loading.hide()
+    $q.notify('Check your email for verification link')
     onLogin.value = true
   }
   catch (error) {

src/pages/VerifyEmailPage.vue

@@ -2,27 +2,65 @@
     <div class="bg-light-green window-height window-width row justify-center items-center">
         <div class="column">
             <div class="row"></div>
-            <h1>
+            <h3 v-if="token">
-                Verify your email
+                {{ parseJwt(token).email }} {{ parseJwt(token).user_metadata.email_verified ?
-            </h1>
+                    'is verified, you can login now' :
-            <h5>{{ token }}</h5>
+                    'is not verified' }}
+                <div></div>
+            </h3>
+            <h3 v-else>
+                {{ error }}
+            </h3>
         </div>
     </div>
 </template>
 
 <script setup>
 import { ref, onBeforeMount } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
+import { useQuasar } from 'quasar'
 
+const router = useRouter()
 const route = useRoute()
+const $q = useQuasar()
 
 const token = ref('')
+const error = ref('')
+
+const parseJwt = (token) => {
+    try {
+        //console.log(atob(token.split('.')[1]))
+        return JSON.parse(atob(token.split('.')[1]));
+    } catch (e) {
+        console.log(e)
+        return null;
+    }
+}
+// sleep time expects milliseconds
+const sleep = (time) => {
+    return new Promise((resolve) => setTimeout(resolve, time));
+}
 
 onBeforeMount(() => {
     //http://localhost:9000/verify-email/#error=access_denied&error_code=otp_expired&error_description=Email+link+is+invalid+or+has+expired
-    let error = route.hash.split('=')[3].toString().replaceAll('+', ' ')
+    let error_description = route.hash.split('=')[2].split('&')[1].toString().replaceAll('+', ' ')
-    alert(error)
+    if (error_description == 'error_description') {
+        error.value = route.hash.split('=')[3].toString().replaceAll('+', ' ')
+    } else {
+        token.value = route.hash.split('=')[1].split('&')[0].toString().replaceAll('+', ' ')
+        $q.loading.show({
+            delay: 1000 // ms
+        })
+    }
+    // Usage!
+    sleep(3000).then(() => {
+        // Do something after the sleep!
+        $q.loading.hide()
+        router.push({ path: '/login' })
+    });
     //http://localhost:9000/verify-email#access_token=eyJhbGciOiJIUzI1NiIsImtpZCI6IjV1bjU5SWxwZmJ0L0xXSkoiLCJ0eXAiOiJKV1QifQ.eyJpc3MiOiJodHRwczovL2VkZnplcmN1amF1c2J3ZmhoemxzLnN1cGFiYXNlLmNvL2F1dGgvdjEiLCJzdWIiOiJhMzMwNjEyZi1jODg5LTQxY2YtYjhiYS1lZjkyNjdiNjc5OTIiLCJhdWQiOiJhdXRoZW50aWNhdGVkIiwiZXhwIjoxNzM4NDA2MzU5LCJpYXQiOjE3Mzg0MDI3NTksImVtYWlsIjoia2V4b2c5NTczM0BhaGFrcy5jb20iLCJwaG9uZSI6IiIsImFwcF9tZXRhZGF0YSI6eyJwcm92aWRlciI6ImVtYWlsIiwicHJvdmlkZXJzIjpbImVtYWlsIl19LCJ1c2VyX21ldGFkYXRhIjp7ImVtYWlsIjoia2V4b2c5NTczM0BhaGFrcy5jb20iLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwicGhvbmVfdmVyaWZpZWQiOmZhbHNlLCJzdWIiOiJhMzMwNjEyZi1jODg5LTQxY2YtYjhiYS1lZjkyNjdiNjc5OTIifSwicm9sZSI6ImF1dGhlbnRpY2F0ZWQiLCJhYWwiOiJhYWwxIiwiYW1yIjpbeyJtZXRob2QiOiJvdHAiLCJ0aW1lc3RhbXAiOjE3Mzg0MDI3NTl9XSwic2Vzc2lvbl9pZCI6IjY1ZmI5YjBjLTVhNTctNGM4Yi04N2FkLWJhZjcxYzlhNjczNCIsImlzX2Fub255bW91cyI6ZmFsc2V9.LXj1zLDQonsxOKQK5U1RCah5WmGs_TZgMpc_Wt-9wtY&expires_at=1738406359&expires_in=3600&refresh_token=xP5cmsv_jpgT3Re1yx8sNA&token_type=bearer&type=signup
+
+
 })