Component Test

component.js

import {Component} from "react";
import axios from "axios";

export class Login extends Component {

  /**
   * Submitting the form
   */
  submit() {
    // creating a post request to log the user in
    axios.post("http://localhost:3000/user/login?pass=" + this.refs.pass.value + "&user=" + this.refs.user.value).then(function (res) {
      // if got a user in return, set the state
      if (res.data.user) {this.setState({user: res.data.user})}
    });
  }

  /**
   * Rendering the component
   * @returns {*}
   */
  render() {
    // fetching the user to check if he is logged in
    axios.get("http://localhost:3000/user/current").
    then(function (res) {
      this.setState({user: res.data.user})
    });

    // if the user is not logged in
    if (!this.state.user) {
      return <form onSubmit={this.submit}>
        <input type="text" ref="user" name="email"/><br/><input type="text" ref="pass" name="pass"/><br/>


        <button type="submit"/>
      </form>
    }

    // if the user is logged in
    if (this.state.user) {


      // printing the user name Capitalized
      var userName = this.state.user.name.toUpperCase();
      userName = userName[0].toLowerCase() + userName.substr(1);
      return <h1>Welcome {userName}. Your role is {this.state.user.role}</h1>
    }
  }
}