From 75be5358847609e28a28543fd1be1d28483989dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Filip=20=C5=9Al=C4=99zak?= Date: Thu, 22 Oct 2026 15:17:07 +0200 Subject: [PATCH 1/2] clear up loader --- .../ConfigureVerifyFido2Step.tsx | 2 +- .../ConnectModalMfaFido2.tsx | 2 +- .../src/pages/playground/PlaygroundIndex.tsx | 87 +------------- .../PlaygroundSnackbarTest.tsx | 66 ---------- .../PlaygroundSnackbarTest/style.scss | 17 --- .../PlaygroundTestConnectButton.tsx | 41 ------- .../PlaygroundTestConnectButton/style.scss | 19 --- .../PlaygroundTestFactorSelector.tsx | 62 ---------- .../PlaygroundTestFactorSelector/style.scss | 19 --- .../PlaygroundTestInstanceSelector.tsx | 60 ---------- .../PlaygroundTestInstanceSelector/style.scss | 19 --- .../PlaygroundTestLoaderSpinner.tsx | 37 ++++++ .../PlaygroundTestLoaderSpinner/style.scss | 28 +++++ .../PlaygroundTestMenu/PlaygroundTestMenu.tsx | 108 ----------------- .../components/PlaygroundTestMenu/style.scss | 10 -- .../PlaygroundTestMfaSelector.tsx | 97 --------------- .../PlaygroundTestMfaSelector/style.scss | 19 --- .../PlaygroundTestMfaSettingsSection.tsx | 113 ------------------ .../style.scss | 27 ----- ...groundTestMfaVerificatorFactorSelector.tsx | 68 ----------- .../style.scss | 19 --- .../PlaygroundTestOpenIdProviders.tsx | 95 --------------- .../PlaygroundTestOpenIdProviders/style.scss | 31 ----- .../components/PlaygroundTestSelect.tsx | 67 ----------- .../PlaygroundTestSelectionItem.tsx | 98 --------------- .../PlaygroundTestSelectionItem/style.scss | 19 --- .../LoaderSpinner/LoaderSpinner.tsx | 44 +++++-- .../components/LoaderSpinner/style.scss | 14 +-- .../LocationCard/hooks/useMfaFido2Connect.ts | 2 + .../LocationCardMfaFido2View.tsx | 2 +- new-ui/src/shared/rust-api/mfaError.ts | 4 + 31 files changed, 122 insertions(+), 1174 deletions(-) delete mode 100644 new-ui/src/pages/playground/components/PlaygroundSnackbarTest/PlaygroundSnackbarTest.tsx delete mode 100644 new-ui/src/pages/playground/components/PlaygroundSnackbarTest/style.scss delete mode 100644 new-ui/src/pages/playground/components/PlaygroundTestConnectButton/PlaygroundTestConnectButton.tsx delete mode 100644 new-ui/src/pages/playground/components/PlaygroundTestConnectButton/style.scss delete mode 100644 new-ui/src/pages/playground/components/PlaygroundTestFactorSelector/PlaygroundTestFactorSelector.tsx delete mode 100644 new-ui/src/pages/playground/components/PlaygroundTestFactorSelector/style.scss delete mode 100644 new-ui/src/pages/playground/components/PlaygroundTestInstanceSelector/PlaygroundTestInstanceSelector.tsx delete mode 100644 new-ui/src/pages/playground/components/PlaygroundTestInstanceSelector/style.scss create mode 100644 new-ui/src/pages/playground/components/PlaygroundTestLoaderSpinner/PlaygroundTestLoaderSpinner.tsx create mode 100644 new-ui/src/pages/playground/components/PlaygroundTestLoaderSpinner/style.scss delete mode 100644 new-ui/src/pages/playground/components/PlaygroundTestMenu/PlaygroundTestMenu.tsx delete mode 100644 new-ui/src/pages/playground/components/PlaygroundTestMenu/style.scss delete mode 100644 new-ui/src/pages/playground/components/PlaygroundTestMfaSelector/PlaygroundTestMfaSelector.tsx delete mode 100644 new-ui/src/pages/playground/components/PlaygroundTestMfaSelector/style.scss delete mode 100644 new-ui/src/pages/playground/components/PlaygroundTestMfaSettingsSection/PlaygroundTestMfaSettingsSection.tsx delete mode 100644 new-ui/src/pages/playground/components/PlaygroundTestMfaSettingsSection/style.scss delete mode 100644 new-ui/src/pages/playground/components/PlaygroundTestMfaVerificatorFactorSelector/PlaygroundTestMfaVerificatorFactorSelector.tsx delete mode 100644 new-ui/src/pages/playground/components/PlaygroundTestMfaVerificatorFactorSelector/style.scss delete mode 100644 new-ui/src/pages/playground/components/PlaygroundTestOpenIdProviders/PlaygroundTestOpenIdProviders.tsx delete mode 100644 new-ui/src/pages/playground/components/PlaygroundTestOpenIdProviders/style.scss delete mode 100644 new-ui/src/pages/playground/components/PlaygroundTestSelect.tsx delete mode 100644 new-ui/src/pages/playground/components/PlaygroundTestSelectionItem/PlaygroundTestSelectionItem.tsx delete mode 100644 new-ui/src/pages/playground/components/PlaygroundTestSelectionItem/style.scss diff --git a/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyFido2Step/ConfigureVerifyFido2Step.tsx b/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyFido2Step/ConfigureVerifyFido2Step.tsx index 1c77a6e4d..7f2187eb2 100644 --- a/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyFido2Step/ConfigureVerifyFido2Step.tsx +++ b/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyFido2Step/ConfigureVerifyFido2Step.tsx @@ -95,7 +95,7 @@ export const ConfigureVerifyFido2Step = ({ onCancel, onSessionExpired }: Props) />
-
-
- - - ); -}; diff --git a/new-ui/src/pages/playground/components/PlaygroundSnackbarTest/style.scss b/new-ui/src/pages/playground/components/PlaygroundSnackbarTest/style.scss deleted file mode 100644 index b0e8a6456..000000000 --- a/new-ui/src/pages/playground/components/PlaygroundSnackbarTest/style.scss +++ /dev/null @@ -1,17 +0,0 @@ -.playground-snackbar-test { - display: flex; - flex-direction: column; - gap: 12px; - - h3 { - margin: 0; - font-size: 14px; - font-weight: 600; - } - - .actions { - display: flex; - flex-wrap: wrap; - gap: 8px; - } -} diff --git a/new-ui/src/pages/playground/components/PlaygroundTestConnectButton/PlaygroundTestConnectButton.tsx b/new-ui/src/pages/playground/components/PlaygroundTestConnectButton/PlaygroundTestConnectButton.tsx deleted file mode 100644 index 06a0f700d..000000000 --- a/new-ui/src/pages/playground/components/PlaygroundTestConnectButton/PlaygroundTestConnectButton.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import './style.scss'; -import { useState } from 'react'; -import { ConnectButton } from '../../../../shared/components/LocationCard/components/ConnectButton/ConnectButton'; -import { PlaygroundCard } from '../PlaygroundCard/PlaygroundCard'; - -const noop = () => {}; - -export const PlaygroundTestConnectButton = () => { - const [active, setActive] = useState(false); - - return ( - -
-

Disconnected

-
- -
-

Connected

-
- -
-

Disconnected (disabled)

-
- -
-

Connected (disabled)

-
- -
-

Connected (loading)

-
- -
-

Interactive (active: {active ? 'true' : 'false'})

-
- setActive((v) => !v)} /> -
-
- - ); -}; diff --git a/new-ui/src/pages/playground/components/PlaygroundTestConnectButton/style.scss b/new-ui/src/pages/playground/components/PlaygroundTestConnectButton/style.scss deleted file mode 100644 index 691e42c16..000000000 --- a/new-ui/src/pages/playground/components/PlaygroundTestConnectButton/style.scss +++ /dev/null @@ -1,19 +0,0 @@ -.playground-card:has(> .playground-test-connect-button) { - background-color: var(--bg-dark-blue-40); -} - -.playground-test-connect-button { - display: flex; - flex-direction: column; - gap: 12px; - width: 100%; - align-items: center; - - .track { - display: flex; - flex-direction: column; - gap: 8px; - width: 100%; - max-width: 296px; - } -} diff --git a/new-ui/src/pages/playground/components/PlaygroundTestFactorSelector/PlaygroundTestFactorSelector.tsx b/new-ui/src/pages/playground/components/PlaygroundTestFactorSelector/PlaygroundTestFactorSelector.tsx deleted file mode 100644 index 16927ec25..000000000 --- a/new-ui/src/pages/playground/components/PlaygroundTestFactorSelector/PlaygroundTestFactorSelector.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import './style.scss'; -import { useState } from 'react'; -import { FactorSelector } from '../../../../shared/components/FactorSelector/FactorSelector'; -import { SelectionItemVariant } from '../../../../shared/components/SelectionItem/types'; -import { MfaMethod, type MfaMethodValue } from '../../../../shared/rust-api/types'; -import { PlaygroundCard } from '../PlaygroundCard/PlaygroundCard'; - -const methods = Object.values(MfaMethod); - -export const PlaygroundTestFactorSelector = () => { - const [radio, setRadio] = useState(); - const [checked, setChecked] = useState([]); - - return ( - -
-

Radio

-
- {methods.map((method) => ( - setRadio(method)} - /> - ))} -
-

Checkbox

-
- {methods.map((method) => ( - - setChecked((current) => - current.includes(method) - ? current.filter((item) => item !== method) - : [...current, method], - ) - } - /> - ))} -
-

