Add ability to change user's email

CHANGELOG.md

@@ -1,7 +1,7 @@
 # Changelog
 All notable changes to this project will be documented in this file.
 
-The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## [Unreleased]
 ### Added
@@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - User profile button clutter organized into a menu
 - Emoji picker
 - Started changelog anew
+- Ability to change user's email
 ### Changed
 - changed the way fading effects for user profile/long statuses works, now uses css-mask instead of gradient background hacks which weren't exactly compatible with semi-transparent themes
 ### Fixed

src/components/user_settings/user_settings.js

@@ -35,6 +35,7 @@ const MuteList = withSubscription({
 const UserSettings = {
   data () {
     return {
+      newEmail: '',
       newName: this.$store.state.users.currentUser.name,
       newBio: unescape(this.$store.state.users.currentUser.description),
       newLocked: this.$store.state.users.currentUser.locked,
@@ -56,6 +57,9 @@ const UserSettings = {
       backgroundPreview: null,
       bannerUploadError: null,
       backgroundUploadError: null,
+      changeEmailError: false,
+      changeEmailPassword: '',
+      changedEmail: false,
       deletingAccount: false,
       deleteAccountConfirmPasswordInput: '',
       deleteAccountError: false,
@@ -305,6 +309,22 @@ const UserSettings = {
           }
         })
     },
+    changeEmail () {
+      const params = {
+        email: this.newEmail,
+        password: this.changeEmailPassword
+      }
+      this.$store.state.api.backendInteractor.changeEmail(params)
+        .then((res) => {
+          if (res.status === 'success') {
+            this.changedEmail = true
+            this.changeEmailError = false
+          } else {
+            this.changedEmail = false
+            this.changeEmailError = res.error
+          }
+        })
+    },
     activateTab (tabName) {
       this.activeTab = tabName
     },

src/components/user_settings/user_settings.vue

@@ -85,7 +85,7 @@
               <Checkbox
                 v-model="hideFollowsCount"
                 :disabled="!hideFollows"
-                >
+              >
                 {{ $t('settings.hide_follows_count_description') }}
               </Checkbox>
             </p>
@@ -233,6 +233,39 @@
         </div>
 
         <div :label="$t('settings.security_tab')">
+          <div class="setting-item">
+            <h2>{{ $t('settings.change_email') }}</h2>
+            <div>
+              <p>{{ $t('settings.new_email') }}</p>
+              <input
+                v-model="newEmail"
+                type="email"
+                autocomplete="email"
+              >
+            </div>
+            <div>
+              <p>{{ $t('settings.current_password') }}</p>
+              <input
+                v-model="changeEmailPassword"
+                type="password"
+                autocomplete="current-password"
+              >
+            </div>
+            <button
+              class="btn btn-default"
+              @click="changeEmail"
+            >
+              {{ $t('general.submit') }}
+            </button>
+            <p v-if="changedEmail">
+              {{ $t('settings.changed_email') }}
+            </p>
+            <template v-if="changeEmailError !== false">
+              <p>{{ $t('settings.change_email_error') }}</p>
+              <p>{{ changeEmailError }}</p>
+            </template>
+          </div>
+
           <div class="setting-item">
             <h2>{{ $t('settings.change_password') }}</h2>
             <div>

src/i18n/en.json

@@ -217,6 +217,9 @@
     "cGreen": "Green (Retweet)",
     "cOrange": "Orange (Favorite)",
     "cRed": "Red (Cancel)",
+    "change_email": "Change Email",
+    "change_email_error": "There was an issue changing your email.",
+    "changed_email": "Email changed successfully!",
     "change_password": "Change Password",
     "change_password_error": "There was an issue changing your password.",
     "changed_password": "Password changed successfully!",
@@ -275,6 +278,7 @@
     "use_contain_fit": "Don't crop the attachment in thumbnails",
     "name": "Name",
     "name_bio": "Name & Bio",
+    "new_email": "New Email",
     "new_password": "New password",
     "notification_visibility": "Types of notifications to show",
     "notification_visibility_follows": "Follows",

src/i18n/ru.json

@@ -127,6 +127,9 @@
     "cGreen": "Повторить",
     "cOrange": "Нравится",
     "cRed": "Отменить",
+    "change_email": "Сменить email",
+    "change_email_error": "Произошла ошибка при попытке изменить email.",
+    "changed_email": "Email изменён успешно.",
     "change_password": "Сменить пароль",
     "change_password_error": "Произошла ошибка при попытке изменить пароль.",
     "changed_password": "Пароль изменён успешно.",
@@ -169,6 +172,7 @@
     "loop_video_silent_only": "Зацикливать только беззвучные видео (т.е. \"гифки\" с Mastodon)",
     "name": "Имя",
     "name_bio": "Имя и описание",
+    "new_email": "Новый email",
     "new_password": "Новый пароль",
     "notification_visibility": "Показывать уведомления",
     "notification_visibility_follows": "Подписки",

src/services/api/api.service.js

@@ -8,6 +8,7 @@ const QVITTER_USER_NOTIFICATIONS_READ_URL = '/api/qvitter/statuses/notifications
 const BLOCKS_IMPORT_URL = '/api/pleroma/blocks_import'
 const FOLLOW_IMPORT_URL = '/api/pleroma/follow_import'
 const DELETE_ACCOUNT_URL = '/api/pleroma/delete_account'
+const CHANGE_EMAIL_URL = '/api/pleroma/change_email'
 const CHANGE_PASSWORD_URL = '/api/pleroma/change_password'
 const TAG_USER_URL = '/api/pleroma/admin/users/tag'
 const PERMISSION_GROUP_URL = (screenName, right) => `/api/pleroma/admin/users/${screenName}/permission_group/${right}`
@@ -691,6 +692,20 @@ const deleteAccount = ({ credentials, password }) => {
     .then((response) => response.json())
 }
 
+const changeEmail = ({ credentials, email, password }) => {
+  const form = new FormData()
+
+  form.append('email', email)
+  form.append('password', password)
+
+  return fetch(CHANGE_EMAIL_URL, {
+    body: form,
+    method: 'POST',
+    headers: authHeaders(credentials)
+  })
+    .then((response) => response.json())
+}
+
 const changePassword = ({ credentials, password, newPassword, newPasswordConfirmation }) => {
   const form = new FormData()
 
@@ -966,6 +981,7 @@ const apiService = {
   importBlocks,
   importFollows,
   deleteAccount,
+  changeEmail,
   changePassword,
   settingsMFA,
   mfaDisableOTP,

src/services/backend_interactor_service/backend_interactor_service.js

@@ -131,6 +131,7 @@ const backendInteractorService = credentials => {
   const importFollows = (file) => apiService.importFollows({ file, credentials })
 
   const deleteAccount = ({ password }) => apiService.deleteAccount({ credentials, password })
+  const changeEmail = ({ email, password }) => apiService.changeEmail({ credentials, email, password })
   const changePassword = ({ password, newPassword, newPasswordConfirmation }) =>
     apiService.changePassword({ credentials, password, newPassword, newPasswordConfirmation })
 
@@ -195,6 +196,7 @@ const backendInteractorService = credentials => {
     importBlocks,
     importFollows,
     deleteAccount,
+    changeEmail,
     changePassword,
     fetchSettingsMFA,
     generateMfaBackupCodes,