WIP Sync

frontend/vue-app/src/components/auth/ResetPassword.vue

@@ -112,6 +112,16 @@
       </div>
       <div v-else style="margin-top: 2rem; text-align: center">Checking reset link...</div>
     </div>
+
+    <!-- Success Modal -->
+    <ModalDialog v-if="showModal" title="Password Reset Successful" @backdrop-click="closeModal">
+      <p class="modal-message">
+        Your password has been reset successfully. You can now sign in with your new password.
+      </p>
+      <div class="modal-actions">
+        <button @click="goToLogin" class="btn btn-primary">Sign In</button>
+      </div>
+    </ModalDialog>
   </div>
 </template>
 
@@ -119,6 +129,7 @@
 import { ref, computed, onMounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { isPasswordStrong } from '@/common/api'
+import ModalDialog from '@/components/shared/ModalDialog.vue'
 import '@/assets/styles.css'
 
 const router = useRouter()
@@ -133,6 +144,7 @@ const successMsg = ref('')
 const token = ref('')
 const tokenValid = ref(false)
 const tokenChecked = ref(false)
+const showModal = ref(false)
 
 const isPasswordStrongRef = computed(() => isPasswordStrong(password.value))
 const passwordsMatch = computed(() => password.value === confirmPassword.value)
@@ -202,10 +214,11 @@ async function submitForm() {
       errorMsg.value = msg
       return
     }
-    successMsg.value = 'Your password has been reset. You may now sign in.'
+    // Success: Show modal instead of successMsg
+    showModal.value = true
     password.value = ''
     confirmPassword.value = ''
-    submitAttempted.value = false // <-- add this line
+    submitAttempted.value = false
   } catch {
     errorMsg.value = 'Network error. Please try again.'
   } finally {
@@ -213,6 +226,10 @@ async function submitForm() {
   }
 }
 
+function closeModal() {
+  showModal.value = false
+}
+
 async function goToLogin() {
   await router.push({ name: 'Login' }).catch(() => (window.location.href = '/auth/login'))
 }