Skip to content

Instantly share code, notes, and snippets.

@godmar
Created November 11, 2016 15:47
Show Gist options
  • Save godmar/05c111e8e79f29e1bcf22f42cc6aaa5b to your computer and use it in GitHub Desktop.
Save godmar/05c111e8e79f29e1bcf22f42cc6aaa5b to your computer and use it in GitHub Desktop.
A patch to make LoginForm dumb
diff --git a/src/containers/forms/LoginForm.js b/src/containers/forms/LoginForm.js
index 5353cef..7c57b50 100644
--- a/src/containers/forms/LoginForm.js
+++ b/src/containers/forms/LoginForm.js
@@ -4,7 +4,7 @@ import { Alert, Button, ButtonToolbar,
Form, FormGroup } from 'react-bootstrap';
import { propTypes as reduxFormPropTypes } from 'redux-form';
-import connectedForm from './connectedForm';
+import { reduxForm } from 'redux-form';
import LabeledFormField from './LabeledFormField';
/*
@@ -26,7 +26,8 @@ class LoginForm extends React.Component {
handleSubmit, // provided by redux-form, read http://redux-form.com/6.1.1/docs/api/Props.md/
// if we used 'handleSubmit' instead of 'handleSubmit(onSubmit)' it would call
// this.props.onSubmit implicitly. We use onSubmit for clarity.
- valid // comes from redux-form
+ valid, // comes from redux-form
+ autherror // authentication error, from parent
} = this.props;
// use this to examine all props redux-form merges into props
@@ -37,10 +38,10 @@ class LoginForm extends React.Component {
<LabeledFormField name="username" label={'User Name'} />
<LabeledFormField name="password" label={'Password'} type="password" />
- { this.props.autherror &&
+ { autherror &&
<FormGroup>
<Alert bsStyle='danger'>
- {this.props.autherror.message || 'Login failed'}
+ {autherror.message || 'Login failed'}
</Alert>
</FormGroup>
}
@@ -76,16 +77,10 @@ const validate = values => {
return errors
}
-function mapStateToProps(state) {
- return {
- autherror: state.auth.error
- };
-}
-
-export default connectedForm({
+export default reduxForm({
form: 'login',
touchOnChange: false, // these are the defaults, set true to enable validation on change
touchOnBlur: true, // these are the defaults, set false to disable validation on blur
validate // defined above
-}, mapStateToProps)(LoginForm);
+})(LoginForm);
diff --git a/src/pages/LoginPage.js b/src/pages/LoginPage.js
index f642581..6184e51 100644
--- a/src/pages/LoginPage.js
+++ b/src/pages/LoginPage.js
@@ -50,7 +50,7 @@ class LoginPage extends React.Component {
<Panel header={<h1>Please log in</h1>} >
<LoginForm
loading={isLoading(user)}
- error={user.error}
+ autherror={user.error}
onSubmit={v => this.doLogin(v)} />
</Panel>
<div className="text-center">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment