@okta/okta-signin-widget 7.16.0 → 7.16.1

package/src/v3/src/transformer/uischema/transform.ts

@@ -21,7 +21,6 @@ import { createIdentifierContainer } from './createIdentifierContainer';
 import { createTextElementKeys } from './createTextElementKeys';
 import { overwriteAutocomplete } from './overwriteAutocomplete';
 import { setFocusOnFirstElement } from './setFocusOnFirstElement';
-import { setLtrFields } from './setLtrFields';
 import { updateCustomFields } from './updateCustomFields';
 import { updateElementKeys } from './updateElementKeys';
 import { updatePasswordDescribedByValue } from './updatePasswordDescribedByValue';
@@ -36,7 +35,6 @@ export const transformUISchema: TransformStepFnWithOptions = (
   updateElementKeys(options),
   addIdToElements,
   updatePasswordDescribedByValue,
-  setLtrFields,
   overwriteAutocomplete(options),
   // OKTA-586475: Please keep this as the last function to be executed since we want to ensure
   // that the identifier container is always positioned at the top of a view

package/src/v3/src/{components/FieldLevelMessageContainer/index.tsx → types/image.ts}

@@ -10,6 +10,13 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import FieldLevelMessageContainer from './FieldLevelMessageContainer';
-
-export default FieldLevelMessageContainer;
+export type ImageProps = {
+  src: string;
+  alt: string;
+  width?: string | number;
+  height?: string | number;
+  maxWidth?: string | number;
+  maxHeight?: string | number;
+  testId?: string;
+  ariaHidden?: boolean;
+};

package/src/v3/src/types/index.ts

@@ -17,6 +17,7 @@ export * from './component';
 export * from './context';
 export * from './error';
 export * from './handlers';
+export * from './image';
 export * from './ion';
 export * from './json';
 export * from './jsonforms';

package/src/v3/src/types/schema.ts

@@ -310,7 +310,6 @@ export interface ButtonElement extends UISchemaElement {
     dataSe?: string;
     stepToRender?: string;
     ariaLabel?: string;
-    classes?: string;
     disabled?: boolean;
     Icon?: FunctionComponent | string;
     iconAlt?: string;
@@ -325,6 +324,8 @@ export interface AuthenticatorButtonElement extends UISchemaElement {
     key: string;
     ariaLabel: string;
     authenticator?: IdxAuthenticator;
+    isEnroll?: boolean;
+    isAdditionalEnroll?: boolean;
     ctaLabel: string;
     description?: string;
     nickname?: string;

package/src/v3/src/types/widget.ts

@@ -10,6 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
+import { DesignTokensOverride } from '@okta/odyssey-react-mui';
 import {
   FlowIdentifier,
   IdxActionParams,
@@ -34,7 +35,6 @@ import {
   UserOperation,
 } from '../../../types';
 import { InterstitialRedirectView } from '../constants';
-import { DesignTokensType } from '../util/designTokens';
 import { WidgetHooks } from '../util/widgetHooks';
 import { OktaSignInAPI } from './api';
 import { JsonObject } from './json';
@@ -119,7 +119,7 @@ export type WidgetOptions = {
   brandColors?: BrandColors;
 
   // theme
-  theme?: { tokens: DesignTokensType }; // & ThemeOptions;
+  theme?: { tokens: DesignTokensOverride }; // & ThemeOptions;
 
   // hooks
   hooks?: HooksOptions; // object in options
@@ -285,7 +285,7 @@ interface ProxyIdxResponse {
 
 type CustomButton = {
   title: string;
-  className: string;
+  className?: string;
   i18nKey: string;
   dataAttr?: string;
   click: { (): void }

package/src/v3/src/util/buildFieldLevelErrorMessages.ts

@@ -0,0 +1,48 @@
+/*
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { WidgetMessage } from '../types';
+
+type FieldLevelErrorMessages = {
+  errorMessage?: string;
+  errorMessageList?: string[];
+};
+
+export const buildFieldLevelErrorMessages = (
+  errors: WidgetMessage[] | undefined,
+) : FieldLevelErrorMessages => {
+  const hasErrors = typeof errors !== 'undefined' && errors.length > 0;
+
+  if (hasErrors) {
+    if (errors.length === 1) {
+      const error = errors[0];
+      // Covers nested messages, e.g. password requirements not met
+      // The SIW does not have messages nested more than once
+      if (Array.isArray(error.message)) {
+        return {
+          errorMessage: error.description,
+          errorMessageList: error.message
+            .filter((msg) => typeof msg.message === 'string')
+            .map((msg) => msg.message as string),
+        };
+      }
+      return { errorMessage: error.message };
+    }
+    return {
+      errorMessageList: errors
+        .filter((error) => typeof error.message === 'string')
+        .map((error) => error.message as string),
+    };
+  }
+
+  return {};
+};

package/src/v3/src/util/formUtils.ts

@@ -14,7 +14,6 @@ import {
   IdxAuthenticator,
   IdxMessage, IdxRemediation, IdxTransaction, NextStep,
 } from '@okta/okta-auth-js';
-import classNames from 'classnames';
 
 import IDP from '../../../util/IDP';
 import Util from '../../../util/Util';
@@ -77,8 +76,7 @@ export const getCustomButtonElements = (widgetProps: WidgetProps): ButtonElement
       options: {
         type: ButtonType.BUTTON,
         step: '',
-        dataSe: customButton.dataAttr,
-        classes: classNames(customButton.className, 'default-custom-button'),
+        dataSe: customButton.dataAttr ?? 'custom-button',
         variant: 'secondary',
         onClick: customButton.click,
       },
@@ -105,8 +103,7 @@ const getPIVButtonElement = (
     options: {
       type: ButtonType.BUTTON,
       step: IDX_STEP.PIV_IDP,
-      dataSe: 'piv-card-button',
-      classes: `${piv?.className || ''} piv-button`,
+      dataSe: `piv-card-button${piv?.className ? ` ${piv.className}` : ''}`,
       variant: 'secondary',
       Icon: SmartCardIconSvg,
       iconAlt: loc('piv.card', 'login'),
@@ -189,10 +186,6 @@ const getConfigIdpButtonRemediations = (
           name: idpConfig.text,
         };
         const redirectUri = `${baseUrl}/sso/idps/${idpConfig.id}?stateToken=${stateHandle}`;
-        if (idpConfig.className) {
-          // @ts-expect-error OKTA-609464 - className missing from IdpConfig type
-          idp.className = idpConfig.className;
-        }
         return {
           name: IDX_STEP.REDIRECT_IDP,
           type: idpConfig.type,
@@ -249,17 +242,12 @@ export const getIdpButtonElements = (
     return {
       type: 'Button',
       label: displayName,
+      noTranslate: type === 'general-idp',
       options: {
         type: ButtonType.BUTTON,
         step: IDX_STEP.PIV_IDP,
-        dataSe: 'piv-card-button',
-        classes: classNames(
-          'social-auth-button',
-          `social-auth-${type}-button`,
-          // @ts-expect-error OKTA-609464 - className missing from IdpConfig type
-          idpObject.idp?.className,
-          { 'no-translate': type === 'general-idp' },
-        ),
+        // @ts-expect-error OKTA-609464 - className missing from IdpConfig type
+        dataSe: `piv-card-button ${idpObject.idp?.className || `social-auth-${type}-button`}`,
         variant: 'secondary',
         Icon: idpIconMap[type],
         iconAlt: '',

package/src/v3/src/util/htmlContentParserUtils.tsx

@@ -10,7 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { Link, Typography } from '@okta/odyssey-react-mui';
+import { Link, Typography } from '@mui/material';
 import {
   attributesToProps,
   DOMNode,
@@ -78,3 +78,5 @@ export const getHeadingReplacerFn = (
     return undefined;
   }
 );
+
+export const wrapInTranslateNo = (string: string): string => `<span translate="no">${string}</span>`;

package/src/v3/src/util/index.ts

@@ -12,6 +12,7 @@
 
 export * from './browserUtils';
 export * from './buildErrorMessageIds';
+export * from './buildFieldLevelErrorMessages';
 export * from './buildPasswordRequirementNotMetErrorList';
 export * from './clipboard';
 export * from './configuredFlowUtils';
@@ -35,6 +36,7 @@ export * from './htmlContentParserUtils';
 export * from './idpIconMap';
 export * from './idxUtils';
 export * from './isInteractiveElement';
+export * from './isLtrField';
 export * from './isPasswordRecovery';
 export * from './isPollingStep';
 export * from './languageUtils';

package/src/v3/src/util/isLtrField.ts

@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+// fields with these names should stay LTR by default
+const ltrOnlyFieldNames = [
+  'credentials.passcode',
+  'identifier',
+  'credentials.newPassword',
+  'confirmPassword',
+  'extension',
+];
+
+export const isLtrField = (fieldName: string) => ltrOnlyFieldNames.includes(fieldName) || fieldName.endsWith('phoneNumber');

package/src/v3/src/util/languageUtils.ts

@@ -10,6 +10,8 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
+import { OdysseyI18nResourceKeys, odysseyI18nResourceKeysList } from '@okta/odyssey-react-mui';
+
 import Bundles from '../../../util/Bundles';
 import { WidgetProps } from '../types';
 import { getLanguageCode, getSupportedLanguages } from './settingsUtils';
@@ -24,3 +26,15 @@ export const loadLanguage = async (widgetProps: WidgetProps): Promise<void> => {
     rewrite: rewrite ?? ((val) => val),
   }, supportedLanguages);
 };
+
+export const getOdysseyTranslationOverrides = (): Partial<OdysseyI18nResourceKeys> => (
+  odysseyI18nResourceKeysList
+    .reduce((overrides: Partial<OdysseyI18nResourceKeys>,
+      key: typeof odysseyI18nResourceKeysList[number]) => {
+      const updatedOverrides = { ...overrides };
+      if (Bundles.login && Object.prototype.hasOwnProperty.call(Bundles.login, key)) {
+        updatedOverrides[key] = (Bundles.login as Partial<OdysseyI18nResourceKeys>)[key];
+      }
+      return updatedOverrides;
+    }, {})
+);