From 2d53a734d4aad7d3a1a94f4c95c045997d1edd66 Mon Sep 17 00:00:00 2001 From: Tudor Stanciu Date: Thu, 24 Dec 2020 18:22:07 +0200 Subject: [PATCH] login step update --- public/locales/en/translations.json | 4 +- public/locales/ro/translations.json | 4 +- .../login/components/LoggedInComponent.js | 66 +++++++++++++++---- .../login/components/LoginContainer.js | 3 +- src/state/initialState.js | 3 +- src/utils/identity.js | 9 ++- 6 files changed, 69 insertions(+), 20 deletions(-) diff --git a/public/locales/en/translations.json b/public/locales/en/translations.json index 2a998b4..c95e958 100644 --- a/public/locales/en/translations.json +++ b/public/locales/en/translations.json @@ -23,6 +23,8 @@ "Label": "Login", "ChangeUser": "Change user", "Logout": "Logout", - "IncorrectCredentials": "Incorrect credentials." + "IncorrectCredentials": "Incorrect credentials.", + "Hello": "Hi, {{username}}", + "AuthenticationDate": "Authentication date" } } diff --git a/public/locales/ro/translations.json b/public/locales/ro/translations.json index e2809c3..b307523 100644 --- a/public/locales/ro/translations.json +++ b/public/locales/ro/translations.json @@ -14,6 +14,8 @@ "Label": "Autentificare", "ChangeUser": "Schimbă utilizatorul", "Logout": "Deconectare", - "IncorrectCredentials": "Credențiale incorecte." + "IncorrectCredentials": "Credențiale incorecte.", + "Hello": "Salut, {{username}}", + "AuthenticationDate": "Momentul autentificării" } } diff --git a/src/features/login/components/LoggedInComponent.js b/src/features/login/components/LoggedInComponent.js index e73937b..1f82e4c 100644 --- a/src/features/login/components/LoggedInComponent.js +++ b/src/features/login/components/LoggedInComponent.js @@ -1,11 +1,18 @@ -import React from "react"; +import React, { useState, useCallback } from "react"; +import PropTypes from "prop-types"; import { makeStyles } from "@material-ui/core/styles"; -import Card from "@material-ui/core/Card"; -import CardHeader from "@material-ui/core/CardHeader"; -import CardContent from "@material-ui/core/CardContent"; -import CardActions from "@material-ui/core/CardActions"; -import { Avatar, Collapse, Tooltip, Divider } from "@material-ui/core"; -import IconButton from "@material-ui/core/IconButton"; +import { + Avatar, + Collapse, + Tooltip, + Divider, + Typography, + Card, + CardContent, + CardActions, + CardHeader, + IconButton +} from "@material-ui/core"; import { AccountBox, RotateLeft, ExitToApp } from "@material-ui/icons"; import LoginComponent from "./LoginComponent"; import { useTranslation } from "react-i18next"; @@ -25,25 +32,52 @@ const useStyles = makeStyles(theme => ({ } })); -const LoggedInComponent = ({ credentials, onChange, onLogin, onLogout }) => { +const LoggedInComponent = ({ + credentials, + token, + onChange, + onLogin, + onLogout +}) => { const classes = useStyles(); const { t } = useTranslation(); - const [expanded, setExpanded] = React.useState(false); + const [expanded, setExpanded] = useState(false); const handleExpandLogin = () => { setExpanded(!expanded); }; + const getTokenValidFrom = useCallback(() => { + const tokenValidFrom = token?.validFrom; + + if (tokenValidFrom) { + const valueForDisplay = t("LONG_DATE", { date: tokenValidFrom }); + return valueForDisplay; + } + + return "N/A"; + }, [token, t]); + return ( + } - title={{t("Server.ActiveSession")}} - subheader="September 14, 2016" + title={ + + {t("Login.Hello", { username: credentials.userName })} + + } + subheader={ + + + {getTokenValidFrom()} + + + } /> @@ -81,6 +115,12 @@ const LoggedInComponent = ({ credentials, onChange, onLogin, onLogout }) => { ); }; -LoggedInComponent.propTypes = {}; +LoggedInComponent.propTypes = { + credentials: PropTypes.object.isRequired, + token: PropTypes.object, + onChange: PropTypes.func.isRequired, + onLogin: PropTypes.func.isRequired, + onLogout: PropTypes.func.isRequired +}; export default LoggedInComponent; diff --git a/src/features/login/components/LoginContainer.js b/src/features/login/components/LoginContainer.js index 4060c57..a7721b4 100644 --- a/src/features/login/components/LoginContainer.js +++ b/src/features/login/components/LoginContainer.js @@ -14,7 +14,7 @@ const LoginContainer = () => { const dispatchActions = useContext(ApplicationDispatchContext); const { error } = useToast(); const { t } = useTranslation(); - const { tokenIsValid, invalidateToken } = useAuthorizationToken(); + const { tokenIsValid, invalidateToken, getToken } = useAuthorizationToken(); const handleChange = prop => event => { dispatchActions.onCredentialsChange(prop, event.target.value); @@ -45,6 +45,7 @@ const LoginContainer = () => { {tokenIsValid ? ( { +const authenticate = async (userName, password) => { const urlTemplate = process.env.REACT_APP_IDENTITY_AUTHENTICATION_URL; const url = urlTemplate - .replace("{username}", username) + .replace("{username}", userName) .replace("{password}", password); const options = { method: "post" @@ -17,6 +18,7 @@ const authenticate = async (username, password) => { const response = await request(url, options); if (response.status === "SUCCESS") { setItem(storageKeys.TOKEN, response.token); + setItem(storageKeys.USER, userName); } return response; @@ -26,6 +28,7 @@ const invalidate = () => { const token = getItem(storageKeys.TOKEN); if (token) { removeItem(storageKeys.TOKEN); + removeItem(storageKeys.USER); } };