[PLT-4790] Crop profile picture in middle (#5653)

webapp/components/user_settings/user_settings_general.jsx

@@ -101,6 +101,7 @@ class UserSettingsGeneralTab extends React.Component {
         this.updatePicture = this.updatePicture.bind(this);
         this.updateSection = this.updateSection.bind(this);
         this.updatePosition = this.updatePosition.bind(this);
+        this.updatedCroppedPicture = this.updatedCroppedPicture.bind(this);
 
         this.state = this.setupInitialState(props);
     }
@@ -311,6 +312,17 @@ class UserSettingsGeneralTab extends React.Component {
         this.setState({confirmEmail: e.target.value});
     }
 
+    updatedCroppedPicture(file) {
+        if (file) {
+            this.setState({picture: file});
+
+            this.submitActive = true;
+            this.setState({clientError: null});
+        } else {
+            this.setState({picture: null});
+        }
+    }
+
     updatePicture(e) {
         if (e.target.files && e.target.files[0]) {
             this.setState({picture: e.target.files[0]});
@@ -1088,6 +1100,7 @@ class UserSettingsGeneralTab extends React.Component {
                     pictureChange={this.updatePicture}
                     submitActive={this.submitActive}
                     loadingPicture={this.state.loadingPicture}
+                    imageCropChange={this.updatedCroppedPicture}
                 />
             );
         } else {