Add preloader to Login process and tests

package.json

@@ -85,7 +85,6 @@
     "node-sass-chokidar": "1.3.4",
     "npm-check": "5.9.0",
     "npm-run-all": "4.1.3",
-
     "nyc": "13.1.0",
     "prettier": "1.14.3",
     "redux-devtools-extension": "2.13.5",

src/client/components/Login/index.js

@@ -12,14 +12,17 @@ import Check from "@material-ui/icons/Check";
 import Button from "@material-ui/core/Button";
 import IconButton from "@material-ui/core/IconButton";
 import { Redirect, Link } from "react-router-dom";
+import classNames from "classnames";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import green from "@material-ui/core/colors/green";
 
 const styles = theme => ({
   root: {
     flexGrow: 1
   },
   paper: {
     padding: theme.spacing.unit * 2,
-    height:  '100vh',
+    height: "100vh",
     display: "flex",
     alignItems: "center"
   },
@@ -29,9 +32,6 @@ const styles = theme => ({
   text: {
     width: "100%"
   },
-  button: {
-    margin: theme.spacing.unit
-  },
   link: {
     textDecoration: "none",
     color: theme.palette.secondary.main,
@@ -42,17 +42,44 @@ const styles = theme => ({
   learnMore: {
     color: "white",
     borderColor: "white"
+  },
+  wrapper: {
+    margin: theme.spacing.unit,
+    position: "relative"
+  },
+  buttonProgress: {
+    color: green[500],
+    position: "absolute",
+    top: "50%",
+    right: 133.69 / 2 - 33 / 2,
+    marginTop: -12,
+    marginLeft: -12
+  },
+  buttonSuccess: {
+    backgroundColor: green[500],
+    "&:hover": {
+      backgroundColor: green[700]
+    }
   }
 });
 
 type Props = {
   classes: Object,
   state: Object,
-  onLogin: Function
+  onLogin: Function,
+  success: boolean,
+  showPreloader: boolean
 };
 
-const Login = ({ onLogin, classes }: Props) => {
+const Login = ({
+  onLogin,
+  classes,
+  state: { showPreloader, success }
+}: Props) => {
   let email: HTMLInputElement, password: HTMLInputElement;
+  const buttonClassname = classNames({
+    [classes.buttonSuccess]: success
+  });
 
   if (typeof window !== "undefined" && window.localStorage.getItem("token")) {
     return <Redirect to="/" />;
@@ -126,6 +153,7 @@ const Login = ({ onLogin, classes }: Props) => {
                   }}
                 >
                   <TextField
+                    disabled={showPreloader}
                     inputRef={el => (email = el)}
                     className={classes.text}
                     label="Type your email"
@@ -138,6 +166,7 @@ const Login = ({ onLogin, classes }: Props) => {
                     }}
                   />
                   <TextField
+                    disabled={showPreloader}
                     inputRef={el => (password = el)}
                     type="password"
                     className={classes.text}
@@ -156,16 +185,26 @@ const Login = ({ onLogin, classes }: Props) => {
                     }}
                   >
                     <br />
-                    <Button
-                      onClick={() => onLogin(email, password)}
-                      size="large"
-                      variant="raised"
-                      color="primary"
-                      className={classes.button}
-                    >
-                      Sign in
-                      <Check />
-                    </Button>
+                    <div className={classes.wrapper}>
+                      <Button
+                        onClick={() => onLogin(email, password)}
+                        size="large"
+                        variant="raised"
+                        color="primary"
+                        className={buttonClassname}
+                        disabled={showPreloader}
+                      >
+                        Sign In
+                        <Check />
+                      </Button>
+                      {showPreloader && (
+                        <CircularProgress
+                          size={24}
+                          className={classes.buttonProgress}
+                        />
+                      )}
+                      <br />
+                    </div>
                     <br />
                     <Typography
                       component="p"
@@ -182,7 +221,8 @@ const Login = ({ onLogin, classes }: Props) => {
                 </div>
                 <br />
                 <div>
-                  Sign in with:<br />
+                  Sign in with:
+                  <br />
                   <IconButton className={classes.button}>
                     <i
                       className="fa fa-facebook-square fa-2x"

src/client/components/Signup/Signup.test.js

@@ -99,7 +99,7 @@ describe("<Signup /> User", () => {
     expect(toJson(wrapper)).toMatchSnapshot();
   });
 
-  it("should to change state qhen type in TextField", () => {
+  it("should to change state when type in TextField", () => {
     let expectedState = {
       confirmPassword: "",
       email: "email@example.com",

src/client/components/Signup/__snapshots__/Signup.test.js.snap

@@ -915,7 +915,7 @@ exports[`<Signup /> User should return a redirect component, bacause success pro
 />
 `;
 
-exports[`<Signup /> User should to change state qhen type in TextField 1`] = `
+exports[`<Signup /> User should to change state when type in TextField 1`] = `
 <WithStyles(Grid)
   className="Signup-root-1"
   container={true}

src/client/reducers/__tests__/UserReducer.js

@@ -43,7 +43,7 @@ describe("USer reducer", () => {
     let action = {
       type: actionTypes.LOADING_LOGIN
     };
-    let newState = { ...initialState, message: "Loading..." };
+    let newState = { ...initialState, showPreloader: true };
     let state = userReducer(initialState, action);
 
     expect(state).toEqual(newState);

src/client/reducers/userReducer.js

@@ -26,13 +26,13 @@ export default function userReducer(state = initialState, action) {
     case actionsType.LOADING_LOGIN:
       return {
         ...state,
-        message: "Loading..."
+        showPreloader: true
       };
     case actionsType.LOGIN_SUCCESS:
     case actionsType.LOGIN_ERROR:
       var { message, success, user } = action;
 
-      return { ...state, message, success, user };
+      return { ...state,showPreloader: false, message, success, user };
 
     case actionsType.LOGOUT_SUCCESS:
       return { ...initialState };