Fix missing user info on account console (#12962)

* fixes logged in user display reported on issue https://github.com/keycloak/keycloak/issues/12039

* removing unused declaration

themes/src/main/resources/theme/keycloak.v2/account/src/app/App.tsx

@@ -33,7 +33,6 @@ import { KeycloakContext } from './keycloak-service/KeycloakContext';
 
 declare function toggleReact(): void;
 declare function isWelcomePage(): boolean;
-declare function loggedInUserName(): string;
 
 declare const brandImg: string;
 declare const brandUrl: string;
@@ -57,10 +56,6 @@ export class App extends React.Component<AppProps> {
             this.context!.login();
         }
 
-        const username = (
-            <span style={{marginLeft: '10px'}} id="loggedInUser">{loggedInUserName()}</span>
-        );
-
         const Header = (
             <PageHeader
                 logo={<a id="brandLink" href={brandUrl}><Brand src={brandImg} alt="Logo" className="brand"/></a>}

themes/src/main/resources/theme/keycloak.v2/account/src/app/PageHeaderTool.tsx

@@ -5,11 +5,14 @@ import {ReferrerLink} from './widgets/ReferrerLink';
 import {LogoutButton} from './widgets/Logout';
 
 declare const referrerName: string;
+declare function loggedInUserName(): string;
 
 export class PageHeaderTool extends React.Component {
     private hasReferrer: boolean = typeof referrerName !== 'undefined';
 
     public render(): React.ReactNode {
+        const username = loggedInUserName();
+    
         return (
             <PageHeaderTools>
                 {this.hasReferrer &&
@@ -21,6 +24,8 @@ export class PageHeaderTool extends React.Component {
                 <div className="pf-c-page__header-tools-group">
                     <LogoutButton/>
                 </div>
+
+                <span style={{marginLeft: '10px'}} id="loggedInUser">{username}</span>
             </PageHeaderTools>
         );
     }