@openedx/frontend-app-authn 1.0.0-alpha.0 → 1.0.0-alpha.10

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

@@ -0,0 +1,17 @@
+export const emailRegex: RegExp;
+export function getLevenshteinSuggestion(word: any, knownWords: any, similarityThreshold?: number): any;
+export function getSuggestionForInvalidEmail(domain: any, username: any): string;
+export function validateEmailAddress(value: any, username: any, domainName: any): {
+    hasError: boolean;
+    suggestion: string;
+    type: string;
+};
+export default validateEmail;
+declare function validateEmail(value: any, confirmEmailValue: any, formatMessage: any): {
+    fieldError: string;
+    confirmEmailError: string;
+    suggestion: {
+        suggestion: string;
+        type: string;
+    };
+};

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

@@ -0,0 +1,107 @@
+import { distance } from 'fastest-levenshtein';
+import { VALID_EMAIL_REGEX } from '../../../data/constants';
+import messages from '../../messages';
+import { COMMON_EMAIL_PROVIDERS, DEFAULT_SERVICE_PROVIDER_DOMAINS, DEFAULT_TOP_LEVEL_DOMAINS, } from './constants';
+export const emailRegex = new RegExp(VALID_EMAIL_REGEX, 'i');
+export const getLevenshteinSuggestion = (word, knownWords, similarityThreshold = 4) => {
+    if (!word) {
+        return null;
+    }
+    let minEditDistance = 100;
+    let mostSimilar = word;
+    for (const knownWord of knownWords) {
+        const editDistance = distance(knownWord.toLowerCase(), word.toLowerCase());
+        if (editDistance < minEditDistance) {
+            minEditDistance = editDistance;
+            mostSimilar = knownWord;
+        }
+    }
+    return minEditDistance <= similarityThreshold && word !== mostSimilar ? mostSimilar : null;
+};
+export const getSuggestionForInvalidEmail = (domain, username) => {
+    if (!domain) {
+        return '';
+    }
+    const defaultDomains = ['yahoo', 'aol', 'hotmail', 'live', 'outlook', 'gmail'];
+    const suggestion = getLevenshteinSuggestion(domain, COMMON_EMAIL_PROVIDERS);
+    if (suggestion) {
+        return `${username}@${suggestion}`;
+    }
+    for (const defaultDomain of defaultDomains) {
+        if (domain.includes(defaultDomain)) {
+            return `${username}@${defaultDomain}.com`;
+        }
+    }
+    return '';
+};
+export const validateEmailAddress = (value, username, domainName) => {
+    let suggestion = null;
+    const validation = {
+        hasError: false,
+        suggestion: '',
+        type: '',
+    };
+    const hasMultipleSubdomains = value.match(/\./g).length > 1;
+    const [serviceLevelDomain, topLevelDomain] = domainName.split('.');
+    const tldSuggestion = !DEFAULT_TOP_LEVEL_DOMAINS.includes(topLevelDomain);
+    const serviceSuggestion = getLevenshteinSuggestion(serviceLevelDomain, DEFAULT_SERVICE_PROVIDER_DOMAINS, 2);
+    if (DEFAULT_SERVICE_PROVIDER_DOMAINS.includes(serviceSuggestion !== null && serviceSuggestion !== void 0 ? serviceSuggestion : serviceLevelDomain)) {
+        suggestion = `${username}@${serviceSuggestion !== null && serviceSuggestion !== void 0 ? serviceSuggestion : serviceLevelDomain}.com`;
+    }
+    if (!hasMultipleSubdomains && tldSuggestion) {
+        validation.suggestion = suggestion;
+        validation.type = 'error';
+    }
+    else if (serviceSuggestion) {
+        validation.suggestion = suggestion;
+        validation.type = 'warning';
+    }
+    else {
+        suggestion = getLevenshteinSuggestion(domainName, COMMON_EMAIL_PROVIDERS, 3);
+        if (suggestion) {
+            validation.suggestion = `${username}@${suggestion}`;
+            validation.type = 'warning';
+        }
+    }
+    if (!hasMultipleSubdomains && tldSuggestion) {
+        validation.hasError = true;
+    }
+    return validation;
+};
+const validateEmail = (value, confirmEmailValue, formatMessage) => {
+    let fieldError = '';
+    let confirmEmailError = '';
+    let emailSuggestion = { suggestion: '', type: '' };
+    if (!value) {
+        fieldError = formatMessage(messages['empty.email.field.error']);
+    }
+    else if (value.length <= 2) {
+        fieldError = formatMessage(messages['email.invalid.format.error']);
+    }
+    else {
+        const [username, domainName] = value.split('@');
+        // Check if email address is invalid. If we have a suggestion for invalid email
+        // provide that along with the error message.
+        if (!emailRegex.test(value)) {
+            fieldError = formatMessage(messages['email.invalid.format.error']);
+            emailSuggestion = {
+                suggestion: getSuggestionForInvalidEmail(domainName, username),
+                type: 'error',
+            };
+        }
+        else {
+            const response = validateEmailAddress(value, username, domainName);
+            if (response.hasError) {
+                fieldError = formatMessage(messages['email.invalid.format.error']);
+                delete response.hasError;
+            }
+            emailSuggestion = Object.assign({}, response);
+            if (confirmEmailValue && value !== confirmEmailValue) {
+                confirmEmailError = formatMessage(messages['email.do.not.match']);
+            }
+        }
+    }
+    return { fieldError, confirmEmailError, suggestion: emailSuggestion };
+};
+export default validateEmail;
+//# sourceMappingURL=validator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"validator.js","sourceRoot":"","sources":["../../../../src/register/RegistrationFields/EmailField/validator.js"],"names":[],"mappings":"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","sourcesContent":["import { distance } from 'fastest-levenshtein';\n\nimport { VALID_EMAIL_REGEX } from '../../../data/constants';\nimport messages from '../../messages';\nimport {\n  COMMON_EMAIL_PROVIDERS,\n  DEFAULT_SERVICE_PROVIDER_DOMAINS,\n  DEFAULT_TOP_LEVEL_DOMAINS,\n} from './constants';\n\nexport const emailRegex = new RegExp(VALID_EMAIL_REGEX, 'i');\n\nexport const getLevenshteinSuggestion = (word, knownWords, similarityThreshold = 4) => {\n  if (!word) {\n    return null;\n  }\n\n  let minEditDistance = 100;\n  let mostSimilar = word;\n\n  for (const knownWord of knownWords) {\n    const editDistance = distance(knownWord.toLowerCase(), word.toLowerCase());\n    if (editDistance < minEditDistance) {\n      minEditDistance = editDistance;\n      mostSimilar = knownWord;\n    }\n  }\n\n  return minEditDistance <= similarityThreshold && word !== mostSimilar ? mostSimilar : null;\n};\n\nexport const getSuggestionForInvalidEmail = (domain, username) => {\n  if (!domain) {\n    return '';\n  }\n\n  const defaultDomains = ['yahoo', 'aol', 'hotmail', 'live', 'outlook', 'gmail'];\n  const suggestion = getLevenshteinSuggestion(domain, COMMON_EMAIL_PROVIDERS);\n\n  if (suggestion) {\n    return `${username}@${suggestion}`;\n  }\n\n  for (const defaultDomain of defaultDomains) {\n    if (domain.includes(defaultDomain)) {\n      return `${username}@${defaultDomain}.com`;\n    }\n  }\n\n  return '';\n};\n\nexport const validateEmailAddress = (value, username, domainName) => {\n  let suggestion = null;\n  const validation = {\n    hasError: false,\n    suggestion: '',\n    type: '',\n  };\n\n  const hasMultipleSubdomains = value.match(/\\./g).length > 1;\n  const [serviceLevelDomain, topLevelDomain] = domainName.split('.');\n  const tldSuggestion = !DEFAULT_TOP_LEVEL_DOMAINS.includes(topLevelDomain);\n  const serviceSuggestion = getLevenshteinSuggestion(serviceLevelDomain, DEFAULT_SERVICE_PROVIDER_DOMAINS, 2);\n\n  if (DEFAULT_SERVICE_PROVIDER_DOMAINS.includes(serviceSuggestion ?? serviceLevelDomain)) {\n    suggestion = `${username}@${serviceSuggestion ?? serviceLevelDomain}.com`;\n  }\n\n  if (!hasMultipleSubdomains && tldSuggestion) {\n    validation.suggestion = suggestion;\n    validation.type = 'error';\n  } else if (serviceSuggestion) {\n    validation.suggestion = suggestion;\n    validation.type = 'warning';\n  } else {\n    suggestion = getLevenshteinSuggestion(domainName, COMMON_EMAIL_PROVIDERS, 3);\n    if (suggestion) {\n      validation.suggestion = `${username}@${suggestion}`;\n      validation.type = 'warning';\n    }\n  }\n\n  if (!hasMultipleSubdomains && tldSuggestion) {\n    validation.hasError = true;\n  }\n\n  return validation;\n};\n\nconst validateEmail = (value, confirmEmailValue, formatMessage) => {\n  let fieldError = '';\n  let confirmEmailError = '';\n  let emailSuggestion = { suggestion: '', type: '' };\n\n  if (!value) {\n    fieldError = formatMessage(messages['empty.email.field.error']);\n  } else if (value.length <= 2) {\n    fieldError = formatMessage(messages['email.invalid.format.error']);\n  } else {\n    const [username, domainName] = value.split('@');\n    // Check if email address is invalid. If we have a suggestion for invalid email\n    // provide that along with the error message.\n    if (!emailRegex.test(value)) {\n      fieldError = formatMessage(messages['email.invalid.format.error']);\n      emailSuggestion = {\n        suggestion: getSuggestionForInvalidEmail(domainName, username),\n        type: 'error',\n      };\n    } else {\n      const response = validateEmailAddress(value, username, domainName);\n      if (response.hasError) {\n        fieldError = formatMessage(messages['email.invalid.format.error']);\n        delete response.hasError;\n      }\n      emailSuggestion = { ...response };\n\n      if (confirmEmailValue && value !== confirmEmailValue) {\n        confirmEmailError = formatMessage(messages['email.do.not.match']);\n      }\n    }\n  }\n  return { fieldError, confirmEmailError, suggestion: emailSuggestion };\n};\n\nexport default validateEmail;\n"]}