OpenID with provider name

-
- -
-

Disabled

-
- - -
-
- - ); -}; diff --git a/new-ui/src/pages/playground/components/PlaygroundTestFactorSelector/style.scss b/new-ui/src/pages/playground/components/PlaygroundTestFactorSelector/style.scss deleted file mode 100644 index d8171b49f..000000000 --- a/new-ui/src/pages/playground/components/PlaygroundTestFactorSelector/style.scss +++ /dev/null @@ -1,19 +0,0 @@ -.playground-card:has(> .playground-test-factor-selector) { - background-color: var(--bg-dark-blue-40); -} - -.playground-test-factor-selector { - display: flex; - flex-flow: column; - align-items: center; - row-gap: var(--spacing-md); - width: 100%; - - & > .track { - display: flex; - flex-flow: column; - row-gap: var(--spacing-sm); - width: 100%; - max-width: 480px; - } -} diff --git a/new-ui/src/pages/playground/components/PlaygroundTestInstanceSelector/PlaygroundTestInstanceSelector.tsx b/new-ui/src/pages/playground/components/PlaygroundTestInstanceSelector/PlaygroundTestInstanceSelector.tsx deleted file mode 100644 index 652eace82..000000000 --- a/new-ui/src/pages/playground/components/PlaygroundTestInstanceSelector/PlaygroundTestInstanceSelector.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import './style.scss'; -import { useState } from 'react'; -import { InstanceSelector } from '../../../full/ConfigureMfaPage/components/InstanceSelector/InstanceSelector'; -import { PlaygroundCard } from '../PlaygroundCard/PlaygroundCard'; - -const instances = [ - { id: 1, name: 'Defguard HQ' }, - { id: 2, name: 'Staging' }, - { - id: 3, - name: 'Very long instance name that should be truncated or wrapped properly in the selector', - }, -]; - -export const PlaygroundTestInstanceSelector = () => { - const [selected, setSelected] = useState(); - - return ( - -
-

Default

-
- {instances.map((instance) => ( - {}} - /> - ))} -
-

Selected

-
- {instances.map((instance) => ( - {}} - /> - ))} -
-

