added support for resetting a password while logged in

app/components/forms/auth/new-password-form.vue

@@ -4,14 +4,14 @@ const props = defineProps<{
   email: string
 }>();
 
-const {resetPassword} = useAuth();
+const {resetPasswordWithToken} = useAuth();
 const password = ref("");
 const passwordConfirmation = ref("");
 const tokenExpired = ref(false);
 
 const handlePasswordReset = () => {
   try {
-    resetPassword(password.value, passwordConfirmation.value, props.token, props.email);
+    resetPasswordWithToken(password.value, passwordConfirmation.value, props.token, props.email);
   } catch (error: unknown) {
     if (error instanceof Error && error.message === "TOKEN_EXPIRED")
       tokenExpired.value = true;

app/components/forms/password-reset-form.vue

@@ -1,18 +1,49 @@
 <script lang="ts" setup>
+import ButtonAction from "~/components/common/button-action.vue";
+
+const {resetPassword} = useAuth();
+
+const currentPassword = ref("");
+const newPassword = ref("");
+const confirmNewPassword = ref("");
+const errors = ref<string[]>([]);
+const successMessage = ref("");
+
+const handlePasswordReset = async () => {
+  errors.value = []
+  try {
+    await resetPassword(newPassword.value, confirmNewPassword.value, currentPassword.value);
+    successMessage.value = "Password reset successful!";
+  } catch (error) {
+    const fieldErrors = Object.values((error as any)?.errors ?? {}).flat() as string[]
+    errors.value = fieldErrors.length ? fieldErrors : [error?.message ?? "An error occurred. Please try again."]
+    successMessage.value = "";
+  }
+}
 
 </script>
 
 <template>
-  <form class="password-form">
+  <form class="password-form" @submit.prevent>
     <div class="form-group">
-      <label for="current-password">Current Password</label>
-      <input id="current-password" type="password"/>
+      <label for="new-password">Current Password</label>
+      <input id="new-password" v-model="currentPassword" type="password"/>
+    </div>
+    <div class="form-group">
+      <label for="current-password">New Password</label>
+      <input id="current-password" v-model="newPassword" type="password"/>
+    </div>
+    <div class="form-group">
+      <label for="current-password">New Password (again)</label>
+      <input id="current-password" v-model="confirmNewPassword" type="password"/>
     </div>
 
-    <div class="form-group">
-      <label for="new-password">New Password</label>
-      <input id="new-password" type="password"/>
-    </div>
+
+    <ButtonAction button-text="Reset Password" @action="handlePasswordReset"/>
+    <ul v-if="errors.length" class="error-message">
+      <li v-for="msg in errors" :key="msg">{{ msg }}</li>
+    </ul>
+    <p v-if="successMessage" class="success-message">{{ successMessage }}</p>
   </form>
 </template>
 
@@ -22,4 +53,12 @@
   flex-direction: column;
   gap: 1rem;
 }
+
+.error-message {
+  color: var(--color-error-text);
+}
+
+.success-message {
+  color: var(--color-button-primary);
+}
 </style>