package/dist/register/RegistrationFields/HonorCodeField/HonorCode.d.ts

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

package/dist/register/RegistrationFields/HonorCodeField/HonorCode.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+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 HonorCode = (props) => {
+    const { formatMessage } = useIntl();
+    const { errorMessage, onChangeHandler, fieldType, value, } = props;
+    useEffect(() => {
+        if (fieldType === 'tos_and_honor_code' && !value) {
+            onChangeHandler({ target: { name: 'honor_code', value: true } });
+        }
+    }, [fieldType, onChangeHandler, value]);
+    if (fieldType === 'tos_and_honor_code') {
+        return (_jsx("div", { id: "honor-code", className: "micro text-muted mt-4", children: _jsx(FormattedMessage, { id: "register.page.terms.of.service.and.honor.code", defaultMessage: "By creating an account, you agree to the {tosAndHonorCode} and you acknowledge that {platformName} and each\n                Member process your personal data in accordance with the {privacyPolicy}.", description: "Text that appears on registration form stating honor code and privacy policy", values: {
+                    platformName: getSiteConfig().siteName,
+                    tosAndHonorCode: (_jsx(Hyperlink, { className: "inline-link", destination: useAppConfig().TOS_AND_HONOR_CODE || '#', target: "_blank", showLaunchIcon: false, children: formatMessage(messages['terms.of.service.and.honor.code']) })),
+                    privacyPolicy: (_jsx(Hyperlink, { className: "inline-link", destination: useAppConfig().PRIVACY_POLICY || '#', target: "_blank", showLaunchIcon: false, children: formatMessage(messages['privacy.policy']) })),
+                } }) }));
+    }
+    return (_jsxs("div", { id: "honor-code", className: "micro text-muted", children: [_jsx(Form.Checkbox, { className: "form-field--checkbox mt-1", id: "honor-code", checked: value, name: "honor_code", value: value, onChange: onChangeHandler, children: _jsx(FormattedMessage, { id: "register.page.honor.code", defaultMessage: "I agree to the {platformName}\u00A0{tosAndHonorCode}", description: "Text that appears on registration form stating honor code", values: {
+                        platformName: getSiteConfig().siteName,
+                        tosAndHonorCode: (_jsx(Hyperlink, { variant: "muted", destination: useAppConfig().TOS_AND_HONOR_CODE || '#', target: "_blank", children: formatMessage(messages['honor.code']) })),
+                    } }) }), errorMessage && (_jsx(Form.Control.Feedback, { type: "invalid", className: "form-text-size", hasIcon: false, children: errorMessage }))] }));
+};
+HonorCode.defaultProps = {
+    errorMessage: '',
+    onChangeHandler: null,
+    fieldType: 'honor_code',
+    value: false,
+};
+HonorCode.propTypes = {
+    errorMessage: PropTypes.string,
+    onChangeHandler: PropTypes.func,
+    fieldType: PropTypes.string,
+    value: PropTypes.bool,
+};
+export default HonorCode;
+//# sourceMappingURL=HonorCode.js.map

