@okta/okta-signin-widget 7.16.0 → 7.16.1

package/src/v3/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/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 ?? ''}
+    />
   );
 };
 

package/src/v3/components/LaunchAuthenticatorButton/LaunchAuthenticatorButton.tsx

@@ -10,7 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { Box, Button as OdyButton } from '@okta/odyssey-react-mui';
+import { Button as OdyButton, useOdysseyDesignTokens } from '@okta/odyssey-react-mui';
 import { h } from 'preact';
 
 import Util from '../../../../util/Util';
@@ -30,6 +30,7 @@ import { OktaVerifyIcon } from '../Icon';
 const LaunchAuthenticatorButton: UISchemaElementComponent<{
   uischema: LaunchAuthenticatorButtonElement
 }> = ({ uischema }) => {
+  const tokens = useOdysseyDesignTokens();
   const onSubmitHandler = useOnSubmit();
   const {
     translations = [],
@@ -79,32 +80,19 @@ const LaunchAuthenticatorButton: UISchemaElementComponent<{
   return (
     <OdyButton
       variant="secondary"
-      fullWidth
+      isFullWidth
       onClick={handleClick}
-      ref={focusRef}
-    >
-      <Box
-        display="flex"
-        alignItems="center"
-        justifyContent="center"
-      >
-        <Box
-          sx={{
-            marginInlineEnd: '5px',
-            // keep the icon from stretching the button vertically
-            marginBlockEnd: '-3px',
-          }}
-        >
-          <OktaVerifyIcon
-            name="mfa-okta-verify"
-            description={iconDescription}
-            width={24}
-            height={24}
-          />
-        </Box>
-        {label}
-      </Box>
-    </OdyButton>
+      buttonRef={focusRef}
+      label={label || ''}
+      startIcon={(
+        <OktaVerifyIcon
+          name="mfa-okta-verify"
+          description={iconDescription}
+          width={tokens.Spacing5}
+          height={tokens.Spacing5}
+        />
+      )}
+    />
   );
 };
 

package/src/v3/components/Link/Link.tsx

@@ -10,8 +10,8 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-// TODO: OKTA-564568 Link exported from ODY does not have the focus() function and breaks autofocus
-import { Link as LinkMui } from '@mui/material';
+import { Link as MuiLink } from '@mui/material';
+import { Link as OdyLink } from '@okta/odyssey-react-mui';
 import { h } from 'preact';
 
 import { useWidgetContext } from '../../contexts';
@@ -27,7 +27,6 @@ const Link: UISchemaElementComponent<{
   } = widgetContext;
   const {
     focus,
-    ariaDescribedBy,
     options: {
       label,
       href,
@@ -63,38 +62,27 @@ const Link: UISchemaElementComponent<{
 
   return (
     typeof href === 'undefined' ? (
-      <LinkMui
+      <MuiLink
         component="button"
-        // Fixes OKTA-653788 (see comments) - Currently we treat all links as buttons
-        type="button"
-        variant="body1"
         role="link"
         onClick={onClick}
-        aria-describedby={ariaDescribedBy}
         ref={focusRef}
         data-se={dataSe}
-        sx={{
-          '&:hover': {
-            cursor: 'pointer',
-          },
-          verticalAlign: 'baseline',
-        }}
       >
         {label}
-      </LinkMui>
+      </MuiLink>
     )
       : (
-        <LinkMui
+        <OdyLink
           href={href}
-          ref={focusRef}
-          aria-describedby={ariaDescribedBy}
-          data-se={dataSe}
+          linkRef={focusRef}
+          testId={dataSe}
           target={target}
           // eslint-disable-next-line react/jsx-props-no-spreading
           {...(target === '_blank' && { rel: 'noopener noreferrer' })}
         >
           {label}
-        </LinkMui>
+        </OdyLink>
       )
   );
 };

package/src/v3/components/List/List.tsx

@@ -10,8 +10,8 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { List as ListMui, ListItem } from '@mui/material';
-import { Box, Typography } from '@okta/odyssey-react-mui';
+import { Box, List as ListMui, ListItem } from '@mui/material';
+import { Typography, useOdysseyDesignTokens } from '@okta/odyssey-react-mui';
 import { FunctionComponent, h } from 'preact';
 
 import Logger from '../../../../util/Logger';
@@ -28,14 +28,17 @@ import Button from '../Button';
 import InformationalText from '../InformationalText';
 
 const renderElement = (item: UISchemaElement) => {
-  const Container: FunctionComponent = ({ children }) => (
-    <Box
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...(!(item).noMargin && { marginBlockEnd: 4 })}
-    >
-      {children}
-    </Box>
-  );
+  const Container: FunctionComponent = ({ children }) => {
+    const tokens = useOdysseyDesignTokens();
+    return (
+      <Box
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...(!(item).noMargin && { marginBlockEnd: tokens.Spacing4 })}
+      >
+        {children}
+      </Box>
+    );
+  };
 
   switch (item.type) {
     case 'Button':
@@ -75,18 +78,19 @@ const List: UISchemaElementComponent<{
   uischema: ListElement
 }> = ({ uischema }) => {
   const { options } = uischema;
+  const tokens = useOdysseyDesignTokens();
 
   return options.items?.length ? (
     <Box
       display="flex"
       flexDirection="column"
       justifyContent="flex-start"
-      marginBlockEnd={4}
+      marginBlockEnd={tokens.Spacing4}
     >
       { options.description && <Typography component="p">{options.description}</Typography> }
       <ListMui
         component={options.type}
-        sx={{ listStyleType: options.type === 'ol' ? 'decimal' : 'disc', pl: 4 }}
+        sx={{ listStyleType: options.type === 'ol' ? 'decimal' : 'disc', pl: tokens.Spacing4 }}
       >
         {
           options.items.map((item: string | UISchemaLayout, index: number) => (

package/src/v3/components/PIVButton/PIVButton.tsx

@@ -10,7 +10,8 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { Box, Button as OdyButton } from '@okta/odyssey-react-mui';
+import { Box } from '@mui/material';
+import { Button as OdyButton, useOdysseyDesignTokens } from '@okta/odyssey-react-mui';
 import { h } from 'preact';
 import { useEffect, useState } from 'preact/hooks';
 
@@ -37,6 +38,8 @@ const PIVButton: UISchemaElementComponent<{
 
   const showLoading = waiting || loading;
 
+  const tokens = useOdysseyDesignTokens();
+
   const initCertPrompt = () => {
     setWaiting(true);
     setMessage(undefined);
@@ -61,7 +64,7 @@ const PIVButton: UISchemaElementComponent<{
 
   return (
     <Box
-      marginBlockEnd={4}
+      marginBlockEnd={tokens.Spacing4}
       display={showLoading ? 'flex' : undefined}
       justifyContent={showLoading ? 'center' : undefined}
     >
@@ -70,14 +73,13 @@ const PIVButton: UISchemaElementComponent<{
           ? <Spinner dataSe="okta-spinner" />
           : (
             <OdyButton
-              data-se="button"
+              label={btnLabel || ''}
+              testId="button"
               onClick={handleClick}
               variant="primary"
-              aria-describedby={ariaDescribedBy}
-              fullWidth
-            >
-              {btnLabel}
-            </OdyButton>
+              ariaDescribedBy={ariaDescribedBy}
+              isFullWidth
+            />
           )
       }
     </Box>