@okta/okta-signin-widget 7.16.0 → 7.16.1

package/src/v3/src/components/Images/YubikeyDemoImage.tsx

@@ -10,34 +10,39 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
+import { useOdysseyDesignTokens } from '@okta/odyssey-react-mui';
 import { FunctionComponent, h } from 'preact';
 
 import { loc } from '../../util';
 
-export const YubikeyDemoImage: FunctionComponent = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="43"
-    height="58"
-    fill="none"
-    role="img"
-    viewBox="0 0 43 58"
-    aria-hidden="true"
-  >
-    <title>{loc('factor.totpHard.yubikey', 'login')}</title>
-    <path
-      fill="#00297A"
-      fillRule="evenodd"
-      d="M10.61 0a9 9 0 0 0-9 9v.5a8.5 8.5 0 0 0 8.5 8.5v-2a6.5 6.5 0 0 1-6.5-6.5V9a7 7 0 0 1 7-7h13v14h-5.75v2h7.75v-3h8V3h-8V0h-15Zm15 5v8h6V5h-6Z"
-      class="siwIconFillPrimaryDark"
-      clipRule="evenodd"
-    />
-    <path
-      fill="#A7B5EC"
-      fillRule="evenodd"
-      d="M25.61 6.5h4v2h-4v-2Zm0 3h4v2h-4v-2Zm-15.356 2.486a2.986 2.986 0 0 1 5.973 0V32.86a1 1 0 1 0 2 0v-4.892a2 2 0 0 1 2-2h2.13a2 2 0 0 1 2 2v7.475a1 1 0 1 0 2 0v-1.047c0-1.633 1.352-2.975 3.005-2.975 1.619 0 2.944 1.315 2.944 2.914v5.764a1 1 0 1 0 2 0v-.614a3.042 3.042 0 1 1 6.084 0v4.683h2v-4.683a5.042 5.042 0 0 0-8.084-4.022v-1.128c0-2.724-2.24-4.914-4.944-4.914a5.003 5.003 0 0 0-3.006 1.002v-2.455a4 4 0 0 0-4-4h-2.13c-.728 0-1.411.195-2 .535V11.986a4.986 4.986 0 0 0-9.972 0v19.607c-1.398.5-2.847 1.495-4.072 2.492A29.391 29.391 0 0 0 .935 37.18l-.155.175-.062.226c-.146.542-.128 1.168-.044 1.783.086.633.254 1.345.478 2.1.447 1.509 1.139 3.276 1.93 5.082 1.581 3.616 3.6 7.483 4.977 9.943l.489.872 1.745-.977-.489-.873c-1.356-2.421-3.342-6.227-4.89-9.767-.776-1.772-1.431-3.453-1.845-4.849a12.468 12.468 0 0 1-.414-1.8 3.726 3.726 0 0 1-.038-.795 27.872 27.872 0 0 1 2.828-2.664c.943-.768 1.918-1.44 2.81-1.874v8.552a1 1 0 1 0 2 0V11.986Z"
-      class="siwIconFillSecondary"
-      clipRule="evenodd"
-    />
-  </svg>
-);
+export const YubikeyDemoImage: FunctionComponent = () => {
+  const tokens = useOdysseyDesignTokens();
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={tokens.Spacing9}
+      height={tokens.Spacing9}
+      fill="none"
+      role="img"
+      viewBox="0 0 43 58"
+      aria-hidden="true"
+    >
+      <title>{loc('factor.totpHard.yubikey', 'login')}</title>
+      <path
+        fill="#00297A"
+        fillRule="evenodd"
+        d="M10.61 0a9 9 0 0 0-9 9v.5a8.5 8.5 0 0 0 8.5 8.5v-2a6.5 6.5 0 0 1-6.5-6.5V9a7 7 0 0 1 7-7h13v14h-5.75v2h7.75v-3h8V3h-8V0h-15Zm15 5v8h6V5h-6Z"
+        class="siwIconFillPrimaryDark"
+        clipRule="evenodd"
+      />
+      <path
+        fill="#A7B5EC"
+        fillRule="evenodd"
+        d="M25.61 6.5h4v2h-4v-2Zm0 3h4v2h-4v-2Zm-15.356 2.486a2.986 2.986 0 0 1 5.973 0V32.86a1 1 0 1 0 2 0v-4.892a2 2 0 0 1 2-2h2.13a2 2 0 0 1 2 2v7.475a1 1 0 1 0 2 0v-1.047c0-1.633 1.352-2.975 3.005-2.975 1.619 0 2.944 1.315 2.944 2.914v5.764a1 1 0 1 0 2 0v-.614a3.042 3.042 0 1 1 6.084 0v4.683h2v-4.683a5.042 5.042 0 0 0-8.084-4.022v-1.128c0-2.724-2.24-4.914-4.944-4.914a5.003 5.003 0 0 0-3.006 1.002v-2.455a4 4 0 0 0-4-4h-2.13c-.728 0-1.411.195-2 .535V11.986a4.986 4.986 0 0 0-9.972 0v19.607c-1.398.5-2.847 1.495-4.072 2.492A29.391 29.391 0 0 0 .935 37.18l-.155.175-.062.226c-.146.542-.128 1.168-.044 1.783.086.633.254 1.345.478 2.1.447 1.509 1.139 3.276 1.93 5.082 1.581 3.616 3.6 7.483 4.977 9.943l.489.872 1.745-.977-.489-.873c-1.356-2.421-3.342-6.227-4.89-9.767-.776-1.772-1.431-3.453-1.845-4.849a12.468 12.468 0 0 1-.414-1.8 3.726 3.726 0 0 1-.038-.795 27.872 27.872 0 0 1 2.828-2.664c.943-.768 1.918-1.44 2.81-1.874v8.552a1 1 0 1 0 2 0V11.986Z"
+        class="siwIconFillSecondary"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+};

package/src/v3/src/components/Images/index.tsx

@@ -13,6 +13,5 @@
 export * from './AppIcon';
 export * from './DeviceIcon';
 export * from './LocationIcon';
-export * from './MobileDeviceIcon';
 export * from './PhoneIcon';
 export * from './YubikeyDemoImage';

package/src/v3/src/components/InfoBox/InfoBox.tsx

@@ -10,10 +10,8 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import {
-  Alert,
-  Box,
-} from '@okta/odyssey-react-mui';
+import { Box } from '@mui/material';
+import { Callout, useOdysseyDesignTokens } from '@okta/odyssey-react-mui';
 import { h } from 'preact';
 
 import { useWidgetContext } from '../../contexts';
@@ -41,23 +39,25 @@ const InfoBox: UISchemaElementComponent<{
     },
   } = uischema;
 
+  const tokens = useOdysseyDesignTokens();
+
   return loading ? null : (
     <Box
-      marginBlockEnd={4}
+      marginBlockEnd={tokens.Spacing4}
       width={1}
-      data-se="message"
+      data-se={`infobox-${messageClass.toLowerCase()}`}
     >
-      <Alert
+      <Callout
         severity={MessageTypeVariant[messageClass as MessageType] ?? MessageTypeVariant.INFO}
-        variant="infobox"
-        data-se={dataSe}
-        className={`infobox-${messageClass.toLowerCase()}`}
+        testId={dataSe}
+        // visually-hidden severity text is not translated
+        translate="no"
       >
         {
           Array.isArray(message)
             ? message.map((msg) => (
               <Box
-                marginBlockEnd={2}
+                marginBlockEnd={tokens.Spacing2}
                 key={msg.message}
               >
                 <WidgetMessageContainer
@@ -75,7 +75,7 @@ const InfoBox: UISchemaElementComponent<{
               />
             )
         }
-      </Alert>
+      </Callout>
     </Box>
   );
 };

package/src/v3/src/components/InfoSection/InfoSection.tsx

@@ -10,7 +10,8 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { Alert, Box } from '@okta/odyssey-react-mui';
+import { Box } from '@mui/material';
+import { Callout, useOdysseyDesignTokens } from '@okta/odyssey-react-mui';
 import { IdxMessage } from '@okta/okta-auth-js';
 import { FunctionComponent, h } from 'preact';
 
@@ -20,19 +21,24 @@ type Props = {
   message?: IdxMessage;
 };
 
-const InfoSection: FunctionComponent<Props> = ({ message }) => (message ? (
-  <Box
-    marginBlockEnd={4}
-    width={1}
-  >
-    <Alert
-      key={message.i18n?.key || message.message}
-      severity={MessageTypeVariant[message.class as MessageType] ?? MessageTypeVariant.INFO}
-      variant="infobox"
+const InfoSection: FunctionComponent<Props> = ({ message }) => {
+  const tokens = useOdysseyDesignTokens();
+
+  return (message ? (
+    <Box
+      marginBlockEnd={tokens.Spacing4}
+      width={1}
     >
-      {message.message}
-    </Alert>
-  </Box>
-) : null);
+      <Callout
+        key={message.i18n?.key || message.message}
+        severity={MessageTypeVariant[message.class as MessageType] ?? MessageTypeVariant.INFO}
+        // visually-hidden severity text is not translated
+        translate="no"
+      >
+        {message.message}
+      </Callout>
+    </Box>
+  ) : null);
+};
 
 export default InfoSection;

package/src/v3/src/components/InformationalText/InformationalText.tsx

@@ -10,12 +10,22 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { Box, Typography } from '@okta/odyssey-react-mui';
+import { Box } from '@mui/material';
+import { Typography, TypographyVariantValue } from '@okta/odyssey-react-mui';
 import { h } from 'preact';
 
 import { useHtmlContentParser } from '../../hooks';
 import { DescriptionElement, UISchemaElementComponent } from '../../types';
 
+const odyTypographyVariantMapping: Record<
+'body1' | 'subtitle1' | 'legend',
+TypographyVariantValue
+> = {
+  body1: 'body',
+  subtitle1: 'subordinate',
+  legend: 'legend',
+};
+
 const InformationalText: UISchemaElementComponent<{
   uischema: DescriptionElement
 }> = ({
@@ -34,11 +44,11 @@ const InformationalText: UISchemaElementComponent<{
       justifyContent="flex-start"
     >
       <Typography
-        id={uischema.id}
-        paragraph
-        data-se={dataSe || 'o-form-explain'}
-        className={uischema.noTranslate ? 'no-translate' : undefined}
-        variant={variant ?? 'body1'}
+        component="p"
+        variant={variant ? odyTypographyVariantMapping[variant]
+          : odyTypographyVariantMapping.body1}
+        testId={dataSe || 'o-form-explain'}
+        translate={uischema.noTranslate ? 'no' : undefined}
       >
         {parsedContent}
       </Typography>

package/src/v3/src/components/InputPassword/InputPassword.tsx

@@ -10,20 +10,9 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import {
-  Box,
-  EyeIcon,
-  EyeOffIcon,
-  FormHelperText,
-  IconButton,
-  InputAdornment,
-  InputBase,
-  InputLabel,
-  Tooltip,
-  Typography,
-} from '@okta/odyssey-react-mui';
+import { PasswordField } from '@okta/odyssey-react-mui';
 import { h } from 'preact';
-import { useRef, useState } from 'preact/hooks';
+import { buildFieldLevelErrorMessages } from 'src/util/buildFieldLevelErrorMessages';
 
 import { useWidgetContext } from '../../contexts';
 import {
@@ -32,14 +21,16 @@ import {
   useValue,
 } from '../../hooks';
 import {
+  AutoCompleteValue,
   ChangeEvent,
   UISchemaElementComponent,
   UISchemaElementComponentWithValidationProps,
 } from '../../types';
 import { getTranslation } from '../../util';
-import FieldLevelMessageContainer from '../FieldLevelMessageContainer';
 import { withFormValidationState } from '../hocs';
 
+type PasswordAutoCompleteValue = Extract<AutoCompleteValue, 'current-password' | 'new-password'> | undefined;
+
 const InputPassword: UISchemaElementComponent<UISchemaElementComponentWithValidationProps> = ({
   uischema,
   errors,
@@ -59,168 +50,44 @@ const InputPassword: UISchemaElementComponent<UISchemaElementComponentWithValida
     focus,
     parserOptions,
     noTranslate,
-    showAsterisk,
-    dir,
   } = uischema;
   const {
     attributes,
     inputMeta: { name, required },
   } = uischema.options;
+  const { autocomplete } = attributes || {};
   const label = getTranslation(translations, 'label');
   const hint = getTranslation(translations, 'hint');
   const explain = getTranslation(translations, 'bottomExplain');
-  const optionalLabel = getTranslation(translations, 'optionalLabel');
   const focusRef = useAutoFocus<HTMLInputElement>(focus);
   const parsedExplainContent = useHtmlContentParser(explain, parserOptions);
-  const hasErrors = typeof errors !== 'undefined';
-  // TODO: OKTA-569647 - refactor logic
-  const hintId = hint && `${name}-hint`;
-  const explainId = explain && `${name}-explain`;
-  const ariaDescribedByIds = [describedByIds, hintId, explainId].filter(Boolean).join(' ')
-    || undefined;
-  const [showPassword, setShowPassword] = useState<boolean>(false);
-  const showPasswordTimeoutRef = useRef<number | undefined>();
-
-  const handleClickShowPassword = () => {
-    setShowPassword(!showPassword);
-
-    if (showPasswordTimeoutRef.current) {
-      window.clearTimeout(showPasswordTimeoutRef.current);
-    }
-    // If the new value of showPassword is being set to true, set a 30-second timeout to auto-hide the password
-    // See: https://github.com/okta/okta-signin-widget#featuresshowpasswordtoggleonsigninpage
-    if (!showPassword) {
-      showPasswordTimeoutRef.current = window.setTimeout(() => {
-        setShowPassword(false);
-      }, 30000);
-    }
-  };
+  const { errorMessage, errorMessageList } = buildFieldLevelErrorMessages(errors);
 
   return (
-    <Box>
-      <InputLabel
-        htmlFor={name}
-        // To prevent asterisk from shifting far right
-        sx={{ justifyContent: showAsterisk ? 'flex-start' : undefined }}
-      >
-        {label}
-        {showAsterisk && (
-          <Box
-            component="span"
-            sx={(theme) => ({
-              marginInlineStart: theme.spacing(1),
-              marginInlineEnd: theme.spacing(1),
-            })}
-            className="no-translate"
-            aria-hidden
-          >
-            *
-          </Box>
-        )}
-        {required === false && (
-          <Typography
-            variant="subtitle1"
-            sx={{ whiteSpace: 'nowrap' }}
-          >
-            {optionalLabel}
-          </Typography>
-        )}
-      </InputLabel>
-      {hint && (
-        <FormHelperText
-          id={hintId}
-          className="o-form-explain"
-          data-se={hintId}
-          // TODO: OKTA-577905 - Temporary fix until we can upgrade to the latest version of Odyssey
-          sx={{ textAlign: 'start' }}
-        >
-          {hint}
-        </FormHelperText>
-      )}
-      <InputBase
-        id={name}
-        name={name}
-        error={hasErrors}
-        inputRef={focusRef}
-        onChange={(e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-          handleChange?.(e.currentTarget.value);
-        }}
-        onBlur={(e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-          handleBlur?.(e?.currentTarget?.value);
-        }}
-        type={showPassword ? 'text' : 'password'}
-        value={value}
-        disabled={loading}
-        fullWidth
-        inputProps={{
-          'data-se': name,
-          'aria-describedby': ariaDescribedByIds,
-          ...attributes,
-        }}
-        className={noTranslate ? 'no-translate' : undefined}
-        dir={dir}
-        endAdornment={(
-          showPasswordToggleOnSignInPage && (
-            <InputAdornment
-              position="end"
-              // switching on the passed `dir` attribute is needed because plugin does not yet
-              // handle nested [dir="ltr"] inside [dir="rtl"] well so explicitly set physical
-              // properties when 'ltr' is passed onto this element, else can use logical
-              sx={(theme) => (dir === 'ltr' ? {
-                marginLeft: '8px',
-                marginRight: theme.spacing(2),
-              } : {
-                marginInlineEnd: theme.spacing(2),
-                marginInlineStart: '8px',
-              })}
-            >
-              <Tooltip
-                title={showPassword ? getTranslation(translations, 'hide') : getTranslation(translations, 'show')}
-                PopperProps={{
-                  // keep the added tooltip element inside the SIW container
-                  disablePortal: true,
-                }}
-              >
-                <IconButton
-                  aria-label={getTranslation(translations, 'visibilityToggleLabel')}
-                  aria-pressed={showPassword}
-                  aria-controls={name}
-                  onClick={handleClickShowPassword}
-                  sx={{
-                    // instead of using IconButton `edge="end"` we use this sx prop
-                    // because `edge="end"` does not use logical properties
-                    ...(dir === 'ltr' ? { marginRight: '-12px' } : { marginInlineEnd: '-12px' }),
-                    '&.Mui-focusVisible': {
-                      outlineStyle: 'solid',
-                      outlineWidth: '1px',
-                    },
-                  }}
-                >
-                  {showPassword ? <EyeOffIcon /> : <EyeIcon />}
-                </IconButton>
-              </Tooltip>
-            </InputAdornment>
-          )
-        )}
-      />
-      {hasErrors && (
-        <FieldLevelMessageContainer
-          messages={errors}
-          fieldName={name}
-        />
-      )}
-      {explain && (
-        <FormHelperText
-          id={explainId}
-          className="o-form-explain"
-          data-se={explainId}
-          // TODO: OKTA-577905 - Temporary fix until we can upgrade to the latest version of Odyssey
-          sx={{ textAlign: 'start' }}
-        >
-          {parsedExplainContent}
-        </FormHelperText>
-      )}
-    </Box>
+    <PasswordField
+      ariaDescribedBy={describedByIds}
+      autoCompleteType={autocomplete as PasswordAutoCompleteValue}
+      errorMessage={errorMessage}
+      errorMessageList={errorMessageList}
+      hasShowPassword={showPasswordToggleOnSignInPage}
+      hint={hint ?? parsedExplainContent as string}
+      id={name}
+      inputRef={focusRef}
+      isDisabled={loading}
+      isFullWidth
+      isOptional={required === false}
+      name={name}
+      label={label ?? ''}
+      onChange={(e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        handleChange?.(e.currentTarget.value);
+      }}
+      onBlur={(e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        handleBlur?.(e?.currentTarget?.value);
+      }}
+      testId={name}
+      translate={noTranslate ? 'no' : undefined}
+      value={value as string ?? ''}
+    />
   );
 };
 

package/src/v3/src/components/InputText/InputText.tsx

@@ -10,14 +10,9 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import {
-  Box,
-  FormHelperText,
-  InputBase,
-  InputLabel,
-  Typography,
-} from '@okta/odyssey-react-mui';
+import { TextField } from '@okta/odyssey-react-mui';
 import { h } from 'preact';
+import { buildFieldLevelErrorMessages } from 'src/util/buildFieldLevelErrorMessages';
 
 import { useWidgetContext } from '../../contexts';
 import {
@@ -30,16 +25,13 @@ import {
   UISchemaElementComponent, UISchemaElementComponentWithValidationProps,
 } from '../../types';
 import { getTranslation } from '../../util';
-import FieldLevelMessageContainer from '../FieldLevelMessageContainer';
 import { withFormValidationState } from '../hocs';
 
 const InputText: UISchemaElementComponent<UISchemaElementComponentWithValidationProps> = ({
-  type,
   uischema,
   errors,
   handleChange,
   handleBlur,
-  describedByIds,
 }) => {
   const value = useValue(uischema);
   const { loading } = useWidgetContext();
@@ -47,112 +39,44 @@ const InputText: UISchemaElementComponent<UISchemaElementComponentWithValidation
     translations = [],
     focus,
     parserOptions,
-    showAsterisk,
-    dir,
   } = uischema;
   const label = getTranslation(translations, 'label');
   const hint = getTranslation(translations, 'hint');
   const explain = getTranslation(translations, 'bottomExplain');
-  const optionalLabel = getTranslation(translations, 'optionalLabel');
   const {
     attributes,
     inputMeta: { name, required },
     dataSe,
   } = uischema.options;
+  const { autocomplete, inputmode } = attributes || {};
   const focusRef = useAutoFocus<HTMLInputElement>(focus);
   const parsedExplainContent = useHtmlContentParser(explain, parserOptions);
-  const hasErrors = typeof errors !== 'undefined';
-  // TODO: OKTA-569647 - refactor logic
-  const hintId = hint && `${name}-hint`;
-  const explainId = explain && `${name}-explain`;
-  const ariaDescribedByIds = [describedByIds, hintId, explainId].filter(Boolean).join(' ')
-    || undefined;
+  const { errorMessage, errorMessageList } = buildFieldLevelErrorMessages(errors);
 
   return (
-    <Box>
-      <InputLabel
-        htmlFor={name}
-        // To prevent asterisk from shifting far right
-        sx={{ justifyContent: showAsterisk ? 'flex-start' : undefined }}
-      >
-        {label}
-        {showAsterisk && (
-          <Box
-            component="span"
-            sx={(theme) => ({
-              marginInlineStart: theme.spacing(1),
-              marginInlineEnd: theme.spacing(1),
-            })}
-            className="no-translate"
-            aria-hidden
-          >
-            *
-          </Box>
-        )}
-        {required === false && (
-          <Typography
-            variant="subtitle1"
-            sx={{ whiteSpace: 'nowrap' }}
-          >
-            {optionalLabel}
-          </Typography>
-        )}
-      </InputLabel>
-      {
-        hint && (
-          <FormHelperText
-            id={hintId}
-            className="o-form-explain"
-            data-se={hintId}
-            // TODO: OKTA-577905 - Temporary fix until we can upgrade to the latest version of Odyssey
-            sx={{ textAlign: 'start' }}
-          >
-            {hint}
-          </FormHelperText>
-        )
-      }
-      <InputBase
-        value={value}
-        type={type || 'text'}
-        id={name}
-        name={name}
-        error={hasErrors}
-        onChange={(e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-          handleChange?.(e.currentTarget.value);
-        }}
-        onBlur={(e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-          handleBlur?.(e?.currentTarget?.value);
-        }}
-        disabled={loading}
-        fullWidth
-        inputProps={{
-          'data-se': dataSe,
-          'aria-describedby': ariaDescribedByIds,
-          ...attributes,
-        }}
-        inputRef={focusRef}
-        dir={dir}
-      />
-      {hasErrors && (
-        <FieldLevelMessageContainer
-          messages={errors}
-          fieldName={name}
-        />
-      )}
-      {
-        explain && (
-          <FormHelperText
-            id={explainId}
-            className="o-form-explain"
-            data-se={explainId}
-            // TODO: OKTA-577905 - Temporary fix until we can upgrade to the latest version of Odyssey
-            sx={{ textAlign: 'start' }}
-          >
-            {parsedExplainContent}
-          </FormHelperText>
-        )
-      }
-    </Box>
+    <TextField
+      autoCompleteType={autocomplete}
+      errorMessage={errorMessage}
+      errorMessageList={errorMessageList}
+      hint={hint ?? parsedExplainContent as string}
+      id={name}
+      inputRef={focusRef}
+      inputMode={inputmode}
+      isDisabled={loading}
+      isFullWidth
+      isOptional={required === false}
+      name={name}
+      label={label ?? ''}
+      onChange={(e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        handleChange?.(e.currentTarget.value);
+      }}
+      onBlur={(e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        handleBlur?.(e?.currentTarget?.value);
+      }}
+      testId={dataSe}
+      type="text"
+      value={value as string ?? ''}
+    />
   );
 };