import React from 'react' ; import { Box } from 'design' ; import cfg from 'teleport/config' ; import useTeleport from 'teleport/useTeleport' ; import { Route , Switch , NavLink , Redirect } from 'teleport/components/Router' ; import { FeatureBox , FeatureHeader , FeatureHeaderTitle , TabItem , } from 'teleport/components/Layout' ; import ChangePassword from './ChangePassword' ; import ManageDevices from './ManageDevices' ; export default function Container ( ) { const ctx = useTeleport ( ) ; return < Account isSso = { ctx . storeUser . isSso ( ) } />; } export function Account ( { isSso } ) { return ( < FeatureBox > < FeatureHeader alignItems = "center" mb = { 0 } > < FeatureHeaderTitle > { ! isSso && ( < TabItem as = { NavLink } to = { cfg . routes . accountPassword } > Password < /TabItem>)} < TabItem as = { NavLink } to = { cfg . routes . accountMfaDevices } > Two - Factor Devices < /TabItem> < /FeatureHeaderTitle> < /FeatureHeader> < Box > < Switch > { ! isSso && ( < Route path = { cfg . routes . accountPassword } component = { ChangePassword } / > ) } < Route path = { cfg . routes . accountMfaDevices } component = { ManageDevices } / > < Redirect to = { isSso ? cfg . routes . accountMfaDevices : cfg . routes . accountPassword } /> < /Switch> < /Box> < /FeatureBox>); } type Props = { isSso : boolean ; } ;