From e9c38a5fbcaf62b035bb9c1ef6e98e010e7f544e Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tudor.stanciu94@gmail.com>
Date: Thu, 24 Dec 2020 05:32:35 +0200
Subject: [PATCH] login step update

---
 src/components/layout/Main.js                 | 28 +++++++++++++++----
 .../login/components/LoginContainer.js        |  4 ++-
 src/hooks/index.js                            |  1 +
 src/hooks/useAuthorizationToken.js            | 19 +++++++++++++
 src/state/initialState.js                     |  5 ++++
 src/state/reducer.js                          | 17 ++++++++++-
 6 files changed, 67 insertions(+), 7 deletions(-)
 create mode 100644 src/hooks/useAuthorizationToken.js

diff --git a/src/components/layout/Main.js b/src/components/layout/Main.js
index 2303946..35f83bf 100644
--- a/src/components/layout/Main.js
+++ b/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}>
-      <ApplicationStepper />
-      <div className={classes.content}>
-        <Switcher />
-      </div>
+    <div className={_tokenIsValid ? classes.app : classes.appLoginOnly}>
+      {_tokenIsValid ? (
+        <>
+          <ApplicationStepper />
+          <div className={classes.content}>
+            <Switcher />
+          </div>
+        </>
+      ) : (
+        <LoginContainer />
+      )}
     </div>
   );
 };
diff --git a/src/features/login/components/LoginContainer.js b/src/features/login/components/LoginContainer.js
index a23f64c..c2a33d7 100644
--- a/src/features/login/components/LoginContainer.js
+++ b/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) {
diff --git a/src/hooks/index.js b/src/hooks/index.js
index bc64692..7b4b325 100644
--- a/src/hooks/index.js
+++ b/src/hooks/index.js
@@ -1 +1,2 @@
 export { useToast } from "./useToast";
+export { useAuthorizationToken } from "./useAuthorizationToken";
diff --git a/src/hooks/useAuthorizationToken.js b/src/hooks/useAuthorizationToken.js
new file mode 100644
index 0000000..ee97a0b
--- /dev/null
+++ b/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 };
+};
diff --git a/src/state/initialState.js b/src/state/initialState.js
index 754d0e3..20f3db8 100644
--- a/src/state/initialState.js
+++ b/src/state/initialState.js
@@ -3,6 +3,11 @@ export const initialState = {
     userName: "",
     password: ""
   },
+  security: {
+    authorization: {
+      token: null
+    }
+  },
   network: {
     test: ""
   }
diff --git a/src/state/reducer.js b/src/state/reducer.js
index 2462eda..28c279c 100644
--- a/src/state/reducer.js
+++ b/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 } })
 });