add change-password dialog

frontend/pages/profile.vue

@@ -192,9 +192,62 @@
       token.value = data.token;
     }
   }
+
+  const passwordChange = reactive({
+    loading: false,
+    dialog: false,
+    current: "",
+    new: "",
+    isValid: false,
+  });
+
+  function openPassChange() {
+    passwordChange.dialog = true;
+  }
+
+  async function changePassword() {
+    passwordChange.loading = true;
+    if (!passwordChange.isValid) {
+      return;
+    }
+
+    const { error } = await api.user.changePassword(passwordChange.current, passwordChange.new);
+
+    if (error) {
+      notify.error("Failed to change password.");
+      passwordChange.loading = false;
+      return;
+    }
+
+    notify.success("Password changed successfully.");
+    passwordChange.dialog = false;
+    passwordChange.new = "";
+    passwordChange.current = "";
+    passwordChange.loading = false;
+  }
 </script>
 
 <template>
+  <div>
+    <BaseModal v-model="passwordChange.dialog">
+      <template #title> Change Password </template>
+
+      <FormTextField v-model="passwordChange.current" label="Current Password" type="password" />
+      <FormTextField v-model="passwordChange.new" label="New Password" type="password" />
+      <PasswordScore v-model:valid="passwordChange.isValid" :password="passwordChange.new" />
+
+      <div class="flex">
+        <BaseButton
+          class="ml-auto"
+          :loading="passwordChange.loading"
+          :disabled="!passwordChange.isValid"
+          @click="changePassword"
+        >
+          Submit
+        </BaseButton>
+      </div>
+    </BaseModal>
+
     <BaseContainer class="flex flex-col gap-4 mb-6">
       <BaseCard>
         <template #title>
@@ -209,7 +262,7 @@
 
         <div class="p-4">
           <div class="flex gap-2">
-          <BaseButton size="sm"> Change Password </BaseButton>
+            <BaseButton size="sm" @click="openPassChange"> Change Password </BaseButton>
             <BaseButton size="sm" @click="generateToken"> Generate Invite Link </BaseButton>
           </div>
           <div v-if="token" class="pt-4 flex items-center pl-1">
@@ -288,6 +341,7 @@
         </template>
       </BaseCard>
     </BaseContainer>
+  </div>
 </template>
 
 <style scoped></style>