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