fix(web): show display name instead of username

web/src/components/header.tsx

@@ -12,7 +12,7 @@ import {
 } from '@mui/material'
 import OpenInNewIcon from '@mui/icons-material/OpenInNew'
 
-import UserName from './userName'
+import Username from './username'
 import { AppContext } from '../context/appContext'
 
 const NODE_ENV = process.env.NODE_ENV
@@ -113,8 +113,8 @@ const Header = (props: any) => {
             justifyContent: 'flex-end'
           }}
         >
-          <UserName
-            userName={appContext.userName}
+          <Username
+            username={appContext.displayName || appContext.username}
             onClickHandler={handleMenu}
           />
           <Menu

web/src/components/login.tsx

@@ -15,7 +15,7 @@ const login = async (payload: { username: string; password: string }) =>
 const Login = ({ getCodeOnly }: any) => {
   const location = useLocation()
   const appContext = useContext(AppContext)
-  const [username, setUserName] = useState('')
+  const [username, setUsername] = useState('')
   const [password, setPassword] = useState('')
   const [errorMessage, setErrorMessage] = useState('')
   let error: boolean
@@ -57,8 +57,8 @@ const Login = ({ getCodeOnly }: any) => {
 
     if (loggedIn) {
       appContext.setLoggedIn?.(loggedIn)
-      appContext.setUserName?.(user.username)
-      appContext.setDisplayName?.(user.displayname)
+      appContext.setUsername?.(user.username)
+      appContext.setDisplayName?.(user.displayName)
     }
   }
 
@@ -101,7 +101,7 @@ const Login = ({ getCodeOnly }: any) => {
         label="Username"
         type="text"
         variant="outlined"
-        onChange={(e: any) => setUserName(e.target.value)}
+        onChange={(e: any) => setUsername(e.target.value)}
         required
       />
       <TextField

web/src/components/userName.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Typography, IconButton } from '@mui/material'
 import AccountCircle from '@mui/icons-material/AccountCircle'
 
-const UserName = (props: any) => {
+const Username = (props: any) => {
   return (
     <IconButton
       aria-label="account of current user"
@@ -21,10 +21,10 @@ const UserName = (props: any) => {
         <AccountCircle></AccountCircle>
       )}
       <Typography variant="h6" sx={{ color: 'white', padding: '0 8px' }}>
-        {props.userName}
+        {props.username}
       </Typography>
     </IconButton>
   )
 }
 
-export default UserName
+export default Username

web/src/context/appContext.tsx

@@ -13,8 +13,8 @@ interface AppContextProps {
   checkingSession: boolean
   loggedIn: boolean
   setLoggedIn: Dispatch<SetStateAction<boolean>> | null
-  userName: string
-  setUserName: Dispatch<SetStateAction<string>> | null
+  username: string
+  setUsername: Dispatch<SetStateAction<string>> | null
   displayName: string
   setDisplayName: Dispatch<SetStateAction<string>> | null
   logout: (() => void) | null
@@ -24,8 +24,8 @@ export const AppContext = createContext<AppContextProps>({
   checkingSession: false,
   loggedIn: false,
   setLoggedIn: null,
-  userName: '',
-  setUserName: null,
+  username: '',
+  setUsername: null,
   displayName: '',
   setDisplayName: null,
   logout: null
@@ -35,7 +35,7 @@ const AppContextProvider = (props: { children: ReactNode }) => {
   const { children } = props
   const [checkingSession, setCheckingSession] = useState(false)
   const [loggedIn, setLoggedIn] = useState(false)
-  const [userName, setUserName] = useState('')
+  const [username, setUsername] = useState('')
   const [displayName, setDisplayName] = useState('')
 
   useEffect(() => {
@@ -43,11 +43,12 @@ const AppContextProvider = (props: { children: ReactNode }) => {
 
     axios
       .get('/SASjsApi/session')
-      .then((response: any) => {
+      .then((res) => res.data)
+      .then((data: any) => {
         setCheckingSession(false)
         setLoggedIn(true)
-        setUserName(response.userName)
-        setDisplayName(response.displayName)
+        setUsername(data.username)
+        setDisplayName(data.displayName)
       })
       .catch(() => {
         setLoggedIn(false)
@@ -57,7 +58,7 @@ const AppContextProvider = (props: { children: ReactNode }) => {
   const logout = useCallback(() => {
     axios.get('/logout').then(() => {
       setLoggedIn(false)
-      setUserName('')
+      setUsername('')
       setDisplayName('')
     })
   }, [])
@@ -68,8 +69,8 @@ const AppContextProvider = (props: { children: ReactNode }) => {
         checkingSession,
         loggedIn,
         setLoggedIn,
-        userName,
-        setUserName,
+        username,
+        setUsername,
         displayName,
         setDisplayName,
         logout