diff --git a/apps/console/src/features/applications/components/forms/inbound-custom-form.tsx b/apps/console/src/features/applications/components/forms/inbound-custom-form.tsx index a20cae19dd5..83df05e5939 100644 --- a/apps/console/src/features/applications/components/forms/inbound-custom-form.tsx +++ b/apps/console/src/features/applications/components/forms/inbound-custom-form.tsx @@ -315,7 +315,7 @@ export const InboundCustomProtocolForm: FunctionComponent - + { generateFormElements() } { /* Certificates */ } diff --git a/apps/console/src/features/applications/components/forms/inbound-form-factory.tsx b/apps/console/src/features/applications/components/forms/inbound-form-factory.tsx index 167a2a19922..7d15b4c967c 100644 --- a/apps/console/src/features/applications/components/forms/inbound-form-factory.tsx +++ b/apps/console/src/features/applications/components/forms/inbound-form-factory.tsx @@ -129,6 +129,24 @@ export const InboundFormFactory: FunctionComponent data-testid={ testId } /> ); + case SupportedAuthProtocolTypes.OAUTH2_OIDC: + return ( + + ); case SupportedAuthProtocolTypes.SAML: if (showSAMLCreation && SAMLCreationOption && SAMLCreationOption !== SAMLConfigModes.MANUAL) { return ( diff --git a/apps/console/src/features/applications/components/forms/inbound-oidc-form.tsx b/apps/console/src/features/applications/components/forms/inbound-oidc-form.tsx index 381a9e2580b..1f906fd33bb 100644 --- a/apps/console/src/features/applications/components/forms/inbound-oidc-form.tsx +++ b/apps/console/src/features/applications/components/forms/inbound-oidc-form.tsx @@ -2629,7 +2629,7 @@ export const InboundOIDCForm: FunctionComponent = } } } > - + { (initialValues?.state === State.REVOKED) && ( diff --git a/apps/console/src/features/applications/components/forms/inbound-passive-sts-form.tsx b/apps/console/src/features/applications/components/forms/inbound-passive-sts-form.tsx index 0207f6b8040..2a9ab1f46bb 100644 --- a/apps/console/src/features/applications/components/forms/inbound-passive-sts-form.tsx +++ b/apps/console/src/features/applications/components/forms/inbound-passive-sts-form.tsx @@ -143,7 +143,7 @@ export const InboundPassiveStsForm: FunctionComponent - + = } } } > - + { diff --git a/apps/console/src/features/applications/components/forms/inbound-ws-trust-form.tsx b/apps/console/src/features/applications/components/forms/inbound-ws-trust-form.tsx index 38b7799e489..ca320a7985b 100644 --- a/apps/console/src/features/applications/components/forms/inbound-ws-trust-form.tsx +++ b/apps/console/src/features/applications/components/forms/inbound-ws-trust-form.tsx @@ -168,7 +168,7 @@ export const InboundWSTrustForm: FunctionComponent - + { + + let docLink: string = undefined; + + if (applicationTemplateId === ApplicationManagementConstants.CUSTOM_APPLICATION_OIDC) { + docLink = getLink("develop.applications.editApplication.standardBasedApplication" + + ".oauth2OIDC.protocol.learnMore"); + } + + if (applicationTemplateId === ApplicationManagementConstants.CUSTOM_APPLICATION_SAML) { + docLink = getLink("develop.applications.editApplication.standardBasedApplication" + + ".saml.protocol.learnMore"); + } + + if (!docLink) { + return null; + } + + return ( + + + + + Read through our + documentation + to learn more about using + + { + ApplicationManagementUtils.resolveProtocolDisplayName( + selectedProtocol as SupportedAuthProtocolTypes + ) + } + + protocol to implement login in your applications. + + + + + ); + }; + return ( - { !isLoading? resolveProtocolBanner() : null } - { - Object.values(SupportedAuthProtocolTypes).includes(selectedProtocol as SupportedAuthProtocolTypes) - ? ( - - ) - : ( - - ) - } +
+ { !isLoading? resolveProtocolBanner() : null } + { renderProtocolIntegrationHelpMessage() } + { + Object + .values(SupportedAuthProtocolTypes) + .includes(selectedProtocol as SupportedAuthProtocolTypes) + ? ( + + ) + : ( + + ) + } +
); }; @@ -665,12 +757,12 @@ export const AccessConfiguration: FunctionComponent -
+
- {/*{TODO: Hide change protocol option}*/} - {/*{ (supportedProtocolList.length !== 1) &&*/} - {/**/} - {/* Choose different protocol?*/} - {/* setShowProtocolSwitchModal(true) }*/} - {/* >*/} - {/* Change Protocol*/} - {/* */} - {/**/} - {/*}*/} + { /*{TODO: Hide change protocol option}*/ } + { /*{ (supportedProtocolList.length !== 1) &&*/ } + { /**/ } + { /* Choose different protocol?*/ } + { /* setShowProtocolSwitchModal(true) }*/ } + { /* >*/ } + { /* Change Protocol*/ } + { /* */ } + { /**/ } + { /*}*/ }
{ resolveProtocolDescription() } @@ -707,11 +799,20 @@ export const AccessConfiguration: FunctionComponent { - // Description for SAML Protocol tab. + + // Description for OIDC Protocol tab. if (selectedProtocol === SupportedAuthProtocolTypes.OIDC) { return(
- { t("console:develop.features.applications.forms.inboundOIDC.description") } + { + t( + "console:develop.features.applications.forms.inboundOIDC.description", + { + protocol: ApplicationManagementUtils + .resolveProtocolDisplayName(SupportedAuthProtocolTypes.OIDC) + } + ) + } @@ -720,7 +821,30 @@ export const AccessConfiguration: FunctionComponent ); } - // Description for OIDC Protocol tab. + + // Description for OAuth2/OIDC Protocol tab. + if (selectedProtocol === SupportedAuthProtocolTypes.OAUTH2_OIDC) { + return( +
+ { + t( + "console:develop.features.applications.forms.inboundOIDC.description", + { + protocol: ApplicationManagementUtils + .resolveProtocolDisplayName(SupportedAuthProtocolTypes.OAUTH2_OIDC) + } + ) + } + + { t("common:learnMore") } + +
+ ); + } + + // Description for SAML Protocol tab. if (selectedProtocol === SupportedAuthProtocolTypes.SAML) { return(
diff --git a/apps/console/src/features/applications/components/wizard/minimal-application-create-wizard.tsx b/apps/console/src/features/applications/components/wizard/minimal-application-create-wizard.tsx index a17706811ac..304ccf08c19 100644 --- a/apps/console/src/features/applications/components/wizard/minimal-application-create-wizard.tsx +++ b/apps/console/src/features/applications/components/wizard/minimal-application-create-wizard.tsx @@ -34,20 +34,13 @@ import get from "lodash-es/get"; import isEmpty from "lodash-es/isEmpty"; import merge from "lodash-es/merge"; import set from "lodash-es/set"; +import sortBy from "lodash-es/sortBy"; import React, { FunctionComponent, ReactElement, ReactNode, Suspense, useEffect, useRef, useState } from "react"; import { useTranslation } from "react-i18next"; import { useDispatch, useSelector } from "react-redux"; import { Dimmer, Grid } from "semantic-ui-react"; import { OauthProtocolSettingsWizardForm } from "./oauth-protocol-settings-wizard-form"; import { SAMLProtocolAllSettingsWizardForm } from "./saml-protocol-settings-all-option-wizard-form"; -import { - ApplicationListInterface, - ApplicationManagementUtils, - ApplicationTemplateLoadingStrategies, - SAMLConfigModes, - URLFragmentTypes, - getApplicationList -} from "../.."; import { applicationConfig } from "../../../../extensions"; import { AppConstants, @@ -60,20 +53,24 @@ import { history, store } from "../../../core"; -import { createApplication, getApplicationTemplateData } from "../../api"; +import { createApplication, getApplicationList, getApplicationTemplateData } from "../../api"; import { getInboundProtocolLogos } from "../../configs"; import { ApplicationManagementConstants } from "../../constants"; import CustomApplicationTemplate from "../../data/application-templates/templates/custom-application/custom-application.json"; import SinglePageApplicationTemplate from "../../data/application-templates/templates/single-page-application/single-page-application.json"; - import { + ApplicationListInterface, ApplicationTemplateIdTypes, ApplicationTemplateInterface, + ApplicationTemplateLoadingStrategies, MainApplicationInterface, - SupportedAuthProtocolTypes + SAMLConfigModes, + SupportedAuthProtocolTypes, + URLFragmentTypes } from "../../models"; +import { ApplicationManagementUtils } from "../../utils"; /** * Prop types of the `MinimalAppCreateWizard` component. @@ -137,8 +134,10 @@ export const MinimalAppCreateWizard: FunctionComponent(null); const [ protocolFormValues, setProtocolFormValues ] = useState(undefined); - const [ customApplicationProtocol, setCustomApplicationProtocol ] - = useState(SupportedAuthProtocolTypes.OIDC); + const [ + customApplicationProtocol, + setCustomApplicationProtocol + ] = useState(SupportedAuthProtocolTypes.OAUTH2_OIDC); const [ isSubmitting, setIsSubmitting ] = useState(false); const [ generalFormValues, setGeneralFormValues ] = useState>(undefined); const [ selectedTemplate, setSelectedTemplate ] = useState(template); @@ -202,10 +201,31 @@ export const MinimalAppCreateWizard: FunctionComponent { + handleError("all", false); - if ((!protocolFormValues - && (template?.authenticationProtocol || template.subTemplates?.length > 0)) - || !generalFormValues) { + + // If both `protocolFormValues` & `generalFormValues` are undefined, return. + if (!protocolFormValues && !generalFormValues) { + return; + } + + // If `protocolFormValues` is undefined, evaluate... + if (!protocolFormValues) { + if (selectedTemplate.id === CustomApplicationTemplate.id) { + // SAML Custom Apps a has protocol settings form. + if (customApplicationProtocol === SupportedAuthProtocolTypes.SAML) { + return; + } + } + + // If there is an `authenticationProtocol` defined in the template or it has `subTemplates`, return. + if (template?.authenticationProtocol || template.subTemplates?.length > 0) { + return; + } + } + + // Every app should atleast have a `name` input defined. + if (!generalFormValues) { return; } @@ -234,16 +254,27 @@ export const MinimalAppCreateWizard: FunctionComponent{ + }) + .finally(() => { setIsSubmitting(false); handleProtocolValueChange(false); handleError("all", false); - }) + }); }, [ generalFormValues, protocolFormValues ]); /** @@ -472,7 +504,7 @@ export const MinimalAppCreateWizard: FunctionComponent { setProtocolValuesChange(state); - } + }; /** * Check the protocol errors. @@ -493,15 +525,23 @@ export const MinimalAppCreateWizard: FunctionComponent { - if (selectedTemplate.authenticationProtocol === SupportedAuthProtocolTypes.OIDC) { + + let selectedProtocol: SupportedAuthProtocolTypes = selectedTemplate + .authenticationProtocol as SupportedAuthProtocolTypes; + + if (selectedTemplate.id === CustomApplicationTemplate.id) { + selectedProtocol = customApplicationProtocol; + } + + if (selectedProtocol === SupportedAuthProtocolTypes.OIDC) { return ( ); - } else if (selectedTemplate.authenticationProtocol === SupportedAuthProtocolTypes.SAML) { + } else if (selectedProtocol === SupportedAuthProtocolTypes.SAML) { + + /** + * Enable to have SAML wizard without config mode options. + * + * @example + * setProtocolFormValues(values) } + * data-testid={ `${ testId }-saml-protocol-settings-form` } + * /> + */ return ( - // Enable to have SAML wizard without config mode options. - // setProtocolFormValues(values) } - // data-testid={ `${ testId }-saml-protocol-settings-form` } - // /> ); } }; @@ -563,16 +608,22 @@ export const MinimalAppCreateWizard: FunctionComponent { - const getSupportedProtocols = (filterProtocol?: string): string[] => { - let supportedProtocols: string[] = Object.values(SupportedAuthProtocolTypes); + let supportedProtocols: SupportedAuthProtocolTypes[] = Object.values(SupportedAuthProtocolTypes); // Filter out legacy and unsupported auth protocols. - supportedProtocols = supportedProtocols.filter((protocol) => { + supportedProtocols = supportedProtocols.filter((protocol: string) => { - if ( applicationConfig.customApplication.allowedProtocolTypes - && applicationConfig.customApplication.allowedProtocolTypes.length > 0 ) { - if (applicationConfig.customApplication.allowedProtocolTypes.includes(protocol)){ + if (applicationConfig.customApplication.allowedProtocolTypes + && applicationConfig.customApplication.allowedProtocolTypes.length > 0) { + if (applicationConfig.customApplication.allowedProtocolTypes.includes(protocol)) { return protocol; } else { return false; @@ -580,6 +631,7 @@ export const MinimalAppCreateWizard: FunctionComponent { - if (a < b) return -1; - if (a > b) return 1; - return 0; + const sortOrder: SupportedAuthProtocolTypes[] = [ + SupportedAuthProtocolTypes.OAUTH2_OIDC, + SupportedAuthProtocolTypes.SAML, + SupportedAuthProtocolTypes.WS_FEDERATION + ]; + + supportedProtocols = sortBy(supportedProtocols, (protocol: SupportedAuthProtocolTypes) => { + return sortOrder.indexOf(protocol); }); return supportedProtocols; }; + /** + * Renders the sub template selection. + * @return {React.ReactElement} + */ + const renderSubTemplateSelection = (): ReactElement => { + + const hasSubTemplates: boolean = (subTemplates && subTemplates instanceof Array && subTemplates.length > 0); + const isCustom: boolean = selectedTemplate.id === CustomApplicationTemplate.id; + + if (!hasSubTemplates && !isCustom) { + return null; + } + + const templates: SupportedAuthProtocolTypes[] | ApplicationTemplateInterface[] = isCustom + ? getSupportedCustomProtocols() + : subTemplates; + + return ( + + +
+ +
+ { + templates + .map((subTemplate: SupportedAuthProtocolTypes | ApplicationTemplateInterface, + index: number) => { + + const id: string = isCustom + ? subTemplate as SupportedAuthProtocolTypes + : (subTemplate as ApplicationTemplateInterface).id; + const imageKey: (SupportedAuthProtocolTypes + | ApplicationTemplateInterface["image"]) = isCustom + ? subTemplate as SupportedAuthProtocolTypes + : (subTemplate as ApplicationTemplateInterface).image; + const header: string = isCustom + ? ApplicationManagementUtils + .resolveProtocolDisplayName(subTemplate as SupportedAuthProtocolTypes) + : (subTemplate as ApplicationTemplateInterface).name; + const isSelected: boolean = isCustom + ? customApplicationProtocol === subTemplate + : selectedTemplate.id === (subTemplate as ApplicationTemplateInterface).id; + const isDisabled: boolean = isCustom + ? false + : (subTemplate as ApplicationTemplateInterface).previewOnly; + const onClick = () => { + // If `previewOnly`, avoid click actions. + if ((subTemplate as ApplicationTemplateInterface).previewOnly) { + return; + } + + if (isCustom) { + setCustomApplicationProtocol(subTemplate as SupportedAuthProtocolTypes); + + return; + } + + setSelectedTemplate(subTemplate as ApplicationTemplateInterface); + loadTemplateDetails((subTemplate as ApplicationTemplateInterface).id, + subTemplate as ApplicationTemplateInterface); + }; + + return ( +
+ +
+ ); + }) + } +
+
+ + + ); + }; + /** * Resolves to the applicable content of an application template. * @@ -705,97 +866,7 @@ export const MinimalAppCreateWizard: FunctionComponent - { - (selectedTemplate.id === CustomApplicationTemplate.id) - && ( - - -
-
Protocol
- { - getSupportedProtocols().map(( - subTemplate: string, index: number - ) => ( - { - setCustomApplicationProtocol(subTemplate); - } } - imageSize="mini" - contentTopBorder={ false } - showTooltips={ false } - renderDisabledItemsAsGrayscale={ false } - overlay={ renderDimmerOverlay() } - overlayOpacity={ 0.6 } - data-testid={ `${ testId }-${ subTemplate }-card` } - /> - )) - } -
- - - ) - } - { - (subTemplates && subTemplates instanceof Array && subTemplates.length > 0) - ? ( - - -
-
{ subTemplatesSectionTitle }
- { - subTemplates.map(( - subTemplate: ApplicationTemplateInterface, index: number - ) => ( - { - if (!subTemplate.previewOnly) { - setSelectedTemplate(subTemplate); - loadTemplateDetails(subTemplate.id, - subTemplate); - } - } } - imageSize="mini" - contentTopBorder={ false } - showTooltips={ !subTemplate.previewOnly } - renderDisabledItemsAsGrayscale={ false } - disabled={ subTemplate.previewOnly } - overlay={ renderDimmerOverlay() } - overlayOpacity={ 0.6 } - data-testid={ `${ testId }-${ subTemplate.id }-card` } - /> - )) - } -
- - - ) - : null - } + { renderSubTemplateSelection() } { resolveMinimalProtocolFormFields() } diff --git a/apps/console/src/features/applications/configs/ui.ts b/apps/console/src/features/applications/configs/ui.ts index 4de0eb2f4d0..ef79b9dda1a 100644 --- a/apps/console/src/features/applications/configs/ui.ts +++ b/apps/console/src/features/applications/configs/ui.ts @@ -116,6 +116,7 @@ import { ReactComponent as ZoomTemplateIllustration } from "../../../themes/default/assets/images/illustrations/zoom-template-illustration.svg"; import OpenIDLogo from "../../../themes/default/assets/images/protocols/openid.png"; +import OAuth2OpenIDLogo from "../../../themes/default/assets/images/protocols/oauth2-oidc.png"; import SamlLogo from "../../../themes/default/assets/images/protocols/saml.png"; import WSFedLogo from "../../../themes/default/assets/images/protocols/ws-fed.png"; import WSTrustLogo from "../../../themes/default/assets/images/protocols/ws-trust.png"; @@ -127,18 +128,20 @@ import { ReactComponent as MicrosoftLogo } from "../../../themes/default/assets/ import { ReactComponent as Office365Logo } from "../../../themes/default/assets/images/third-party/office-365-logo.svg"; import { ReactComponent as YahooLogo } from "../../../themes/default/assets/images/third-party/yahoo-logo.svg"; import { ReactComponent as WarningIcon } from "../../../themes/default/assets/images/icons/warning-icon.svg"; +import { SupportedAuthProtocolTypes } from "../models"; export const getInboundProtocolLogos = () => { return { + general: ProtocolIllustration, oidc: OpenIDLogo, openid: OpenIDLogo, "passive-sts": WSFedLogo, + [ SupportedAuthProtocolTypes.OAUTH2_OIDC ]: OAuth2OpenIDLogo, saml: SamlLogo, "ws-trust": WSTrustLogo, wsFed: WSFedLogo, - wsTrust: WSTrustLogo, - general: ProtocolIllustration + wsTrust: WSTrustLogo }; }; diff --git a/apps/console/src/features/applications/constants/application-management.ts b/apps/console/src/features/applications/constants/application-management.ts index ae069d2f135..ca41d6d9452 100644 --- a/apps/console/src/features/applications/constants/application-management.ts +++ b/apps/console/src/features/applications/constants/application-management.ts @@ -226,7 +226,6 @@ export class ApplicationManagementConstants { ["b9c5e11e-fc78-484b-9bec-015d247561b8"]: [ ApplicationManagementConstants.AUTHORIZATION_CODE_GRANT, ApplicationManagementConstants.IMPLICIT_GRANT, - ApplicationManagementConstants.PASSWORD, ApplicationManagementConstants.CLIENT_CREDENTIALS_GRANT, ApplicationManagementConstants.REFRESH_TOKEN_GRANT ], diff --git a/apps/console/src/features/applications/data/application-templates/templates/custom-application/custom-application.json b/apps/console/src/features/applications/data/application-templates/templates/custom-application/custom-application.json index 002a9caefb2..d62139df60a 100644 --- a/apps/console/src/features/applications/data/application-templates/templates/custom-application/custom-application.json +++ b/apps/console/src/features/applications/data/application-templates/templates/custom-application/custom-application.json @@ -9,7 +9,7 @@ "displayOrder": -1, "self": "", "subTemplates": [], - "subTemplatesSectionTitle": "", + "subTemplatesSectionTitle": "Protocol", "templateGroup": "", "types": [ "oidc", diff --git a/apps/console/src/features/applications/models/application-inbound.ts b/apps/console/src/features/applications/models/application-inbound.ts index b9d3a08ecc0..6528879b443 100644 --- a/apps/console/src/features/applications/models/application-inbound.ts +++ b/apps/console/src/features/applications/models/application-inbound.ts @@ -132,6 +132,7 @@ export interface OIDCDataInterface { export enum SupportedAuthProtocolTypes { SAML = "saml", OIDC = "oidc", + OAUTH2_OIDC = "oauth2-oidc", WS_FEDERATION = "passive-sts", WS_TRUST = "ws-trust", CUSTOM= "custom" diff --git a/modules/i18n/src/models/namespaces/console-ns.ts b/modules/i18n/src/models/namespaces/console-ns.ts index 56f27ad3a7f..b5e10241e58 100644 --- a/modules/i18n/src/models/namespaces/console-ns.ts +++ b/modules/i18n/src/models/namespaces/console-ns.ts @@ -749,6 +749,7 @@ export interface ConsoleNS { }; inboundOIDC: { description: string; + documentation: string; fields: { allowedOrigins: FormAttributes; callBackUrls: FormAttributes; @@ -823,6 +824,7 @@ export interface ConsoleNS { }; inboundSAML: { description: string; + documentation: string; fields: { assertionURLs: FormAttributes; defaultAssertionURL: FormAttributes; diff --git a/modules/i18n/src/translations/en-US/portals/console.ts b/modules/i18n/src/translations/en-US/portals/console.ts index 5210106d02f..51d346c47e6 100644 --- a/modules/i18n/src/translations/en-US/portals/console.ts +++ b/modules/i18n/src/translations/en-US/portals/console.ts @@ -1361,7 +1361,9 @@ export const console: ConsoleNS = { } }, inboundOIDC: { - description: "Given below are the OpenID Connect settings for your application.", + description: "Given below are the {{protocol}} settings for your application.", + documentation: "Read through our <1>documentation to learn more about using " + + "<3>{{protocol}} protocol to implement login in your applications.", fields: { allowedOrigins: { hint: "Allowed origins are URLs that will be allowed to make requests from cross " + @@ -1673,6 +1675,8 @@ export const console: ConsoleNS = { }, inboundSAML: { description: "Given below are the SAML settings for your application.", + documentation: "Read through our <1>documentation to learn more about using " + + "<3>{{protocol}} protocol to implement login in your applications.", fields: { assertionURLs: { hint: "The Assertion Consumer Service (ACS) URL determines where to " + diff --git a/modules/i18n/src/translations/fr-FR/portals/console.ts b/modules/i18n/src/translations/fr-FR/portals/console.ts index 3d9f8748894..679ea947e00 100644 --- a/modules/i18n/src/translations/fr-FR/portals/console.ts +++ b/modules/i18n/src/translations/fr-FR/portals/console.ts @@ -1376,7 +1376,9 @@ export const console: ConsoleNS = { } }, inboundOIDC: { - description: "Ci-dessous sont les paramètres OpenID Connect pour votre application", + description: "Ci-dessous sont les paramètres {{protocol}} pour votre application", + documentation: "Lisez notre <1>documentation pour en savoir plus sur l'utilisation " + + "du protocole <3>{{protocol}} pour implémenter la connexion dans vos applications.", fields: { allowedOrigins: { hint: "Les origines autorisées sont des URL qui seront autorisées à effectuer des requêtes " + @@ -1701,6 +1703,8 @@ export const console: ConsoleNS = { }, inboundSAML: { description: "Vous trouverez ci-dessous les paramètres SAML de votre application.", + documentation: "Lisez notre <1>documentation pour en savoir plus sur l'utilisation " + + "du protocole <3>{{protocol}} pour implémenter la connexion dans vos applications.", fields: { assertionURLs: { hint: "Elle précise les URL des consommateurs vers lesquels le navigateur " + diff --git a/modules/i18n/src/translations/si-LK/portals/console.ts b/modules/i18n/src/translations/si-LK/portals/console.ts index 7d87710b86b..999c8badccc 100644 --- a/modules/i18n/src/translations/si-LK/portals/console.ts +++ b/modules/i18n/src/translations/si-LK/portals/console.ts @@ -1349,7 +1349,9 @@ export const console: ConsoleNS = { } }, inboundOIDC: { - description: "ඔබේ OpenID Connect සම්බන්ධක සැකසුම් පහත දක්වා ඇත", + description: "ඔබේ {{protocol}} සම්බන්ධක සැකසුම් පහත දක්වා ඇත", + documentation: "ඔබේ යෙදුම් වල ප්‍රවේශය ක්‍රියාත්මක කිරීම සඳහා <3>{{ප්‍රොටොකෝලය} ප්‍රොටෝකෝලය " + + "භාවිතා කිරීම ගැන වැඩිදුර දැන ගැනීමට අපගේ <1>ප්‍රලේඛනය කියවන්න.", messages: { revokeDisclaimer: { content: "යෙදුම අවලංගු කර ඇත. ඔබට යෙදුම නැවත සක්‍රිය කිරීමට අවශ්‍ය නම් " + @@ -1649,6 +1651,8 @@ export const console: ConsoleNS = { }, inboundSAML: { description: "ඔබේ අයදුම්පත සඳහා වූ SAML සැකසුම් පහත දක්වා ඇත.", + documentation: "ඔබේ යෙදුම් වල ප්‍රවේශය ක්‍රියාත්මක කිරීම සඳහා <3>{{ප්‍රොටොකෝලය} ප්‍රොටෝකෝලය " + + "භාවිතා කිරීම ගැන වැඩිදුර දැන ගැනීමට අපගේ <1>ප්‍රලේඛනය කියවන්න.", fields: { assertionURLs: { hint: "සත්‍යාපනය සාර්ථක වූ පසු බ්‍රව්සරය යළි හරවා යැවිය යුතු බවට පාරිභෝගික " + diff --git a/modules/react-components/src/components/card/selection-card.tsx b/modules/react-components/src/components/card/selection-card.tsx index 71bcd350c9b..9d891345686 100644 --- a/modules/react-components/src/components/card/selection-card.tsx +++ b/modules/react-components/src/components/card/selection-card.tsx @@ -44,6 +44,10 @@ export interface SelectionCardPropsInterface extends Omit, T * Image for the card. */ image?: any; + /** + * Should the image be shown inline?. + */ + imageInline?: boolean; /** * Icon options. */ @@ -122,6 +126,7 @@ export const SelectionCard: FunctionComponent = ( id, inline, image, + imageInline, imageOptions, imageSize, multilineDescription, @@ -146,8 +151,9 @@ export const SelectionCard: FunctionComponent = ( "selection-card", { disabled, - grayscale: disabled && renderDisabledItemsAsGrayscale, "filled-selection": selectionType === "filled", + grayscale: disabled && renderDisabledItemsAsGrayscale, + "image-inline": imageInline, inline, "no-content-top-border": !contentTopBorder, selected, @@ -188,7 +194,7 @@ export const SelectionCard: FunctionComponent = ( disabled && dimmerState && overlay } { - image && ( + image && !imageInline && ( = ( { showText && ( - { header && ( - - { header } - - ) } - /> - ) } - { description && ( - - { description } - - ) } - /> - ) } + { + image && imageInline && ( +
+ +
+ ) + } +
+ { header && ( + + { header } + + ) } + /> + ) } + { description && ( + + { description } + + ) } + /> + ) } +
) } diff --git a/modules/react-components/src/components/icon/generic-icon.tsx b/modules/react-components/src/components/icon/generic-icon.tsx index e8d916f251a..1e5b747798d 100644 --- a/modules/react-components/src/components/icon/generic-icon.tsx +++ b/modules/react-components/src/components/icon/generic-icon.tsx @@ -137,6 +137,10 @@ export interface GenericIconProps extends TestableComponentInterface { * Vertical alignment. */ verticalAlign?: SemanticVERTICALALIGNMENTS; + /** + * Width of the icon. + */ + width?: "auto" | number; /** * ID used to recognize components in guided tour wizards. */ @@ -203,6 +207,7 @@ export const GenericIcon: React.FunctionComponent .icon { + width: auto; + height: @iconNano; + } + } } &.default-size { > .icon { @@ -701,6 +707,12 @@ body { height: @iconDefault; } } + &.width-auto { + > .icon { + width: auto; + height: @iconDefault; + } + } } &.micro { > .icon { @@ -713,6 +725,12 @@ body { height: @iconMicro; } } + &.width-auto { + > .icon { + width: auto; + height: @iconMicro; + } + } } &.x22 { > .icon { @@ -725,6 +743,12 @@ body { height: @iconX22; } } + &.width-auto { + > .icon { + width: auto; + height: @iconX22; + } + } } &.x30 { > .icon { @@ -737,6 +761,12 @@ body { height: @iconX30; } } + &.width-auto { + > .icon { + width: auto; + height: @iconX30; + } + } } &.mini { > .icon { @@ -748,6 +778,12 @@ body { height: @iconMini; } } + &.width-auto { + > .icon { + width: auto; + height: @iconMini; + } + } } &.x50 { > .icon { @@ -759,6 +795,12 @@ body { height: @iconX50; } } + &.width-auto { + > .icon { + width: auto; + height: @iconX50; + } + } } &.x60 { > .icon { @@ -770,6 +812,12 @@ body { height: @iconX60; } } + &.width-auto { + > .icon { + width: auto; + height: @iconX60; + } + } } &.tiny { > .icon { @@ -781,6 +829,12 @@ body { height: @iconTiny; } } + &.width-auto { + > .icon { + width: auto; + height: @iconTiny; + } + } } &.small { > .icon { @@ -792,6 +846,12 @@ body { height: @iconSmall; } } + &.width-auto { + > .icon { + width: auto; + height: @iconSmall; + } + } } &.medium { > .icon { @@ -803,6 +863,12 @@ body { height: @iconMedium; } } + &.width-auto { + > .icon { + width: auto; + height: @iconMedium; + } + } } &.large { > .icon { @@ -814,6 +880,12 @@ body { height: @iconLarge; } } + &.width-auto { + > .icon { + width: auto; + height: @iconLarge; + } + } } &.big { > .icon { @@ -825,6 +897,12 @@ body { height: @iconBig; } } + &.width-auto { + > .icon { + width: auto; + height: @iconBig; + } + } } &.huge { > .icon { @@ -836,6 +914,12 @@ body { height: @iconHuge; } } + &.width-auto { + > .icon { + width: auto; + height: @iconHuge; + } + } } &.massive { > .icon { @@ -847,6 +931,12 @@ body { height: @iconMassive; } } + &.width-auto { + > .icon { + width: auto; + height: @iconMassive; + } + } } &.background { &-transparent { diff --git a/modules/theme/src/themes/default/assets/images/protocols/oauth2-oidc.png b/modules/theme/src/themes/default/assets/images/protocols/oauth2-oidc.png new file mode 100644 index 00000000000..37e3f36e03a Binary files /dev/null and b/modules/theme/src/themes/default/assets/images/protocols/oauth2-oidc.png differ diff --git a/modules/theme/src/themes/default/modules/modal.overrides b/modules/theme/src/themes/default/modules/modal.overrides index 2f71517115b..4c15295b230 100644 --- a/modules/theme/src/themes/default/modules/modal.overrides +++ b/modules/theme/src/themes/default/modules/modal.overrides @@ -304,10 +304,36 @@ } &.minimal-application-create-wizard { .sub-template-selection { + .sub-templates-label { + display: block; + margin: 0em 0em @4px 0em; + color: @textColor; + font-size: @relativeSmall; + font-weight: @bold; + text-transform: none; + } + .sub-templates { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-content: center; + justify-content: flex-start; + align-items: center; + gap: 10px; + } .sub-template-selection-card { .card-text-container { .header { - font-size: @minimalApplicationCreateWizardSubTemplateSelectionCardFontSize; + font-size: @minimalApplicationCreateWizardSubTemplateSelectionCardFontSize !important; + } + } + &.image-inline { + .card-image-container { + .theme-icon { + margin-right: 10px; + border-right: @defaultBorderWidth solid lighten(@defaultBorderColor, 10); + padding-right: 10px; + } } } } diff --git a/modules/theme/src/themes/default/modules/modal.variables b/modules/theme/src/themes/default/modules/modal.variables index 3adca2c51f3..7b76807e350 100755 --- a/modules/theme/src/themes/default/modules/modal.variables +++ b/modules/theme/src/themes/default/modules/modal.variables @@ -37,7 +37,7 @@ @wizardContentHorizontalPadding: 3em; @wizardSummaryFieldValueColor: @nobel; -@minimalApplicationCreateWizardSubTemplateSelectionCardFontSize: 0.8em; +@minimalApplicationCreateWizardSubTemplateSelectionCardFontSize: 0.9em; /*------------------------------- Side Panel Modal diff --git a/modules/theme/src/themes/default/views/card.overrides b/modules/theme/src/themes/default/views/card.overrides index 0e3eaf08fa8..cd79f80756d 100644 --- a/modules/theme/src/themes/default/views/card.overrides +++ b/modules/theme/src/themes/default/views/card.overrides @@ -292,6 +292,16 @@ display: inline-block; margin-right: @selectionCardRightSpacing; } + &.image-inline { + .card-text-container { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-content: center; + justify-content: center; + align-items: center; + } + } &.selected { &.underlined-selection { &:after {