140 lines
3.9 KiB
Vue
140 lines
3.9 KiB
Vue
<template>
|
|
<q-layout>
|
|
<q-page-container>
|
|
<q-page class="flex bg-image flex-center">
|
|
<q-card
|
|
v-bind:style="$q.screen.lt.sm ? { width: '80%' } : { width: '30%' }">
|
|
<q-card-section>
|
|
<q-img
|
|
fit="scale-down"
|
|
src="~assets/oysqn_logo.png" />
|
|
</q-card-section>
|
|
<q-card-section>
|
|
<div class="text-center q-pt-sm">
|
|
<div class="col text-h6">Reset Password</div>
|
|
</div>
|
|
</q-card-section>
|
|
<q-form v-if="!isPasswordResetLink()">
|
|
<q-card-section class="q-ma-sm">
|
|
<q-input
|
|
v-model="email"
|
|
label="E-Mail"
|
|
type="email"
|
|
color="darkblue"
|
|
@keydown.enter.prevent="resetPw"
|
|
filled></q-input>
|
|
<div class="text-caption q-py-md">
|
|
Enter your e-mail address. If we have an account with that
|
|
address on file, you will be e-mailed a link to reset your
|
|
password.
|
|
</div>
|
|
<q-card-actions>
|
|
<q-btn
|
|
type="button"
|
|
@click="resetPw"
|
|
label="Send Reset Link"
|
|
color="primary"></q-btn>
|
|
</q-card-actions>
|
|
</q-card-section>
|
|
</q-form>
|
|
<div v-else-if="validResetLink()">
|
|
<q-form
|
|
@submit="submitNewPw"
|
|
@keydown.enter.prevent="resetPw">
|
|
<NewPasswordComponent v-model="newPassword" />
|
|
<q-card-actions>
|
|
<q-btn
|
|
type="submit"
|
|
label="Reset Password"
|
|
color="primary"></q-btn>
|
|
</q-card-actions>
|
|
</q-form>
|
|
</div>
|
|
<q-card
|
|
v-else
|
|
class="text-center">
|
|
<span class="text-h5">Invalid reset link.</span>
|
|
</q-card>
|
|
</q-card>
|
|
</q-page>
|
|
</q-page-container>
|
|
</q-layout>
|
|
</template>
|
|
|
|
<style>
|
|
.bg-image {
|
|
background-image: url('/src/assets/oys_lighthouse.jpg');
|
|
background-repeat: no-repeat;
|
|
background-position-x: center;
|
|
background-size: cover;
|
|
/* background-image: linear-gradient(
|
|
135deg,
|
|
#ed232a 0%,
|
|
#ffffff 75%,
|
|
#14539a 100%
|
|
); */
|
|
}
|
|
</style>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { account, resetPassword } from 'boot/appwrite';
|
|
import { useRouter } from 'vue-router';
|
|
import { Dialog } from 'quasar';
|
|
import NewPasswordComponent from 'components/NewPasswordComponent.vue';
|
|
|
|
const email = ref('');
|
|
const router = useRouter();
|
|
const newPassword = ref();
|
|
|
|
function validResetLink(): boolean {
|
|
const query = router.currentRoute.value.query;
|
|
const expire = query.expire ? new Date(query.expire + 'Z') : null;
|
|
return Boolean(
|
|
query && expire && query.secret && query.userId && new Date() < expire
|
|
);
|
|
}
|
|
|
|
function isPasswordResetLink() {
|
|
const query = router.currentRoute.value.query;
|
|
return query && query.secret && query.userId && query.expire;
|
|
}
|
|
|
|
function submitNewPw() {
|
|
const query = router.currentRoute.value.query;
|
|
if (newPassword.value) {
|
|
account
|
|
.updateRecovery(
|
|
query.userId as string,
|
|
query.secret as string,
|
|
newPassword.value
|
|
)
|
|
.then(() => {
|
|
Dialog.create({ message: 'Password Changed!' }).onOk(() =>
|
|
router.replace('/login')
|
|
);
|
|
})
|
|
.catch((e) =>
|
|
Dialog.create({
|
|
message: 'Password change failed! Error: ' + e.message,
|
|
})
|
|
);
|
|
} else {
|
|
Dialog.create({
|
|
message: 'Invalid password. Try again',
|
|
});
|
|
}
|
|
}
|
|
|
|
function resetPw() {
|
|
resetPassword(email.value)
|
|
.then(() => router.replace('/login'))
|
|
.finally(() =>
|
|
Dialog.create({
|
|
message:
|
|
'If your address is in our system, you should receive an e-mail shortly.',
|
|
})
|
|
);
|
|
}
|
|
</script>
|