import React from 'react' ; import { Box , Indicator , ButtonPrimary } from 'design' ; import { Danger } from 'design/Alert' ; import useTeleport from 'teleport/useTeleport' ; import { FeatureBox , FeatureHeader , FeatureHeaderTitle , } from 'teleport/components/Layout' ; import MfaDeviceList , { RemoveDialog } from 'teleport/components/MfaDeviceList' ; import AddDevice from './AddDevice' ; import ReAuthenticate from 'teleport/components/ReAuthenticate' ; import useManageDevices , { State } from './useManageDevices' ; export default function Container ( ) { const ctx = useTeleport ( ) ; const state = useManageDevices ( ctx ) ; return < ManageDevices { ... state } / > ; } export function ManageDevices ( { token , setToken , onAddDevice , onRemoveDevice , createRestrictedTokenAttempt , devices , fetchDevices , fetchDevicesAttempt , removeDevice , deviceToRemove , isAddDeviceVisible , isReAuthenticateVisible , isRemoveDeviceVisible , hideReAuthenticate , hideAddDevice , hideRemoveDevice , mfaDisabled , } ) { return ( < > < FeatureBox style = { { width : '904px' , padding : 0 , overflow : 'hidden' } } > < FeatureHeader alignItems = "center" justifyContent = "space-between" > < FeatureHeaderTitle > Two - Factor Devices < /FeatureHeaderTitle> < ButtonPrimary onClick = { onAddDevice } disabled = { createRestrictedTokenAttempt . status === 'processing' || mfaDisabled } title = { mfaDisabled ? 'Two-factor authentication is disabled' : '' } > Add two - factor device < /ButtonPrimary> < /FeatureHeader> { fetchDevicesAttempt . status === 'processing' && ( < Box textAlign = "center" > < Indicator /> < /Box>)} { createRestrictedTokenAttempt . status === 'failed' && ( < Danger mb = { 3 } > { createRestrictedTokenAttempt . statusText } < /Danger>)} { fetchDevicesAttempt . status === 'failed' && ( < Danger mb = { 3 } > { fetchDevicesAttempt . statusText } < /Danger>)} { fetchDevicesAttempt . status === 'success' && ( < MfaDeviceList devices = { devices } remove = { onRemoveDevice } mfaDisabled = { mfaDisabled } style = { { maxWidth : '100%' } } isSearchable / > ) } < /FeatureBox> { isReAuthenticateVisible && ( < ReAuthenticate onAuthenticated = { setToken } onClose = { hideReAuthenticate } / > ) } { isAddDeviceVisible && ( < AddDevice fetchDevices = { fetchDevices } token = { token } onClose = { hideAddDevice } / > ) } { isRemoveDeviceVisible && ( < RemoveDialog name = { deviceToRemove . name } onRemove = { removeDevice } onClose = { hideRemoveDevice } / > ) } < />); }