diff --git a/packages/console/src/assets/icons/factor-backup-code.svg b/packages/console/src/assets/icons/factor-backup-code.svg new file mode 100644 index 000000000..3f32f449e --- /dev/null +++ b/packages/console/src/assets/icons/factor-backup-code.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/console/src/assets/icons/factor-totp.svg b/packages/console/src/assets/icons/factor-totp.svg new file mode 100644 index 000000000..826eb5eaf --- /dev/null +++ b/packages/console/src/assets/icons/factor-totp.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/console/src/assets/icons/factor-webauthn.svg b/packages/console/src/assets/icons/factor-webauthn.svg new file mode 100644 index 000000000..8f9d92c1f --- /dev/null +++ b/packages/console/src/assets/icons/factor-webauthn.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/packages/console/src/assets/icons/security-lock.svg b/packages/console/src/assets/icons/security-lock.svg new file mode 100644 index 000000000..be9137b46 --- /dev/null +++ b/packages/console/src/assets/icons/security-lock.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/console/src/consts/env.ts b/packages/console/src/consts/env.ts index 8ceda539e..147fa6d25 100644 --- a/packages/console/src/consts/env.ts +++ b/packages/console/src/consts/env.ts @@ -1,6 +1,5 @@ import { yes } from '@silverhand/essentials'; -// eslint-disable-next-line import/no-unused-modules export const isProduction = process.env.NODE_ENV === 'production'; export const isCloud = yes(process.env.IS_CLOUD); export const adminEndpoint = process.env.ADMIN_ENDPOINT; diff --git a/packages/console/src/containers/ConsoleContent/Sidebar/hook.tsx b/packages/console/src/containers/ConsoleContent/Sidebar/hook.tsx index daeec0002..5293a2bb8 100644 --- a/packages/console/src/containers/ConsoleContent/Sidebar/hook.tsx +++ b/packages/console/src/containers/ConsoleContent/Sidebar/hook.tsx @@ -12,6 +12,7 @@ import List from '@/assets/icons/list.svg'; import UserProfile from '@/assets/icons/profile.svg'; import ResourceIcon from '@/assets/icons/resource.svg'; import Role from '@/assets/icons/role.svg'; +import SecurityLock from '@/assets/icons/security-lock.svg'; import Web from '@/assets/icons/web.svg'; import { isCloud } from '@/consts/env'; import useUserPreferences from '@/hooks/use-user-preferences'; @@ -78,6 +79,10 @@ export const useSidebarMenuItems = (): { Icon: Web, title: 'sign_in_experience', }, + { + Icon: SecurityLock, + title: 'mfa', + }, { Icon: Connection, title: 'connectors', diff --git a/packages/console/src/containers/ConsoleContent/index.tsx b/packages/console/src/containers/ConsoleContent/index.tsx index fb780366a..46a71c78c 100644 --- a/packages/console/src/containers/ConsoleContent/index.tsx +++ b/packages/console/src/containers/ConsoleContent/index.tsx @@ -9,7 +9,7 @@ import { TenantSettingsTabs, ApplicationDetailsTabs, } from '@/consts'; -import { isCloud } from '@/consts/env'; +import { isCloud, isProduction } from '@/consts/env'; import OverlayScrollbar from '@/ds-components/OverlayScrollbar'; import useUserPreferences from '@/hooks/use-user-preferences'; import ApiResourceDetails from '@/pages/ApiResourceDetails'; @@ -24,6 +24,7 @@ import ConnectorDetails from '@/pages/ConnectorDetails'; import Connectors from '@/pages/Connectors'; import Dashboard from '@/pages/Dashboard'; import GetStarted from '@/pages/GetStarted'; +import Mfa from '@/pages/Mfa'; import NotFound from '@/pages/NotFound'; import Profile from '@/pages/Profile'; import ChangePasswordModal from '@/pages/Profile/containers/ChangePasswordModal'; @@ -97,6 +98,7 @@ function ConsoleContent() { } /> } /> + {!isProduction && } />} } /> } /> diff --git a/packages/console/src/ds-components/Switch/index.module.scss b/packages/console/src/ds-components/Switch/index.module.scss index 8fd171d4d..2605536d2 100644 --- a/packages/console/src/ds-components/Switch/index.module.scss +++ b/packages/console/src/ds-components/Switch/index.module.scss @@ -58,4 +58,12 @@ margin-right: _.unit(2); font: var(--font-body-2); } + + &.error { + border-color: var(--color-error); + + &:focus-within { + outline-color: var(--color-danger-focused); + } + } } diff --git a/packages/console/src/ds-components/Switch/index.tsx b/packages/console/src/ds-components/Switch/index.tsx index 094d6fdd8..4342e65ee 100644 --- a/packages/console/src/ds-components/Switch/index.tsx +++ b/packages/console/src/ds-components/Switch/index.tsx @@ -1,3 +1,4 @@ +import classNames from 'classnames'; import type { HTMLProps, ReactNode, Ref } from 'react'; import { forwardRef } from 'react'; @@ -5,11 +6,12 @@ import * as styles from './index.module.scss'; type Props = Omit, 'label'> & { label?: ReactNode; + hasError?: boolean; }; -function Switch({ label, ...rest }: Props, ref?: Ref) { +function Switch({ label, hasError, ...rest }: Props, ref?: Ref) { return ( -
+
{label}