Convert password change dialog

dashboard/src/views/ProfileView.vue

@@ -12,6 +12,7 @@ import AppPasswords from '../components/AppPasswords.vue';
 import SettingsItem from '../components/SettingsItem.vue';
 import PrimaryEmailDialog from '../components/dialogs/PrimaryEmailDialog.vue';
 import FallbackEmailDialog from '../components/dialogs/FallbackEmailDialog.vue';
+import PasswordChangeDialog from '../components/dialogs/PasswordChangeDialog.vue';
 import Section from '../components/Section.vue';
 import ApiTokens from '../components/ApiTokens.vue';
 import ImagePicker from '../components/ImagePicker.vue';
@@ -31,6 +32,7 @@ const user = ref({});
 const inputDialog = useTemplateRef('inputDialog');
 const primaryEmailDialog = useTemplateRef('primaryEmailDialog');
 const fallbackEmailDialog = useTemplateRef('fallbackEmailDialog');
+const passwordChangeDialog = useTemplateRef('passwordChangeDialog');
 
 // Language selector
 const languages = ref([]);
@@ -83,22 +85,8 @@ async function onAvatarSubmit(file) {
   await refreshProfile();
 }
 
-// Password changes
 async function onPasswordChange() {
-  const result = await inputDialog.value.prompt({
-    message: [ t('profile.changePassword.newPassword'), t('profile.changePassword.newPasswordRepeat'), t('profile.changePassword.currentPassword') ],
-    type: [ 'password', 'password', 'password' ],
-    modal: false,
-    confirmLabel: t('main.dialog.save'),
-    confirmStyle: 'primary',
-    rejectLabel: t('main.dialog.cancel'),
-    rejectStyle: 'secondary',
-  });
-
-  if (!result || !result[0] || !result[1] || !result[2] || result[0] === result[1]) return;
-
-  const error = await profileModel.setPassword(result[2], result[0]);
-  if (error) return console.error('Failed to change password', error);
+  passwordChangeDialog.value.open();
 }
 
 
@@ -214,6 +202,7 @@ onMounted(async () => {
     <InputDialog ref="inputDialog" />
     <PrimaryEmailDialog ref="primaryEmailDialog" @success="refreshProfile"/>
     <FallbackEmailDialog ref="fallbackEmailDialog" @success="refreshProfile"/>
+    <PasswordChangeDialog ref="passwordChangeDialog" @success="refreshProfile"/>
 
     <Dialog ref="twoFADialog" :title="$t('profile.enable2FA.title')" :show-x="!twoFAModal" :modal="twoFAModal">
       <div style="text-align: center; max-width: 420px">