From 109eefa7e3b2d2a1f6177d6dbf54377cd7efb95e Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Tue, 14 Jan 2025 11:09:13 +0100
Subject: [PATCH] Update pankow to enable email change dialogs

---
 dashboard/package.json                   |  6 ++---
 dashboard/src/components/ProfileView.vue | 31 +++++++++++++++++++-----
 dashboard/src/models/ProfileModel.js     | 13 ++++++++++
 3 files changed, 41 insertions(+), 9 deletions(-)

diff --git a/dashboard/package.json b/dashboard/package.json
index febeb0989..be45bba8e 100644
--- a/dashboard/package.json
+++ b/dashboard/package.json
@@ -7,7 +7,7 @@
   },
   "type": "module",
   "dependencies": {
-    "@eslint/js": "^9.17.0",
+    "@eslint/js": "^9.18.0",
     "@fontsource/arimo": "^5.1.1",
     "@fontsource/dm-sans": "^5.1.1",
     "@fontsource/inter": "^5.1.1",
@@ -25,9 +25,9 @@
     "jquery": "^3.7.1",
     "marked": "^15.0.6",
     "moment": "^2.30.1",
-    "pankow": "^2.6.2",
+    "pankow": "^2.6.3",
     "pankow-viewers": "^1.0.11",
-    "sass": "^1.83.1",
+    "sass": "^1.83.4",
     "vite": "^6.0.7",
     "vue": "^3.5.13",
     "vue-i18n": "^11.0.1",
diff --git a/dashboard/src/components/ProfileView.vue b/dashboard/src/components/ProfileView.vue
index 574632684..c289fa77b 100644
--- a/dashboard/src/components/ProfileView.vue
+++ b/dashboard/src/components/ProfileView.vue
@@ -22,13 +22,13 @@
               <tr>
                 <td class="text-muted" style="vertical-align: top;">{{ $t('main.displayName') }}</td>
                 <td class="text-right" style="vertical-align: top; white-space: nowrap;">
-                  {{ user.displayName }} <Button small tool outline @click="onChangeDisplayName(user.displayName)" v-show="!user.source && !config.profileLocked" icon="fa fa-edit text-small"></Button>
+                  {{ user.displayName }} <Button small tool outline @click="onChangeDisplayName(user.displayName)" v-show="!user.source && !config.profileLocked" icon="fa fa-edit text-small" />
                 </td>
               </tr>
               <tr>
                 <td class="text-muted" style="vertical-align: top;">{{ $t('profile.primaryEmail') }}</td>
                 <td class="text-right" style="vertical-align: top; white-space: nowrap;">
-                  {{ user.email }} <a href="" ng-click="emailChange.show()" ng-hide="user.source || config.profileLocked"><i class="fa fa-edit text-small"></i></a>
+                  {{ user.email }} <Button small tool outline @click="onChangeEmail(user.email)" v-show="!user.source && !config.profileLocked" icon="fa fa-edit text-small" />
                 </td>
               </tr>
               <tr>
@@ -111,15 +111,15 @@ async function onSelectLanguage(lang) {
 
 async function onChangeDisplayName(currentDisplayName) {
   const displayName = await inputDialog.value.prompt({
-    message: 'Display Name',
+    message: t('profile.changeDisplayName.title'),
     modal: false,
     value: currentDisplayName,
     confirmStyle: 'success',
-    confirmLabel: 'Save',
-    rejectLabel: 'Close'
+    confirmLabel: t('main.dialog.save'),
+    rejectLabel: t('main.dialog.cancel')
   });
 
-  if (!displayName) return;
+  if (!displayName || currentDisplayName === displayName) return;
 
   const error = await profileModel.setDisplayName(displayName);
   if (error) return console.error('Failed to set displayName', error);
@@ -127,6 +127,25 @@ async function onChangeDisplayName(currentDisplayName) {
   user.value = await profileModel.get();
 }
 
+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, '' ],
+    confirmStyle: 'success',
+    confirmLabel: t('main.dialog.save'),
+    rejectLabel: t('main.dialog.cancel')
+  });
+
+  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);
+
+  user.value = await profileModel.get();
+}
+
 </script>
 
 <style scoped>
diff --git a/dashboard/src/models/ProfileModel.js b/dashboard/src/models/ProfileModel.js
index 774de69a5..e2b29601c 100644
--- a/dashboard/src/models/ProfileModel.js
+++ b/dashboard/src/models/ProfileModel.js
@@ -35,6 +35,19 @@ function create(origin, accessToken) {
 
       return null;
     },
+    async setEmail(email, password) {
+      let error, result;
+      try {
+        result = await fetcher.post(`${origin}/api/v1/profile/email`, { email, password }, { access_token: accessToken });
+      } catch (e) {
+        error = e;
+      }
+
+      if (error) return error;
+      if (result.status !== 204) return result;
+
+      return null;
+    },
     async setLanguage(language) {
       let error, result;
       try {