From 49f1d7d5bbf56870e88b22c70a7ef9fcc5a7c1b0 Mon Sep 17 00:00:00 2001 From: Kuba <78603704+jakub-tldr@users.noreply.github.com> Date: Wed, 30 Sep 2026 16:31:38 +0200 Subject: [PATCH 01/10] Add Icons --- new-ui/src/shared/components/Icon/Icon.tsx | 24 ++ .../src/shared/components/Icon/icon-types.ts | 8 + .../components/Icon/icons/IconGoogle.tsx | 383 ++++++++++++++++++ .../components/Icon/icons/IconGoogleWhite.tsx | 19 + .../components/Icon/icons/IconJumpCloud.tsx | 20 + .../Icon/icons/IconJumpCloudWhite.tsx | 19 + .../components/Icon/icons/IconMicrosoft.tsx | 20 + .../Icon/icons/IconMicrosoftWhite.tsx | 19 + .../shared/components/Icon/icons/IconOkta.tsx | 22 + .../components/Icon/icons/IconOktaWhite.tsx | 21 + 10 files changed, 555 insertions(+) create mode 100644 new-ui/src/shared/components/Icon/icons/IconGoogle.tsx create mode 100644 new-ui/src/shared/components/Icon/icons/IconGoogleWhite.tsx create mode 100644 new-ui/src/shared/components/Icon/icons/IconJumpCloud.tsx create mode 100644 new-ui/src/shared/components/Icon/icons/IconJumpCloudWhite.tsx create mode 100644 new-ui/src/shared/components/Icon/icons/IconMicrosoft.tsx create mode 100644 new-ui/src/shared/components/Icon/icons/IconMicrosoftWhite.tsx create mode 100644 new-ui/src/shared/components/Icon/icons/IconOkta.tsx create mode 100644 new-ui/src/shared/components/Icon/icons/IconOktaWhite.tsx diff --git a/new-ui/src/shared/components/Icon/Icon.tsx b/new-ui/src/shared/components/Icon/Icon.tsx index bc1c4844..ad291113 100644 --- a/new-ui/src/shared/components/Icon/Icon.tsx +++ b/new-ui/src/shared/components/Icon/Icon.tsx @@ -63,6 +63,8 @@ import { IconGateway } from './icons/IconGateway'; import { IconGithub } from './icons/IconGithub'; import { IconGlobe } from './icons/IconGlobe'; import { IconGlobeBlocked } from './icons/IconGlobeBlocked'; +import { IconGoogle } from './icons/IconGoogle'; +import { IconGoogleWhite } from './icons/IconGoogleWhite'; import { IconGroups } from './icons/IconGroups'; import { IconHamburger } from './icons/IconHamburger'; import { IconHelp } from './icons/IconHelp'; @@ -71,6 +73,8 @@ import { IconInfoFilled } from './icons/IconInfoFilled'; import { IconInfoOutlined } from './icons/IconInfoOutlined'; import { IconInternalMfa } from './icons/IconInternalMFA'; import { IconIpSuggest } from './icons/IconIpSuggest'; +import { IconJumpCloud } from './icons/IconJumpCloud'; +import { IconJumpCloudWhite } from './icons/IconJumpCloudWhite'; import { IconKey } from './icons/IconKey'; import { IconLightBulb } from './icons/IconLightBulb'; import { IconLightTheme } from './icons/IconLightTheme'; @@ -84,11 +88,15 @@ import { IconLogout } from './icons/IconLogout'; import { IconMail } from './icons/IconMail'; import { IconManageKeys } from './icons/IconManageKeys'; import { IconMenu } from './icons/IconMenu'; +import { IconMicrosoft } from './icons/IconMicrosoft'; +import { IconMicrosoftWhite } from './icons/IconMicrosoftWhite'; import { IconMinusCircle } from './icons/IconMinusCircle'; import { IconMobile } from './icons/IconMobile'; import { IconMobileLock } from './icons/IconMobileLock'; import { IconNetworkSettings } from './icons/IconNetworkSettings'; import { IconNotification } from './icons/IconNotification'; +import { IconOkta } from './icons/IconOkta'; +import { IconOktaWhite } from './icons/IconOktaWhite'; import { IconOneTimePassword } from './icons/IconOneTimePassword'; import { IconOnline } from './icons/IconOnline'; import { IconOpenId } from './icons/IconOpenId'; @@ -391,6 +399,22 @@ export const Icon = ({ return IconOneTimePassword; case 'openid': return IconOpenId; + case 'microsoft': + return IconMicrosoft; + case 'google': + return IconGoogle; + case 'okta': + return IconOkta; + case 'jump-cloud': + return IconJumpCloud; + case 'microsoft-white': + return IconMicrosoftWhite; + case 'google-white': + return IconGoogleWhite; + case 'okta-white': + return IconOktaWhite; + case 'jump-cloud-white': + return IconJumpCloudWhite; case 'pdf': return EmptyIcon; case 'pie-chart': diff --git a/new-ui/src/shared/components/Icon/icon-types.ts b/new-ui/src/shared/components/Icon/icon-types.ts index e735a4c3..89a193d7 100644 --- a/new-ui/src/shared/components/Icon/icon-types.ts +++ b/new-ui/src/shared/components/Icon/icon-types.ts @@ -58,6 +58,14 @@ export const IconKind = { Logout: 'logout', YubiKeys: 'yubi-keys', OpenId: 'openid', + Microsoft: 'microsoft', + Google: 'google', + Okta: 'okta', + JumpCloud: 'jump-cloud', + MicrosoftWhite: 'microsoft-white', + GoogleWhite: 'google-white', + OktaWhite: 'okta-white', + JumpCloudWhite: 'jump-cloud-white', Webhooks: 'webhooks', Help: 'help', ActivityNotes: 'activity-notes', diff --git a/new-ui/src/shared/components/Icon/icons/IconGoogle.tsx b/new-ui/src/shared/components/Icon/icons/IconGoogle.tsx new file mode 100644 index 00000000..1dd7596f --- /dev/null +++ b/new-ui/src/shared/components/Icon/icons/IconGoogle.tsx @@ -0,0 +1,383 @@ +import { type SVGProps, useId } from 'react'; + +export const IconGoogle = (props: SVGProps) => { + const id = useId(); + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/new-ui/src/shared/components/Icon/icons/IconGoogleWhite.tsx b/new-ui/src/shared/components/Icon/icons/IconGoogleWhite.tsx new file mode 100644 index 00000000..2b729e9a --- /dev/null +++ b/new-ui/src/shared/components/Icon/icons/IconGoogleWhite.tsx @@ -0,0 +1,19 @@ +import type { SVGProps } from 'react'; + +export const IconGoogleWhite = (props: SVGProps) => { + return ( + + + + ); +}; diff --git a/new-ui/src/shared/components/Icon/icons/IconJumpCloud.tsx b/new-ui/src/shared/components/Icon/icons/IconJumpCloud.tsx new file mode 100644 index 00000000..b6e0372e --- /dev/null +++ b/new-ui/src/shared/components/Icon/icons/IconJumpCloud.tsx @@ -0,0 +1,20 @@ +import type { SVGProps } from 'react'; + +export const IconJumpCloud = (props: SVGProps) => { + return ( + + + + ); +}; diff --git a/new-ui/src/shared/components/Icon/icons/IconJumpCloudWhite.tsx b/new-ui/src/shared/components/Icon/icons/IconJumpCloudWhite.tsx new file mode 100644 index 00000000..11b6b144 --- /dev/null +++ b/new-ui/src/shared/components/Icon/icons/IconJumpCloudWhite.tsx @@ -0,0 +1,19 @@ +import type { SVGProps } from 'react'; + +export const IconJumpCloudWhite = (props: SVGProps) => { + return ( + + + + ); +}; diff --git a/new-ui/src/shared/components/Icon/icons/IconMicrosoft.tsx b/new-ui/src/shared/components/Icon/icons/IconMicrosoft.tsx new file mode 100644 index 00000000..c2d6fd56 --- /dev/null +++ b/new-ui/src/shared/components/Icon/icons/IconMicrosoft.tsx @@ -0,0 +1,20 @@ +import type { SVGProps } from 'react'; + +export const IconMicrosoft = (props: SVGProps) => { + return ( + + + + + + + ); +}; diff --git a/new-ui/src/shared/components/Icon/icons/IconMicrosoftWhite.tsx b/new-ui/src/shared/components/Icon/icons/IconMicrosoftWhite.tsx new file mode 100644 index 00000000..b9d522ae --- /dev/null +++ b/new-ui/src/shared/components/Icon/icons/IconMicrosoftWhite.tsx @@ -0,0 +1,19 @@ +import type { SVGProps } from 'react'; + +export const IconMicrosoftWhite = (props: SVGProps) => { + return ( + + + + + + + ); +}; diff --git a/new-ui/src/shared/components/Icon/icons/IconOkta.tsx b/new-ui/src/shared/components/Icon/icons/IconOkta.tsx new file mode 100644 index 00000000..c02b171d --- /dev/null +++ b/new-ui/src/shared/components/Icon/icons/IconOkta.tsx @@ -0,0 +1,22 @@ +import type { SVGProps } from 'react'; + +export const IconOkta = (props: SVGProps) => { + return ( + + + + ); +}; diff --git a/new-ui/src/shared/components/Icon/icons/IconOktaWhite.tsx b/new-ui/src/shared/components/Icon/icons/IconOktaWhite.tsx new file mode 100644 index 00000000..e3e5f673 --- /dev/null +++ b/new-ui/src/shared/components/Icon/icons/IconOktaWhite.tsx @@ -0,0 +1,21 @@ +import type { SVGProps } from 'react'; + +export const IconOktaWhite = (props: SVGProps) => { + return ( + + + + ); +}; From cdf43548f32926dd2a2b6d36d1b2bf7c0071ab92 Mon Sep 17 00:00:00 2001 From: Kuba <78603704+jakub-tldr@users.noreply.github.com> Date: Thu, 1 Oct 2026 09:30:11 +0200 Subject: [PATCH 02/10] adjust style --- new-ui/src/shared/components/Button/style.scss | 2 +- new-ui/src/shared/components/Icon/style.scss | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/new-ui/src/shared/components/Button/style.scss b/new-ui/src/shared/components/Button/style.scss index a7f27e37..5700a766 100644 --- a/new-ui/src/shared/components/Button/style.scss +++ b/new-ui/src/shared/components/Button/style.scss @@ -41,7 +41,7 @@ pointer-events: none; } - .icon svg { + .icon svg:not(.color-icon) { --icon-color: var(--text-color); path { diff --git a/new-ui/src/shared/components/Icon/style.scss b/new-ui/src/shared/components/Icon/style.scss index 2f60dd6f..0d887ddf 100644 --- a/new-ui/src/shared/components/Icon/style.scss +++ b/new-ui/src/shared/components/Icon/style.scss @@ -22,7 +22,7 @@ } } -.icon svg { +.icon svg:not(.color-icon) { path { fill: var(--icon-color, var(--fg-white-100)); } @@ -32,11 +32,11 @@ } } -.icon[style*='--icon-color'] svg path { +.icon[style*='--icon-color'] svg:not(.color-icon) path { fill: var(--icon-color, var(--fg-white-100)); } -.icon[style*='--icon-color'] svg circle { +.icon[style*='--icon-color'] svg:not(.color-icon) circle { stroke: var(--icon-color, var(--fg-white-100)); } From 15019130830297bc8ded439f3d0f12968463fdb2 Mon Sep 17 00:00:00 2001 From: Kuba <78603704+jakub-tldr@users.noreply.github.com> Date: Thu, 1 Oct 2026 09:30:34 +0200 Subject: [PATCH 03/10] add color icons consts --- new-ui/src/shared/consts.ts | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/new-ui/src/shared/consts.ts b/new-ui/src/shared/consts.ts index 98341df0..4f83d9c8 100644 --- a/new-ui/src/shared/consts.ts +++ b/new-ui/src/shared/consts.ts @@ -10,6 +10,29 @@ export const mfaMethodIcon: Record = { [MfaMethod.Fido2]: 'software-key', }; +export const OpenIdProvider = { + Microsoft: 'microsoft', + Google: 'google', + Okta: 'okta', + JumpCloud: 'jumpcloud', +} as const; + +export type OpenIdProviderValue = (typeof OpenIdProvider)[keyof typeof OpenIdProvider]; + +export const openIdProviderIcon: Record = { + [OpenIdProvider.Microsoft]: 'microsoft-white', + [OpenIdProvider.Google]: 'google-white', + [OpenIdProvider.Okta]: 'okta-white', + [OpenIdProvider.JumpCloud]: 'jump-cloud-white', +}; + +export const openIdProviderColorIcon: Record = { + [OpenIdProvider.Microsoft]: 'microsoft', + [OpenIdProvider.Google]: 'google', + [OpenIdProvider.Okta]: 'okta', + [OpenIdProvider.JumpCloud]: 'jump-cloud', +}; + export const motionTransitionStandard = { type: 'tween', ease: 'easeOut', From 40ef658d33cf77120bff5e5b3d24c522a5c82e16 Mon Sep 17 00:00:00 2001 From: Kuba <78603704+jakub-tldr@users.noreply.github.com> Date: Thu, 1 Oct 2026 09:40:03 +0200 Subject: [PATCH 04/10] add icon/provider name to connect --- .../components/ConnectModal/ConnectModal.tsx | 5 +++- .../ConnectModalMfaOidc.tsx | 14 ++++++++--- .../PlaygroundTestMfaSettingsSection.tsx | 1 + .../LocationCardConnectionTiles.tsx | 3 ++- .../LocationCardMfaEdit.tsx | 6 +++-- .../components/MfaSelector/MfaSelector.tsx | 22 ++++++++++++++---- .../LocationCard/context/context.tsx | 2 +- .../views/DefaultView/DefaultView.tsx | 1 + .../LocationCardMfaOidcView.tsx | 12 ++++++---- .../views/LocationCardMfaOidcView/style.scss | 12 ++++++++++ .../MfaSettingsSection/MfaSettingsSection.tsx | 1 + .../components/MfaSettingsSection/types.ts | 5 +++- .../MfaSettingsSection/utils.test.ts | 3 ++- .../OverviewLocationCard.tsx | 1 + new-ui/src/shared/utils/mfa.ts | 23 ++++++++++++++++++- 15 files changed, 90 insertions(+), 21 deletions(-) diff --git a/new-ui/src/pages/full/OverviewPage/components/ConnectModal/ConnectModal.tsx b/new-ui/src/pages/full/OverviewPage/components/ConnectModal/ConnectModal.tsx index 01c7cadd..ac5eca07 100644 --- a/new-ui/src/pages/full/OverviewPage/components/ConnectModal/ConnectModal.tsx +++ b/new-ui/src/pages/full/OverviewPage/components/ConnectModal/ConnectModal.tsx @@ -32,13 +32,16 @@ export const ConnectModal = () => { useShallow((s) => [s.view, s.visible, s.location, s.stepIndex, s.stepPlan]), ); + const { instances } = useAppData(); + const instance = instances.find((entry) => entry.id === location?.instance_id); + const stepCount = isPresent(location) ? mfaStepCount(location) : 0; const stepMethod = stepPlan[stepIndex]; const isOnMfaStepView = isPresent(stepMethod) && view === mfaMethodToConnectModalView(stepMethod); const stepLabel = stepCount > 1 && isOnMfaStepView - ? `Step ${stepIndex + 1}/${stepCount}: ${mfaToText(stepMethod)}` + ? `Step ${stepIndex + 1}/${stepCount}: ${mfaToText(stepMethod, instance)}` : null; const isOpen = isPresent(view) && isPresent(location) && visible; diff --git a/new-ui/src/pages/full/OverviewPage/components/ConnectModal/views/ConnectModalMfaOidc/ConnectModalMfaOidc.tsx b/new-ui/src/pages/full/OverviewPage/components/ConnectModal/views/ConnectModalMfaOidc/ConnectModalMfaOidc.tsx index 2de80b46..87336277 100644 --- a/new-ui/src/pages/full/OverviewPage/components/ConnectModal/views/ConnectModalMfaOidc/ConnectModalMfaOidc.tsx +++ b/new-ui/src/pages/full/OverviewPage/components/ConnectModal/views/ConnectModalMfaOidc/ConnectModalMfaOidc.tsx @@ -6,10 +6,15 @@ import { Button } from '../../../../../../../shared/components/Button/Button'; import { ButtonVariant } from '../../../../../../../shared/components/Button/types'; import { Checkbox } from '../../../../../../../shared/components/Checkbox/Checkbox'; import { SizedBox } from '../../../../../../../shared/components/SizedBox/SizedBox'; +import { useAppData } from '../../../../../../../shared/providers/AppDataContext'; import { api } from '../../../../../../../shared/rust-api/api'; import { getAppConfigQueryOptions } from '../../../../../../../shared/rust-api/query'; import { ThemeSpacing } from '../../../../../../../shared/types'; import { isPresent } from '../../../../../../../shared/utils/isPresent'; +import { + openIdProviderColorIconOf, + openIdProviderName, +} from '../../../../../../../shared/utils/mfa'; import { ConnectModalPostureCheckLoading } from '../../components/ConnectModalPostureCheckLoading/ConnectModalPostureCheckLoading'; import { ConnectModalView } from '../../hooks/types'; import { useConnectModal } from '../../hooks/useConnectModal'; @@ -22,6 +27,9 @@ export const ConnectModalMfaOidc = () => { const [perviousView, location, initAutoStart] = useConnectModal( useShallow((s) => [s.perviousView, s.location, s.autoStartOpenId]), ); + const { instances } = useAppData(); + const instance = instances.find((entry) => entry.id === location?.instance_id); + const providerName = openIdProviderName(instance); const { start, isStarting, startError, isPolling, pollError } = useConnectModalMfaOidc({ autoStart: initAutoStart, @@ -60,8 +68,7 @@ export const ConnectModalMfaOidc = () => {
{screen === 'idle' && (

- To connect to the VPN, authenticate via your OpenID provider. A browser window - will open for you to sign in. + {`To connect to the VPN, sign in with ${providerName} by clicking button below. A browser window will open and redirect you to ${providerName} for authentication.`}

)} {screen === 'polling' && ( @@ -73,7 +80,8 @@ export const ConnectModalMfaOidc = () => {
{screen !== 'error' && ( + ); +}; diff --git a/new-ui/src/shared/components/ExternalProviderButton/assets/custom.svg b/new-ui/src/shared/components/ExternalProviderButton/assets/custom.svg new file mode 100644 index 00000000..be6d7c6d --- /dev/null +++ b/new-ui/src/shared/components/ExternalProviderButton/assets/custom.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/new-ui/src/shared/components/ExternalProviderButton/assets/google.svg b/new-ui/src/shared/components/ExternalProviderButton/assets/google.svg new file mode 100644 index 00000000..0210acb3 --- /dev/null +++ b/new-ui/src/shared/components/ExternalProviderButton/assets/google.svg @@ -0,0 +1,170 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/new-ui/src/shared/components/ExternalProviderButton/assets/jumpcloud.svg b/new-ui/src/shared/components/ExternalProviderButton/assets/jumpcloud.svg new file mode 100644 index 00000000..bb3ac3fc --- /dev/null +++ b/new-ui/src/shared/components/ExternalProviderButton/assets/jumpcloud.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/new-ui/src/shared/components/ExternalProviderButton/assets/microsoft.svg b/new-ui/src/shared/components/ExternalProviderButton/assets/microsoft.svg new file mode 100644 index 00000000..18b689fc --- /dev/null +++ b/new-ui/src/shared/components/ExternalProviderButton/assets/microsoft.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/new-ui/src/shared/components/ExternalProviderButton/assets/okta.svg b/new-ui/src/shared/components/ExternalProviderButton/assets/okta.svg new file mode 100644 index 00000000..eb19a930 --- /dev/null +++ b/new-ui/src/shared/components/ExternalProviderButton/assets/okta.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/new-ui/src/shared/components/ExternalProviderButton/style.scss b/new-ui/src/shared/components/ExternalProviderButton/style.scss new file mode 100644 index 00000000..f33bf293 --- /dev/null +++ b/new-ui/src/shared/components/ExternalProviderButton/style.scss @@ -0,0 +1,152 @@ +.external-provider-button { + --btn-font: var(--t-body-xs-600); + --btn-size: 36px; + --border-color: transparent; + --bg-color: transparent; + --bg-image: none; + --text-color: var(--fg-white-100); + --loader-bg: transparent; + --loader-track: transparent; + --loader-part: transparent; + --shadow: none; + + height: var(--btn-size); + border: 1px solid var(--border-color); + box-sizing: border-box; + border-radius: var(--radius-md); + background-color: var(--bg-color); + background-image: var(--bg-image); + box-shadow: var(--shadow); + color: var(--text-color); + min-height: var(--btn-size); + min-width: 0; + padding: 0 var(--spacing-lg); + position: relative; + user-select: none; + display: grid; + grid-template-columns: 16px auto; + grid-template-rows: 1fr; + align-items: center; + column-gap: var(--spacing-md); + text-decoration: none !important; + justify-content: center; + + @include animate(background-color, border-color, opacity, box-shadow); + + &:not(.disabled, .loading) { + cursor: pointer; + } + + &.disabled { + cursor: not-allowed; + pointer-events: none; + } + + .text { + font: var(--btn-font); + color: inherit; + min-width: 0; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + + @include animate(color); + } + + &.size-primary { + --btn-size: 36px; + } + + &.size-big { + --btn-size: 44px; + + border-radius: 100px; + } + + &.variant-primary { + --bg-color: var(--bg-white-100); + --text-color: var(--fg-action); + --loader-bg: var(--bg-white-100); + --loader-track: var(--c-saturated-blue-200); + --loader-part: var(--fg-action); + --shadow: 0 4px 5px 0 rgb(53 84 179 / 7%); + + &:hover { + --bg-image: linear-gradient(180deg, var(--c-white-100) 0%, #d3ddfb 100%); + } + + &.disabled { + --bg-color: var(--bg-white-20); + --text-color: var(--fg-white-40); + --shadow: none; + } + } + + &.variant-secondary { + --bg-color: var(--bg-white-10); + --text-color: var(--fg-white-100); + --loader-bg: var(--bg-white-10); + + &:hover { + --bg-color: var(--bg-white-20); + } + + &.disabled { + --bg-color: var(--bg-white-5); + --text-color: var(--fg-white-40); + } + } + + &.variant-critical { + --bg-color: var(--bg-critical); + --text-color: var(--fg-white-100); + --loader-bg: var(--bg-critical-disabled); + + &:hover { + --bg-color: var(--bg-critical-faded); + } + + &.disabled { + --bg-color: var(--bg-critical-disabled); + --text-color: var(--fg-white-40); + } + } + + &.variant-outlined { + --bg-color: transparent; + --border-color: var(--border-default); + --loader-bg: var(--bg-white-10); + --text-color: var(--fg-white-100); + + &:hover { + --bg-color: var(--bg-white-5); + } + + &.disabled { + --border-color: var(--border-disabled); + --text-color: var(--fg-white-40); + } + } + + .loader-overlay { + --spinner-track: var(--loader-track); + --spinner-indicator: var(--loader-part); + + background-color: var(--loader-bg); + border: none; + border-radius: inherit; + position: absolute; + inset: 0; + pointer-events: none; + width: 100%; + height: 100%; + display: flex; + flex-flow: row; + align-items: center; + justify-content: center; + } +} + +a:has(.external-provider-button) { + text-decoration: none; +} diff --git a/new-ui/src/shared/components/ExternalProviderButton/types.ts b/new-ui/src/shared/components/ExternalProviderButton/types.ts new file mode 100644 index 00000000..a7515c7f --- /dev/null +++ b/new-ui/src/shared/components/ExternalProviderButton/types.ts @@ -0,0 +1,19 @@ +import type { ButtonHTMLAttributes, HTMLAttributes, Ref } from 'react'; + +type DefaultButtonProps = ButtonHTMLAttributes; + +type ButtonVariant = 'primary' | 'secondary' | 'critical' | 'outlined'; + +type ButtonSize = 'primary' | 'big'; + +export type ExternalProviderButtonProps = { + text: string; + variant?: ButtonVariant; + size?: ButtonSize; + type?: DefaultButtonProps['type']; + provider: 'microsoft' | 'google' | 'okta' | 'jumpcloud' | 'custom'; + testId?: string; + disabled?: boolean; + loading?: boolean; + ref?: Ref; +} & HTMLAttributes; diff --git a/new-ui/src/shared/components/Icon/Icon.tsx b/new-ui/src/shared/components/Icon/Icon.tsx index ad291113..ff47861e 100644 --- a/new-ui/src/shared/components/Icon/Icon.tsx +++ b/new-ui/src/shared/components/Icon/Icon.tsx @@ -63,7 +63,6 @@ import { IconGateway } from './icons/IconGateway'; import { IconGithub } from './icons/IconGithub'; import { IconGlobe } from './icons/IconGlobe'; import { IconGlobeBlocked } from './icons/IconGlobeBlocked'; -import { IconGoogle } from './icons/IconGoogle'; import { IconGoogleWhite } from './icons/IconGoogleWhite'; import { IconGroups } from './icons/IconGroups'; import { IconHamburger } from './icons/IconHamburger'; @@ -73,7 +72,6 @@ import { IconInfoFilled } from './icons/IconInfoFilled'; import { IconInfoOutlined } from './icons/IconInfoOutlined'; import { IconInternalMfa } from './icons/IconInternalMFA'; import { IconIpSuggest } from './icons/IconIpSuggest'; -import { IconJumpCloud } from './icons/IconJumpCloud'; import { IconJumpCloudWhite } from './icons/IconJumpCloudWhite'; import { IconKey } from './icons/IconKey'; import { IconLightBulb } from './icons/IconLightBulb'; @@ -88,14 +86,12 @@ import { IconLogout } from './icons/IconLogout'; import { IconMail } from './icons/IconMail'; import { IconManageKeys } from './icons/IconManageKeys'; import { IconMenu } from './icons/IconMenu'; -import { IconMicrosoft } from './icons/IconMicrosoft'; import { IconMicrosoftWhite } from './icons/IconMicrosoftWhite'; import { IconMinusCircle } from './icons/IconMinusCircle'; import { IconMobile } from './icons/IconMobile'; import { IconMobileLock } from './icons/IconMobileLock'; import { IconNetworkSettings } from './icons/IconNetworkSettings'; import { IconNotification } from './icons/IconNotification'; -import { IconOkta } from './icons/IconOkta'; import { IconOktaWhite } from './icons/IconOktaWhite'; import { IconOneTimePassword } from './icons/IconOneTimePassword'; import { IconOnline } from './icons/IconOnline'; @@ -399,14 +395,6 @@ export const Icon = ({ return IconOneTimePassword; case 'openid': return IconOpenId; - case 'microsoft': - return IconMicrosoft; - case 'google': - return IconGoogle; - case 'okta': - return IconOkta; - case 'jump-cloud': - return IconJumpCloud; case 'microsoft-white': return IconMicrosoftWhite; case 'google-white': diff --git a/new-ui/src/shared/components/Icon/icon-types.ts b/new-ui/src/shared/components/Icon/icon-types.ts index 89a193d7..8e196c2a 100644 --- a/new-ui/src/shared/components/Icon/icon-types.ts +++ b/new-ui/src/shared/components/Icon/icon-types.ts @@ -58,10 +58,6 @@ export const IconKind = { Logout: 'logout', YubiKeys: 'yubi-keys', OpenId: 'openid', - Microsoft: 'microsoft', - Google: 'google', - Okta: 'okta', - JumpCloud: 'jump-cloud', MicrosoftWhite: 'microsoft-white', GoogleWhite: 'google-white', OktaWhite: 'okta-white', diff --git a/new-ui/src/shared/components/Icon/icons/IconGoogle.tsx b/new-ui/src/shared/components/Icon/icons/IconGoogle.tsx deleted file mode 100644 index 1dd7596f..00000000 --- a/new-ui/src/shared/components/Icon/icons/IconGoogle.tsx +++ /dev/null @@ -1,383 +0,0 @@ -import { type SVGProps, useId } from 'react'; - -export const IconGoogle = (props: SVGProps) => { - const id = useId(); - - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; diff --git a/new-ui/src/shared/components/Icon/icons/IconJumpCloud.tsx b/new-ui/src/shared/components/Icon/icons/IconJumpCloud.tsx deleted file mode 100644 index b6e0372e..00000000 --- a/new-ui/src/shared/components/Icon/icons/IconJumpCloud.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import type { SVGProps } from 'react'; - -export const IconJumpCloud = (props: SVGProps) => { - return ( - - - - ); -}; diff --git a/new-ui/src/shared/components/Icon/icons/IconMicrosoft.tsx b/new-ui/src/shared/components/Icon/icons/IconMicrosoft.tsx deleted file mode 100644 index c2d6fd56..00000000 --- a/new-ui/src/shared/components/Icon/icons/IconMicrosoft.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import type { SVGProps } from 'react'; - -export const IconMicrosoft = (props: SVGProps) => { - return ( - - - - - - - ); -}; diff --git a/new-ui/src/shared/components/Icon/icons/IconOkta.tsx b/new-ui/src/shared/components/Icon/icons/IconOkta.tsx deleted file mode 100644 index c02b171d..00000000 --- a/new-ui/src/shared/components/Icon/icons/IconOkta.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import type { SVGProps } from 'react'; - -export const IconOkta = (props: SVGProps) => { - return ( - - - - ); -}; diff --git a/new-ui/src/shared/components/Icon/style.scss b/new-ui/src/shared/components/Icon/style.scss index 0d887ddf..2f60dd6f 100644 --- a/new-ui/src/shared/components/Icon/style.scss +++ b/new-ui/src/shared/components/Icon/style.scss @@ -22,7 +22,7 @@ } } -.icon svg:not(.color-icon) { +.icon svg { path { fill: var(--icon-color, var(--fg-white-100)); } @@ -32,11 +32,11 @@ } } -.icon[style*='--icon-color'] svg:not(.color-icon) path { +.icon[style*='--icon-color'] svg path { fill: var(--icon-color, var(--fg-white-100)); } -.icon[style*='--icon-color'] svg:not(.color-icon) circle { +.icon[style*='--icon-color'] svg circle { stroke: var(--icon-color, var(--fg-white-100)); } diff --git a/new-ui/src/shared/components/LocationCard/views/LocationCardMfaOidcView/LocationCardMfaOidcView.tsx b/new-ui/src/shared/components/LocationCard/views/LocationCardMfaOidcView/LocationCardMfaOidcView.tsx index d7292a9d..6b39854e 100644 --- a/new-ui/src/shared/components/LocationCard/views/LocationCardMfaOidcView/LocationCardMfaOidcView.tsx +++ b/new-ui/src/shared/components/LocationCard/views/LocationCardMfaOidcView/LocationCardMfaOidcView.tsx @@ -4,12 +4,13 @@ import { useCallback, useEffect, useState } from 'react'; import { api } from '../../../../rust-api/api'; import { getAppConfigQueryOptions } from '../../../../rust-api/query'; import { ThemeSpacing } from '../../../../types'; -import { openIdProviderColorIconOf, openIdProviderName } from '../../../../utils/mfa'; +import { findOpenIdProvider, openIdProviderName } from '../../../../utils/mfa'; import { Button } from '../../../Button/Button'; import { ButtonVariant } from '../../../Button/types'; import { Checkbox } from '../../../Checkbox/Checkbox'; import { Controls } from '../../../Controls/Controls'; import { Divider } from '../../../Divider/Divider'; +import { ExternalProviderButton } from '../../../ExternalProviderButton/ExternalProviderButton'; import { IconKind } from '../../../Icon'; import { IconButton } from '../../../IconButton/IconButton'; import { IconButtonVariant } from '../../../IconButton/types'; @@ -92,10 +93,9 @@ export const LocationCardMfaOidcView = () => { />
{screen !== 'error' && ( -