Reimplement fallback email dialog

dashboard/src/components/dialogs/FallbackEmailDialog.vue

@@ -0,0 +1,93 @@
+<script setup>
+
+import { ref, useTemplateRef, computed } from 'vue';
+import { EmailInput, PasswordInput, Dialog, FormGroup } from 'pankow';
+import { isValidEmail } from 'pankow/utils';
+import ProfileModel from '../../models/ProfileModel.js';
+
+const emit = defineEmits([ 'success' ]);
+
+const profileModel = ProfileModel.create();
+
+const dialog = useTemplateRef('dialog');
+const formError = ref({});
+const busy = ref (false);
+const email = ref('');
+const password = ref('');
+
+const isFormValid = computed(() => {
+  if (email.value && !isValidEmail(email.value)) return false;
+  if (!password.value) return false;
+
+  return true;
+});
+
+async function onSubmit() {
+  if (!isFormValid.value) return;
+
+  busy.value = true;
+  formError.value = {};
+
+  const [error] = await profileModel.setFallbackEmail(email.value, password.value);
+  if (error) {
+    if (error.status === 400) formError.value.email = error.body.message;
+    else if (error.status === 412) formError.value.password = error.body.message;
+    else formError.value.generic = error.status ? error.body.message : 'Internal error';
+
+    busy.value = false;
+
+    return console.error('Failed to set email', error);
+  }
+
+  emit('success');
+  dialog.value.close();
+
+  busy.value = false;
+  formError.value = {};
+}
+
+defineExpose({
+  async open(e) {
+    email.value = e;
+    password.value = '';
+    busy.value = false;
+    formError.value = {};
+    dialog.value.open();
+  }
+});
+
+</script>
+
+<template>
+  <Dialog ref="dialog"
+    :title="$t('profile.changeFallbackEmail.title')"
+    :confirm-label="$t('main.dialog.save')"
+    :confirm-active="!busy && isFormValid"
+    :confirm-busy="busy"
+     confirm-style="primary"
+    :reject-label="$t('main.dialog.cancel')"
+    :reject-active="!busy"
+     reject-style="secondary"
+     @confirm="onSubmit"
+  >
+    <form @submit.prevent="onSubmit">
+      <fieldset :disabled="busy">
+        <input type="submit" style="display: none;" :disabled="!isFormValid"/>
+
+        <div class="error-label" v-if="formError.generic">{{ formError.generic }}</div>
+
+        <FormGroup :has-error="formError.email">
+          <label>{{ $t('profile.changeEmail.email') }}</label>
+          <EmailInput v-model="email" />
+          <div class="error-label" v-if="formError.email">{{ formError.email }}</div>
+        </FormGroup>
+
+        <FormGroup :has-error="formError.password">
+          <label>{{ $t('profile.changeEmail.password') }}</label>
+          <PasswordInput v-model="password" />
+          <div class="error-label" v-if="formError.password">{{ formError.password }}</div>
+        </FormGroup>
+      </fieldset>
+    </form>
+  </Dialog>
+</template>

dashboard/src/components/dialogs/PrimaryEmailDialog.vue

@@ -49,6 +49,7 @@ async function onSubmit() {
 defineExpose({
   async open(e) {
     email.value = e;
+    password.value = '';
     busy.value = false;
     formError.value = {};
     dialog.value.open();

dashboard/src/models/ProfileModel.js

@@ -103,17 +103,15 @@ function create() {
       return [null];
     },
     async setFallbackEmail(fallbackEmail, password) {
-      let error, result;
+      let result;
       try {
         result = await fetcher.post(`${API_ORIGIN}/api/v1/profile/fallback_email`, { fallbackEmail, password }, { access_token: accessToken });
       } catch (e) {
-        error = e;
+        return [e];
       }
 
-      if (error) return error;
-      if (result.status !== 204) return result;
-
-      return null;
+      if (result.status !== 204) return [result];
+      return [null];
     },
     async setLanguage(language) {
       let error, result;

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">