@openedx/frontend-app-authn 1.0.0-alpha.4 → 1.0.0-alpha.6

package/{src → dist}/register/RegistrationFields/NameField/validator.js

@@ -1,22 +1,19 @@
 import messages from '../../messages';
-
 // regex more focused towards url matching
 export const URL_REGEX = /[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)?/gi; // eslint-disable-line no-useless-escape
-
 // regex for html tags
 export const HTML_REGEX = /<|>/u;
-
 // regex from backend
 export const INVALID_NAME_REGEX = /https?:\/\/(?:[-\w.]|(?:%[\da-fA-F]{2}))*/g;
-
 const validateName = (value, formatMessage) => {
-  let fieldError = '';
-  if (!value.trim()) {
-    fieldError = formatMessage(messages['empty.name.field.error']);
-  } else if (URL_REGEX.test(value) || HTML_REGEX.test(value) || INVALID_NAME_REGEX.test(value)) {
-    fieldError = formatMessage(messages['name.validation.message']);
-  }
-  return fieldError;
+    let fieldError = '';
+    if (!value.trim()) {
+        fieldError = formatMessage(messages['empty.name.field.error']);
+    }
+    else if (URL_REGEX.test(value) || HTML_REGEX.test(value) || INVALID_NAME_REGEX.test(value)) {
+        fieldError = formatMessage(messages['name.validation.message']);
+    }
+    return fieldError;
 };
-
 export default validateName;
+//# sourceMappingURL=validator.js.map

package/dist/register/RegistrationFields/NameField/validator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validator.js","sourceRoot":"","sources":["../../../../src/register/RegistrationFields/NameField/validator.js"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AAEtC,0CAA0C;AAC1C,MAAM,CAAC,MAAM,SAAS,GAAG,uFAAuF,CAAC,CAAC,wCAAwC;AAE1J,sBAAsB;AACtB,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC;AAEjC,qBAAqB;AACrB,MAAM,CAAC,MAAM,kBAAkB,GAAG,4CAA4C,CAAC;AAE/E,MAAM,YAAY,GAAG,CAAC,KAAK,EAAE,aAAa,EAAE,EAAE;IAC5C,IAAI,UAAU,GAAG,EAAE,CAAC;IACpB,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,EAAE,CAAC;QAClB,UAAU,GAAG,aAAa,CAAC,QAAQ,CAAC,wBAAwB,CAAC,CAAC,CAAC;IACjE,CAAC;SAAM,IAAI,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;QAC7F,UAAU,GAAG,aAAa,CAAC,QAAQ,CAAC,yBAAyB,CAAC,CAAC,CAAC;IAClE,CAAC;IACD,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import messages from '../../messages';\n\n// regex more focused towards url matching\nexport const URL_REGEX = /[-a-zA-Z0-9@:%._\\+~#=]{1,256}\\.[a-zA-Z0-9()]{1,6}\\b([-a-zA-Z0-9()@:%_\\+.~#?&//=]*)?/gi; // eslint-disable-line no-useless-escape\n\n// regex for html tags\nexport const HTML_REGEX = /<|>/u;\n\n// regex from backend\nexport const INVALID_NAME_REGEX = /https?:\\/\\/(?:[-\\w.]|(?:%[\\da-fA-F]{2}))*/g;\n\nconst validateName = (value, formatMessage) => {\n  let fieldError = '';\n  if (!value.trim()) {\n    fieldError = formatMessage(messages['empty.name.field.error']);\n  } else if (URL_REGEX.test(value) || HTML_REGEX.test(value) || INVALID_NAME_REGEX.test(value)) {\n    fieldError = formatMessage(messages['name.validation.message']);\n  }\n  return fieldError;\n};\n\nexport default validateName;\n"]}

package/dist/register/RegistrationFields/TermsOfServiceField/TermsOfService.d.ts

@@ -0,0 +1,16 @@
+export default TermsOfService;
+declare function TermsOfService(props: any): import("react/jsx-runtime").JSX.Element;
+declare namespace TermsOfService {
+    namespace defaultProps {
+        let errorMessage: string;
+        let value: boolean;
+    }
+    namespace propTypes {
+        let errorMessage_1: PropTypes.Requireable<string>;
+        export { errorMessage_1 as errorMessage };
+        export let onChangeHandler: PropTypes.Validator<(...args: any[]) => any>;
+        let value_1: PropTypes.Requireable<boolean>;
+        export { value_1 as value };
+    }
+}
+import PropTypes from 'prop-types';

package/dist/register/RegistrationFields/TermsOfServiceField/TermsOfService.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormattedMessage, useAppConfig, getSiteConfig, useIntl } from '@openedx/frontend-base';
+import { Form, Hyperlink } from '@openedx/paragon';
+import PropTypes from 'prop-types';
+import messages from '../../messages';
+const TermsOfService = (props) => {
+    const { formatMessage } = useIntl();
+    const { errorMessage, onChangeHandler, value, } = props;
+    return (_jsxs("div", { id: "terms-of-service", className: "micro text-muted", children: [_jsx(Form.Checkbox, { className: "form-field--checkbox mt-1", id: "tos", checked: value, name: "terms_of_service", value: value, onChange: onChangeHandler, children: _jsx(FormattedMessage, { id: "register.page.terms.of.service", defaultMessage: "I agree to the {platformName}\u00A0{termsOfService}", description: "Text that appears on registration form stating terms of service.\n                       It is a legal document that users must agree to.", values: {
+                        platformName: getSiteConfig().siteName,
+                        termsOfService: (_jsx(Hyperlink, { variant: "muted", destination: useAppConfig().TOS_LINK || '#', target: "_blank", children: formatMessage(messages['terms.of.service']) })),
+                    } }) }), errorMessage && (_jsx(Form.Control.Feedback, { type: "invalid", className: "form-text-size", hasIcon: false, children: errorMessage }))] }));
+};
+TermsOfService.defaultProps = {
+    errorMessage: '',
+    value: false,
+};
+TermsOfService.propTypes = {
+    errorMessage: PropTypes.string,
+    onChangeHandler: PropTypes.func.isRequired,
+    value: PropTypes.bool,
+};
+export default TermsOfService;
+//# sourceMappingURL=TermsOfService.js.map

