Created
March 16, 2016 01:14
-
-
Save czbaker/cfe47a9d4600183d088a to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| import { browserHistory } from 'react-router'; | |
| import { reduxForm } from 'redux-form'; | |
| // Fields for form | |
| const fields = ['user', 'password']; | |
| // Generate CSS for each field, based on error existence | |
| let fieldStyle = field => { | |
| if (field.touched && field.error) { | |
| return "field error" | |
| } else { | |
| return "field" | |
| } | |
| } | |
| // Display Errors | |
| let dispErrors = field => { | |
| if (field.touched && field.error) { | |
| return (<div className="ui basic red pointing prompt label transition visible">{field.error}</div>) | |
| } | |
| } | |
| // Validation (ReduxForm) | |
| const validate = values => { | |
| const errors = {}; | |
| if (!values.user) { | |
| errors.user = "Required" | |
| } | |
| if (!values.password) { | |
| errors.password = "Required" | |
| } | |
| return errors; | |
| } | |
| // OnSubmit (ReduxForm) | |
| let onSubmit = values => { | |
| Meteor.loginWithPassword(values.user, values.password, function (error) { | |
| // Here, I need to deal with this.props.dispatch({...}) | |
| }) | |
| } | |
| let LoginForm = React.createClass({ | |
| render() { | |
| const { fields: { user, password }, handleSubmit } = this.props; | |
| return ( | |
| <div className="row"> | |
| <div className="col-sm-4 col-sm-offset-4"> | |
| <div className="auth-box"> | |
| <div className="ui raised segment"> | |
| <form className="ui form"> | |
| <div className={fieldStyle(user)}> | |
| <label>Username / E-Mail</label> | |
| <input type="text" {...user} /> | |
| {dispErrors(user)} | |
| </div> | |
| <div className={fieldStyle(password)}> | |
| <label>Password</label> | |
| <input type="password" {...password} /> | |
| {dispErrors(password)} | |
| </div> | |
| <button className="ui button" type="submit" onClick={handleSubmit}> | |
| Login | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| ); | |
| } | |
| }); | |
| LoginForm = reduxForm({ | |
| form: 'login', | |
| fields: fields, | |
| validate, | |
| onSubmit | |
| })(LoginForm); | |
| export default LoginForm; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment