Added delete account section to user settings

src/components/user_settings/user_settings.js

@@ -9,7 +9,10 @@ const UserSettings = {
       followImportError: false,
       followsImported: false,
       uploading: [ false, false, false, false ],
-      previews: [ null, null, null ]
+      previews: [ null, null, null ],
+      deletingAccount: false,
+      deleteAccountConfirmPasswordInput: '',
+      deleteAccountError: false
     }
   },
   components: {
@@ -146,6 +149,21 @@ const UserSettings = {
     dismissImported () {
       this.followsImported = false
       this.followImportError = false
+    },
+    confirmDelete () {
+      this.deletingAccount = true
+    },
+    deleteAccount () {
+      this.$store.state.api.backendInteractor.deleteAccount({password: this.deleteAccountConfirmPasswordInput})
+        .then((res) => {
+          console.log(res)
+          if (res.status === 'success') {
+            this.$store.dispatch('logout')
+            window.location.href = '/main/all'
+          } else {
+            this.deleteAccountError = res.error
+          }
+        })
     }
   }
 }

src/components/user_settings/user_settings.vue

@@ -66,6 +66,20 @@
           <p>{{$t('settings.follow_import_error')}}</p>
         </div>
       </div>
+      <hr>
+      <div class="setting-item">
+        <h3>{{$t('settings.delete_account')}}</h3>
+        <p v-if="!deletingAccount">{{$t('settings.delete_account_description')}}</p>
+        <div v-if="deletingAccount">
+          <p>{{$t('settings.delete_account_instructions')}}</p>
+          <p>{{$t('login.password')}}</p>
+          <input type="password" v-model="deleteAccountConfirmPasswordInput">
+          <button class="btn btn-default" @click="deleteAccount">{{$t('settings.delete_account')}}</button>
+        </div>
+        <p v-if="deleteAccountError !== false">{{$t('settings.delete_account_error')}}</p>
+        <p v-if="deleteAccountError">{{deleteAccountError}}</p>
+        <button class="btn btn-default" v-if="!deletingAccount" @click="confirmDelete">{{$t('general.submit')}}</button>
+      </div>
     </div>
   </div>
 </template>

src/i18n/messages.js

@@ -289,7 +289,11 @@ const en = {
     follow_import: 'Follow import',
     import_followers_from_a_csv_file: 'Import follows from a csv file',
     follows_imported: 'Follows imported! Processing them will take a while.',
-    follow_import_error: 'Error importing followers'
+    follow_import_error: 'Error importing followers',
+    delete_account: 'Delete Account',
+    delete_account_description: 'Permanantly delete your account and all your messages.',
+    delete_account_instructions: 'Type your password in the input below to confirm account deletion.',
+    delete_account_error: 'There was an issue deleting your account. If this persists please contact your instance administrator.'
   },
   notifications: {
     notifications: 'Notifications',

src/services/api/api.service.js

@@ -30,6 +30,7 @@ const BLOCKING_URL = '/api/blocks/create.json'
 const UNBLOCKING_URL = '/api/blocks/destroy.json'
 const USER_URL = '/api/users/show.json'
 const FOLLOW_IMPORT_URL = '/api/pleroma/follow_import'
+const DELETE_ACCOUNT_URL = '/api/pleroma/delete_account'
 
 import { each, map } from 'lodash'
 import 'whatwg-fetch'
@@ -373,6 +374,19 @@ const followImport = ({params, credentials}) => {
     .then((response) => response.ok)
 }
 
+const deleteAccount = ({credentials, password}) => {
+  const form = new FormData()
+
+  form.append('password', password)
+
+  return fetch(DELETE_ACCOUNT_URL, {
+    body: form,
+    method: 'POST',
+    headers: authHeaders(credentials)
+  })
+    .then((response) => response.json())
+}
+
 const fetchMutes = ({credentials}) => {
   const url = '/api/qvitter/mutes.json'
 
@@ -408,7 +422,8 @@ const apiService = {
   updateProfile,
   updateBanner,
   externalProfile,
-  followImport
+  followImport,
+  deleteAccount
 }
 
 export default apiService

src/services/backend_interactor_service/backend_interactor_service.js

@@ -61,6 +61,8 @@ const backendInteractorService = (credentials) => {
   const externalProfile = (profileUrl) => apiService.externalProfile({profileUrl, credentials})
   const followImport = ({params}) => apiService.followImport({params, credentials})
 
+  const deleteAccount = ({password}) => apiService.deleteAccount({credentials, password})
+
   const backendInteractorServiceInstance = {
     fetchStatus,
     fetchConversation,
@@ -82,7 +84,8 @@ const backendInteractorService = (credentials) => {
     updateBanner,
     updateProfile,
     externalProfile,
-    followImport
+    followImport,
+    deleteAccount
   }
 
   return backendInteractorServiceInstance