Add userTrustedDeviceComponent to Account props (#49338)

This enables us to add a user trusted device component to be rendered only in enterprise clusters
gravitational · Nov 25, 2024 · 2132b97 · 2132b97
1 parent 9215096
commit 2132b97
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/web/packages/teleport/src/Account/Account.tsx b/web/packages/teleport/src/Account/Account.tsx
@@ -62,9 +62,13 @@ export interface EnterpriseComponentProps {
 
 export interface AccountPageProps {
   enterpriseComponent?: React.ComponentType<EnterpriseComponentProps>;
+  userTrustedDevicesComponent?: React.ComponentType;
 }
 
-export function AccountPage({ enterpriseComponent }: AccountPageProps) {
+export function AccountPage({
+  enterpriseComponent,
+  userTrustedDevicesComponent,
+}: AccountPageProps) {
   const ctx = useTeleport();
   const storeUser = useStore(ctx.storeUser);
   const isSso = storeUser.isSso();
@@ -85,6 +89,7 @@ export function AccountPage({ enterpriseComponent }: AccountPageProps) {
       passwordState={storeUser.getPasswordState()}
       {...manageDevicesState}
       enterpriseComponent={enterpriseComponent}
+      userTrustedDevicesComponent={userTrustedDevicesComponent}
       onPasswordChange={onPasswordChange}
     />
   );
@@ -116,6 +121,7 @@ export function Account({
   canAddPasskeys,
   enterpriseComponent: EnterpriseComponent,
   newDeviceUsage,
+  userTrustedDevicesComponent: TrustedDeviceListComponent,
   passwordState,
   onPasswordChange: onPasswordChangeCb,
 }: AccountProps) {
@@ -191,7 +197,7 @@ export function Account({
 
   return (
     <Relative>
-      <FeatureBox>
+      <FeatureBox maxWidth={1440} margin="auto">
         <FeatureHeader>
           <FeatureHeaderTitle>Account Settings</FeatureHeaderTitle>
         </FeatureHeader>
@@ -264,6 +270,7 @@ export function Account({
           {EnterpriseComponent && (
             <EnterpriseComponent addNotification={addNotification} />
           )}
+          {TrustedDeviceListComponent && <TrustedDeviceListComponent />}
         </Flex>
       </FeatureBox>
 

diff --git a/web/packages/teleport/src/DeviceTrust/types.ts b/web/packages/teleport/src/DeviceTrust/types.ts
@@ -24,6 +24,7 @@ export type TrustedDevice = {
   osType: TrustedDeviceOSType;
   enrollStatus: 'enrolled' | 'not enrolled';
   owner: string;
+  createTime?: Date;
 };
 
 export type TrustedDeviceOSType = 'Windows' | 'Linux' | 'macOS';