@okta/okta-signin-widget 7.16.0 → 7.16.1

package/src/v3/src/components/Widget/style.scss

@@ -0,0 +1,295 @@
+/* TODO: move loginpage styles out of SIW repo OKTA-602545 */
+
+@use 'sass:map';
+@import '@okta/odyssey-design-tokens/dist/index.scss';
+
+/* loginpage utility styles */
+.clearfix {
+  display: block;
+}
+.clearfix:after,
+.clearfix:before {
+  display: block;
+  block-size: 0;
+  clear: both;
+  content: ".";
+  visibility: hidden;
+}
+.hide {
+  display: none;
+}
+
+.okta-container {
+  margin: 0;
+  block-size: inherit;
+}
+
+.auth .footer, .okta-container .applogin-banner {
+  font-family: map.get($ods-tokens, 'typography', 'family', 'body');
+
+  &:lang(el) {
+    font-family: 'Noto Sans', sans-serif;
+  }
+
+  &:lang(ja) {
+    font-family: 'Noto Sans JP', sans-serif;
+  }
+
+  &:lang(ko) {
+    font-family: 'Noto Sans KR', sans-serif;
+  }
+
+  &:lang(th) {
+    font-family: 'Noto Sans Thai', sans-serif;
+  }
+
+  &:lang(zh-CN) {
+    font-family: 'Noto Sans SC', sans-serif;
+  }
+
+  &:lang(zh-TW) {
+    font-family: 'Noto Sans TC', sans-serif;
+  }
+}
+
+/* loginpage footer styles */
+.auth .footer {
+  position: fixed;
+  inset-block-end: 0;
+  background-color: #fff;
+  min-inline-size: 300px;
+  font-size: map.get($ods-tokens, 'typography', 'size', 'subordinate');
+  color: map.get($ods-tokens, 'typography', 'color', 'subordinate');
+  inset-inline: 0;
+  inset-block-end: 0;
+  overflow: hidden;
+  margin-block-start: map.get($ods-tokens, spacing, '8');
+  background-color: map.get($ods-tokens, 'hue', 'neutral', '50');
+  border-block-start: map.get($ods-tokens, 'border', 'width', 'main') solid map.get($ods-tokens, 'border', 'color', 'display');
+  p {
+    margin-block: map.get($ods-tokens, 'spacing', '3');
+  }
+}
+.auth .footer .footer-container {
+  padding-inline: map.get($ods-tokens, spacing, '8');
+  margin-inline: auto;
+  box-sizing: border-box;
+}
+@media only screen and (max-width: 560px) {
+  .auth .footer .footer-container {
+    inline-size: 400px;
+    padding-inline: 20px;
+  }
+}
+@media only screen and (max-width: 400px) {
+  .auth .footer .footer-container {
+    inline-size: 100%;
+  }
+}
+.auth .footer a {
+  color: #6e6e78;
+}
+.auth .footer a:active,
+.auth .footer a:link,
+.auth .footer a:visited {
+  color: #6e6e78;
+}
+.auth .footer a:focus,
+.auth .footer a:hover {
+  text-decoration: underline;
+  color: #6e6e78;
+}
+.auth .footer .copyright {
+  /* stylelint-disable-next-line liberty/use-logical-spec */
+  float: left;
+  /* TODO: OKTA-586564 replace hardcoded value */
+  color: #6e6e78;
+}
+.auth .footer .copyright a {
+  /* TODO: OKTA-586564 replace hardcoded value */
+  color: #6e6e78;
+}
+.auth .footer .privacy-policy {
+  /* stylelint-disable-next-line liberty/use-logical-spec */
+  float: right;
+}
+
+/* loginpage app banner styles */
+.okta-container .applogin-banner {
+  font-size: map.get($ods-tokens, 'typography', 'size', 'body');
+  color: map.get($ods-tokens, 'typography', 'color', 'subordinate');
+  position: relative;
+  min-inline-size: 300px;
+  border-block-end: map.get($ods-tokens, 'border', 'width', 'main') solid map.get($ods-tokens, 'border', 'color', 'display');
+}
+.okta-container .applogin-banner .applogin-background {
+  background-color: #fff;
+  opacity: 0.9;
+  position: absolute;
+  inset: 0;
+  box-shadow: 0 0 2px 1px hsla(0, 0%, 68.6%, 0.3);
+}
+.okta-container .applogin-banner .applogin-container {
+  position: relative;
+  inline-size: 400px;
+  min-inline-size: 300px;
+  margin-block: 0;
+  margin-inline: auto;
+  padding-block: map.get($ods-tokens, spacing, '3') map.get($ods-tokens, spacing, '4');
+  padding-inline: 0;
+  box-sizing: border-box;
+  text-align: center;
+}
+.okta-container .applogin-banner .applogin-container p {
+  /* TODO: OKTA-586564 replace hardcoded value */
+  color: #6e6e78;
+  margin-block: 0;
+}
+
+@media only screen and (max-width: 400px) {
+  .okta-container .applogin-banner .applogin-container {
+    inline-size: 100%;
+  }
+}
+@media only screen and (max-height: 750px) {
+  .okta-container .applogin-banner .applogin-container {
+    padding-block: 10px;
+    padding-inline: 0;
+  }
+}
+@media only screen and (max-height: 660px) {
+  .okta-container .applogin-banner .applogin-container {
+    padding-block: 5px;
+    padding-inline: 0;
+  }
+  .okta-container .applogin-banner .applogin-container p {
+    display: none;
+  }
+}
+.okta-container .applogin-banner .applogin-container h1 {
+  margin-block: 0;
+}
+.okta-container .applogin-banner .applogin-app-title {
+  display: none;
+}
+.okta-container .applogin-banner .applogin-app-logo {
+  display: inline-block;
+  vertical-align: middle;
+  margin-block-end: map.get($ods-tokens, 'spacing', '2');
+}
+.okta-container .applogin-banner .applogin-app-logo img {
+  inline-size: map.get($ods-tokens, 'spacing', '8');
+  block-size: map.get($ods-tokens, 'spacing', '8');
+}
+
+/* loginpage container styles */
+.auth .content {
+  min-block-size: 100%;
+  min-inline-size: 300px;
+  display: inline-block;
+  inline-size: 100%;
+}
+.auth .content:after {
+  content: "";
+  display: block;
+  block-size: 30px;
+}
+.login-bg-image {
+  background-repeat: no-repeat;
+  background-position: 50%;
+  background-size: cover;
+  position: fixed;
+  inset: 0;
+  z-index: -5;
+}
+@media only screen and (max-width: 600px) {
+  .login-bg-image {
+    background-image: none !important;
+    background-color: #fff !important;
+    -webkit-filter: unset !important;
+    filter: unset !important;
+  }
+}
+
+/* signin container styles */
+#signin-container {
+  margin-block: map.get($ods-tokens, 'spacing', '8');
+}
+@media only screen and (max-width: 600px) {
+  #signin-container {
+    margin-block: map.get($ods-tokens, 'spacing', '2');
+  }
+}
+
+/* back to settings button style */
+.back-to-settings {
+  margin: unset !important;
+  min-block-size: unset !important;
+  inline-size: unset !important;
+  min-inline-size: unset !important;
+  .back-to-settings-link {
+    position: unset !important;
+    inset-block-start: unset !important;
+    a {
+      font-family: map.get($ods-tokens, 'typography', 'family', 'button');
+      position: absolute;
+      padding-block: 10px;
+      padding-inline: 14px;
+      display: inline-block;
+      inset-block-start: map.get($ods-tokens, 'spacing', '8');
+      inset-inline-start: map.get($ods-tokens, 'spacing', '8');
+      block-size: unset;
+      line-height: unset;
+      text-decoration: none;
+      color: #000;
+      background-color: #fff;
+      border: solid map.get($ods-tokens, 'border', 'width', 'main') map.get($ods-tokens, 'border', 'color', 'display');
+      border-radius: map.get($ods-tokens, 'border', 'radius', 'main');
+      opacity: 1;
+
+      &:hover {
+        background-color: map.get($ods-tokens, 'hue', 'blue', '100');
+        border: solid map.get($ods-tokens, 'border', 'width', 'main') map.get($ods-tokens, 'border', 'color', 'control');
+      }
+      &:active {
+        background-color: map.get($ods-tokens, 'hue', 'blue', '300');
+        border: solid map.get($ods-tokens, 'border', 'width', 'main') map.get($ods-tokens, 'border', 'color', 'primary', 'dark');
+      }
+      &:focus-visible {
+        background-color: map.get($ods-tokens, 'hue', 'blue', '300');
+        border: solid map.get($ods-tokens, 'border', 'width', 'main') map.get($ods-tokens, 'border', 'color', 'control');
+        outline: map.get($ods-tokens, 'focus', 'outline', 'width', 'main') solid map.get($ods-tokens, 'focus', 'outline', 'color', 'primary');
+        outline-offset: 2px;
+      }
+
+      img {
+        padding-inline-end: map.get($ods-tokens, 'spacing', '3');
+      }
+    }
+  }
+}
+@media only screen and (max-width: 600px) {
+  .back-to-settings .back-to-settings-link a {
+    position: relative;
+    display: inline-block;
+    inset-block-start: unset;
+    inset-inline-start: unset;
+    margin-inline: map.get($ods-tokens, 'spacing', '3');
+    margin-block-start: map.get($ods-tokens, 'spacing', '3');
+    margin-block-end: map.get($ods-tokens, 'spacing', '1');
+  }
+}
+
+/*
+ * NOTE: widget styles below, login page styles above. Take care when moving CSS
+ * from SIW to loginpage (okta-ui) in OKTA-602545
+ *
+ * TODO: OKTA-654405
+ */
+span.strong {
+  font-weight: 600;
+  word-break: break-all;
+}
+span.no-translate {
+  white-space: nowrap;
+}

