Merge pull request #1935 from processing/bug/login-form-disabled

[#1910][#1928] Update Login Form to show submit errors, not disable on submit error

Author: catarak

client/modules/User/actions.js

@@ -1,4 +1,5 @@
 import { browserHistory } from 'react-router';
+import { FORM_ERROR } from 'final-form';
 import * as ActionTypes from '../../constants';
 import apiClient from '../../utils/apiClient';
 import { showErrorModal, justOpenedProject } from '../IDE/actions/ide';
@@ -61,8 +62,7 @@ export function validateAndLoginUser(formProps) {
         })
         .catch((error) =>
           resolve({
-            password: error.response.data.message,
-            _error: 'Login failed!'
+            [FORM_ERROR]: error.response.data.message
           })
         );
     });

client/modules/User/components/LoginForm.jsx

@@ -19,7 +19,13 @@ function LoginForm(props) {
       validate={validateLogin}
       onSubmit={onSubmit}
     >
-      {({ handleSubmit, pristine, submitting, invalid }) => (
+      {({
+        handleSubmit,
+        submitError,
+        pristine,
+        submitting,
+        modifiedSinceLastSubmit
+      }) => (
         <form className="form" onSubmit={handleSubmit}>
           <Field name="email">
             {(field) => (
@@ -59,7 +65,10 @@ function LoginForm(props) {
               </p>
             )}
           </Field>
-          <Button type="submit" disabled={submitting || invalid || pristine}>
+          {submitError && !modifiedSinceLastSubmit && (
+            <span className="form-error">{submitError}</span>
+          )}
+          <Button type="submit" disabled={submitting || pristine}>
             {props.t('LoginForm.Submit')}
           </Button>
         </form>