Interactive (selected: {selected ?? 'none'})

-
- {instances.map((instance) => ( - setSelected(instance.id)} - /> - ))} -
-
- - ); -}; diff --git a/new-ui/src/pages/playground/components/PlaygroundTestInstanceSelector/style.scss b/new-ui/src/pages/playground/components/PlaygroundTestInstanceSelector/style.scss deleted file mode 100644 index 8d5637d50..000000000 --- a/new-ui/src/pages/playground/components/PlaygroundTestInstanceSelector/style.scss +++ /dev/null @@ -1,19 +0,0 @@ -.playground-card:has(> .playground-test-instance-selector) { - background-color: var(--bg-dark-blue-40); -} - -.playground-test-instance-selector { - display: flex; - flex-direction: column; - gap: 12px; - width: 100%; - align-items: center; - - .track { - display: flex; - flex-direction: column; - gap: 8px; - width: 100%; - max-width: 480px; - } -} diff --git a/new-ui/src/pages/playground/components/PlaygroundTestLoaderSpinner/PlaygroundTestLoaderSpinner.tsx b/new-ui/src/pages/playground/components/PlaygroundTestLoaderSpinner/PlaygroundTestLoaderSpinner.tsx new file mode 100644 index 000000000..7636f40cc --- /dev/null +++ b/new-ui/src/pages/playground/components/PlaygroundTestLoaderSpinner/PlaygroundTestLoaderSpinner.tsx @@ -0,0 +1,37 @@ +import './style.scss'; +import { LoaderSpinner } from '../../../../shared/components/LoaderSpinner/LoaderSpinner'; +import { PlaygroundCard } from '../PlaygroundCard/PlaygroundCard'; + +const sizes = [20, 24, 32, 40, 48, 64]; +const thicknesses = [1, 2, 3, 4]; +const thicknessPreviewSize = 48; + +export const PlaygroundTestLoaderSpinner = () => { + return ( + +
+

LoaderSpinner

+
+ {sizes.map((size) => ( +
+ + {size} +
+ ))} +
+
+ {thicknesses.map((thickness) => ( +
+ + {`${thickness}px`} +
+ ))} +
+
+ + ); +}; diff --git a/new-ui/src/pages/playground/components/PlaygroundTestLoaderSpinner/style.scss b/new-ui/src/pages/playground/components/PlaygroundTestLoaderSpinner/style.scss new file mode 100644 index 000000000..bbc636b60 --- /dev/null +++ b/new-ui/src/pages/playground/components/PlaygroundTestLoaderSpinner/style.scss @@ -0,0 +1,28 @@ +.playground-test-loader-spinner { + display: flex; + flex-flow: column; + align-items: center; + gap: var(--spacing-xl); + + h3 { + margin: 0; + font: var(--t-body-sm-600); + } + + .row { + display: flex; + flex-flow: row wrap; + align-items: flex-end; + justify-content: center; + gap: var(--spacing-3xl); + } + + .item { + display: flex; + flex-flow: column; + align-items: center; + gap: var(--spacing-sm); + font: var(--t-body-xs-400); + color: var(--fg-muted); + } +} diff --git a/new-ui/src/pages/playground/components/PlaygroundTestMenu/PlaygroundTestMenu.tsx b/new-ui/src/pages/playground/components/PlaygroundTestMenu/PlaygroundTestMenu.tsx deleted file mode 100644 index ba0ed4ac3..000000000 --- a/new-ui/src/pages/playground/components/PlaygroundTestMenu/PlaygroundTestMenu.tsx +++ /dev/null @@ -1,108 +0,0 @@ -import './style.scss'; -import { useState } from 'react'; -import { Menu } from '../../../../shared/components/Menu/Menu'; -import { PlaygroundCard } from '../PlaygroundCard/PlaygroundCard'; - -export const PlaygroundTestMenu = () => { - const [lastClicked, setLastClicked] = useState(null); - - return ( - -
-

Menu

- {lastClicked &&

Last clicked: {lastClicked}

} - setLastClicked('Edit') }, - { - text: 'Duplicate', - icon: 'copy', - onClick: () => setLastClicked('Duplicate'), - }, - ], - }, - { - items: [ - { - text: 'Delete', - icon: 'delete', - variant: 'danger', - onClick: () => setLastClicked('Delete'), - }, - ], - }, - ]} - /> -

