E

authSagas.js

import { put, takeEvery, call } from 'redux-saga/effects'
import {LOGIN, LOGOUT, loginSucceeded, loginFailed, logoutSucceeded, logoutFailed} from "../actions/auth";
import {token} from "../resources/";

function* loginUser({username, password}) {
  try {
    const data = yield call(token.createToken, {username, password})
    yield put(loginSucceeded(data));
    console.log(data);
  }catch (error) {
    console.log(error);
    yield put(loginFailed(error.data, error.status))
  }
}

function* logoutUser() {
  try {
    const data = yield call(token.revokeToken)
    yield put(logoutSucceeded(data));
    console.log(data);
  }catch (error) {
    console.log(error.data);
    yield put(logoutFailed(error.data))
  }
}

function* watchAuth() {
  yield takeEvery(LOGIN, loginUser)
  yield takeEvery(LOGOUT, logoutUser)
}

export {
  loginUser,
  logoutUser,
  watchAuth
}

SignIn.js

import React, {Component, Fragment} from "react";
import style from "./style.css";

class SignIn extends Component{
    state = {username: '', password: ''}

    handleSubmit = (e)=>{
        this.props.login(this.state.username, this.state.password); //dispatch
        e.preventDefault();
    };

    handleChange = (e, field)=>{
        const newState = {};
        newState[field] = e.target.value;
        this.setState(newState)
    }

    render = ()=>{
        return (
            <Fragment>
                <form className={style.SignIn} onSubmit={this.handleSubmit}>
                    <label htmlFor="username">Username</label>
                    <input value={this.state.username} onChange={(e)=>this.handleChange(e, 'username')} id="username" type='text'/>
                    <label htmlFor="password">Password</label>
                    <input value={this.state.password} onChange={(e)=>this.handleChange(e, 'password')} id="password" type='text'/>
                    <button type="submit">Sign in</button>
                </form>
            </Fragment>
        );
    };
};

export default SignIn;