package/dist/register/RegistrationFields/TermsOfServiceField/TermsOfService.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TermsOfService.js","sourceRoot":"","sources":["../../../../src/register/RegistrationFields/TermsOfServiceField/TermsOfService.jsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAChG,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AAEtC,MAAM,cAAc,GAAG,CAAC,KAAK,EAAE,EAAE;IAC/B,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,EACJ,YAAY,EAAE,eAAe,EAAE,KAAK,GACrC,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,eAAK,EAAE,EAAC,kBAAkB,EAAC,SAAS,EAAC,kBAAkB,aACrD,KAAC,IAAI,CAAC,QAAQ,IACZ,SAAS,EAAC,2BAA2B,EACrC,EAAE,EAAC,KAAK,EACR,OAAO,EAAE,KAAK,EACd,IAAI,EAAC,kBAAkB,EACvB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,eAAe,YAEzB,KAAC,gBAAgB,IACf,EAAE,EAAC,gCAAgC,EACnC,cAAc,EAAC,qDAAqD,EACpE,WAAW,EAAC,2IACkD,EAC9D,MAAM,EAAE;wBACN,YAAY,EAAE,aAAa,EAAE,CAAC,QAAQ;wBACtC,cAAc,EAAE,CACd,KAAC,SAAS,IAAC,OAAO,EAAC,OAAO,EAAC,WAAW,EAAE,YAAY,EAAE,CAAC,QAAQ,IAAI,GAAG,EAAE,MAAM,EAAC,QAAQ,YACpF,aAAa,CAAC,QAAQ,CAAC,kBAAkB,CAAC,CAAC,GAClC,CACb;qBACF,GACD,GACY,EACf,YAAY,IAAI,CACf,KAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,IAAC,IAAI,EAAC,SAAS,EAAC,SAAS,EAAC,gBAAgB,EAAC,OAAO,EAAE,KAAK,YAC5E,YAAY,GACS,CACzB,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,YAAY,GAAG;IAC5B,YAAY,EAAE,EAAE;IAChB,KAAK,EAAE,KAAK;CACb,CAAC;AAEF,cAAc,CAAC,SAAS,GAAG;IACzB,YAAY,EAAE,SAAS,CAAC,MAAM;IAC9B,eAAe,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;IAC1C,KAAK,EAAE,SAAS,CAAC,IAAI;CACtB,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { FormattedMessage, useAppConfig, getSiteConfig, useIntl } from '@openedx/frontend-base';\nimport { Form, Hyperlink } from '@openedx/paragon';\nimport PropTypes from 'prop-types';\n\nimport messages from '../../messages';\n\nconst TermsOfService = (props) => {\n  const { formatMessage } = useIntl();\n  const {\n    errorMessage, onChangeHandler, value,\n  } = props;\n\n  return (\n    <div id=\"terms-of-service\" className=\"micro text-muted\">\n      <Form.Checkbox\n        className=\"form-field--checkbox mt-1\"\n        id=\"tos\"\n        checked={value}\n        name=\"terms_of_service\"\n        value={value}\n        onChange={onChangeHandler}\n      >\n        <FormattedMessage\n          id=\"register.page.terms.of.service\"\n          defaultMessage=\"I agree to the {platformName}&nbsp;{termsOfService}\"\n          description=\"Text that appears on registration form stating terms of service.\n                       It is a legal document that users must agree to.\"\n          values={{\n            platformName: getSiteConfig().siteName,\n            termsOfService: (\n              <Hyperlink variant=\"muted\" destination={useAppConfig().TOS_LINK || '#'} target=\"_blank\">\n                {formatMessage(messages['terms.of.service'])}\n              </Hyperlink>\n            ),\n          }}\n        />\n      </Form.Checkbox>\n      {errorMessage && (\n        <Form.Control.Feedback type=\"invalid\" className=\"form-text-size\" hasIcon={false}>\n          {errorMessage}\n        </Form.Control.Feedback>\n      )}\n    </div>\n  );\n};\n\nTermsOfService.defaultProps = {\n  errorMessage: '',\n  value: false,\n};\n\nTermsOfService.propTypes = {\n  errorMessage: PropTypes.string,\n  onChangeHandler: PropTypes.func.isRequired,\n  value: PropTypes.bool,\n};\n\nexport default TermsOfService;\n"]}

package/dist/register/RegistrationFields/UsernameField/UsernameField.d.ts

@@ -0,0 +1,31 @@
+export default UsernameField;
+/**
+ * Username field wrapper. It accepts following handlers
+ * - handleChange for setting value change and
+ * - handleErrorChange for setting error
+ *
+ * It is responsible for
+ * - Rendering username suggestions
+ * - Setting and clearing username suggestions
+ * - Performing username field validations
+ * - clearing error on focus
+ * - setting value on change
+ */
+declare function UsernameField(props: any): import("react/jsx-runtime").JSX.Element;
+declare namespace UsernameField {
+    namespace defaultProps {
+        let errorMessage: string;
+        let autoComplete: null;
+    }
+    namespace propTypes {
+        export let handleChange: PropTypes.Validator<(...args: any[]) => any>;
+        export let handleErrorChange: PropTypes.Validator<(...args: any[]) => any>;
+        let errorMessage_1: PropTypes.Requireable<string>;
+        export { errorMessage_1 as errorMessage };
+        export let name: PropTypes.Validator<string>;
+        export let value: PropTypes.Validator<string>;
+        let autoComplete_1: PropTypes.Requireable<string>;
+        export { autoComplete_1 as autoComplete };
+    }
+}
+import PropTypes from 'prop-types';

package/dist/register/RegistrationFields/UsernameField/UsernameField.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useIntl } from '@openedx/frontend-base';
+import { Button, Icon, IconButton } from '@openedx/paragon';
+import { Close } from '@openedx/paragon/icons';
+import PropTypes from 'prop-types';
+import { FormGroup } from '../../../common-components';
+import { clearRegistrationBackendError, clearUsernameSuggestions, fetchRealtimeValidations, } from '../../data/actions';
+import messages from '../../messages';
+import validateUsername from './validator';
+/**
+ * Username field wrapper. It accepts following handlers
+ * - handleChange for setting value change and
+ * - handleErrorChange for setting error
+ *
+ * It is responsible for
+ * - Rendering username suggestions
+ * - Setting and clearing username suggestions
+ * - Performing username field validations
+ * - clearing error on focus
+ * - setting value on change
+ */
+const UsernameField = (props) => {
+    const { formatMessage } = useIntl();
+    const dispatch = useDispatch();
+    const { value, errorMessage, handleChange, handleErrorChange, } = props;
+    let className = '';
+    let suggestedUsernameDiv = null;
+    let iconButton = null;
+    const usernameSuggestions = useSelector(state => state.register.usernameSuggestions);
+    const validationApiRateLimited = useSelector(state => state.register.validationApiRateLimited);
+    /**
+     * We need to remove the placeholder from the field, adding a space will do that.
+     * This is needed because we are placing the username suggestions on top of the field.
+     */
+    useEffect(() => {
+        if (usernameSuggestions.length && !value) {
+            handleChange({ target: { name: 'username', value: ' ' } });
+        }
+    }, [handleChange, usernameSuggestions, value]);
+    const handleOnBlur = (event) => {
+        const { value: username } = event.target;
+        const fieldError = validateUsername(username, formatMessage);
+        if (fieldError) {
+            handleErrorChange('username', fieldError);
+        }
+        else if (!validationApiRateLimited) {
+            dispatch(fetchRealtimeValidations({ username }));
+        }
+    };
+    const handleOnChange = (event) => {
+        let username = event.target.value;
+        if (username.length > 30) {
+            return;
+        }
+        if (event.target.value.startsWith(' ')) {
+            username = username.trim();
+        }
+        handleChange({ target: { name: 'username', value: username } });
+    };
+    const handleOnFocus = (event) => {
+        const username = event.target.value;
+        dispatch(clearUsernameSuggestions());
+        // If we added a space character to username field to display the suggestion
+        // remove it before user enters the input. This is to ensure user doesn't
+        // have a space prefixed to the username.
+        if (username === ' ') {
+            handleChange({ target: { name: 'username', value: '' } });
+        }
+        handleErrorChange('username', '');
+        dispatch(clearRegistrationBackendError('username'));
+    };
+    const handleSuggestionClick = (event, suggestion = '') => {
+        event.preventDefault();
+        handleErrorChange('username', ''); // clear error
+        handleChange({ target: { name: 'username', value: suggestion } }); // to set suggestion as value
+        dispatch(clearUsernameSuggestions());
+    };
+    const handleUsernameSuggestionClose = () => {
+        handleChange({ target: { name: 'username', value: '' } }); // to remove space in field
+        dispatch(clearUsernameSuggestions());
+    };
+    const suggestedUsernames = () => (_jsxs("div", { className: className, children: [_jsx("span", { className: "text-gray username-suggestion--label", children: formatMessage(messages['registration.username.suggestion.label']) }), _jsx("div", { className: "username-scroll-suggested--form-field", children: usernameSuggestions.map((username, index) => (_jsx(Button, { type: "button", name: "username", variant: "outline-dark", className: "username-suggestions--chip data-hj-suppress", autoComplete: props.autoComplete, onClick: (e) => handleSuggestionClick(e, username), children: username }, `suggestion-${index.toString()}`))) }), iconButton] }));
+    if (usernameSuggestions.length > 0 && errorMessage && value === ' ') {
+        className = 'username-suggestions__error';
+        iconButton = _jsx(IconButton, { src: Close, iconAs: Icon, alt: "Close", onClick: () => handleUsernameSuggestionClose(), variant: "black", size: "sm", className: "username-suggestions__close__button" });
+        suggestedUsernameDiv = suggestedUsernames();
+    }
+    else if (usernameSuggestions.length > 0 && value === ' ') {
+        className = 'username-suggestions d-flex align-items-center';
+        iconButton = _jsx(IconButton, { src: Close, iconAs: Icon, alt: "Close", onClick: () => handleUsernameSuggestionClose(), variant: "black", size: "sm", className: "username-suggestions__close__button" });
+        suggestedUsernameDiv = suggestedUsernames();
+    }
+    else if (usernameSuggestions.length > 0 && errorMessage) {
+        suggestedUsernameDiv = suggestedUsernames();
+    }
+    return (_jsx(FormGroup, Object.assign({}, props, { handleChange: handleOnChange, handleFocus: handleOnFocus, handleBlur: handleOnBlur, children: suggestedUsernameDiv })));
+};
+UsernameField.defaultProps = {
+    errorMessage: '',
+    autoComplete: null,
+};
+UsernameField.propTypes = {
+    handleChange: PropTypes.func.isRequired,
+    handleErrorChange: PropTypes.func.isRequired,
+    errorMessage: PropTypes.string,
+    name: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
+    autoComplete: PropTypes.string,
+};
+export default UsernameField;
+//# sourceMappingURL=UsernameField.js.map