package/src/v3/src/components/WidgetMessageContainer/WidgetMessageContainer.tsx

@@ -10,8 +10,8 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { List, ListItem } from '@mui/material';
-import { Box, Link, Typography } from '@okta/odyssey-react-mui';
+import { Box, List, ListItem } from '@mui/material';
+import { Link, Typography, useOdysseyDesignTokens } from '@okta/odyssey-react-mui';
 import { HTMLReactParserOptions } from 'html-react-parser';
 import { FunctionComponent, h } from 'preact';
 import React from 'preact/compat';
@@ -22,9 +22,10 @@ import { ListStyleType, WidgetMessage, WidgetMessageLink } from '../../types';
 const WidgetMessageContainer: FunctionComponent<{
   message?: WidgetMessage,
   parserOptions?: HTMLReactParserOptions,
-  linkVariant?: 'monochrome' | 'body1',
+  linkVariant?: 'monochrome' | 'default',
 }> = (props) => {
   const { message, parserOptions, linkVariant } = props;
+  const tokens = useOdysseyDesignTokens();
 
   const renderTitle = (title?: string) => (title && (
     <Typography
@@ -37,10 +38,13 @@ const WidgetMessageContainer: FunctionComponent<{
 
   const renderLinks = (links?: WidgetMessageLink[], listStyleType?: ListStyleType) => (links && (
     <List
-      className="custom-links"
+      data-se="custom-links"
       disablePadding
       dense
-      sx={{ pl: listStyleType ? 4 : 0, listStyle: listStyleType ?? 'none' }}
+      sx={{
+        pl: listStyleType ? tokens.Spacing4 : tokens.Spacing0,
+        listStyle: listStyleType ?? 'none',
+      }}
     >
       {links.map((link) => (
         <ListItem
@@ -64,12 +68,11 @@ const WidgetMessageContainer: FunctionComponent<{
   ));
 
   const createListMessages = (widgetMsg: WidgetMessage) => (
-    <Box marginBlockStart={2}>
+    <Box marginBlockStart={tokens.Spacing2}>
       {
         widgetMsg.description && (
           <Typography
             component="p"
-            fontSize="inherit"
           >
             {widgetMsg.description}
           </Typography>
@@ -78,7 +81,7 @@ const WidgetMessageContainer: FunctionComponent<{
       <List
         dense
         disablePadding
-        sx={{ listStyle: widgetMsg.listStyleType ?? 'disc', paddingInlineStart: 4 }}
+        sx={{ listStyle: widgetMsg.listStyleType ?? 'disc', paddingInlineStart: tokens.Spacing4 }}
       >
         {
           (widgetMsg.message as WidgetMessage[])?.map((wm: WidgetMessage) => {

package/src/v3/src/components/hocs/withFormValidationState.tsx

@@ -15,7 +15,7 @@ import { useEffect, useState } from 'preact/hooks';
 
 import { useFormFieldValidation, useOnChange } from '../../hooks';
 import { FieldElement, UISchemaElementComponent, WidgetMessage } from '../../types';
-import { buildErrorMessageIds, convertIdxMessageToWidgetMessage } from '../../util';
+import { convertIdxMessageToWidgetMessage } from '../../util';
 import { getDisplayName } from './getDisplayName';
 
 export type RendererComponent<T> = {
@@ -46,7 +46,6 @@ export const withFormValidationState: WrappedFunctionComponent<
       ariaDescribedBy,
       options: {
         inputMeta: {
-          name,
           // @ts-ignore TODO: OKTA-539834 - messages missing from type
           messages = {},
         },
@@ -84,9 +83,7 @@ export const withFormValidationState: WrappedFunctionComponent<
       onValidateHandler,
       handleChange,
       handleBlur,
-      describedByIds: !fieldErrors
-        ? ariaDescribedBy
-        : ` ${buildErrorMessageIds(fieldErrors, name)} ${ariaDescribedBy || ''} `,
+      describedByIds: ariaDescribedBy,
     };
     // eslint-disable-next-line react/jsx-props-no-spreading
     return <Component {...combinedProps} />;

package/src/v3/src/transformer/button/__snapshots__/transformIDPButtons.test.ts.snap

@@ -121,7 +121,6 @@ Object {
         "label": "piv.cac.card",
         "options": Object {
           "Icon": "MockSVGIcon",
-          "classes": " piv-button",
           "dataSe": "piv-card-button",
           "iconAlt": "piv.card",
           "onClick": [Function],
@@ -167,7 +166,6 @@ Object {
         "label": "piv.cac.card",
         "options": Object {
           "Icon": "MockSVGIcon",
-          "classes": " piv-button",
           "dataSe": "piv-card-button",
           "iconAlt": "piv.card",
           "onClick": [Function],

package/src/v3/src/transformer/i18n/__snapshots__/transformAuthenticatorButton.test.ts.snap

@@ -31,10 +31,10 @@ Object {
               },
               "translations": Array [
                 Object {
-                  "i18nKey": "",
-                  "name": "label",
+                  "i18nKey": "oie.custom.app.authenticator.title",
+                  "name": "description",
                   "noTranslate": undefined,
-                  "value": "My custom authenticator app",
+                  "value": "oie.custom.app.authenticator.title",
                 },
               ],
               "type": "AuthenticatorButton",
@@ -145,7 +145,7 @@ Object {
               "translations": Array [
                 Object {
                   "i18nKey": "oie.okta_verify.push.title",
-                  "name": "label",
+                  "name": "description",
                   "noTranslate": undefined,
                   "value": "oie.okta_verify.push.title",
                 },

package/src/v3/src/transformer/i18n/transformAuthenticatorButton.test.ts

@@ -107,13 +107,13 @@ describe('Authenticator Button transformer tests', () => {
     expect(((updatedFormBag.uischema.elements[1] as AuthenticatorButtonListElement)
       .options.buttons[0] as AuthenticatorButtonElement).translations)
       .toEqual([{
-        name: 'label', i18nKey: 'oie.okta_verify.push.title', value: 'oie.okta_verify.push.title',
+        name: 'description', i18nKey: 'oie.okta_verify.push.title', value: 'oie.okta_verify.push.title',
       } as TranslationInfo]);
   });
 
   it('should add translations for Custom Authenticator button', () => {
     transaction.nextStep = {
-      name: IDX_STEP.SELECT_AUTHENTICATOR_ENROLL,
+      name: IDX_STEP.SELECT_AUTHENTICATOR_AUTHENTICATE,
       relatesTo: { type: '', value: { key: AUTHENTICATOR_KEY.CUSTOM_APP } as IdxAuthenticator },
     };
     formBag.uischema.elements = [
@@ -146,7 +146,7 @@ describe('Authenticator Button transformer tests', () => {
     expect(((updatedFormBag.uischema.elements[1] as AuthenticatorButtonListElement)
       .options.buttons[0] as AuthenticatorButtonElement).translations)
       .toEqual([{
-        name: 'label', i18nKey: '', value: 'My custom authenticator app',
+        name: 'description', i18nKey: 'oie.custom.app.authenticator.title', value: 'oie.custom.app.authenticator.title',
       } as TranslationInfo]);
   });
 });

package/src/v3/src/transformer/i18n/transformAuthenticatorButton.ts

@@ -14,6 +14,7 @@ import {
   getI18nKey,
   getI18NParams,
 } from '../../../../v2/ion/i18nUtils';
+import { AUTHENTICATOR_KEY } from '../../constants';
 import {
   AuthenticatorButtonElement,
   AuthenticatorButtonListElement,
@@ -54,6 +55,11 @@ export const transformAuthenticatorButton: TransformStepFnWithOptions = ({
 }) => (
   formbag,
 ) => {
+  const AUTHENTICATORS_TO_TRANSLATE_DESCRIPTION = [
+    AUTHENTICATOR_KEY.CUSTOM_APP,
+    AUTHENTICATOR_KEY.OV,
+  ];
+
   traverseLayout({
     layout: formbag.uischema,
     predicate: (element) => element.type === 'AuthenticatorButtonList',
@@ -66,12 +72,22 @@ export const transformAuthenticatorButton: TransformStepFnWithOptions = ({
       buttonListElement.options.buttons.forEach(
         (authenticatorButtonElement: AuthenticatorButtonElement) => {
           const i18nKey = getAuthenticatorButtonKey(stepName, authenticatorButtonElement.options);
+          const {
+            label,
+            options: {
+              key,
+              description,
+              isEnroll,
+            },
+          } = authenticatorButtonElement;
+          const translateDescription = !isEnroll
+            && AUTHENTICATORS_TO_TRANSLATE_DESCRIPTION.includes(key);
           addTranslation({
             element: authenticatorButtonElement,
-            name: 'label',
+            name: translateDescription ? 'description' : 'label',
             i18nKey,
             params,
-            defaultValue: authenticatorButtonElement.label,
+            defaultValue: translateDescription ? description : label,
           });
         },
       );

package/src/v3/src/transformer/layout/development/transformEnumerateComponents.ts

@@ -10,7 +10,11 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { AppIcon } from 'src/components/Images';
+import {
+  AppIcon,
+  DeviceIcon,
+  LocationIcon,
+} from 'src/components/Images';
 import { AUTHENTICATOR_KEY } from 'src/constants';
 
 import {
@@ -21,6 +25,7 @@ import {
   DividerElement,
   FieldElement,
   HeadingElement,
+  IdentifierContainerElement,
   IdxStepTransformer,
   ImageWithTextElement,
   InfoboxElement,
@@ -43,7 +48,7 @@ import {
 export const transformEnumerateComponents: IdxStepTransformer = ({
   formBag,
 }) => {
-  const { uischema, dataSchema } = formBag;
+  const { uischema, dataSchema, data } = formBag;
 
   const reminderElement: ReminderElement = {
     type: 'Reminder',
@@ -183,6 +188,10 @@ export const transformEnumerateComponents: IdxStepTransformer = ({
           ruleKey: 'excludeUsername',
           label: 'Cannot contain username',
         },
+        {
+          ruleKey: '',
+          label: 'Should not match your previous password',
+        },
       ],
       validationDelayMs: 0,
     },
@@ -203,6 +212,7 @@ export const transformEnumerateComponents: IdxStepTransformer = ({
     },
   };
   uischema.elements.push(inputPasswordElement);
+  data['credentials.passcode'] = 'a';
   const confirmPassword: FieldElement = {
     type: 'Field',
     key: 'confirmPassword',
@@ -217,6 +227,7 @@ export const transformEnumerateComponents: IdxStepTransformer = ({
     },
   };
   uischema.elements.push(confirmPassword);
+  data.confirmPassword = 'a';
 
   const passwordMatches: PasswordMatchesElement = {
     type: 'PasswordMatches',
@@ -334,6 +345,29 @@ export const transformEnumerateComponents: IdxStepTransformer = ({
             Icon: '',
           },
         },
+        {
+          type: 'AuthenticatorButton',
+          label: 'Authenticator Button 5 for Enroll',
+          options: {
+            step: '',
+            type: ButtonType.BUTTON,
+            key: AUTHENTICATOR_KEY.CUSTOM_APP,
+            ctaLabel: 'Set up',
+            isEnroll: true,
+          },
+        },
+        {
+          type: 'AuthenticatorButton',
+          label: 'Authenticator Button 6 for Additional Enroll',
+          options: {
+            step: '',
+            type: ButtonType.BUTTON,
+            key: AUTHENTICATOR_KEY.WEBAUTHN,
+            ctaLabel: 'Set up another',
+            isEnroll: true,
+            isAdditionalEnroll: true,
+          },
+        },
       ],
       dataSe: 'authenticator-button-list',
     },
@@ -345,6 +379,11 @@ export const transformEnumerateComponents: IdxStepTransformer = ({
     options: {
       step: '',
     },
+    translations: [{
+      name: 'label',
+      i18nKey: '',
+      value: 'Launch Authenticator button with long name and icon',
+    }],
   };
   uischema.elements.push(launchAuthenticatorButton);
 
@@ -425,15 +464,43 @@ export const transformEnumerateComponents: IdxStepTransformer = ({
   };
   uischema.elements.push(textWithActionLink);
 
-  const imageWithText: ImageWithTextElement = {
+  uischema.elements.push(divider);
+
+  const appImageWithText: ImageWithTextElement = {
     type: 'ImageWithText',
     options: {
       id: 'image.withText',
       SVGIcon: AppIcon,
-      textContent: 'Image with text',
+      textContent: 'Application',
+    },
+  };
+  uischema.elements.push(appImageWithText);
+
+  const deviceImageWithText: ImageWithTextElement = {
+    type: 'ImageWithText',
+    options: {
+      id: 'image.withText',
+      SVGIcon: DeviceIcon,
+      textContent: 'Device',
     },
   };
-  uischema.elements.push(imageWithText);
+  uischema.elements.push(deviceImageWithText);
+
+  const locationImageWithText: ImageWithTextElement = {
+    type: 'ImageWithText',
+    options: {
+      id: 'image.withText',
+      SVGIcon: LocationIcon,
+      textContent: 'Location',
+    },
+  };
+  uischema.elements.push(locationImageWithText);
+
+  const identifierElement: IdentifierContainerElement = {
+    type: 'IdentifierContainer',
+    options: { identifier: 'User' },
+  };
+  uischema.elements.push(identifierElement);
 
   return formBag;
 };

package/src/v3/src/transformer/layout/idp/__snapshots__/transformIdpRedirect.test.ts.snap

@@ -22,10 +22,10 @@ Object {
       },
       Object {
         "label": "socialauth.google.label",
+        "noTranslate": false,
         "options": Object {
           "Icon": "MockSVGIcon",
-          "classes": "social-auth-button social-auth-google-button",
-          "dataSe": "piv-card-button",
+          "dataSe": "piv-card-button social-auth-google-button",
           "iconAlt": "",
           "onClick": [Function],
           "step": "piv-idp",
@@ -36,10 +36,10 @@ Object {
       },
       Object {
         "label": "socialauth.facebook.label",
+        "noTranslate": false,
         "options": Object {
           "Icon": "MockSVGIcon",
-          "classes": "social-auth-button social-auth-facebook-button",
-          "dataSe": "piv-card-button",
+          "dataSe": "piv-card-button social-auth-facebook-button",
           "iconAlt": "",
           "onClick": [Function],
           "step": "piv-idp",

package/src/v3/src/transformer/selectAuthenticator/__snapshots__/transformSelectAuthenticatorVerify.test.ts.snap

@@ -22,7 +22,6 @@ Object {
       },
       Object {
         "contentType": "subtitle",
-        "noMargin": true,
         "options": Object {
           "content": "oie.password.reset.verification",
         },
@@ -78,7 +77,6 @@ Object {
       },
       Object {
         "contentType": "subtitle",
-        "noMargin": true,
         "options": Object {
           "content": "oie.password.reset.verification",
         },
@@ -134,7 +132,6 @@ Object {
       },
       Object {
         "contentType": "subtitle",
-        "noMargin": true,
         "options": Object {
           "content": "oie.select.authenticators.verify.subtitle",
         },