Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, {Component} from 'react';
- import ErrorMessage from "../ErrorMessage";
- import {Field, reduxForm} from 'redux-form';
- import {connect} from 'react-redux';
- import {validate} from '../validate';
- import {SUBMIT_USERNAME_PASSWORD} from "../../constants";
- class Login extends Component {
- constructor(props) {
- //Login is stateful component, but finally action will change
- //reducer state
- super(props);
- const token = localStorage.getItem('token');
- const isAuthenticated = !((token === undefined) | (token === null));
- this.state = {
- token,
- isAuthenticated,
- message: null,
- statusCode: null
- };
- }
- onSubmit(values) {
- const {userid, password} = values;
- const data = {
- username: userid,
- password
- };
- this.props.onSubmitClick(data);
- }
- componentWillUpdate(){
- console.log('componentWillUpdate');
- if(this.props.isAuthenticated){
- this.props.history.push('/companies');
- }
- }
- renderField(field) {
- const {meta: {touched, error}} = field;
- const className = `'form-group' ${touched && error ? 'has-danger' : ''}`;
- console.log('renderField');
- return (
- <div className={className}>
- <label>{field.label}</label>
- <input
- className="form-control"
- type={field.type}
- placeholder={field.placeholder}
- {...field.input}
- />
- <div className="text-help">
- {touched ? error : ''}
- </div>
- </div>
- );
- }
- render() {
- const {handleSubmit} = this.props;
- return (
- <div>
- <ErrorMessage
- isAuthenticated={this.props.isAuthenticated}
- message={this.props.message}
- />
- <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
- <Field
- name="userid"
- component={this.renderField}
- placeholder="User ID"
- type="text"
- />
- <Field
- name="password"
- component={this.renderField}
- placeholder="Password"
- type="password"
- />
- <button type="submit" className="btn btn-primary">Submit</button>
- </form>
- <a className='btn btn-primary' href="https://www.magicboxasia.com/">Sign up</a>
- </div>
- );
- }
- }
- const onSubmitClick = ({username, password}) => {
- return {
- type: SUBMIT_USERNAME_PASSWORD,
- payload: {username, password}
- };
- };
- const mapStateToProps = (state, ownProps) => {
- return {
- ...state.login
- }
- };
- export default reduxForm({
- validate,
- form: 'LoginForm'
- })(
- connect(mapStateToProps, {onSubmitClick})(Login)
- );
- const shootApiTokenAuth = (values) =>{
- const {username, password} = values;
- return axios.post(`${ROOT_URL}/api-token-auth/`,
- {username, password});
- };
- function* shootAPI(action){
- try{
- const res = yield call(shootApiTokenAuth, action.payload);
- yield put({
- type: REQUEST_SUCCESS,
- payload: res
- });
- }catch(err){
- yield put({
- type: REQUEST_FAILED,
- payload: err
- });
- }
- }
- function * watchSubmitBtn(){
- yield takeEvery(SUBMIT_USERNAME_PASSWORD, shootAPI);
- }
- // single entry point to start all Sagas at once
- export default function* rootSaga() {
- yield all([
- watchSubmitBtn()
- ])
- }
Add Comment
Please, Sign In to add comment