95 lines
No EOL
2.4 KiB
Vue
95 lines
No EOL
2.4 KiB
Vue
<template>
|
|
<q-page padding class="flex flex-center">
|
|
<q-card style="width: 350px">
|
|
<q-card-section>
|
|
<div class="text-h6">Password Reset</div>
|
|
</q-card-section>
|
|
|
|
<q-card-section>
|
|
<p class="text-body2 q-mb-md">
|
|
Enter your email address and we'll send you a link to reset your password.
|
|
</p>
|
|
|
|
<q-form @submit="onSubmit" class="q-gutter-md">
|
|
<q-input
|
|
v-model="email"
|
|
type="email"
|
|
label="Email"
|
|
filled
|
|
:rules="[val => !!val || 'Email is required']"
|
|
/>
|
|
|
|
<div class="q-mt-md">
|
|
<q-btn
|
|
label="Send Reset Link"
|
|
type="submit"
|
|
color="primary"
|
|
class="full-width"
|
|
:loading="loading"
|
|
/>
|
|
</div>
|
|
|
|
<div class="text-center q-mt-sm">
|
|
<router-link to="/login" class="text-primary">Back to login</router-link>
|
|
</div>
|
|
</q-form>
|
|
</q-card-section>
|
|
|
|
<q-dialog v-model="successDialog">
|
|
<q-card>
|
|
<q-card-section>
|
|
<div class="text-h6">Email Sent</div>
|
|
</q-card-section>
|
|
|
|
<q-card-section>
|
|
<p>If an account exists with that email, we've sent instructions to reset your password.</p>
|
|
</q-card-section>
|
|
|
|
<q-card-actions align="right">
|
|
<q-btn flat label="Close" color="primary" v-close-popup @click="goToLogin" />
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-dialog>
|
|
</q-card>
|
|
</q-page>
|
|
</template>
|
|
|
|
<script>
|
|
import { ref } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
|
|
export default {
|
|
name: 'PasswordResetPage',
|
|
setup() {
|
|
const router = useRouter()
|
|
const email = ref('')
|
|
const loading = ref(false)
|
|
const successDialog = ref(false)
|
|
|
|
const onSubmit = () => {
|
|
loading.value = true
|
|
|
|
// Here you would call your API to request password reset
|
|
console.log('Password reset requested for:', email.value)
|
|
|
|
// Simulate API call
|
|
setTimeout(() => {
|
|
loading.value = false
|
|
successDialog.value = true
|
|
}, 1500)
|
|
}
|
|
|
|
const goToLogin = () => {
|
|
router.push('/login')
|
|
}
|
|
|
|
return {
|
|
email,
|
|
loading,
|
|
onSubmit,
|
|
successDialog,
|
|
goToLogin
|
|
}
|
|
}
|
|
}
|
|
</script> |