I have an isomorphic app that renders a sign in form using redux-form and allows a user to enter a user name and password.
This all works fine client-side but if I turn off JS I can't seem to get the values from the form to process via an API.
NB: When form is GET, the values show in the url as query params but obviously don't want to show sensitive data.
class SignIn extends Component {
static propTypes = {
errorMessage: PropTypes.string,
handleSubmit: PropTypes.func,
signinUser: PropTypes.func
}
statics = {
fields: [
{
name: 'email',
label: 'Email'
},
{
name: 'password',
label: 'Password',
type: 'password'
}
]
}
handleFormSubmit({ email, password }) {
this.props.signinUser({ email, password });
}
// renders an alert if field has an error
renderAlert() {
if (this.props.errorMessage) {
return (
<div className='alert alert-danger'>
<strong>Oops!</strong> {this.props.errorMessage}
</div>
);
}
return false;
}
// render the field
renderField = ({ input, label, name, type, meta: { touched, error }, ...rest }) => (
<div>
<label htmlFor={name}>{label}</label>
<div>
<input {...input} {...rest} id={name} placeholder={label} type={type} />
{touched && error && <span className='error'>{error}</span>}
</div>
</div>
);
render() {
const { handleSubmit } = this.props;
return (
<form method='post' onSubmit={handleSubmit((data) => this.handleFormSubmit(data))}>
{
this.statics.fields.map((field, index) =>
<fieldset className='form-group' key={index}>
<Field
className='form-control'
component={this.renderField}
label={field.label}
name={field.name}
type={field.type || 'text'}
/>
</fieldset>
)
}
{this.renderAlert()}
<button action='submit' className='btn btn-primary'>Sign in</button>
</form>
);
}
}
and the routes:
<Route path='/' component={App}>
<IndexRoute component={Welcome} />
<Route path='/feature' onEnter={requireAuth} component={Feature} />
<Route path='/signin' component={Signin} />
<Route path='/signout' component={Signout} />
<Route path='/signup' component={Signup} />
</Route>
