#311: fix validation in profile forms

src/components/profile/changeEmail/ChangeEmail.jsx

@@ -323,12 +323,20 @@ export default class ChangeEmail extends Component {
 
     onFormSubmit = () => {
         const {activeStep} = this.state;
-        const promise = this.props.onSubmit(activeStep, this.props.stepForms[activeStep]);
+        const form = this.props.stepForms[activeStep];
+        const promise = this.props.onSubmit(activeStep, form);
 
         if (!promise || !promise.then) {
             throw new Error('Expecting promise from onSubmit');
         }
 
-        promise.then(() => this.nextStep(), () => this.forceUpdate());
+        promise.then(() => this.nextStep(), (resp) => {
+            if (resp.errors) {
+                form.setErrors(resp.errors);
+                this.forceUpdate();
+            } else {
+                return Promise.reject(resp);
+            }
+        });
     };
 }

src/components/profile/changePassword/ChangePassword.jsx

@@ -95,6 +95,15 @@ export default class ChangePassword extends Component {
     }
 
     onFormSubmit = () => {
-        this.props.onSubmit(this.props.form);
+        const {form} = this.props;
+
+        this.props.onSubmit(form)
+            .catch((resp) => {
+                if (resp.errors) {
+                    form.setErrors(resp.errors);
+                } else {
+                    return Promise.reject(resp);
+                }
+            });
     };
 }

src/components/profile/changeUsername/ChangeUsername.jsx

@@ -80,6 +80,15 @@ export default class ChangeUsername extends Component {
     };
 
     onFormSubmit = () => {
-        this.props.onSubmit(this.props.form);
+        const {form} = this.props;
+
+        this.props.onSubmit(form)
+            .catch((resp) => {
+                if (resp.errors) {
+                    form.setErrors(resp.errors);
+                } else {
+                    return Promise.reject(resp);
+                }
+            });
     };
 }

src/components/ui/form/FormError.jsx

@@ -13,5 +13,11 @@ export default function FormError({error}) {
 }
 
 FormError.propTypes = {
-    error: PropTypes.string
+    error: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.shape({
+            type: PropTypes.string.isRequired,
+            payload: PropTypes.object.isRequired
+        })
+    ])
 };

src/components/ui/form/Input.jsx

@@ -25,7 +25,13 @@ export default class Input extends FormInputComponent {
             }),
             PropTypes.string
         ]),
-        error: PropTypes.string,
+        error: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.shape({
+                type: PropTypes.string.isRequired,
+                payload: PropTypes.object.isRequired
+            })
+        ]),
         icon: PropTypes.string,
         skin: PropTypes.oneOf(skins),
         color: PropTypes.oneOf(colors),

src/pages/profile/ChangePasswordPage.jsx

@@ -26,7 +26,7 @@ class ChangePasswordPage extends Component {
 
     onSubmit = () => {
         const {form} = this;
-        this.context.onSubmit({
+        return this.context.onSubmit({
             form,
             sendData: () => accounts.changePassword(form.serialize())
         }).then(() => {

src/pages/profile/ChangeUsernamePage.jsx

@@ -45,10 +45,10 @@ class ChangeUsernamePage extends Component {
         const {form} = this;
         if (this.actualUsername === this.props.username) {
             this.context.goToProfile();
-            return;
+            return Promise.resolve();
         }
 
-        this.context.onSubmit({
+        return this.context.onSubmit({
             form,
             sendData: () => accounts.changeUsername(form.serialize())
         }).then(() => {

src/pages/profile/ProfilePage.jsx

@@ -86,6 +86,8 @@ export default connect(null, {
                     logger.warn('Unexpected profile editing error', {
                         resp
                     });
+                } else {
+                    return Promise.reject(resp);
                 }
             })
             .finally(() => form.endLoading());