Add "New User" tab on login page; Login page prettify

Author: kulgavy

src/pages/login/LoginContainer.js

@@ -1,47 +1,50 @@
-import { compose, withState, withHandlers, lifecycle } from 'recompose';
-import { withRouter } from 'react-router-dom';
-import { connect } from 'react-redux';
+import { compose, withState, withHandlers, lifecycle } from "recompose";
+import { withRouter } from "react-router-dom";
+import { connect } from "react-redux";
 
-import LoginView from './LoginView';
-import { loginUser, resetError } from './LoginState';
+import LoginView from "./LoginView";
+import { loginUser, resetError } from "./LoginState";
 
 export default compose(
   connect(
     state => ({
       isLoading: state.login.isLoading,
       isAuthenticated: state.login.isAuthenticated,
-      error: state.login.error,
+      error: state.login.error
     }),
-    { loginUser, resetError },
+    { loginUser, resetError }
   ),
   withRouter,
-  withState('activeTabId', 'setActiveTabId', 0),
-  withState('loginValue', 'setLoginValue', ''),
-  withState('passwordValue', 'setPasswordValue', ''),
+  withState("activeTabId", "setActiveTabId", 0),
+  withState("nameValue", "setNameValue", ""),
+  withState("loginValue", "setLoginValue", ""),
+  withState("passwordValue", "setPasswordValue", ""),
   withHandlers({
     handleTabChange: props => (e, id) => {
       props.setActiveTabId(id);
     },
-    handleInput: props => (e, input = 'login') => {
+    handleInput: props => (e, input = "login") => {
       if (props.error) {
         props.resetError();
       }
 
-      if (input === 'login') {
+      if (input === "login") {
         props.setLoginValue(e.target.value);
-      } else {
+      } else if (input === "password") {
         props.setPasswordValue(e.target.value);
+      } else if (input === "name") {
+        props.setNameValue(e.target.value);
       }
     },
     handleLoginButtonClick: props => () => {
       props.loginUser(props.loginValue, props.passwordValue);
-    },
+    }
   }),
   lifecycle({
     componentWillReceiveProps(nextProps) {
       if (!this.props.error && nextProps.error) {
-        this.props.setPasswordValue('');
+        this.props.setPasswordValue("");
       }
     }
   })
-)(LoginView);
+)(LoginView);

src/pages/login/LoginState.js

@@ -1,38 +1,38 @@
 export const initialState = {
   isLoading: false,
   isAuthenticated: false,
-  error: null,
+  error: null
 };
 
-export const START_LOGIN = 'Login/START_LOGIN';
-export const LOGIN_SUCCESS = 'Login/LOGIN_SUCCESS';
-export const LOGIN_FAILURE = 'Login/LOGIN_FAILURE';
-export const RESET_ERROR = 'Login/RESET_ERROR';
-export const LOGIN_USER = 'Login/LOGIN_USER';
-export const SIGN_OUT_SUCCESS = 'Login/SIGN_OUT_SUCCESS';
+export const START_LOGIN = "Login/START_LOGIN";
+export const LOGIN_SUCCESS = "Login/LOGIN_SUCCESS";
+export const LOGIN_FAILURE = "Login/LOGIN_FAILURE";
+export const RESET_ERROR = "Login/RESET_ERROR";
+export const LOGIN_USER = "Login/LOGIN_USER";
+export const SIGN_OUT_SUCCESS = "Login/SIGN_OUT_SUCCESS";
 
 export const startLogin = () => ({
-  type: START_LOGIN,
+  type: START_LOGIN
 });
 
 export const loginSuccess = () => ({
-  type: LOGIN_SUCCESS,
+  type: LOGIN_SUCCESS
 });
 
 export const loginFailure = () => ({
-  type: LOGIN_FAILURE,
+  type: LOGIN_FAILURE
 });
 
 export const resetError = () => ({
-  type: RESET_ERROR,
-})
+  type: RESET_ERROR
+});
 
 export const loginUser = (login, password) => dispatch => {
   dispatch(startLogin());
 
   if (!!login && !!password) {
     setTimeout(() => {
-      localStorage.setItem('id_token', '1');
+      localStorage.setItem("id_token", "1");
       dispatch(loginSuccess());
     }, 2000);
   } else {
@@ -41,11 +41,11 @@ export const loginUser = (login, password) => dispatch => {
 };
 
 export const signOutSuccess = () => ({
-  type: SIGN_OUT_SUCCESS,
+  type: SIGN_OUT_SUCCESS
 });
 
 export const signOut = () => dispatch => {
-  localStorage.removeItem('id_token');
+  localStorage.removeItem("id_token");
   dispatch(signOutSuccess());
 };
 
@@ -54,32 +54,31 @@ export default function LoginReducer(state = initialState, { type, payload }) {
     case START_LOGIN:
       return {
         ...state,
-        isLoading: true,
+        isLoading: true
       };
     case LOGIN_SUCCESS:
       return {
         ...state,
         isLoading: false,
         isAuthenticated: true,
-        error: null,
+        error: null
       };
     case LOGIN_FAILURE:
       return {
         ...state,
         isLoading: false,
-        error: true,
+        error: true
       };
     case RESET_ERROR:
       return {
-        error: false,
+        error: false
       };
     case SIGN_OUT_SUCCESS:
-    debugger;
       return {
         ...state,
-        isAuthenticated: false,
+        isAuthenticated: false
       };
     default:
       return state;
   }
-}
+}