User can sign out

remote_frontend/src/App.tsx

@@ -1,6 +1,23 @@
+import {
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  MenuPopover,
+  MenuTrigger,
+  makeStyles,
+  typographyStyles,
+} from "@fluentui/react-components";
 import { ServerApi } from "./api/ServerApi";
 import { AuthRouteWidget } from "./routes/AuthRouteWidget";
 import { AsyncWidget } from "./widgets/AsyncWidget";
+import { AuthApi } from "./api/AuthApi";
+import { useAlert } from "./hooks/providers/AlertDialogProvider";
+import { useConfirm } from "./hooks/providers/ConfirmDialogProvider";
+
+const useStyles = makeStyles({
+  title: typographyStyles.title2,
+});
 
 export function App() {
   return (
@@ -15,7 +32,45 @@ export function App() {
 }
 
 function AppInner(): React.ReactElement {
+  const alert = useAlert();
+  const confirm = useConfirm();
+  const styles = useStyles();
+
+  const signOut = async () => {
+    try {
+      if (!(await confirm("Do you really want to sign out?"))) return;
+      await AuthApi.SignOut();
+    } catch (e) {
+      console.error(e);
+      alert("Failed to perform sign out!");
+    }
+  };
+
   if (!ServerApi.Config.authenticated && !ServerApi.Config.disable_auth)
     return <AuthRouteWidget />;
-  return <>todo authenticated</>;
+
+  return (
+    <div
+      style={{
+        width: "100%",
+        maxWidth: "1000px",
+        margin: "50px auto",
+      }}
+    >
+      <div style={{ display: "flex", justifyContent: "space-between" }}>
+        <span className={styles.title}>VirtWebRemote</span>
+        <Menu>
+          <MenuTrigger disableButtonEnhancement>
+            <MenuButton>Account</MenuButton>
+          </MenuTrigger>
+
+          <MenuPopover>
+            <MenuList>
+              <MenuItem onClick={signOut}>Sign out</MenuItem>
+            </MenuList>
+          </MenuPopover>
+        </Menu>
+      </div>
+    </div>
+  );
 }