From 6b2f9ff7db7dbd64082ac0cf4c9b5d008f0592e5 Mon Sep 17 00:00:00 2001
From: clonbg <clonbg@gmail.com>
Date: Thu, 6 Feb 2025 15:37:08 +0100
Subject: [PATCH] forgot password

---
 src/pages/RecoveryPasswordPage.vue | 114 ++++++++++++++++++++---------
 1 file changed, 80 insertions(+), 34 deletions(-)

diff --git a/src/pages/RecoveryPasswordPage.vue b/src/pages/RecoveryPasswordPage.vue
index 8297e36..b0c754e 100644
--- a/src/pages/RecoveryPasswordPage.vue
+++ b/src/pages/RecoveryPasswordPage.vue
@@ -2,45 +2,56 @@
     <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 v-if="token">
+                <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="Update Password"
+                            @click='updatePassword'
+                            :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 v-else>
+                <h3>{{ error }}</h3>
+            </div>
         </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'
+import useSupabase from '../boot/supabase'
+import { store } from 'quasar/wrappers'
+
 
 const route = useRoute()
+const router = useRouter()
 const $q = useQuasar()
+const { supabase } = useSupabase()
 
 const token = ref('')
 const error = ref('')
@@ -52,20 +63,55 @@ 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)
+    //console.log('error', error_description)
     if (error_description == 'error_description') {
         error.value = route.hash.split('=')[3].toString().replaceAll('+', ' ')
+        //console.log('error', error.value)
+        sleep(3000).then(() => {
+            // Do something after the sleep!
+            $q.loading.hide()
+            router.push({ path: '/login' })
+        });
     } 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
+    //http://localhost:9000/reset-password#access_token=eyJhbGciOiJIUzI1NiIsImtpZCI6IjV1bjU5SWxwZmJ0L0xXSkoiLCJ0eXAiOiJKV1QifQ.eyJpc3MiOiJodHRwczovL2VkZnplcmN1amF1c2J3ZmhoemxzLnN1cGFiYXNlLmNvL2F1dGgvdjEiLCJzdWIiOiIxN2Y5ZjQ1NS00OTVjLTQ4ZjQtOGQyNS0xM2E0MmQ4MjgzOGIiLCJhdWQiOiJhdXRoZW50aWNhdGVkIiwiZXhwIjoxNzM4ODU0NzgwLCJpYXQiOjE3Mzg4NTExODAsImVtYWlsIjoieGFqZXZhazk4OUBuaWtlNHMuY29tIiwicGhvbmUiOiIiLCJhcHBfbWV0YWRhdGEiOnsicHJvdmlkZXIiOiJlbWFpbCIsInByb3ZpZGVycyI6WyJlbWFpbCJdfSwidXNlcl9tZXRhZGF0YSI6eyJlbWFpbCI6InhhamV2YWs5ODlAbmlrZTRzLmNvbSIsImVtYWlsX3ZlcmlmaWVkIjp0cnVlLCJwaG9uZV92ZXJpZmllZCI6ZmFsc2UsInN1YiI6IjE3ZjlmNDU1LTQ5NWMtNDhmNC04ZDI1LTEzYTQyZDgyODM4YiJ9LCJyb2xlIjoiYXV0aGVudGljYXRlZCIsImFhbCI6ImFhbDEiLCJhbXIiOlt7Im1ldGhvZCI6Im90cCIsInRpbWVzdGFtcCI6MTczODg1MTE4MH1dLCJzZXNzaW9uX2lkIjoiZTcxMDA4YmEtZjMxZC00NjM0LTg1NzYtZjc5ZTY2NzdjNzBlIiwiaXNfYW5vbnltb3VzIjpmYWxzZX0.wpxeivamFxa3GCKwPyBYcYWPVkaC0vBHMB5ZiPY6JXA&expires_at=1738854780&expires_in=3600&refresh_token=rdQlZxN4q872K9y4rsTYgw&token_type=bearer&type=recovery
 
 
 })
 
+const sleep = (time) => {
+    return new Promise((resolve) => setTimeout(resolve, time));
+}
 
+const updatePassword = async () => {
+    try {
+        $q.loading.show({
+            delay: 200 // ms
+        })
+        const { data, error } = await supabase.auth.updateUser({
+            password: password.value
+        })
+        if (error) throw error
+        $q.loading.hide()
+        $q.notify({
+            type: 'positive',
+            message: 'Password updated'
+        })
+        router.push('/login')
+        store.user = data.user
+    }
+    catch (error) {
+        if (error instanceof Error) {
+            $q.notify({
+                type: 'negative',
+                message: error.message
+            })
+        }
+    }
+    finally {
+        $q.loading.hide()
+    }
+}
 </script>
\ No newline at end of file