package/dist/register/RegistrationFields/UsernameField/UsernameField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UsernameField.js","sourceRoot":"","sources":["../../../../src/register/RegistrationFields/UsernameField/UsernameField.jsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\n\nimport { useIntl } from '@openedx/frontend-base';\nimport { Button, Icon, IconButton } from '@openedx/paragon';\nimport { Close } from '@openedx/paragon/icons';\nimport PropTypes from 'prop-types';\n\nimport { FormGroup } from '../../../common-components';\nimport {\n  clearRegistrationBackendError,\n  clearUsernameSuggestions,\n  fetchRealtimeValidations,\n} from '../../data/actions';\nimport messages from '../../messages';\nimport validateUsername from './validator';\n\n/**\n * Username field wrapper. It accepts following handlers\n * - handleChange for setting value change and\n * - handleErrorChange for setting error\n *\n * It is responsible for\n * - Rendering username suggestions\n * - Setting and clearing username suggestions\n * - Performing username field validations\n * - clearing error on focus\n * - setting value on change\n */\nconst UsernameField = (props) => {\n  const { formatMessage } = useIntl();\n  const dispatch = useDispatch();\n\n  const {\n    value,\n    errorMessage,\n    handleChange,\n    handleErrorChange,\n  } = props;\n\n  let className = '';\n  let suggestedUsernameDiv = null;\n  let iconButton = null;\n  const usernameSuggestions = useSelector(state => state.register.usernameSuggestions);\n  const validationApiRateLimited = useSelector(state => state.register.validationApiRateLimited);\n\n  /**\n   * We need to remove the placeholder from the field, adding a space will do that.\n   * This is needed because we are placing the username suggestions on top of the field.\n   */\n  useEffect(() => {\n    if (usernameSuggestions.length && !value) {\n      handleChange({ target: { name: 'username', value: ' ' } });\n    }\n  }, [handleChange, usernameSuggestions, value]);\n\n  const handleOnBlur = (event) => {\n    const { value: username } = event.target;\n    const fieldError = validateUsername(username, formatMessage);\n    if (fieldError) {\n      handleErrorChange('username', fieldError);\n    } else if (!validationApiRateLimited) {\n      dispatch(fetchRealtimeValidations({ username }));\n    }\n  };\n\n  const handleOnChange = (event) => {\n    let username = event.target.value;\n    if (username.length > 30) {\n      return;\n    }\n    if (event.target.value.startsWith(' ')) {\n      username = username.trim();\n    }\n    handleChange({ target: { name: 'username', value: username } });\n  };\n\n  const handleOnFocus = (event) => {\n    const username = event.target.value;\n    dispatch(clearUsernameSuggestions());\n    // If we added a space character to username field to display the suggestion\n    // remove it before user enters the input. This is to ensure user doesn't\n    // have a space prefixed to the username.\n    if (username === ' ') {\n      handleChange({ target: { name: 'username', value: '' } });\n    }\n    handleErrorChange('username', '');\n    dispatch(clearRegistrationBackendError('username'));\n  };\n\n  const handleSuggestionClick = (event, suggestion = '') => {\n    event.preventDefault();\n    handleErrorChange('username', ''); // clear error\n    handleChange({ target: { name: 'username', value: suggestion } }); // to set suggestion as value\n    dispatch(clearUsernameSuggestions());\n  };\n\n  const handleUsernameSuggestionClose = () => {\n    handleChange({ target: { name: 'username', value: '' } }); // to remove space in field\n    dispatch(clearUsernameSuggestions());\n  };\n\n  const suggestedUsernames = () => (\n    <div className={className}>\n      <span className=\"text-gray username-suggestion--label\">{formatMessage(messages['registration.username.suggestion.label'])}</span>\n      <div className=\"username-scroll-suggested--form-field\">\n        {usernameSuggestions.map((username, index) => (\n          <Button\n            type=\"button\"\n            name=\"username\"\n            variant=\"outline-dark\"\n            className=\"username-suggestions--chip data-hj-suppress\"\n            autoComplete={props.autoComplete}\n            key={`suggestion-${index.toString()}`}\n            onClick={(e) => handleSuggestionClick(e, username)}\n          >\n            {username}\n          </Button>\n        ))}\n      </div>\n      {iconButton}\n    </div>\n  );\n\n  if (usernameSuggestions.length > 0 && errorMessage && value === ' ') {\n    className = 'username-suggestions__error';\n    iconButton = <IconButton src={Close} iconAs={Icon} alt=\"Close\" onClick={() => handleUsernameSuggestionClose()} variant=\"black\" size=\"sm\" className=\"username-suggestions__close__button\" />;\n    suggestedUsernameDiv = suggestedUsernames();\n  } else if (usernameSuggestions.length > 0 && value === ' ') {\n    className = 'username-suggestions d-flex align-items-center';\n    iconButton = <IconButton src={Close} iconAs={Icon} alt=\"Close\" onClick={() => handleUsernameSuggestionClose()} variant=\"black\" size=\"sm\" className=\"username-suggestions__close__button\" />;\n    suggestedUsernameDiv = suggestedUsernames();\n  } else if (usernameSuggestions.length > 0 && errorMessage) {\n    suggestedUsernameDiv = suggestedUsernames();\n  }\n  return (\n    <FormGroup\n      {...props}\n      handleChange={handleOnChange}\n      handleFocus={handleOnFocus}\n      handleBlur={handleOnBlur}\n    >\n      {suggestedUsernameDiv}\n    </FormGroup>\n  );\n};\n\nUsernameField.defaultProps = {\n  errorMessage: '',\n  autoComplete: null,\n};\n\nUsernameField.propTypes = {\n  handleChange: PropTypes.func.isRequired,\n  handleErrorChange: PropTypes.func.isRequired,\n  errorMessage: PropTypes.string,\n  name: PropTypes.string.isRequired,\n  value: PropTypes.string.isRequired,\n  autoComplete: PropTypes.string,\n};\n\nexport default UsernameField;\n"]}

package/dist/register/RegistrationFields/UsernameField/validator.d.ts

@@ -0,0 +1,4 @@
+export const VALID_USERNAME_REGEX: RegExp;
+export const usernameRegex: RegExp;
+export default validateUsername;
+declare function validateUsername(value: any, formatMessage: any): string;

package/dist/register/RegistrationFields/UsernameField/validator.js

@@ -0,0 +1,15 @@
+import messages from '../../messages';
+export const VALID_USERNAME_REGEX = /^[a-zA-Z0-9_-]*$/i;
+export const usernameRegex = new RegExp(VALID_USERNAME_REGEX, 'i');
+const validateUsername = (value, formatMessage) => {
+    let fieldError = '';
+    if (!value || value.length <= 1 || value.length > 30) {
+        fieldError = formatMessage(messages['username.validation.message']);
+    }
+    else if (!usernameRegex.test(value)) {
+        fieldError = formatMessage(messages['username.format.validation.message']);
+    }
+    return fieldError;
+};
+export default validateUsername;
+//# sourceMappingURL=validator.js.map

package/dist/register/RegistrationFields/UsernameField/validator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validator.js","sourceRoot":"","sources":["../../../../src/register/RegistrationFields/UsernameField/validator.js"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AAEtC,MAAM,CAAC,MAAM,oBAAoB,GAAG,mBAAmB,CAAC;AACxD,MAAM,CAAC,MAAM,aAAa,GAAG,IAAI,MAAM,CAAC,oBAAoB,EAAE,GAAG,CAAC,CAAC;AAEnE,MAAM,gBAAgB,GAAG,CAAC,KAAK,EAAE,aAAa,EAAE,EAAE;IAChD,IAAI,UAAU,GAAG,EAAE,CAAC;IACpB,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,IAAI,KAAK,CAAC,MAAM,GAAG,EAAE,EAAE,CAAC;QACrD,UAAU,GAAG,aAAa,CAAC,QAAQ,CAAC,6BAA6B,CAAC,CAAC,CAAC;IACtE,CAAC;SAAM,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;QACtC,UAAU,GAAG,aAAa,CAAC,QAAQ,CAAC,oCAAoC,CAAC,CAAC,CAAC;IAC7E,CAAC;IACD,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import messages from '../../messages';\n\nexport const VALID_USERNAME_REGEX = /^[a-zA-Z0-9_-]*$/i;\nexport const usernameRegex = new RegExp(VALID_USERNAME_REGEX, 'i');\n\nconst validateUsername = (value, formatMessage) => {\n  let fieldError = '';\n  if (!value || value.length <= 1 || value.length > 30) {\n    fieldError = formatMessage(messages['username.validation.message']);\n  } else if (!usernameRegex.test(value)) {\n    fieldError = formatMessage(messages['username.format.validation.message']);\n  }\n  return fieldError;\n};\n\nexport default validateUsername;\n"]}

