Reimplement fallback email dialog

dashboard/src/views/ProfileView.vue

@@ -11,6 +11,7 @@ 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 FallbackEmailDialog from '../components/dialogs/FallbackEmailDialog.vue';
 import Section from '../components/Section.vue';
 import ApiTokens from '../components/ApiTokens.vue';
 import ImagePicker from '../components/ImagePicker.vue';
@@ -29,6 +30,7 @@ const config = ref({});
 const user = ref({});
 const inputDialog = useTemplateRef('inputDialog');
 const primaryEmailDialog = useTemplateRef('primaryEmailDialog');
+const fallbackEmailDialog = useTemplateRef('fallbackEmailDialog');
 
 // Language selector
 const languages = ref([]);
@@ -73,23 +75,7 @@ function onChangeEmail(currentEmail) {
 }
 
 async function onChangeFallbackEmail(currentFallbackEmail) {
-  const result = await inputDialog.value.prompt({
-    message: [ t('profile.changeFallbackEmail.title'), t('profile.changeEmail.password') ],
-    type: [ 'email', 'password' ],
-    modal: false,
-    value: [ currentFallbackEmail, '' ],
-    confirmLabel: t('main.dialog.save'),
-    confirmStyle: 'primary',
-    rejectLabel: t('main.dialog.cancel'),
-    rejectStyle: 'secondary',
-  });
-
-  if (!result || !result[1] || currentFallbackEmail === result[0]) return;
-
-  const error = await profileModel.setFallbackEmail(result[0], result[1]);
-  if (error) return console.error('Failed to set fallback email', error);
-
-  await refreshProfile();
+  fallbackEmailDialog.value.open(currentFallbackEmail);
 }
 
 async function onAvatarSubmit(file) {
@@ -227,6 +213,7 @@ onMounted(async () => {
   <div class="content">
     <InputDialog ref="inputDialog" />
     <PrimaryEmailDialog ref="primaryEmailDialog" @success="refreshProfile"/>
+    <FallbackEmailDialog ref="fallbackEmailDialog" @success="refreshProfile"/>
 
     <Dialog ref="twoFADialog" :title="$t('profile.enable2FA.title')" :show-x="!twoFAModal" :modal="twoFAModal">
       <div style="text-align: center; max-width: 420px">