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>