package/dist/register/RegistrationFields/index.d.ts

@@ -0,0 +1,6 @@
+export { default as NameField } from "./NameField/NameField";
+export { default as EmailField } from "./EmailField/EmailField";
+export { default as UsernameField } from "./UsernameField/UsernameField";
+export { default as CountryField } from "./CountryField/CountryField";
+export { default as HonorCode } from "./HonorCodeField/HonorCode";
+export { default as TermsOfService } from "./TermsOfServiceField/TermsOfService";

package/{src → dist}/register/RegistrationFields/index.js

@@ -4,3 +4,4 @@ export { default as UsernameField } from './UsernameField/UsernameField';
 export { default as CountryField } from './CountryField/CountryField';
 export { default as HonorCode } from './HonorCodeField/HonorCode';
 export { default as TermsOfService } from './TermsOfServiceField/TermsOfService';
+//# sourceMappingURL=index.js.map

package/dist/register/RegistrationFields/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/register/RegistrationFields/index.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,+BAA+B,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,6BAA6B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,sCAAsC,CAAC","sourcesContent":["export { default as NameField } from './NameField/NameField';\nexport { default as EmailField } from './EmailField/EmailField';\nexport { default as UsernameField } from './UsernameField/UsernameField';\nexport { default as CountryField } from './CountryField/CountryField';\nexport { default as HonorCode } from './HonorCodeField/HonorCode';\nexport { default as TermsOfService } from './TermsOfServiceField/TermsOfService';\n"]}

package/dist/register/RegistrationPage.d.ts

