Improve primary email change dialog

dashboard/src/views/ProfileView.vue

@@ -10,6 +10,7 @@ import { TOKEN_TYPES } from '../constants.js';
 import NotificationSettings from '../components/NotificationSettings.vue';
 import AppPasswords from '../components/AppPasswords.vue';
 import SettingsItem from '../components/SettingsItem.vue';
+import PrimaryEmailDialog from '../components/dialogs/PrimaryEmailDialog.vue';
 import Section from '../components/Section.vue';
 import ApiTokens from '../components/ApiTokens.vue';
 import ImagePicker from '../components/ImagePicker.vue';
@@ -27,6 +28,7 @@ const tokensModel = TokensModel.create();
 const config = ref({});
 const user = ref({});
 const inputDialog = useTemplateRef('inputDialog');
+const primaryEmailDialog = useTemplateRef('primaryEmailDialog');
 
 // Language selector
 const languages = ref([]);
@@ -66,24 +68,8 @@ async function onChangeDisplayName(currentDisplayName) {
   await refreshProfile();
 }
 
-async function onChangeEmail(currentEmail) {
-  const result = await inputDialog.value.prompt({
-    message: [ t('profile.changeEmail.title'), t('profile.changeEmail.password') ],
-    type: [ 'email', 'password' ],
-    modal: false,
-    value: [ currentEmail, '' ],
-    confirmLabel: t('main.dialog.save'),
-    confirmStyle: 'primary',
-    rejectLabel: t('main.dialog.cancel'),
-    rejectStyle: 'secondary',
-  });
-
-  if (!result || !result[0] || !result[1] || currentEmail === result[0]) return;
-
-  const error = await profileModel.setEmail(result[0], result[1]);
-  if (error) return console.error('Failed to set email', error);
-
-  await refreshProfile();
+function onChangeEmail(currentEmail) {
+  primaryEmailDialog.value.open(currentEmail);
 }
 
 async function onChangeFallbackEmail(currentFallbackEmail) {
@@ -240,6 +226,7 @@ onMounted(async () => {
 <template>
   <div class="content">
     <InputDialog ref="inputDialog" />
+    <PrimaryEmailDialog ref="primaryEmailDialog" @success="refreshProfile"/>
 
     <Dialog ref="twoFADialog" :title="$t('profile.enable2FA.title')" :show-x="!twoFAModal" :modal="twoFAModal">
       <div style="text-align: center; max-width: 420px">