login step update

src/components/layout/Main.js

@@ -2,6 +2,8 @@ import React from "react";
 import ApplicationStepper from "./stepper/ApplicationStepper";
 import Switcher from "./Switcher";
 import { makeStyles } from "@material-ui/core/styles";
+import { useAuthorizationToken } from "../../hooks";
+import LoginContainer from "../../features/login/components/LoginContainer";
 
 const useStyles = makeStyles(() => ({
   app: {
@@ -19,18 +21,34 @@ const useStyles = makeStyles(() => ({
     justifyContent: "center",
     fontSize: "calc(10px + 2vmin)",
     color: "white"
+  },
+  appLoginOnly: {
+    textAlign: "center",
+    backgroundColor: "#282c34",
+    minHeight: "100vh",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center"
   }
 }));
 
 const Main = () => {
   const classes = useStyles();
+  const { tokenIsValid } = useAuthorizationToken();
+  const _tokenIsValid = tokenIsValid();
 
   return (
-    <div className={classes.app}>
+    <div className={_tokenIsValid ? classes.app : classes.appLoginOnly}>
-      <ApplicationStepper />
+      {_tokenIsValid ? (
-      <div className={classes.content}>
+        <>
-        <Switcher />
+          <ApplicationStepper />
-      </div>
+          <div className={classes.content}>
+            <Switcher />
+          </div>
+        </>
+      ) : (
+        <LoginContainer />
+      )}
     </div>
   );
 };

src/features/login/components/LoginContainer.js

@@ -23,7 +23,9 @@ const LoginContainer = () => {
 
     try {
       const response = await authenticate(userName, password);
-      if (response.status === "BAD_CREDENTIALS") {
+      if (response.status === "SUCCESS") {
+        dispatchActions.onAuthorizationTokenChange(response.token);
+      } else if (response.status === "BAD_CREDENTIALS") {
         error(t("Login.IncorrectCredentials"));
       }
     } catch (err) {

src/hooks/index.js

@@ -1 +1,2 @@
 export { useToast } from "./useToast";
+export { useAuthorizationToken } from "./useAuthorizationToken";

src/hooks/useAuthorizationToken.js

@@ -0,0 +1,19 @@
+import { useContext } from "react";
+import { ApplicationStateContext } from "../state/ApplicationContexts";
+
+export const useAuthorizationToken = () => {
+  const state = useContext(ApplicationStateContext);
+
+  const getToken = () => state.security.authorization.token;
+  const tokenIsValid = () => {
+    const token = getToken();
+    if (!token) {
+      return false;
+    }
+
+    const valid = new Date(token.validUntil) >= new Date();
+    return valid;
+  };
+
+  return { getToken, tokenIsValid };
+};

src/state/initialState.js

@@ -3,6 +3,11 @@ export const initialState = {
     userName: "",
     password: ""
   },
+  security: {
+    authorization: {
+      token: null
+    }
+  },
   network: {
     test: ""
   }

src/state/reducer.js

@@ -20,6 +20,19 @@ export function reducer(state, action) {
         }
       };
     }
+    case "onAuthorizationTokenChange": {
+      const { token } = action.payload;
+      return {
+        ...state,
+        security: {
+          ...state.security,
+          authorization: {
+            ...state.security.authorization,
+            token
+          }
+        }
+      };
+    }
     default: {
       return state;
     }
@@ -30,5 +43,7 @@ export const dispatchActions = dispatch => ({
   onCredentialsChange: (prop, value) =>
     dispatch({ type: "onCredentialsChange", payload: { prop, value } }),
   onNetworkChange: (prop, value) =>
-    dispatch({ type: "onNetworkChange", payload: { prop, value } })
+    dispatch({ type: "onNetworkChange", payload: { prop, value } }),
+  onAuthorizationTokenChange: token =>
+    dispatch({ type: "onAuthorizationTokenChange", payload: { token } })
 });