Permalink
Browse files

Step 15: Add login and signup form

  • Loading branch information...
samanthamichele7 committed Jun 1, 2017
1 parent 4484ab7 commit d71a34a9ba4538fbb50f6a098a4917abd0410b95
Showing with 108 additions and 4 deletions.
  1. +1 −0 package.json
  2. +48 −2 src/containers/Login.js
  3. +57 −2 src/containers/Signup.js
  4. +2 −0 src/reducers/index.js
@@ -10,6 +10,7 @@
"react-router-dom": "^4.1.1",
"react-router-redux": "^5.0.0-alpha.6",
"redux": "^3.6.0",
"redux-form": "^6.7.0",
"redux-promise": "^0.5.3",
"superagent": "^3.5.2"
},
@@ -1,9 +1,55 @@
import React from 'react';
import { Field, reduxForm } from 'redux-form';

const validate = values => {
const errors = {};

if (!values.email) {
errors.email = "Please enter an email.";
} else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
errors.email = 'Invalid email address'
}

if (!values.password) {
errors.password = "Please enter a password.";
}

return errors;
};

class Login extends React.Component {
handleFormSubmit = (values) => {
console.log(values);
};

renderField = ({ input, label, type, meta: { touched, error } }) => (
<fieldset className={`form-group ${touched && error ? 'has-error' : ''}`}>
<label className="control-label">{label}</label>
<div>
<input {...input} placeholder={label} className="form-control" type={type} />
{touched && error && <div className="help-block">{error}</div>}
</div>
</fieldset>
);

render() {
return <div>Login</div>;
return(
<div className="container">
<div className="col-md-6 col-md-offset-3">
<h2 className="text-center">Log In</h2>
<form onSubmit={this.props.handleSubmit(this.handleFormSubmit)}>
<Field name="email" component={this.renderField} className="form-control" type="text" label="Email"/>
<Field name="password" component={this.renderField} className="form-control" type="password" label="Password"/>

<button action="submit" className="btn btn-primary">Sign In</button>
</form>
</div>
</div>
);
}
}

export default Login;
export default reduxForm({
form: 'login',
validate
})(Login);
@@ -1,9 +1,64 @@
import React from 'react';
import { Field, reduxForm } from 'redux-form';

const validate = values => {
const errors = {};

if (!values.email) {
errors.email = "Please enter an email.";
} else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
errors.email = 'Invalid email address'
}

if (!values.password) {
errors.password = "Please enter a password.";
}

if (!values.passwordConfirmation) {
errors.passwordConfirmation = "Please enter a password confirmation.";
}

if (values.password !== values.passwordConfirmation ) {
errors.password = 'Passwords do not match';
}

return errors;
};

class Signup extends React.Component {
handleFormSubmit = (values) => {
console.log(values);
};

renderField = ({ input, label, type, meta: { touched, error } }) => (
<fieldset className={`form-group ${touched && error ? 'has-error' : ''}`}>
<label className="control-label">{label}</label>
<div>
<input {...input} placeholder={label} className="form-control" type={type} />
{touched && error && <div className="help-block">{error}</div>}
</div>
</fieldset>
);

render() {
return <div>Signup</div>;
return (
<div className="container">
<div className="col-md-6 col-md-offset-3">
<h2 className="text-center">Sign Up</h2>
<form onSubmit={this.props.handleSubmit(this.handleFormSubmit)}>
<Field name="email" type="text" component={this.renderField} label="Email" />
<Field name="password" type="password" component={this.renderField} label="Password" />
<Field name="passwordConfirmation" type="password" component={this.renderField} label="Password Confirmation" />

<button action="submit" className="btn btn-primary">Sign up</button>
</form>
</div>
</div>
);
}
}

export default Signup;
export default reduxForm({
form: 'signup',
validate
})(Signup);
@@ -2,8 +2,10 @@ import { combineReducers } from 'redux';
import GifsReducer from './gifs';
import ModalReducer from './modal';
import { routerReducer } from 'react-router-redux';
import { reducer as FormReducer } from 'redux-form';

const rootReducer = combineReducers({
form: FormReducer,
gifs: GifsReducer,
modal: ModalReducer,
router: routerReducer

0 comments on commit d71a34a

Please sign in to comment.