package/dist/register/RegistrationFields/HonorCodeField/HonorCode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HonorCode.js","sourceRoot":"","sources":["../../../../src/register/RegistrationFields/HonorCodeField/HonorCode.jsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect } from 'react';\n\nimport { 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 HonorCode = (props) => {\n  const { formatMessage } = useIntl();\n  const {\n    errorMessage, onChangeHandler, fieldType, value,\n  } = props;\n\n  useEffect(() => {\n    if (fieldType === 'tos_and_honor_code' && !value) {\n      onChangeHandler({ target: { name: 'honor_code', value: true } });\n    }\n  }, [fieldType, onChangeHandler, value]);\n\n  if (fieldType === 'tos_and_honor_code') {\n    return (\n      <div id=\"honor-code\" className=\"micro text-muted mt-4\">\n        <FormattedMessage\n          id=\"register.page.terms.of.service.and.honor.code\"\n          defaultMessage=\"By creating an account, you agree to the {tosAndHonorCode} and you acknowledge that {platformName} and each\n                Member process your personal data in accordance with the {privacyPolicy}.\"\n          description=\"Text that appears on registration form stating honor code and privacy policy\"\n          values={{\n            platformName: getSiteConfig().siteName,\n            tosAndHonorCode: (\n              <Hyperlink\n                className=\"inline-link\"\n                destination={useAppConfig().TOS_AND_HONOR_CODE || '#'}\n                target=\"_blank\"\n                showLaunchIcon={false}\n              >\n                {formatMessage(messages['terms.of.service.and.honor.code'])}\n              </Hyperlink>\n            ),\n            privacyPolicy: (\n              <Hyperlink\n                className=\"inline-link\"\n                destination={useAppConfig().PRIVACY_POLICY || '#'}\n                target=\"_blank\"\n                showLaunchIcon={false}\n              >\n                {formatMessage(messages['privacy.policy'])}\n              </Hyperlink>\n            ),\n          }}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div id=\"honor-code\" className=\"micro text-muted\">\n      <Form.Checkbox\n        className=\"form-field--checkbox mt-1\"\n        id=\"honor-code\"\n        checked={value}\n        name=\"honor_code\"\n        value={value}\n        onChange={onChangeHandler}\n      >\n        <FormattedMessage\n          id=\"register.page.honor.code\"\n          defaultMessage=\"I agree to the {platformName}&nbsp;{tosAndHonorCode}\"\n          description=\"Text that appears on registration form stating honor code\"\n          values={{\n            platformName: getSiteConfig().siteName,\n            tosAndHonorCode: (\n              <Hyperlink variant=\"muted\" destination={useAppConfig().TOS_AND_HONOR_CODE || '#'} target=\"_blank\">\n                {formatMessage(messages['honor.code'])}\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\nHonorCode.defaultProps = {\n  errorMessage: '',\n  onChangeHandler: null,\n  fieldType: 'honor_code',\n  value: false,\n};\n\nHonorCode.propTypes = {\n  errorMessage: PropTypes.string,\n  onChangeHandler: PropTypes.func,\n  fieldType: PropTypes.string,\n  value: PropTypes.bool,\n};\n\nexport default HonorCode;\n"]}

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

@@ -0,0 +1,29 @@
+export default NameField;
+/**
+ * Name field wrapper. It accepts following handlers
+ * - handleChange for setting value change and
+ * - handleErrorChange for setting error
+ *
+ * It is responsible for
+ * - Making backend call for generating username suggestions
+ * - Performing name field validations
+ * - Clearing error on focus
+ * - Setting value on change
+ */
+declare function NameField(props: any): import("react/jsx-runtime").JSX.Element;
+declare namespace NameField {
+    namespace defaultProps {
+        let errorMessage: string;
+        let shouldFetchUsernameSuggestions: boolean;
+    }
+    namespace propTypes {
+        let errorMessage_1: PropTypes.Requireable<string>;
+        export { errorMessage_1 as errorMessage };
+        let shouldFetchUsernameSuggestions_1: PropTypes.Requireable<boolean>;
+        export { shouldFetchUsernameSuggestions_1 as shouldFetchUsernameSuggestions };
+        export let value: PropTypes.Validator<string>;
+        export let handleChange: PropTypes.Validator<(...args: any[]) => any>;
+        export let handleErrorChange: PropTypes.Validator<(...args: any[]) => any>;
+    }
+}
+import PropTypes from 'prop-types';

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

@@ -0,0 +1,59 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useIntl } from '@openedx/frontend-base';
+import PropTypes from 'prop-types';
+import validateName from './validator';
+import { FormGroup } from '../../../common-components';
+import { useRegisterContext } from '../../components/RegisterContext';
+import { useFieldValidations } from '../../data/apiHook';
+/**
+ * Name field wrapper. It accepts following handlers
+ * - handleChange for setting value change and
+ * - handleErrorChange for setting error
+ *
+ * It is responsible for
+ * - Making backend call for generating username suggestions
+ * - Performing name field validations
+ * - Clearing error on focus
+ * - Setting value on change
+ */
+const NameField = (props) => {
+    const { formatMessage } = useIntl();
+    const { setValidationsSuccess, setValidationsFailure, validationApiRateLimited, clearRegistrationBackendError, } = useRegisterContext();
+    const fieldValidationsMutation = useFieldValidations({
+        onSuccess: (data) => {
+            setValidationsSuccess(data);
+        },
+        onError: () => {
+            setValidationsFailure();
+        },
+    });
+    const { handleErrorChange, shouldFetchUsernameSuggestions, } = props;
+    const handleOnBlur = (e) => {
+        const { value } = e.target;
+        const fieldError = validateName(value, formatMessage);
+        if (fieldError) {
+            handleErrorChange('name', fieldError);
+        }
+        else if (shouldFetchUsernameSuggestions && !validationApiRateLimited) {
+            fieldValidationsMutation.mutate({ name: value });
+        }
+    };
+    const handleOnFocus = () => {
+        handleErrorChange('name', '');
+        clearRegistrationBackendError('name');
+    };
+    return (_jsx(FormGroup, Object.assign({}, props, { handleBlur: handleOnBlur, handleFocus: handleOnFocus })));
+};
+NameField.defaultProps = {
+    errorMessage: '',
+    shouldFetchUsernameSuggestions: false,
+};
+NameField.propTypes = {
+    errorMessage: PropTypes.string,
+    shouldFetchUsernameSuggestions: PropTypes.bool,
+    value: PropTypes.string.isRequired,
+    handleChange: PropTypes.func.isRequired,
+    handleErrorChange: PropTypes.func.isRequired,
+};
+export default NameField;
+//# sourceMappingURL=NameField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NameField.js","sourceRoot":"","sources":["../../../../src/register/RegistrationFields/NameField/NameField.jsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,YAAY,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAEzD;;;;;;;;;;GAUG;AACH,MAAM,SAAS,GAAG,CAAC,KAAK,EAAE,EAAE;IAC1B,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,EACJ,qBAAqB,EACrB,qBAAqB,EACrB,wBAAwB,EACxB,6BAA6B,GAC9B,GAAG,kBAAkB,EAAE,CAAC;IAEzB,MAAM,wBAAwB,GAAG,mBAAmB,CAAC;QACnD,SAAS,EAAE,CAAC,IAAI,EAAE,EAAE;YAClB,qBAAqB,CAAC,IAAI,CAAC,CAAC;QAC9B,CAAC;QACD,OAAO,EAAE,GAAG,EAAE;YACZ,qBAAqB,EAAE,CAAC;QAC1B,CAAC;KACF,CAAC,CAAC;IACH,MAAM,EACJ,iBAAiB,EACjB,8BAA8B,GAC/B,GAAG,KAAK,CAAC;IAEV,MAAM,YAAY,GAAG,CAAC,CAAC,EAAE,EAAE;QACzB,MAAM,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;QAC3B,MAAM,UAAU,GAAG,YAAY,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;QACtD,IAAI,UAAU,EAAE,CAAC;YACf,iBAAiB,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QACxC,CAAC;aAAM,IAAI,8BAA8B,IAAI,CAAC,wBAAwB,EAAE,CAAC;YACvE,wBAAwB,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;QACnD,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,iBAAiB,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;QAC9B,6BAA6B,CAAC,MAAM,CAAC,CAAC;IACxC,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,SAAS,oBACJ,KAAK,IACT,UAAU,EAAE,YAAY,EACxB,WAAW,EAAE,aAAa,IAC1B,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,SAAS,CAAC,YAAY,GAAG;IACvB,YAAY,EAAE,EAAE;IAChB,8BAA8B,EAAE,KAAK;CACtC,CAAC;AAEF,SAAS,CAAC,SAAS,GAAG;IACpB,YAAY,EAAE,SAAS,CAAC,MAAM;IAC9B,8BAA8B,EAAE,SAAS,CAAC,IAAI;IAC9C,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU;IAClC,YAAY,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;IACvC,iBAAiB,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;CAC7C,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { useIntl } from '@openedx/frontend-base';\nimport PropTypes from 'prop-types';\n\nimport validateName from './validator';\nimport { FormGroup } from '../../../common-components';\nimport { useRegisterContext } from '../../components/RegisterContext';\nimport { useFieldValidations } from '../../data/apiHook';\n\n/**\n * Name 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 * - Making backend call for generating username suggestions\n * - Performing name field validations\n * - Clearing error on focus\n * - Setting value on change\n */\nconst NameField = (props) => {\n  const { formatMessage } = useIntl();\n  const {\n    setValidationsSuccess,\n    setValidationsFailure,\n    validationApiRateLimited,\n    clearRegistrationBackendError,\n  } = useRegisterContext();\n\n  const fieldValidationsMutation = useFieldValidations({\n    onSuccess: (data) => {\n      setValidationsSuccess(data);\n    },\n    onError: () => {\n      setValidationsFailure();\n    },\n  });\n  const {\n    handleErrorChange,\n    shouldFetchUsernameSuggestions,\n  } = props;\n\n  const handleOnBlur = (e) => {\n    const { value } = e.target;\n    const fieldError = validateName(value, formatMessage);\n    if (fieldError) {\n      handleErrorChange('name', fieldError);\n    } else if (shouldFetchUsernameSuggestions && !validationApiRateLimited) {\n      fieldValidationsMutation.mutate({ name: value });\n    }\n  };\n\n  const handleOnFocus = () => {\n    handleErrorChange('name', '');\n    clearRegistrationBackendError('name');\n  };\n\n  return (\n    <FormGroup\n      {...props}\n      handleBlur={handleOnBlur}\n      handleFocus={handleOnFocus}\n    />\n  );\n};\n\nNameField.defaultProps = {\n  errorMessage: '',\n  shouldFetchUsernameSuggestions: false,\n};\n\nNameField.propTypes = {\n  errorMessage: PropTypes.string,\n  shouldFetchUsernameSuggestions: PropTypes.bool,\n  value: PropTypes.string.isRequired,\n  handleChange: PropTypes.func.isRequired,\n  handleErrorChange: PropTypes.func.isRequired,\n};\n\nexport default NameField;\n"]}

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

@@ -0,0 +1,6 @@
+export const URL_REGEX: RegExp;
+export const HTML_REGEX: RegExp;
+export const INVALID_NAME_REGEX: RegExp;
+export const MAX_FULL_NAME_LENGTH: 255;
+export default validateName;
+declare function validateName(value: any, formatMessage: any): string;

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

@@ -0,0 +1,23 @@
+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;
+export const MAX_FULL_NAME_LENGTH = 255;
+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']);
+    }
+    else if (value && value.length > MAX_FULL_NAME_LENGTH) {
+        fieldError = formatMessage(messages['name.validation.length.message'], { limit: MAX_FULL_NAME_LENGTH });
+    }
+    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,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAC;AAExC,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;SAAM,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,oBAAoB,EAAE,CAAC;QACxD,UAAU,GAAG,aAAa,CAAC,QAAQ,CAAC,gCAAgC,CAAC,EAAE,EAAE,KAAK,EAAE,oBAAoB,EAAE,CAAC,CAAC;IAC1G,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\nexport const MAX_FULL_NAME_LENGTH = 255;\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  } else if (value && value.length > MAX_FULL_NAME_LENGTH) {\n    fieldError = formatMessage(messages['name.validation.length.message'], { limit: MAX_FULL_NAME_LENGTH });\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,119 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+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 validateUsername from './validator';
+import { FormGroup } from '../../../common-components';
+import { useRegisterContext } from '../../components/RegisterContext';
+import { useFieldValidations } from '../../data/apiHook';
+import messages from '../../messages';
+/**
+ * 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 { value, errorMessage, handleChange, handleErrorChange, } = props;
+    let className = '';
+    let suggestedUsernameDiv = null;
+    let iconButton = null;
+    const { usernameSuggestions, validationApiRateLimited, setValidationsSuccess, setValidationsFailure, clearUsernameSuggestions, clearRegistrationBackendError, } = useRegisterContext();
+    const fieldValidationsMutation = useFieldValidations({
+        onSuccess: (data) => {
+            setValidationsSuccess(data);
+        },
+        onError: () => {
+            setValidationsFailure();
+        },
+    });
+    /**
+     * 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) {
+            fieldValidationsMutation.mutate({ 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;
+        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', '');
+        clearRegistrationBackendError('username');
+    };
+    const handleSuggestionClick = (event, suggestion = '') => {
+        event.preventDefault();
+        handleErrorChange('username', ''); // clear error
+        handleChange({ target: { name: 'username', value: suggestion } }); // to set suggestion as value
+        clearUsernameSuggestions();
+    };
+    const handleUsernameSuggestionClose = () => {
+        handleChange({ target: { name: 'username', value: '' } }); // to remove space in field
+        clearUsernameSuggestions();
+    };
+    const suggestedUsernames = () => (_jsxs("div", { className: className, role: "listbox", 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, tabIndex: 0, onClick: (e) => handleSuggestionClick(e, username), role: "option", children: username }, `suggestion-${index.toString()}`))) }), iconButton] }));
+    if (usernameSuggestions.length > 0 && errorMessage && value === ' ') {
+        className = 'username-suggestions';
+        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 (_jsxs("div", { className: "username__form-group-wrapper", children: [suggestedUsernameDiv, _jsx(FormGroup, Object.assign({}, props, { handleChange: handleOnChange, handleFocus: handleOnFocus, handleBlur: handleOnBlur }))] }));
+};
+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';\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 validateUsername from './validator';\nimport { FormGroup } from '../../../common-components';\nimport { useRegisterContext } from '../../components/RegisterContext';\nimport { useFieldValidations } from '../../data/apiHook';\nimport messages from '../../messages';\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\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 {\n    usernameSuggestions,\n    validationApiRateLimited,\n    setValidationsSuccess,\n    setValidationsFailure,\n    clearUsernameSuggestions,\n    clearRegistrationBackendError,\n  } = useRegisterContext();\n\n  const fieldValidationsMutation = useFieldValidations({\n    onSuccess: (data) => {\n      setValidationsSuccess(data);\n    },\n    onError: () => {\n      setValidationsFailure();\n    },\n  });\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      fieldValidationsMutation.mutate({ 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    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    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    clearUsernameSuggestions();\n  };\n\n  const handleUsernameSuggestionClose = () => {\n    handleChange({ target: { name: 'username', value: '' } }); // to remove space in field\n    clearUsernameSuggestions();\n  };\n\n  const suggestedUsernames = () => (\n    <div className={className} role=\"listbox\">\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            tabIndex={0}\n            onClick={(e) => handleSuggestionClick(e, username)}\n            role=\"option\"\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';\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    <div className=\"username__form-group-wrapper\">\n      {suggestedUsernameDiv}\n      <FormGroup\n        {...props}\n        handleChange={handleOnChange}\n        handleFocus={handleOnFocus}\n        handleBlur={handleOnBlur}\n      />\n    </div>\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"]}