recoverypasswordpage

src/pages/LoginPage.vue

@@ -48,7 +48,24 @@
                   </q-card-actions>
                 </q-card>
               </q-dialog>
-              <span @click='onLogin = false; email = ""; password = ""; repassword = "";'>Forgot password?</span>
+              <span @click='promptForgot = true; email = ""; password = ""; repassword = "";'>Forgot password?</span>
+              <q-dialog v-model="promptForgot" persistent>
+                <q-card style="min-width: 350px">
+                  <q-card-section>
+                    <div class="text-h6">Your email</div>
+                  </q-card-section>
+
+                  <q-card-section class="q-pt-none">
+                    <q-input dense v-model="forgot_email" autofocus @keyup.enter="promptForgot = false" />
+                  </q-card-section>
+
+                  <q-card-actions align="right" class="text-primary">
+                    <q-btn flat label="Cancel" v-close-popup @click="forgot_email = ''" />
+                    <q-btn flat label="Send email" v-close-popup @click="recoveryPassword"
+                      :disable="forgot_email.length < 5" />
+                  </q-card-actions>
+                </q-card>
+              </q-dialog>
             </p>
           </q-card-section>
         </q-card>
@@ -113,6 +130,8 @@ let isPwd1 = ref(true)
 let isPwd2 = ref(true)
 let prompt = ref(false)
 let email_verification = ref('')
+let promptForgot = ref(false)
+let forgot_email = ref('')
 
 const registrar = async () => {
   try {
@@ -205,6 +224,19 @@ const resendEmail = async () => {
     $q.loading.hide()
   }
 }
+
+const recoveryPassword = async () => {
+  const { data, error } = await supabase.auth.resetPasswordForEmail(forgot_email.value, {
+    redirectTo: 'http://localhost:9000/reset-password',
+  })
+
+  if (error) throw error
+  if (data) {
+    $q.notify('Check your email for reset password link')
+    promptForgot.value = false
+    forgot_email.value = ''
+  }
+}
 </script>
 
 <style>

src/pages/RecoveryPasswordPage.vue

@@ -0,0 +1,71 @@
+<template>
+    <div class="bg-light-green window-height window-width row justify-center items-center">
+        <div class="column">
+            <div class="row"></div>
+            <q-card square bordered class="q-pa-lg shadow-1">
+                <q-card-section>
+                    <q-form class="q-gutter-md">
+                        <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="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>
+                </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'
+                        :disable="password.length < 6 || repassword.length < 6 || password !== repassword" />
+                </q-card-actions>
+                <q-card-section class="text-center q-pa-none">
+                </q-card-section>
+            </q-card>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onBeforeMount } from 'vue'
+import { useRoute } from 'vue-router'
+import { useQuasar } from 'quasar'
+
+const route = useRoute()
+const $q = useQuasar()
+
+const token = ref('')
+const error = ref('')
+const password = ref('')
+const repassword = ref('')
+const isPwd1 = ref(true)
+const isPwd2 = ref(true)
+
+onBeforeMount(() => {
+    //http://localhost:9000/reset-password#error=access_denied&error_code=otp_expired&error_description=Email+link+is+invalid+or+has+expired
+    let error_description = route.hash.split('=')[2].split('&')[1].toString().replaceAll('+', ' ')
+    console.log(error_description)
+    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
+        })
+    }
+
+    //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
+
+
+})
+
+
+</script>

src/router/routes.js

@@ -9,6 +9,11 @@ const routes = [
     component: () => import('pages/VerifyEmailPage.vue'),
     name: 'verify-email'
   },
+  {
+    path: '/reset-password',
+    component: () => import('pages/RecoveryPasswordPage.vue'),
+    name: 'reset-password'
+  },
   {
     path: '/',
     component: () => import('layouts/MainLayout.vue'),