From e9c38a5fbcaf62b035bb9c1ef6e98e010e7f544e Mon Sep 17 00:00:00 2001 From: Tudor Stanciu 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 ( -
- -
- -
+
+ {_tokenIsValid ? ( + <> + +
+ +
+ + ) : ( + + )}
); }; 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 } }) });