Menu with disabled & nested

- setLastClicked('New') }, - { - text: 'Open', - icon: 'edit', - disabled: true, - onClick: () => setLastClicked('Open'), - }, - { - text: 'Export', - icon: 'copy', - items: [ - { - text: 'Export as PDF', - onClick: () => setLastClicked('Export as PDF'), - }, - { - text: 'Export as CSV', - onClick: () => setLastClicked('Export as CSV'), - }, - { - text: 'Export as JSON', - disabled: true, - onClick: () => setLastClicked('Export as JSON'), - }, - ], - }, - ], - }, - { - header: { text: 'Advanced' }, - items: [ - { - text: 'Settings', - icon: 'settings', - items: [ - { text: 'General', onClick: () => setLastClicked('General') }, - { text: 'Security', onClick: () => setLastClicked('Security') }, - ], - }, - { - text: 'Maintenance', - icon: 'protection', - disabled: true, - onClick: () => setLastClicked('Maintenance'), - }, - ], - }, - { - items: [ - { - text: 'Delete', - icon: 'delete', - variant: 'danger', - disabled: true, - onClick: () => setLastClicked('Delete (disabled)'), - }, - ], - }, - ]} - /> -
- - ); -}; diff --git a/new-ui/src/pages/playground/components/PlaygroundTestMenu/style.scss b/new-ui/src/pages/playground/components/PlaygroundTestMenu/style.scss deleted file mode 100644 index 612c6af41..000000000 --- a/new-ui/src/pages/playground/components/PlaygroundTestMenu/style.scss +++ /dev/null @@ -1,10 +0,0 @@ -.playground-test-menu { - display: flex; - flex-direction: column; - gap: 12px; - - .last-clicked { - font-size: 13px; - color: var(--text-secondary); - } -} diff --git a/new-ui/src/pages/playground/components/PlaygroundTestMfaSelector/PlaygroundTestMfaSelector.tsx b/new-ui/src/pages/playground/components/PlaygroundTestMfaSelector/PlaygroundTestMfaSelector.tsx deleted file mode 100644 index 70cffa5c9..000000000 --- a/new-ui/src/pages/playground/components/PlaygroundTestMfaSelector/PlaygroundTestMfaSelector.tsx +++ /dev/null @@ -1,97 +0,0 @@ -import './style.scss'; -import { useState } from 'react'; -import { MfaSelector } from '../../../../shared/components/LocationCard/components/MfaSelector/MfaSelector'; -import { MfaMethod, type MfaMethodValue } from '../../../../shared/rust-api/types'; -import { PlaygroundCard } from '../PlaygroundCard/PlaygroundCard'; - -const allFactors: MfaMethodValue[] = [ - MfaMethod.Totp, - MfaMethod.Email, - MfaMethod.Oidc, - MfaMethod.MobileApprove, - MfaMethod.Fido2, - MfaMethod.Biometric, -]; - -const configuredFactors: MfaMethodValue[] = [ - MfaMethod.Totp, - MfaMethod.Email, - MfaMethod.Fido2, -]; - -export const PlaygroundTestMfaSelector = () => { - const [selected, setSelected] = useState(); - - return ( - -
-

All factors (configured)

-
- {allFactors.map((factor) => ( - - ))} -
-

All factors (not configured)

-
- {allFactors.map((factor) => ( - - ))} -
-

Selected

-
- {allFactors.map((factor) => ( - - ))} -
-

Active

-
- {allFactors.map((factor) => ( - - ))} -
-

Active (not selectable)

-
- {allFactors.map((factor) => ( - - ))} -
-

Default badge

-
- - - - - -
-

Interactive (selected: {selected ?? 'none'})

-
- {allFactors.map((factor) => { - const configured = configuredFactors.includes(factor); - return ( - setSelected(factor)} - /> - ); - })} -
-
- - ); -}; diff --git a/new-ui/src/pages/playground/components/PlaygroundTestMfaSelector/style.scss b/new-ui/src/pages/playground/components/PlaygroundTestMfaSelector/style.scss deleted file mode 100644 index 4438d8d1f..000000000 --- a/new-ui/src/pages/playground/components/PlaygroundTestMfaSelector/style.scss +++ /dev/null @@ -1,19 +0,0 @@ -.playground-card:has(> .playground-test-mfa-selector) { - background-color: var(--bg-dark-blue-40); -} - -.playground-test-mfa-selector { - display: flex; - flex-direction: column; - gap: 12px; - width: 100%; - align-items: center; - - .track { - display: flex; - flex-direction: column; - gap: 8px; - width: 100%; - max-width: 296px; - } -} diff --git a/new-ui/src/pages/playground/components/PlaygroundTestMfaSettingsSection/PlaygroundTestMfaSettingsSection.tsx b/new-ui/src/pages/playground/components/PlaygroundTestMfaSettingsSection/PlaygroundTestMfaSettingsSection.tsx deleted file mode 100644 index d232d4e45..000000000 --- a/new-ui/src/pages/playground/components/PlaygroundTestMfaSettingsSection/PlaygroundTestMfaSettingsSection.tsx +++ /dev/null @@ -1,113 +0,0 @@ -import './style.scss'; -import { useState } from 'react'; -import { Checkbox } from '../../../../shared/components/Checkbox/Checkbox'; -import { MfaSettingsSection } from '../../../../shared/components/MfaSettingsSection/MfaSettingsSection'; -import type { - MfaSettingsInstance, - MfaSettingsLocation, -} from '../../../../shared/components/MfaSettingsSection/types'; -import { useMfaSettingsSection } from '../../../../shared/components/MfaSettingsSection/useMfaSettingsSection'; -import { ConnectionType, MfaMethod } from '../../../../shared/rust-api/types'; -import { PlaygroundCard } from '../PlaygroundCard/PlaygroundCard'; - -const multiStepLocation: MfaSettingsLocation = { - connection_type: ConnectionType.Location, - mfa_step_plan: [], - mfa_steps: [ - { - methods: [ - { method: MfaMethod.Totp, configured: true }, - { method: MfaMethod.Email, configured: false }, - { method: MfaMethod.Biometric, configured: false }, - ], - }, - { - methods: [ - { method: MfaMethod.Oidc, configured: true }, - { method: MfaMethod.Totp, configured: true }, - { method: MfaMethod.Fido2, configured: true }, - ], - }, - { - methods: [ - { method: MfaMethod.Fido2, configured: true }, - { method: MfaMethod.MobileApprove, configured: false }, - ], - }, - ], -}; - -const singleStepLocation: MfaSettingsLocation = { - connection_type: ConnectionType.Location, - mfa_step_plan: [], - mfa_steps: [ - { - methods: [ - { method: MfaMethod.Totp, configured: true }, - { method: MfaMethod.Oidc, configured: true }, - { method: MfaMethod.Email, configured: false }, - ], - }, - ], -}; - -const instance: MfaSettingsInstance = { - mfa_configured_methods: [MfaMethod.Totp, MfaMethod.Oidc, MfaMethod.Fido2], - mfa_capabilities: { - setup_methods: [MfaMethod.Totp, MfaMethod.Email, MfaMethod.Fido2], - authorize_methods: [MfaMethod.Totp, MfaMethod.Email, MfaMethod.Fido2, MfaMethod.Oidc], - }, - openid_display_name: null, - openid_provider_kind: 'custom', - smtp_configured: null, - openid_available: null, -}; - -const Demo = ({ - title, - location, - configurable, -}: { - title: string; - location: MfaSettingsLocation; - configurable: boolean; -}) => { - const mfaSection = useMfaSettingsSection({ location, instance, configurable }); - - return ( -
-

{title}

- -

Plan: {mfaSection.plan.join(' → ') || 'none'}

-

Configure MFA ({mfaSection.configureMethods.length})

-
- ); -}; - -export const PlaygroundTestMfaSettingsSection = () => { - const [configurable, setConfigurable] = useState(false); - - return ( - -
- setConfigurable((current) => !current)} - text="Configurable" - /> -
- - -
-
- - ); -}; diff --git a/new-ui/src/pages/playground/components/PlaygroundTestMfaSettingsSection/style.scss b/new-ui/src/pages/playground/components/PlaygroundTestMfaSettingsSection/style.scss deleted file mode 100644 index be4f6fa1f..000000000 --- a/new-ui/src/pages/playground/components/PlaygroundTestMfaSettingsSection/style.scss +++ /dev/null @@ -1,27 +0,0 @@ -.playground-card:has(> .playground-test-mfa-settings-section) { - background-color: var(--bg-dark-blue-40); -} - -.playground-test-mfa-settings-section { - display: flex; - flex-direction: column; - gap: 16px; - width: 100%; - align-items: center; - - .demos { - display: flex; - flex-flow: row wrap; - justify-content: center; - gap: 32px; - width: 100%; - } - - .demo { - display: flex; - flex-direction: column; - gap: 12px; - width: 100%; - max-width: 296px; - } -} diff --git a/new-ui/src/pages/playground/components/PlaygroundTestMfaVerificatorFactorSelector/PlaygroundTestMfaVerificatorFactorSelector.tsx b/new-ui/src/pages/playground/components/PlaygroundTestMfaVerificatorFactorSelector/PlaygroundTestMfaVerificatorFactorSelector.tsx deleted file mode 100644 index 37f50b470..000000000 --- a/new-ui/src/pages/playground/components/PlaygroundTestMfaVerificatorFactorSelector/PlaygroundTestMfaVerificatorFactorSelector.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import './style.scss'; -import { useState } from 'react'; -import { MfaMethod, type MfaMethodValue } from '../../../../shared/rust-api/types'; -import { ConfigureMfaVerificatorFactorSelector } from '../../../full/ConfigureMfaPage/components/ConfigureMfaVerificatorFactorSelector/ConfigureMfaVerificatorFactorSelector'; -import { PlaygroundCard } from '../PlaygroundCard/PlaygroundCard'; - -const factors: MfaMethodValue[] = [ - MfaMethod.Totp, - MfaMethod.Email, - MfaMethod.Fido2, - MfaMethod.Oidc, -]; - -export const PlaygroundTestMfaVerificatorFactorSelector = () => { - const [selected, setSelected] = useState(); - - return ( - -
-

Default

-
- {factors.map((factor) => ( - {}} - /> - ))} -
-

Selected

-
- {factors.map((factor) => ( - {}} - /> - ))} -
-

