Remove button for avatars. Fixes #755 (#924)

1 files changed, 29 insertions, 2 deletions

diff --git a/ui/src/components/user.tsx b/ui/src/components/user.tsx
index af72a397..0e107363 100644
--- a/ui/src/components/user.tsx
+++ b/ui/src/components/user.tsx
@@ -535,7 +535,7 @@ export class User extends Component<any, UserState> {
                     htmlFor="file-upload"
                     class="pointer ml-4 text-muted small font-weight-bold"
                   >
-                    {!this.state.userSettingsForm.avatar ? (
+                    {!this.checkSettingsAvatar ? (
                       <span class="btn btn-sm btn-secondary">
                         {i18n.t('upload_avatar')}
                       </span>
@@ -559,6 +559,18 @@ export class User extends Component<any, UserState> {
                   />
                 </form>
               </div>
+              {this.checkSettingsAvatar && (
+                <div class="form-group">
+                  <button
+                    class="btn btn-secondary btn-block"
+                    onClick={linkEvent(this, this.removeAvatar)}
+                  >
+                    {`${capitalizeFirstLetter(i18n.t('remove'))} ${i18n.t(
+                      'avatar'
+                    )}`}
+                  </button>
+                </div>
+              )}
               <div class="form-group">
                 <label>{i18n.t('language')}</label>
                 <select
@@ -1073,6 +1085,22 @@ export class User extends Component<any, UserState> {
       });
   }
 
+  removeAvatar(i: User, event: any) {
+    event.preventDefault();
+    i.state.userSettingsLoading = true;
+    i.state.userSettingsForm.avatar = '';
+    i.setState(i.state);
+
+    WebSocketService.Instance.saveUserSettings(i.state.userSettingsForm);
+  }
+
+  get checkSettingsAvatar(): boolean {
+    return (
+      this.state.userSettingsForm.avatar &&
+      this.state.userSettingsForm.avatar != ''
+    );
+  }
+
   handleUserSettingsSubmit(i: User, event: any) {
     event.preventDefault();
     i.state.userSettingsLoading = true;
@@ -1190,7 +1218,6 @@ export class User extends Component<any, UserState> {
       this.setState(this.state);
     } else if (res.op == UserOperation.SaveUserSettings) {
       let data = res.data as LoginResponse;
-      this.state = this.emptyState;
       this.state.userSettingsLoading = false;
       this.setState(this.state);
       UserService.Instance.login(data);