login step update

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"
   }
 }

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"
   }
 }

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 (
     <Card className={classes.card}>
       <CardHeader
         avatar={
-          <Avatar aria-label="recipe" className={classes.avatar}>
+          <Avatar aria-label="user" className={classes.avatar}>
             <AccountBox />
           </Avatar>
         }
-        title={<strong>{t("Server.ActiveSession")}</strong>}
-        subheader="September 14, 2016"
+        title={
+          <strong>
+            {t("Login.Hello", { username: credentials.userName })}
+          </strong>
+        }
+        subheader={
+          <Tooltip title={t("Login.AuthenticationDate")}>
+            <Typography variant="caption" display="block">
+              {getTokenValidFrom()}
+            </Typography>
+          </Tooltip>
+        }
       />
 
       <CardActions disableSpacing>
@@ -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;

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 ? (
         <LoggedInComponent
           credentials={state.credentials}
+          token={getToken()}
           onChange={handleChange}
           onLogin={handleLogin}
           onLogout={handleLogout}

src/state/initialState.js

@@ -2,10 +2,11 @@ import { getItem } from "../utils/localStorage";
 import { storageKeys } from "../utils/identity";
 
 const token = getItem(storageKeys.TOKEN);
+const userName = getItem(storageKeys.USER);
 
 export const initialState = {
   credentials: {
-    userName: "",
+    userName: userName || "",
     password: ""
   },
   security: {

src/utils/identity.js

@@ -2,13 +2,14 @@ import { request } from "./axios";
 import { setItem, getItem, removeItem } from "./localStorage";
 
 const storageKeys = {
-  TOKEN: "AUTHORIZATION_TOKEN"
+  TOKEN: "AUTHORIZATION_TOKEN",
+  USER: "USER_NAME"
 };
 
-const authenticate = async (username, password) => {
+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);
   }
 };