feat: add logged in user to header (#220)

## This PR

- adds the logged-in user to the header

### Related Issues

Fixes #219

### Notes


![image](https://github.com/open-feature/playground/assets/682996/4caa0878-f6fd-46b0-9100-2789321925b3)

---------

Signed-off-by: Michael Beemer <beeme1mr@users.noreply.github.com>

packages/ui/src/app/demos/fib3r/fib3r-demo.tsx

@@ -92,7 +92,7 @@ class Fib3rDemo extends Component<
                   : 'Welcome to FaaS: Fibonacci as a Service!'
               }
               hexColor={this.state.hexColor}
-              loggedIn={!!this.state.email}
+              loggedInUser={this.state.email}
               onLogoutClick={this.onLogoutClick.bind(this)}
               onLoginClick={this.onLoginClick.bind(this)}
             ></Header>

packages/ui/src/app/header.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 export class Header extends React.Component<{
   title: string;
   hexColor: string;
-  loggedIn: boolean;
+  loggedInUser?: string | null;
   titleClassName: string;
   loginClassName: string;
   onLoginClick: () => void;
@@ -19,8 +19,12 @@ export class Header extends React.Component<{
             <Typography className={this.props.titleClassName} variant="h6" component="div" style={{ flexGrow: 1 }}>
               {this.props.title}
             </Typography>
-            <Button className='step-click-login' onClick={this.props.loggedIn ? this.props.onLogoutClick : this.props.onLoginClick} color="inherit">
-              {this.props.loggedIn ? 'Logout' : 'Login'}
+            <Button
+              className="step-click-login"
+              onClick={this.props.loggedInUser ? this.props.onLogoutClick : this.props.onLoginClick}
+              color="inherit"
+            >
+              {this.props.loggedInUser ? this.props.loggedInUser : 'Login'}
             </Button>
           </Toolbar>
         </AppBar>