@@ -0,0 +1,18 @@
+export default RegistrationPage;
+/**
+ * Main Registration Page component
+ */
+declare function RegistrationPage(props: any): import("react/jsx-runtime").JSX.Element | null;
+declare namespace RegistrationPage {
+    namespace propTypes {
+        let institutionLogin: PropTypes.Requireable<boolean>;
+        let handleInstitutionLogin: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+    namespace defaultProps {
+        let handleInstitutionLogin_1: null;
+        export { handleInstitutionLogin_1 as handleInstitutionLogin };
+        let institutionLogin_1: boolean;
+        export { institutionLogin_1 as institutionLogin };
+    }
+}
+import PropTypes from 'prop-types';

package/dist/register/RegistrationPage.js

@@ -0,0 +1,216 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState, } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useAppConfig, getSiteConfig, sendPageEvent, sendTrackEvent, useIntl } from '@openedx/frontend-base';
+import { Form, Spinner, StatefulButton } from '@openedx/paragon';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import { Helmet } from 'react-helmet';
+import Skeleton from 'react-loading-skeleton';
+import { InstitutionLogistration, PasswordField, RedirectLogistration, ThirdPartyAuthAlert, } from '../common-components';
+import { getThirdPartyAuthContext as getRegistrationDataFromBackend } from '../common-components/data/actions';
+import EnterpriseSSO from '../common-components/EnterpriseSSO';
+import ThirdPartyAuth from '../common-components/ThirdPartyAuth';
+import { COMPLETE_STATE, PENDING_STATE, REGISTER_PAGE, } from '../data/constants';
+import { getAllPossibleQueryParams, getTpaHint, getTpaProvider, isHostAvailableInQueryParams, setCookie, } from '../data/utils';
+import ConfigurableRegistrationForm from './components/ConfigurableRegistrationForm';
+import RegistrationFailure from './components/RegistrationFailure';
+import { backupRegistrationFormBegin, clearRegistrationBackendError, registerNewUser, setEmailSuggestionInStore, setUserPipelineDataLoaded, } from './data/actions';
+import { FORM_SUBMISSION_ERROR, TPA_AUTHENTICATION_FAILURE, } from './data/constants';
+import getBackendValidations from './data/selectors';
+import { isFormValid, prepareRegistrationPayload, } from './data/utils';
+import messages from './messages';
+import { EmailField, NameField, UsernameField } from './RegistrationFields';
+/**
+ * Main Registration Page component
+ */
+const RegistrationPage = (props) => {
+    const { formatMessage } = useIntl();
+    const dispatch = useDispatch();
+    const registrationEmbedded = isHostAvailableInQueryParams();
+    const platformName = getSiteConfig().siteName;
+    const { handleInstitutionLogin, institutionLogin, } = props;
+    const { ENABLE_AUTO_GENERATED_USERNAME, ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN, MARKETING_EMAILS_OPT_IN, USER_RETENTION_COOKIE_NAME, SESSION_COOKIE_DOMAIN, } = useAppConfig();
+    const flags = {
+        showMarketingEmailOptInCheckbox: MARKETING_EMAILS_OPT_IN,
+        autoGeneratedUsernameEnabled: ENABLE_AUTO_GENERATED_USERNAME,
+    };
+    const backedUpFormData = useSelector(state => state.register.registrationFormData);
+    const registrationError = useSelector(state => state.register.registrationError);
+    const registrationErrorCode = registrationError === null || registrationError === void 0 ? void 0 : registrationError.errorCode;
+    const registrationResult = useSelector(state => state.register.registrationResult);
+    const shouldBackupState = useSelector(state => state.register.shouldBackupState);
+    const userPipelineDataLoaded = useSelector(state => state.register.userPipelineDataLoaded);
+    const submitState = useSelector(state => state.register.submitState);
+    const fieldDescriptions = useSelector(state => state.commonComponents.fieldDescriptions);
+    const optionalFields = useSelector(state => state.commonComponents.optionalFields);
+    const thirdPartyAuthApiStatus = useSelector(state => state.commonComponents.thirdPartyAuthApiStatus);
+    const autoSubmitRegForm = useSelector(state => state.commonComponents.thirdPartyAuthContext.autoSubmitRegForm);
+    const thirdPartyAuthErrorMessage = useSelector(state => state.commonComponents.thirdPartyAuthContext.errorMessage);
+    const finishAuthUrl = useSelector(state => state.commonComponents.thirdPartyAuthContext.finishAuthUrl);
+    const currentProvider = useSelector(state => state.commonComponents.thirdPartyAuthContext.currentProvider);
+    const providers = useSelector(state => state.commonComponents.thirdPartyAuthContext.providers);
+    const secondaryProviders = useSelector(state => state.commonComponents.thirdPartyAuthContext.secondaryProviders);
+    const pipelineUserDetails = useSelector(state => state.commonComponents.thirdPartyAuthContext.pipelineUserDetails);
+    const backendValidations = useSelector(getBackendValidations);
+    const queryParams = useMemo(() => getAllPossibleQueryParams(), []);
+    const tpaHint = useMemo(() => getTpaHint(), []);
+    const [formFields, setFormFields] = useState(Object.assign({}, backedUpFormData.formFields));
+    const [configurableFormFields, setConfigurableFormFields] = useState(Object.assign({}, backedUpFormData.configurableFormFields));
+    const [errors, setErrors] = useState(Object.assign({}, backedUpFormData.errors));
+    const [errorCode, setErrorCode] = useState({ type: '', count: 0 });
+    const [formStartTime, setFormStartTime] = useState(null);
+    // temporary error state for embedded experience because we don't want to show errors on blur
+    const [temporaryErrors, setTemporaryErrors] = useState(Object.assign({}, backedUpFormData.errors));
+    const { cta, host } = queryParams;
+    const buttonLabel = cta
+        ? formatMessage(messages['create.account.cta.button'], { label: cta })
+        : formatMessage(messages['create.account.for.free.button']);
+    /**
+     * Set the userPipelineDetails data in formFields for only first time
+     */
+    useEffect(() => {
+        if (!userPipelineDataLoaded && thirdPartyAuthApiStatus === COMPLETE_STATE) {
+            if (thirdPartyAuthErrorMessage) {
+                setErrorCode(prevState => ({ type: TPA_AUTHENTICATION_FAILURE, count: prevState.count + 1 }));
+            }
+            if (pipelineUserDetails && Object.keys(pipelineUserDetails).length !== 0) {
+                const { name = '', username = '', email = '' } = pipelineUserDetails;
+                setFormFields(prevState => (Object.assign(Object.assign({}, prevState), { name, username, email })));
+                dispatch(setUserPipelineDataLoaded(true));
+            }
+        }
+    }, [
+        thirdPartyAuthApiStatus,
+        thirdPartyAuthErrorMessage,
+        pipelineUserDetails,
+        userPipelineDataLoaded,
+    ]);
+    useEffect(() => {
+        if (!formStartTime) {
+            sendPageEvent('login_and_registration', 'register');
+            const payload = Object.assign(Object.assign({}, queryParams), { is_register_page: true });
+            if (tpaHint) {
+                payload.tpa_hint = tpaHint;
+            }
+            dispatch(getRegistrationDataFromBackend(payload));
+            setFormStartTime(Date.now());
+        }
+    }, [dispatch, formStartTime, queryParams, tpaHint]);
+    /**
+     * Backup the registration form in redux when register page is toggled.
+     */
+    useEffect(() => {
+        if (shouldBackupState) {
+            dispatch(backupRegistrationFormBegin(Object.assign(Object.assign({}, backedUpFormData), { configurableFormFields: Object.assign({}, configurableFormFields), formFields: Object.assign({}, formFields), errors: Object.assign({}, errors) })));
+        }
+    }, [shouldBackupState, configurableFormFields, formFields, errors, dispatch, backedUpFormData]);
+    useEffect(() => {
+        if (backendValidations) {
+            if (registrationEmbedded) {
+                setTemporaryErrors(prevErrors => (Object.assign(Object.assign({}, prevErrors), backendValidations)));
+            }
+            else {
+                setErrors(prevErrors => (Object.assign(Object.assign({}, prevErrors), backendValidations)));
+            }
+        }
+    }, [backendValidations, registrationEmbedded]);
+    useEffect(() => {
+        if (registrationErrorCode) {
+            setErrorCode(prevState => ({ type: registrationErrorCode, count: prevState.count + 1 }));
+        }
+    }, [registrationErrorCode]);
+    useEffect(() => {
+        if (registrationResult.success) {
+            // This event is used by GTM
+            sendTrackEvent('edx.bi.user.account.registered.client', {});
+            // This is used by the "User Retention Rate Event" on GTM
+            setCookie(USER_RETENTION_COOKIE_NAME, true, SESSION_COOKIE_DOMAIN);
+        }
+    }, [registrationResult]);
+    const handleOnChange = (event) => {
+        const { name } = event.target;
+        const value = event.target.type === 'checkbox' ? event.target.checked : event.target.value;
+        if (registrationError[name]) {
+            dispatch(clearRegistrationBackendError(name));
+        }
+        setErrors(prevErrors => (Object.assign(Object.assign({}, prevErrors), { [name]: '' })));
+        setFormFields(prevState => (Object.assign(Object.assign({}, prevState), { [name]: value })));
+    };
+    const handleErrorChange = (fieldName, error) => {
+        if (registrationEmbedded) {
+            setTemporaryErrors(prevErrors => (Object.assign(Object.assign({}, prevErrors), { [fieldName]: error })));
+            if (error === '' && errors[fieldName] !== '') {
+                setErrors(prevErrors => (Object.assign(Object.assign({}, prevErrors), { [fieldName]: error })));
+            }
+        }
+        else {
+            setErrors(prevErrors => (Object.assign(Object.assign({}, prevErrors), { [fieldName]: error })));
+        }
+    };
+    const registerUser = () => {
+        const totalRegistrationTime = (Date.now() - formStartTime) / 1000;
+        let payload = Object.assign({}, formFields);
+        if (currentProvider) {
+            delete payload.password;
+            payload.social_auth_provider = currentProvider;
+        }
+        if (flags.autoGeneratedUsernameEnabled) {
+            delete payload.username;
+        }
+        // Validating form data before submitting
+        const { isValid, fieldErrors, emailSuggestion } = isFormValid(payload, registrationEmbedded ? temporaryErrors : errors, configurableFormFields, fieldDescriptions, formatMessage);
+        setErrors(Object.assign({}, fieldErrors));
+        dispatch(setEmailSuggestionInStore(emailSuggestion));
+        // returning if not valid
+        if (!isValid) {
+            setErrorCode(prevState => ({ type: FORM_SUBMISSION_ERROR, count: prevState.count + 1 }));
+            return;
+        }
+        // Preparing payload for submission
+        payload = prepareRegistrationPayload(payload, configurableFormFields, flags.showMarketingEmailOptInCheckbox, totalRegistrationTime, queryParams);
+        // making register call
+        dispatch(registerNewUser(payload));
+    };
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        registerUser();
+    };
+    useEffect(() => {
+        if (autoSubmitRegForm && userPipelineDataLoaded) {
+            registerUser();
+        }
+    }, [autoSubmitRegForm, userPipelineDataLoaded]); // eslint-disable-line react-hooks/exhaustive-deps
+    const renderForm = () => {
+        if (institutionLogin) {
+            return (_jsx(InstitutionLogistration, { secondaryProviders: secondaryProviders, headingTitle: formatMessage(messages['register.institution.login.page.title']) }));
+        }
+        return (_jsxs(_Fragment, { children: [_jsx(Helmet, { children: _jsx("title", { children: formatMessage(messages['register.page.title'], { siteName: getSiteConfig().siteName }) }) }), _jsx(RedirectLogistration, { host: host, authenticatedUser: registrationResult.authenticatedUser, success: registrationResult.success, redirectUrl: registrationResult.redirectUrl, finishAuthUrl: finishAuthUrl, optionalFields: optionalFields, registrationEmbedded: registrationEmbedded, redirectToProgressiveProfilingPage: ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN && !!Object.keys(optionalFields.fields).length }), autoSubmitRegForm && !errorCode.type ? (_jsx("div", { className: "mw-xs mt-5 text-center", children: _jsx(Spinner, { animation: "border", variant: "primary", id: "tpa-spinner" }) })) : (_jsxs("div", { className: classNames('mw-xs mt-3', { 'w-100 m-auto pt-4 main-content': registrationEmbedded }), children: [_jsx(ThirdPartyAuthAlert, { currentProvider: currentProvider, platformName: platformName, referrer: REGISTER_PAGE }), _jsx(RegistrationFailure, { errorCode: errorCode.type, failureCount: errorCode.count, context: { provider: currentProvider, errorMessage: thirdPartyAuthErrorMessage } }), _jsxs(Form, { id: "registration-form", name: "registration-form", children: [_jsx(NameField, { name: "name", value: formFields.name, shouldFetchUsernameSuggestions: !formFields.username.trim(), handleChange: handleOnChange, handleErrorChange: handleErrorChange, errorMessage: errors.name, helpText: [formatMessage(messages['help.text.name'])], floatingLabel: formatMessage(messages['registration.fullname.label']) }), _jsx(EmailField, { name: "email", value: formFields.email, confirmEmailValue: configurableFormFields === null || configurableFormFields === void 0 ? void 0 : configurableFormFields.confirm_email, handleErrorChange: handleErrorChange, handleChange: handleOnChange, errorMessage: errors.email, helpText: [formatMessage(messages['help.text.email'])], floatingLabel: formatMessage(messages['registration.email.label']) }), !flags.autoGeneratedUsernameEnabled && (_jsx(UsernameField, { name: "username", spellCheck: "false", value: formFields.username, handleChange: handleOnChange, handleErrorChange: handleErrorChange, errorMessage: errors.username, helpText: [formatMessage(messages['help.text.username.1']), formatMessage(messages['help.text.username.2'])], floatingLabel: formatMessage(messages['registration.username.label']) })), !currentProvider && (_jsx(PasswordField, { name: "password", value: formFields.password, handleChange: handleOnChange, handleErrorChange: handleErrorChange, errorMessage: errors.password, floatingLabel: formatMessage(messages['registration.password.label']) })), _jsx(ConfigurableRegistrationForm, { email: formFields.email, fieldErrors: errors, formFields: configurableFormFields, setFieldErrors: registrationEmbedded ? setTemporaryErrors : setErrors, setFormFields: setConfigurableFormFields, autoSubmitRegisterForm: autoSubmitRegForm, fieldDescriptions: fieldDescriptions }), _jsx(StatefulButton, { id: "register-user", name: "register-user", type: "submit", variant: "brand", className: "register-button mt-4 mb-4", state: submitState, labels: {
+                                        default: buttonLabel,
+                                        pending: '',
+                                    }, onClick: handleSubmit, onMouseDown: (e) => e.preventDefault() }), !registrationEmbedded && (_jsx(ThirdPartyAuth, { currentProvider: currentProvider, providers: providers, secondaryProviders: secondaryProviders, handleInstitutionLogin: handleInstitutionLogin, thirdPartyAuthApiStatus: thirdPartyAuthApiStatus }))] })] }))] }));
+    };
+    if (tpaHint) {
+        if (thirdPartyAuthApiStatus === PENDING_STATE) {
+            return _jsx(Skeleton, { height: 36 });
+        }
+        const { provider, skipHintedLogin } = getTpaProvider(tpaHint, providers, secondaryProviders);
+        if (skipHintedLogin) {
+            window.location.href = getSiteConfig().lmsBaseUrl + provider.registerUrl;
+            return null;
+        }
+        return provider ? _jsx(EnterpriseSSO, { provider: provider }) : renderForm();
+    }
+    return (renderForm());
+};
+RegistrationPage.propTypes = {
+    institutionLogin: PropTypes.bool,
+    // Actions
+    handleInstitutionLogin: PropTypes.func,
+};
+RegistrationPage.defaultProps = {
+    handleInstitutionLogin: null,
+    institutionLogin: false,
+};
+export default RegistrationPage;
+//# sourceMappingURL=RegistrationPage.js.map

