Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, { Component } from 'react';
- import { connect } from 'react-redux';
- import { login } from '../../redux/reducer';
- import './LoginForm.css';
- import { BrowserRouter as Router, Route } from "react-router-dom";
- class LoginForm extends Component {
- constructor(props) {
- super(props);
- this.state = {};
- this.onSubmit = this.onSubmit.bind(this);
- }
- render() {
- let {username, password} = this.state;
- let {isLoginPending, isLoginSuccess, loginError} = this.props;
- return (
- <form name="loginForm" onSubmit={this.onSubmit}>
- <div className="form-group-collection">
- <div className="form-group">
- <label>Username/E-mail:</label>
- <input type="username" name="username" onChange={e => this.setState({username: e.target.value})} value={username}/>
- </div>
- <div className="form-group">
- <label>Password:</label>
- <input type="password" name="password" onChange={e => this.setState({password: e.target.value})} value={password}/>
- </div>
- </div>
- <input type="submit" value="Login" />
- <div className="message">
- { isLoginPending && <div>Please wait...</div> }
- { isLoginSuccess && <div>Success.
- <Router><Route exact path="/" component={Home}/></Router></div> }
- { loginError && <div>{loginError.message}</div> }
- </div>
- </form>
- )
- }
- onSubmit(e) {
- e.preventDefault();
- let { username, password } = this.state;
- this.props.login(username, password);
- this.setState({
- username: '',
- password: ''
- });
- }
- }
- const Home = () => (
- <div>
- <h2>Welcome Admin </h2>
- </div>
- );
- const mapStateToProps = (state) => {
- return {
- isLoginPending: state.isLoginPending,
- isLoginSuccess: state.isLoginSuccess,
- loginError: state.loginError
- };
- }
- const mapDispatchToProps = (dispatch) => {
- return {
- login: (username, password) => dispatch(login(username, password))
- };
- }
- export default connect(mapStateToProps, mapDispatchToProps)(LoginForm);
- const SET_LOGIN_PENDING = 'SET_LOGIN_PENDING';
- const SET_LOGIN_SUCCESS = 'SET_LOGIN_SUCCESS';
- const SET_LOGIN_ERROR = 'SET_LOGIN_ERROR';
- export function login(username, password) {
- return dispatch => {
- dispatch(setLoginPending(true));
- dispatch(setLoginSuccess(false));
- dispatch(setLoginError(null));
- callLoginApi(username, password, error => {
- dispatch(setLoginPending(false));
- if (!error) {
- dispatch(setLoginSuccess(true));
- } else {
- dispatch(setLoginError(error));
- }
- });
- }
- }
- function setLoginPending(isLoginPending) {
- return {
- type: SET_LOGIN_PENDING,
- isLoginPending
- };
- }
- function setLoginSuccess(isLoginSuccess) {
- return {
- type: SET_LOGIN_SUCCESS,
- isLoginSuccess
- };
- }
- function setLoginError(loginError) {
- return {
- type: SET_LOGIN_ERROR,
- loginError
- }
- }
- function callLoginApi(username, password, callback) {
- setTimeout(() => {
- if (username === 'admin' && password === 'password') {
- return callback(null);
- } else {
- return callback(new Error('Invalid username and password'));
- }
- }, 1000);
- }
- export default function reducer(state = {
- isLoginSuccess: false,
- isLoginPending: false,
- loginError: null
- }, action) {
- switch (action.type) {
- case SET_LOGIN_PENDING:
- return Object.assign({}, state, {
- isLoginPending: action.isLoginPending
- });
- case SET_LOGIN_SUCCESS:
- return Object.assign({}, state, {
- isLoginSuccess: action.isLoginSuccess
- });
- case SET_LOGIN_ERROR:
- return Object.assign({}, state, {
- loginError: action.loginError
- });
- default:
- return state;
- }
- }
- import { createStore, applyMiddleware } from 'redux';
- import thunk from 'redux-thunk';
- import logger from 'redux-logger';
- import reducer from './reducer';
- const store = createStore(reducer, {}, applyMiddleware(thunk, logger));
- export default store;
Add Comment
Please, Sign In to add comment