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

server/src/api/user.rs

@@ -451,6 +451,11 @@ impl Perform for Oper<SaveUserSettings> {
       None => read_user.email,
     };
 
+    let avatar = match &data.avatar {
+      Some(avatar) => Some(avatar.to_owned()),
+      None => read_user.avatar,
+    };
+
     let password_encrypted = match &data.new_password {
       Some(new_password) => {
         match &data.new_password_verify {
@@ -488,7 +493,7 @@ impl Perform for Oper<SaveUserSettings> {
       name: read_user.name,
       email,
       matrix_user_id: data.matrix_user_id.to_owned(),
-      avatar: data.avatar.to_owned(),
+      avatar,
       password_encrypted,
       preferred_username: read_user.preferred_username,
       updated: Some(naive_now()),

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);