authenticate: show the device enrolled page as the user info page (#3151)

ui/src/App.tsx

@@ -1,4 +1,9 @@
-import DeviceEnrolledPage from "./components/DeviceEnrolledPage";
+import Box from "@mui/material/Box";
+import CssBaseline from "@mui/material/CssBaseline";
+import { ThemeProvider } from "@mui/material/styles";
+import { get } from "lodash";
+import React, { FC } from "react";
+
 import ErrorPage from "./components/ErrorPage";
 import Footer from "./components/Footer";
 import Header from "./components/Header";
@@ -8,12 +13,7 @@ import UserInfoPage from "./components/UserInfoPage";
 import WebAuthnRegistrationPage from "./components/WebAuthnRegistrationPage";
 import { SubpageContextProvider } from "./context/Subpage";
 import { createTheme } from "./theme";
-import {PageData, UserInfoPageData} from "./types";
-import Box from "@mui/material/Box";
-import CssBaseline from "@mui/material/CssBaseline";
-import { ThemeProvider } from "@mui/material/styles";
-import React, { FC } from "react";
-import {get} from "lodash";
+import { PageData, UserInfoPageData } from "./types";
 
 const theme = createTheme();
 
@@ -21,15 +21,13 @@ const App: FC = () => {
   const data = (window["POMERIUM_DATA"] || {}) as PageData;
   let body: React.ReactNode = <></>;
   switch (data?.page) {
-    case "DeviceEnrolled":
-      body = <DeviceEnrolledPage data={data} />;
-      break;
     case "Error":
       body = <ErrorPage data={data} />;
       break;
     case "SignOutConfirm":
       body = <SignOutConfirmPage data={data} />;
       break;
+    case "DeviceEnrolled":
     case "UserInfo":
       body = <UserInfoPage data={data} />;
       break;
@@ -40,7 +38,7 @@ const App: FC = () => {
   return (
     <ThemeProvider theme={theme}>
       <CssBaseline />
-      <SubpageContextProvider>
+      <SubpageContextProvider page={data?.page}>
         <Header includeSidebar={data?.page === "UserInfo"} data={data} />
         <ToolbarOffset />
         <Box sx={{ overflow: "hidden", height: "calc(100vh - 120px)" }}>
@@ -55,7 +53,7 @@ const App: FC = () => {
             <ToolbarOffset />
           </Box>
         </Box>
-        <Footer pomeriumVersion={get(data, 'pomeriumVersion')} />
+        <Footer pomeriumVersion={get(data, "pomeriumVersion")} />
       </SubpageContextProvider>
     </ThemeProvider>
   );

ui/src/components/DeviceEnrolledPage.tsx

@@ -1,19 +0,0 @@
-import HeroSection from "./HeroSection";
-import Container from "@mui/material/Container";
-import React, { FC } from "react";
-import { DeviceEnrolledPageData } from "src/types";
-
-type DeviceEnrolledPageProps = {
-  data: DeviceEnrolledPageData;
-};
-const DeviceEnrolledPage: FC<DeviceEnrolledPageProps> = () => {
-  return (
-    <Container maxWidth={false}>
-      <HeroSection
-        title="Device Enrolled"
-        text="Device Successfully Enrolled"
-      />
-    </Container>
-  );
-};
-export default DeviceEnrolledPage;

ui/src/components/UserInfoPage.tsx

@@ -1,9 +1,18 @@
-import { Drawer, useMediaQuery } from "@mui/material";
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Drawer,
+  useMediaQuery,
+} from "@mui/material";
 import Container from "@mui/material/Container";
 import Stack from "@mui/material/Stack";
 import { useTheme } from "@mui/material/styles";
-import React, { FC, useContext } from "react";
-import { UserInfoPageData } from "src/types";
+import React, { FC, useContext, useEffect, useState } from "react";
+import { UserInfoData } from "src/types";
 
 import { SubpageContext } from "../context/Subpage";
 import GroupDetails from "./GroupDetails";
@@ -13,7 +22,7 @@ import { ToolbarOffset } from "./ToolbarOffset";
 import { UserSidebarContent } from "./UserSidebarContent";
 
 type UserInfoPageProps = {
-  data: UserInfoPageData;
+  data: UserInfoData & { page: "DeviceEnrolled" | "UserInfo" };
 };
 const UserInfoPage: FC<UserInfoPageProps> = ({ data }) => {
   const theme = useTheme();
@@ -23,8 +32,31 @@ const UserInfoPage: FC<UserInfoPageProps> = ({ data }) => {
   });
   const { subpage } = useContext(SubpageContext);
 
+  const [showDeviceEnrolled, setShowDeviceEnrolled] = useState(false);
+
+  useEffect(() => {
+    if (data.page === "DeviceEnrolled") {
+      setShowDeviceEnrolled(true);
+    } else {
+      setShowDeviceEnrolled(false);
+    }
+  }, [data.page]);
+
+  function handleCloseDeviceEnrolled() {
+    setShowDeviceEnrolled(false);
+  }
+
   return (
     <Container maxWidth={false}>
+      <Dialog open={showDeviceEnrolled} onClose={handleCloseDeviceEnrolled}>
+        <DialogTitle>Device Enrolled</DialogTitle>
+        <DialogContent>
+          <DialogContentText>Device Successfully Enrolled</DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleCloseDeviceEnrolled}>OK</Button>
+        </DialogActions>
+      </Dialog>
       {mdUp && (
         <Drawer
           anchor="left"

ui/src/context/Subpage.tsx

@@ -1,4 +1,4 @@
-import React, {createContext, FC, useState} from 'react'
+import React, { createContext, FC, useState } from "react";
 
 export interface SubpageContextValue {
   subpage: string;
@@ -10,22 +10,25 @@ export const SubpageContext = createContext<SubpageContextValue>({
   setSubpage: (_: string) => {},
 });
 
-export const SubpageContextProvider:FC = ({children}) => {
-
+export type SubpageContextProviderProps = {
+  page: string;
+};
+export const SubpageContextProvider: FC<SubpageContextProviderProps> = ({
+  page,
+  children,
+}) => {
   const setSubpage = (subpage: string) => {
-    setState({...state, subpage})
-  }
+    setState({ ...state, subpage });
+  };
 
   const initState = {
-    subpage: "User",
-    setSubpage
-  }
+    subpage: page === "DeviceEnrolled" ? "Devices Info" : "User",
+    setSubpage,
+  };
 
-  const [state, setState] = useState(initState)
+  const [state, setState] = useState(initState);
 
   return (
-    <SubpageContext.Provider value={state}>
-      {children}
-    </SubpageContext.Provider>
-  )
-}
+    <SubpageContext.Provider value={state}>{children}</SubpageContext.Provider>
+  );
+};

ui/src/types/index.ts

@@ -95,18 +95,7 @@ export type ErrorPageData = BasePageData & {
   version?: string;
 };
 
-export type DeviceEnrolledPageData = BasePageData & {
-  page: "DeviceEnrolled";
-};
-
-export type SignOutConfirmPageData = BasePageData & {
-  page: "SignOutConfirm";
-  url: string;
-};
-
-export type UserInfoPageData = BasePageData & {
-  page: "UserInfo";
-
+export type UserInfoData = {
   csrfToken: string;
   directoryGroups?: Group[];
   directoryUser?: DirectoryUser;
@@ -118,6 +107,21 @@ export type UserInfoPageData = BasePageData & {
   pomeriumVersion: string;
 };
 
+export type DeviceEnrolledPageData = BasePageData &
+  UserInfoData & {
+    page: "DeviceEnrolled";
+  };
+
+export type SignOutConfirmPageData = BasePageData & {
+  page: "SignOutConfirm";
+  url: string;
+};
+
+export type UserInfoPageData = BasePageData &
+  UserInfoData & {
+    page: "UserInfo";
+  };
+
 export type WebAuthnRegistrationPageData = BasePageData & {
   page: "WebAuthnRegistration";