Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, { Component } from "react";
- import { connect } from "react-redux";
- import * as actions from '../../actions';
- import Logo from "../img/image-center.png";
- import "./login.css";
- class Login extends Component {
- constructor(props){
- super(props);
- this.state = {
- errorMsg : ""
- };
- this.loginClicked = this.loginClicked.bind(this);
- console.log("loggedIn:", this.props.login);
- }
- loginClicked() {
- try {
- this.props.loginUser(this.refs.email.value, this.refs.password.value)
- .then(() => {
- console.log("thisprops", this.props);
- });
- }
- catch(ex){
- this.state.errorMsg = "Unable to connect to server";
- console.log("error", ex);
- }
- }
- render() {
- return (
- <div className="login-bg">
- <div className="container signForm">
- <div className="col s12 l6 login-form">
- <p className="center-align">Login to Trade Portal</p>
- <form>
- <div className="row">
- <div className="input-field">
- <input id="email" type="email" className="validate" ref="email" />
- <label htmlFor="email">Email</label>
- </div>
- </div>
- <div className="row">
- <div className="input-field">
- <input id="password" type="password" className="validate" ref="password" />
- <label htmlFor="password">Password</label>
- </div>
- </div>
- <div className="row">
- <button
- className="btn waves-effect waves-light"
- type="button"
- name="action"
- onClick={this.loginClicked}
- >
- Submit
- </button>
- <a href="/subcontractor" className="register">
- Register here
- </a>
- </div>
- <div className="row"><div style={{textAlign: "center", color:"red"}}>{this.props.login.message}</div></div>
- </form>
- </div>
- </div>
- </div>
- </div>
- );
- }
- }
- function mapStateToProps({login}){
- return { login } ;
- }
- export default connect(mapStateToProps, actions)(Login);
- import axios from "axios";
- import { FETCH_USER, LOGIN_USER, LOGIN_FAILED } from "./types";
- export const fetchUser = () => async dispatch => {
- const res = await axios.get("/api/Account/GetUser");
- dispatch({ type: FETCH_USER, payload: res.data });
- };
- export const loginUser = (username, password) => async dispatch => {
- try {
- const res = await axios.post("/api/Account/Login", {username: username, password: password, persistant: false });
- const message = res.data ? "" : "Incorrect username or password";
- dispatch({ type: LOGIN_USER, payload: { success: res.data, message: message } });
- }
- catch(ex){
- console.log("Login Failed:", ex);
- dispatch({ type: LOGIN_FAILED, payload: { success: false, message: "Unable to connect to authentication server" } });
- }
- }
- import { LOGIN_USER, LOGIN_FAILED } from "../actions/types";
- export default function(state = null, action) {
- console.log(action);
- switch (action.type) {
- case LOGIN_USER:
- return { success: action.payload.success, message: action.payload.message };
- break;
- case LOGIN_FAILED:
- return { success: false, message: action.payload.message };
- break;
- default:
- return { success: false, message: ""};
- }
- }
Add Comment
Please, Sign In to add comment