package/dist/register/RegistrationPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RegistrationPage.js","sourceRoot":"","sources":["../../src/register/RegistrationPage.jsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  useEffect, useMemo, useState,\n} from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\n\nimport {\n  useAppConfig,\n  getSiteConfig,\n  sendPageEvent, sendTrackEvent,\n  useIntl\n} from '@openedx/frontend-base';\nimport { Form, Spinner, StatefulButton } from '@openedx/paragon';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport { Helmet } from 'react-helmet';\nimport Skeleton from 'react-loading-skeleton';\n\nimport {\n  InstitutionLogistration,\n  PasswordField,\n  RedirectLogistration,\n  ThirdPartyAuthAlert,\n} from '../common-components';\nimport { getThirdPartyAuthContext as getRegistrationDataFromBackend } from '../common-components/data/actions';\nimport EnterpriseSSO from '../common-components/EnterpriseSSO';\nimport ThirdPartyAuth from '../common-components/ThirdPartyAuth';\nimport {\n  COMPLETE_STATE, PENDING_STATE, REGISTER_PAGE,\n} from '../data/constants';\nimport {\n  getAllPossibleQueryParams, getTpaHint, getTpaProvider, isHostAvailableInQueryParams, setCookie,\n} from '../data/utils';\nimport ConfigurableRegistrationForm from './components/ConfigurableRegistrationForm';\nimport RegistrationFailure from './components/RegistrationFailure';\nimport {\n  backupRegistrationFormBegin,\n  clearRegistrationBackendError,\n  registerNewUser,\n  setEmailSuggestionInStore,\n  setUserPipelineDataLoaded,\n} from './data/actions';\nimport {\n  FORM_SUBMISSION_ERROR,\n  TPA_AUTHENTICATION_FAILURE,\n} from './data/constants';\nimport getBackendValidations from './data/selectors';\nimport {\n  isFormValid, prepareRegistrationPayload,\n} from './data/utils';\nimport messages from './messages';\nimport { EmailField, NameField, UsernameField } from './RegistrationFields';\n\n/**\n * Main Registration Page component\n */\nconst RegistrationPage = (props) => {\n  const { formatMessage } = useIntl();\n  const dispatch = useDispatch();\n  const registrationEmbedded = isHostAvailableInQueryParams();\n  const platformName = getSiteConfig().siteName;\n  const {\n    handleInstitutionLogin,\n    institutionLogin,\n  } = props;\n  const {\n    ENABLE_AUTO_GENERATED_USERNAME,\n    ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN,\n    MARKETING_EMAILS_OPT_IN,\n    USER_RETENTION_COOKIE_NAME,\n    SESSION_COOKIE_DOMAIN,\n  } = useAppConfig();\n  const flags = {\n    showMarketingEmailOptInCheckbox: MARKETING_EMAILS_OPT_IN,\n    autoGeneratedUsernameEnabled: ENABLE_AUTO_GENERATED_USERNAME,\n  };\n\n  const backedUpFormData = useSelector(state => state.register.registrationFormData);\n  const registrationError = useSelector(state => state.register.registrationError);\n  const registrationErrorCode = registrationError?.errorCode;\n  const registrationResult = useSelector(state => state.register.registrationResult);\n  const shouldBackupState = useSelector(state => state.register.shouldBackupState);\n  const userPipelineDataLoaded = useSelector(state => state.register.userPipelineDataLoaded);\n  const submitState = useSelector(state => state.register.submitState);\n\n  const fieldDescriptions = useSelector(state => state.commonComponents.fieldDescriptions);\n  const optionalFields = useSelector(state => state.commonComponents.optionalFields);\n  const thirdPartyAuthApiStatus = useSelector(state => state.commonComponents.thirdPartyAuthApiStatus);\n  const autoSubmitRegForm = useSelector(state => state.commonComponents.thirdPartyAuthContext.autoSubmitRegForm);\n  const thirdPartyAuthErrorMessage = useSelector(state => state.commonComponents.thirdPartyAuthContext.errorMessage);\n  const finishAuthUrl = useSelector(state => state.commonComponents.thirdPartyAuthContext.finishAuthUrl);\n  const currentProvider = useSelector(state => state.commonComponents.thirdPartyAuthContext.currentProvider);\n  const providers = useSelector(state => state.commonComponents.thirdPartyAuthContext.providers);\n  const secondaryProviders = useSelector(state => state.commonComponents.thirdPartyAuthContext.secondaryProviders);\n  const pipelineUserDetails = useSelector(state => state.commonComponents.thirdPartyAuthContext.pipelineUserDetails);\n\n  const backendValidations = useSelector(getBackendValidations);\n  const queryParams = useMemo(() => getAllPossibleQueryParams(), []);\n  const tpaHint = useMemo(() => getTpaHint(), []);\n\n  const [formFields, setFormFields] = useState({ ...backedUpFormData.formFields });\n  const [configurableFormFields, setConfigurableFormFields] = useState({ ...backedUpFormData.configurableFormFields });\n  const [errors, setErrors] = useState({ ...backedUpFormData.errors });\n  const [errorCode, setErrorCode] = useState({ type: '', count: 0 });\n  const [formStartTime, setFormStartTime] = useState(null);\n  // temporary error state for embedded experience because we don't want to show errors on blur\n  const [temporaryErrors, setTemporaryErrors] = useState({ ...backedUpFormData.errors });\n\n  const { cta, host } = queryParams;\n  const buttonLabel = cta\n    ? formatMessage(messages['create.account.cta.button'], { label: cta })\n    : formatMessage(messages['create.account.for.free.button']);\n\n  /**\n   * Set the userPipelineDetails data in formFields for only first time\n   */\n  useEffect(() => {\n    if (!userPipelineDataLoaded && thirdPartyAuthApiStatus === COMPLETE_STATE) {\n      if (thirdPartyAuthErrorMessage) {\n        setErrorCode(prevState => ({ type: TPA_AUTHENTICATION_FAILURE, count: prevState.count + 1 }));\n      }\n      if (pipelineUserDetails && Object.keys(pipelineUserDetails).length !== 0) {\n        const { name = '', username = '', email = '' } = pipelineUserDetails;\n        setFormFields(prevState => ({\n          ...prevState, name, username, email,\n        }));\n        dispatch(setUserPipelineDataLoaded(true));\n      }\n    }\n  }, [ // eslint-disable-line react-hooks/exhaustive-deps\n    thirdPartyAuthApiStatus,\n    thirdPartyAuthErrorMessage,\n    pipelineUserDetails,\n    userPipelineDataLoaded,\n  ]);\n\n  useEffect(() => {\n    if (!formStartTime) {\n      sendPageEvent('login_and_registration', 'register');\n      const payload = { ...queryParams, is_register_page: true };\n      if (tpaHint) {\n        payload.tpa_hint = tpaHint;\n      }\n      dispatch(getRegistrationDataFromBackend(payload));\n      setFormStartTime(Date.now());\n    }\n  }, [dispatch, formStartTime, queryParams, tpaHint]);\n\n  /**\n   * Backup the registration form in redux when register page is toggled.\n   */\n  useEffect(() => {\n    if (shouldBackupState) {\n      dispatch(backupRegistrationFormBegin({\n        ...backedUpFormData,\n        configurableFormFields: { ...configurableFormFields },\n        formFields: { ...formFields },\n        errors: { ...errors },\n      }));\n    }\n  }, [shouldBackupState, configurableFormFields, formFields, errors, dispatch, backedUpFormData]);\n\n  useEffect(() => {\n    if (backendValidations) {\n      if (registrationEmbedded) {\n        setTemporaryErrors(prevErrors => ({ ...prevErrors, ...backendValidations }));\n      } else {\n        setErrors(prevErrors => ({ ...prevErrors, ...backendValidations }));\n      }\n    }\n  }, [backendValidations, registrationEmbedded]);\n\n  useEffect(() => {\n    if (registrationErrorCode) {\n      setErrorCode(prevState => ({ type: registrationErrorCode, count: prevState.count + 1 }));\n    }\n  }, [registrationErrorCode]);\n\n  useEffect(() => {\n    if (registrationResult.success) {\n      // This event is used by GTM\n      sendTrackEvent('edx.bi.user.account.registered.client', {});\n\n      // This is used by the \"User Retention Rate Event\" on GTM\n      setCookie(USER_RETENTION_COOKIE_NAME, true, SESSION_COOKIE_DOMAIN);\n    }\n  }, [registrationResult]);\n\n  const handleOnChange = (event) => {\n    const { name } = event.target;\n    const value = event.target.type === 'checkbox' ? event.target.checked : event.target.value;\n    if (registrationError[name]) {\n      dispatch(clearRegistrationBackendError(name));\n    }\n    setErrors(prevErrors => ({ ...prevErrors, [name]: '' }));\n    setFormFields(prevState => ({ ...prevState, [name]: value }));\n  };\n\n  const handleErrorChange = (fieldName, error) => {\n    if (registrationEmbedded) {\n      setTemporaryErrors(prevErrors => ({\n        ...prevErrors,\n        [fieldName]: error,\n      }));\n      if (error === '' && errors[fieldName] !== '') {\n        setErrors(prevErrors => ({\n          ...prevErrors,\n          [fieldName]: error,\n        }));\n      }\n    } else {\n      setErrors(prevErrors => ({\n        ...prevErrors,\n        [fieldName]: error,\n      }));\n    }\n  };\n\n  const registerUser = () => {\n    const totalRegistrationTime = (Date.now() - formStartTime) / 1000;\n    let payload = { ...formFields };\n\n    if (currentProvider) {\n      delete payload.password;\n      payload.social_auth_provider = currentProvider;\n    }\n    if (flags.autoGeneratedUsernameEnabled) {\n      delete payload.username;\n    }\n\n    // Validating form data before submitting\n    const { isValid, fieldErrors, emailSuggestion } = isFormValid(\n      payload,\n      registrationEmbedded ? temporaryErrors : errors,\n      configurableFormFields,\n      fieldDescriptions,\n      formatMessage,\n    );\n    setErrors({ ...fieldErrors });\n    dispatch(setEmailSuggestionInStore(emailSuggestion));\n\n    // returning if not valid\n    if (!isValid) {\n      setErrorCode(prevState => ({ type: FORM_SUBMISSION_ERROR, count: prevState.count + 1 }));\n      return;\n    }\n\n    // Preparing payload for submission\n    payload = prepareRegistrationPayload(\n      payload,\n      configurableFormFields,\n      flags.showMarketingEmailOptInCheckbox,\n      totalRegistrationTime,\n      queryParams\n    );\n\n    // making register call\n    dispatch(registerNewUser(payload));\n  };\n\n  const handleSubmit = (e) => {\n    e.preventDefault();\n    registerUser();\n  };\n\n  useEffect(() => {\n    if (autoSubmitRegForm && userPipelineDataLoaded) {\n      registerUser();\n    }\n  }, [autoSubmitRegForm, userPipelineDataLoaded]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const renderForm = () => {\n    if (institutionLogin) {\n      return (\n        <InstitutionLogistration\n          secondaryProviders={secondaryProviders}\n          headingTitle={formatMessage(messages['register.institution.login.page.title'])}\n        />\n      );\n    }\n    return (\n      <>\n        <Helmet>\n          <title>{formatMessage(messages['register.page.title'], { siteName: getSiteConfig().siteName })}</title>\n        </Helmet>\n        <RedirectLogistration\n          host={host}\n          authenticatedUser={registrationResult.authenticatedUser}\n          success={registrationResult.success}\n          redirectUrl={registrationResult.redirectUrl}\n          finishAuthUrl={finishAuthUrl}\n          optionalFields={optionalFields}\n          registrationEmbedded={registrationEmbedded}\n          redirectToProgressiveProfilingPage={\n            ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN && !!Object.keys(optionalFields.fields).length\n          }\n        />\n        {autoSubmitRegForm && !errorCode.type ? (\n          <div className=\"mw-xs mt-5 text-center\">\n            <Spinner animation=\"border\" variant=\"primary\" id=\"tpa-spinner\" />\n          </div>\n        ) : (\n          <div\n            className={classNames(\n              'mw-xs mt-3',\n              { 'w-100 m-auto pt-4 main-content': registrationEmbedded },\n            )}\n          >\n            <ThirdPartyAuthAlert\n              currentProvider={currentProvider}\n              platformName={platformName}\n              referrer={REGISTER_PAGE}\n            />\n            <RegistrationFailure\n              errorCode={errorCode.type}\n              failureCount={errorCode.count}\n              context={{ provider: currentProvider, errorMessage: thirdPartyAuthErrorMessage }}\n            />\n            <Form id=\"registration-form\" name=\"registration-form\">\n              <NameField\n                name=\"name\"\n                value={formFields.name}\n                shouldFetchUsernameSuggestions={!formFields.username.trim()}\n                handleChange={handleOnChange}\n                handleErrorChange={handleErrorChange}\n                errorMessage={errors.name}\n                helpText={[formatMessage(messages['help.text.name'])]}\n                floatingLabel={formatMessage(messages['registration.fullname.label'])}\n              />\n              <EmailField\n                name=\"email\"\n                value={formFields.email}\n                confirmEmailValue={configurableFormFields?.confirm_email}\n                handleErrorChange={handleErrorChange}\n                handleChange={handleOnChange}\n                errorMessage={errors.email}\n                helpText={[formatMessage(messages['help.text.email'])]}\n                floatingLabel={formatMessage(messages['registration.email.label'])}\n              />\n              {!flags.autoGeneratedUsernameEnabled && (\n                <UsernameField\n                  name=\"username\"\n                  spellCheck=\"false\"\n                  value={formFields.username}\n                  handleChange={handleOnChange}\n                  handleErrorChange={handleErrorChange}\n                  errorMessage={errors.username}\n                  helpText={[formatMessage(messages['help.text.username.1']), formatMessage(messages['help.text.username.2'])]}\n                  floatingLabel={formatMessage(messages['registration.username.label'])}\n                />\n              )}\n              {!currentProvider && (\n                <PasswordField\n                  name=\"password\"\n                  value={formFields.password}\n                  handleChange={handleOnChange}\n                  handleErrorChange={handleErrorChange}\n                  errorMessage={errors.password}\n                  floatingLabel={formatMessage(messages['registration.password.label'])}\n                />\n              )}\n              <ConfigurableRegistrationForm\n                email={formFields.email}\n                fieldErrors={errors}\n                formFields={configurableFormFields}\n                setFieldErrors={registrationEmbedded ? setTemporaryErrors : setErrors}\n                setFormFields={setConfigurableFormFields}\n                autoSubmitRegisterForm={autoSubmitRegForm}\n                fieldDescriptions={fieldDescriptions}\n              />\n              <StatefulButton\n                id=\"register-user\"\n                name=\"register-user\"\n                type=\"submit\"\n                variant=\"brand\"\n                className=\"register-button mt-4 mb-4\"\n                state={submitState}\n                labels={{\n                  default: buttonLabel,\n                  pending: '',\n                }}\n                onClick={handleSubmit}\n                onMouseDown={(e) => e.preventDefault()}\n              />\n              {!registrationEmbedded && (\n                <ThirdPartyAuth\n                  currentProvider={currentProvider}\n                  providers={providers}\n                  secondaryProviders={secondaryProviders}\n                  handleInstitutionLogin={handleInstitutionLogin}\n                  thirdPartyAuthApiStatus={thirdPartyAuthApiStatus}\n                />\n              )}\n            </Form>\n          </div>\n        )}\n\n      </>\n    );\n  };\n\n  if (tpaHint) {\n    if (thirdPartyAuthApiStatus === PENDING_STATE) {\n      return <Skeleton height={36} />;\n    }\n    const { provider, skipHintedLogin } = getTpaProvider(tpaHint, providers, secondaryProviders);\n    if (skipHintedLogin) {\n      window.location.href = getSiteConfig().lmsBaseUrl + provider.registerUrl;\n      return null;\n    }\n    return provider ? <EnterpriseSSO provider={provider} /> : renderForm();\n  }\n  return (\n    renderForm()\n  );\n};\n\nRegistrationPage.propTypes = {\n  institutionLogin: PropTypes.bool,\n  // Actions\n  handleInstitutionLogin: PropTypes.func,\n};\n\nRegistrationPage.defaultProps = {\n  handleInstitutionLogin: null,\n  institutionLogin: false,\n};\n\nexport default RegistrationPage;\n"]}