Disabled

-
- {factors.map((factor) => ( - {}} - /> - ))} -
-

Interactive (selected: {selected ?? 'none'})

-
- {factors.map((factor) => ( - setSelected(factor)} - /> - ))} -
-
- - ); -}; diff --git a/new-ui/src/pages/playground/components/PlaygroundTestMfaVerificatorFactorSelector/style.scss b/new-ui/src/pages/playground/components/PlaygroundTestMfaVerificatorFactorSelector/style.scss deleted file mode 100644 index 103b7c699..000000000 --- a/new-ui/src/pages/playground/components/PlaygroundTestMfaVerificatorFactorSelector/style.scss +++ /dev/null @@ -1,19 +0,0 @@ -.playground-card:has(> .playground-test-mfa-verificator-factor-selector) { - background-color: var(--bg-dark-blue-40); -} - -.playground-test-mfa-verificator-factor-selector { - display: flex; - flex-direction: column; - gap: 12px; - width: 100%; - align-items: center; - - .track { - display: flex; - flex-direction: column; - gap: 8px; - width: 100%; - max-width: 480px; - } -} diff --git a/new-ui/src/pages/playground/components/PlaygroundTestOpenIdProviders/PlaygroundTestOpenIdProviders.tsx b/new-ui/src/pages/playground/components/PlaygroundTestOpenIdProviders/PlaygroundTestOpenIdProviders.tsx deleted file mode 100644 index 83ce6a54a..000000000 --- a/new-ui/src/pages/playground/components/PlaygroundTestOpenIdProviders/PlaygroundTestOpenIdProviders.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import './style.scss'; -import { ExternalProviderButton } from '../../../../shared/components/ExternalProviderButton/ExternalProviderButton'; -import { MfaSelector } from '../../../../shared/components/LocationCard/components/MfaSelector/MfaSelector'; -import { type InstanceInfo, MfaMethod } from '../../../../shared/rust-api/types'; -import { findOpenIdProvider, openIdProviderName } from '../../../../shared/utils/mfa'; -import { PlaygroundCard } from '../PlaygroundCard/PlaygroundCard'; - -const noop = () => {}; - -const instances: Pick[] = [ - { openid_display_name: 'Microsoft', openid_provider_kind: 'microsoft' }, - { openid_display_name: 'Google', openid_provider_kind: 'google' }, - { openid_display_name: 'Okta', openid_provider_kind: 'okta' }, - { openid_display_name: 'JumpCloud', openid_provider_kind: 'jumpcloud' }, - { openid_display_name: 'Keycloak', openid_provider_kind: 'custom' }, - { - openid_display_name: 'Contoso Enterprise Single Sign-On Identity Provider', - openid_provider_kind: 'custom', - }, -]; - -export const PlaygroundTestOpenIdProviders = () => { - return ( - -
-

Authenticate (full view)

-
- {instances.map((instance) => ( - - ))} -
-

Authenticate (tray view)

-
- {instances.map((instance) => ( - - ))} -
-

Authenticate (loading)

-
- -
-

MFA method list

-
- {instances.map((instance) => ( - - ))} -
-

MFA method list (selected)

-
- {instances.map((instance) => ( - - ))} -
-

MFA method list (not configured)

-
- {instances.map((instance) => ( - - ))} -
-
- - ); -}; diff --git a/new-ui/src/pages/playground/components/PlaygroundTestOpenIdProviders/style.scss b/new-ui/src/pages/playground/components/PlaygroundTestOpenIdProviders/style.scss deleted file mode 100644 index 57ac76c5c..000000000 --- a/new-ui/src/pages/playground/components/PlaygroundTestOpenIdProviders/style.scss +++ /dev/null @@ -1,31 +0,0 @@ -.playground-card:has(> .playground-test-openid-providers) { - background-color: var(--bg-dark-blue-40); -} - -.playground-test-openid-providers { - display: flex; - flex-direction: column; - gap: 12px; - width: 100%; - align-items: center; - - .track { - display: flex; - flex-direction: column; - gap: 8px; - width: 100%; - max-width: 296px; - - &.full { - max-width: 328px; - } - - &.tray { - max-width: 248px; - } - - .external-provider-button { - width: 100%; - } - } -} diff --git a/new-ui/src/pages/playground/components/PlaygroundTestSelect.tsx b/new-ui/src/pages/playground/components/PlaygroundTestSelect.tsx deleted file mode 100644 index c5438222e..000000000 --- a/new-ui/src/pages/playground/components/PlaygroundTestSelect.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import { useState } from 'react'; -import { Select } from '../../../shared/components/Select/Select'; -import type { - SelectOption, - SelectOptionGroup, -} from '../../../shared/components/Select/types'; - -type RegionOption = { - code: string; -}; - -const quickOptions: readonly SelectOption[] = [ - { - key: 'all', - label: 'All Regions', - value: { code: 'all' }, - }, -]; - -const groupedOptions: readonly SelectOptionGroup[] = [ - { - key: 'eu', - label: 'Europe', - options: [ - { - key: 'de', - label: 'Germany', - value: { code: 'de' }, - }, - { - key: 'fr', - label: 'France', - value: { code: 'fr' }, - }, - ], - }, - { - key: 'americas', - label: 'Americas', - options: [ - { - key: 'us', - label: 'United States', - value: { code: 'us' }, - }, - { - key: 'ca', - label: 'Canada', - value: { code: 'ca' }, - }, - ], - }, -]; - -export const PlaygroundTestSelect = () => { - const [value, setValue] = useState>(quickOptions[0]); - - return ( -