dietpi/quasar-supabase-sharedLists
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

forgot password

Browse Source
This commit is contained in:
clonbg
2025-02-06 15:37:08 +01:00
parent 50c6221535
commit 6b2f9ff7db
1 changed files with 80 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
src/pages/RecoveryPasswordPage.vue
View File

@@ -2,45 +2,56 @@
<div class="bg-light-green window-height window-width row justify-center items-center"> <div class="bg-light-green window-height window-width row justify-center items-center">
<div class="column"> <div class="column">
<div class="row"></div> <div class="row"></div>
<q-card square bordered class="q-pa-lg shadow-1"> <div v-if="token">
<q-card-section> <q-card square bordered class="q-pa-lg shadow-1">
<q-form class="q-gutter-md"> <q-card-section>
<q-input square filled v-model="password" :type="isPwd1 ? 'password' : 'text'" label="password"> <q-form class="q-gutter-md">
<template v-slot:append> <q-input square filled v-model="password" :type="isPwd1 ? 'password' : 'text'"
<q-icon name="close" @click="password = ''" class="cursor-pointer" /> label="password">
<q-icon :name="isPwd1 ? 'visibility_off' : 'visibility'" class="cursor-pointer" <template v-slot:append>
@click="isPwd1 = !isPwd1" /> <q-icon name="close" @click="password = ''" class="cursor-pointer" />
</template> <q-icon :name="isPwd1 ? 'visibility_off' : 'visibility'" class="cursor-pointer"
</q-input> @click="isPwd1 = !isPwd1" />
<q-input square filled v-model="repassword" :type="isPwd2 ? 'password' : 'text'" </template>
label="confirm password"> </q-input>
<template v-slot:append> <q-input square filled v-model="repassword" :type="isPwd2 ? 'password' : 'text'"
<q-icon name="close" @click="repassword = ''" class="cursor-pointer" /> label="confirm password">
<q-icon :name="isPwd2 ? 'visibility_off' : 'visibility'" class="cursor-pointer" <template v-slot:append>
@click="isPwd2 = !isPwd2" /> <q-icon name="close" @click="repassword = ''" class="cursor-pointer" />
</template> <q-icon :name="isPwd2 ? 'visibility_off' : 'visibility'" class="cursor-pointer"
</q-input> @click="isPwd2 = !isPwd2" />
</q-form> </template>
</q-card-section> </q-input>
<q-card-actions class="q-px-md"> </q-form>
<q-btn unelevated color="light-green-7" size="lg" class="full-width" label="Register" </q-card-section>
@click='registrar' <q-card-actions class="q-px-md">
:disable="password.length < 6 || repassword.length < 6 || password !== repassword" /> <q-btn unelevated color="light-green-7" size="lg" class="full-width" label="Update Password"
</q-card-actions> @click='updatePassword'
<q-card-section class="text-center q-pa-none"> :disable="password.length < 6 || repassword.length < 6 || password !== repassword" />
</q-card-section> </q-card-actions>
</q-card> <q-card-section class="text-center q-pa-none">
</q-card-section>
</q-card>
</div>
<div v-else>
<h3>{{ error }}</h3>
</div>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, onBeforeMount } from 'vue' import { ref, onBeforeMount } from 'vue'
import { useRoute } from 'vue-router' import { useRoute, useRouter } from 'vue-router'
import { useQuasar } from 'quasar' import { useQuasar } from 'quasar'
import useSupabase from '../boot/supabase'
import { store } from 'quasar/wrappers'
const route = useRoute() const route = useRoute()
const router = useRouter()
const $q = useQuasar() const $q = useQuasar()
const { supabase } = useSupabase()
const token = ref('') const token = ref('')
const error = ref('') const error = ref('')
@@ -52,20 +63,55 @@ const isPwd2 = ref(true)
onBeforeMount(() => { onBeforeMount(() => {
//http://localhost:9000/reset-password#error=access_denied&error_code=otp_expired&error_description=Email+link+is+invalid+or+has+expired //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('+', ' ') 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') { if (error_description == 'error_description') {
error.value = route.hash.split('=')[3].toString().replaceAll('+', ' ') 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 { } else {
token.value = route.hash.split('=')[1].split('&')[0].toString().replaceAll('+', ' ') 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> </script>