10-04-2026

frontend/_src/pages/PasswordResetPage.vue

@@ -0,0 +1,95 @@
+<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>