Adding permanently delete account comments and posts.

- Fixes #285
- Fixes #58

4 files changed, 42 insertions, 2 deletions

diff --git a/ui/src/components/user.tsx b/ui/src/components/user.tsx
index 2a2a8124..c53a672a 100644
--- a/ui/src/components/user.tsx
+++ b/ui/src/components/user.tsx
@@ -31,6 +31,8 @@ interface UserState {
   loading: boolean;
   userSettingsForm: UserSettingsForm;
   userSettingsLoading: boolean;
+  deleteAccountLoading: boolean;
+  deleteAccountShowConfirm: boolean;
 }
 
 export class User extends Component<any, UserState> {
@@ -65,6 +67,8 @@ export class User extends Component<any, UserState> {
       auth: null,
     },
     userSettingsLoading: null,
+    deleteAccountLoading: null,
+    deleteAccountShowConfirm: false,
   }
 
   constructor(props: any, context: any) {
@@ -307,8 +311,17 @@ export class User extends Component<any, UserState> {
               </div>
               <div class="form-group row mb-0">
                 <div class="col-12">
-                  <button type="submit" class="btn btn-secondary">{this.state.userSettingsLoading ? 
+                  <button type="submit" class="btn btn-secondary mr-4">{this.state.userSettingsLoading ? 
                   <svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg> : capitalizeFirstLetter(i18n.t('save'))}</button>
+                  <button class="btn btn-danger" onClick={linkEvent(this, this.handleDeleteAccountShowConfirmToggle)}><T i18nKey="delete_account">#</T></button>
+                  {this.state.deleteAccountShowConfirm && 
+                    <>
+                      <div class="mt-2 alert alert-danger" role="alert"><T i18nKey="delete_account_confirm">#</T></div>
+                      <button class="btn btn-danger mr-4" onClick={linkEvent(this, this.handleDeleteAccount)}>{this.state.deleteAccountLoading ? 
+                      <svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg> : capitalizeFirstLetter(i18n.t('yes'))}</button>
+                      <button class="btn btn-secondary" onClick={linkEvent(this, this.handleDeleteAccountShowConfirmToggle)}><T i18nKey="cancel">#</T></button>
+                    </>
+                  }
                 </div>
               </div>
             </form>
@@ -434,6 +447,20 @@ export class User extends Component<any, UserState> {
     WebSocketService.Instance.saveUserSettings(i.state.userSettingsForm);
   }
 
+  handleDeleteAccountShowConfirmToggle(i: User, event: any) {
+    event.preventDefault();
+    i.state.deleteAccountShowConfirm = !i.state.deleteAccountShowConfirm;
+    i.setState(i.state);
+  }
+
+  handleDeleteAccount(i: User, event: any) {
+    event.preventDefault();
+    i.state.deleteAccountLoading = true;
+    i.setState(i.state);
+
+    WebSocketService.Instance.deleteAccount();
+  }
+
   parseMessage(msg: any) {
     console.log(msg);
     let op: UserOperation = msgOp(msg);
@@ -505,6 +532,11 @@ export class User extends Component<any, UserState> {
         this.setState(this.state);
         let res: LoginResponse = msg;
         UserService.Instance.login(res);
+    } else if (op == UserOperation.DeleteAccount) {
+        this.state.deleteAccountLoading = false;
+        this.state.deleteAccountShowConfirm = false;
+        this.setState(this.state);
+        this.context.router.history.push('/');
     }
   }
 }
diff --git a/ui/src/interfaces.ts b/ui/src/interfaces.ts
index ab40d16a..4bd013ce 100644
--- a/ui/src/interfaces.ts
+++ b/ui/src/interfaces.ts
@@ -1,5 +1,5 @@
 export enum UserOperation {
-  Login, Register, CreateCommunity, CreatePost, ListCommunities, ListCategories, GetPost, GetCommunity, CreateComment, EditComment, SaveComment, CreateCommentLike, GetPosts, CreatePostLike, EditPost, SavePost, EditCommunity, FollowCommunity, GetFollowedCommunities, GetUserDetails, GetReplies, GetModlog, BanFromCommunity, AddModToCommunity, CreateSite, EditSite, GetSite, AddAdmin, BanUser, Search, MarkAllAsRead, SaveUserSettings, TransferCommunity, TransferSite
+  Login, Register, CreateCommunity, CreatePost, ListCommunities, ListCategories, GetPost, GetCommunity, CreateComment, EditComment, SaveComment, CreateCommentLike, GetPosts, CreatePostLike, EditPost, SavePost, EditCommunity, FollowCommunity, GetFollowedCommunities, GetUserDetails, GetReplies, GetModlog, BanFromCommunity, AddModToCommunity, CreateSite, EditSite, GetSite, AddAdmin, BanUser, Search, MarkAllAsRead, SaveUserSettings, TransferCommunity, TransferSite, DeleteAccount
 }
 
 export enum CommentSortType {
diff --git a/ui/src/services/WebSocketService.ts b/ui/src/services/WebSocketService.ts
index f67dbf6d..f8838d40 100644
--- a/ui/src/services/WebSocketService.ts
+++ b/ui/src/services/WebSocketService.ts
@@ -199,6 +199,12 @@ export class WebSocketService {
     this.subject.next(this.wsSendWrapper(UserOperation.SaveUserSettings, userSettingsForm));
   }
 
+  public deleteAccount() {
+    let form = {};
+    this.setAuth(form);
+    this.subject.next(this.wsSendWrapper(UserOperation.DeleteAccount, form));
+  }
+
   private wsSendWrapper(op: UserOperation, data: any) {
     let send = { op: UserOperation[op], data: data };
     console.log(send);
diff --git a/ui/src/translations/en.ts b/ui/src/translations/en.ts
index 3d10cfa4..9c45c715 100644
--- a/ui/src/translations/en.ts
+++ b/ui/src/translations/en.ts
@@ -55,6 +55,8 @@ export const en = {
     mark_as_unread: 'mark as unread',
     delete: 'delete',
     deleted: 'deleted',
+    delete_account: 'Delete Account',
+    delete_account_confirm: 'Warning: this will permanently delete all your data. Are you sure?',
     restore: 'restore',
     ban: 'ban',
     ban_from_site: 'ban from site',