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

package/dist/base-container/index.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useAppConfig } from '@openedx/frontend-base';
+import { breakpoints } from '@openedx/paragon';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import MediaQuery from 'react-responsive';
+import { DefaultLargeLayout, DefaultMediumLayout, DefaultSmallLayout } from './components/default-layout';
+import { ImageExtraSmallLayout, ImageLargeLayout, ImageMediumLayout, ImageSmallLayout, } from './components/image-layout';
+import { AuthLargeLayout, AuthMediumLayout, AuthSmallLayout } from './components/welcome-page-layout';
+const BaseContainer = ({ children, showWelcomeBanner, fullName }) => {
+    const enableImageLayout = useAppConfig().ENABLE_IMAGE_LAYOUT;
+    if (enableImageLayout) {
+        return (_jsxs("div", { className: "layout", children: [_jsx(MediaQuery, { maxWidth: breakpoints.extraSmall.maxWidth - 1, children: showWelcomeBanner ? _jsx(AuthSmallLayout, { fullName: fullName }) : _jsx(ImageExtraSmallLayout, {}) }), _jsx(MediaQuery, { minWidth: breakpoints.small.minWidth, maxWidth: breakpoints.small.maxWidth - 1, children: showWelcomeBanner ? _jsx(AuthSmallLayout, { fullName: fullName }) : _jsx(ImageSmallLayout, {}) }), _jsx(MediaQuery, { minWidth: breakpoints.medium.minWidth, maxWidth: breakpoints.large.maxWidth - 1, children: showWelcomeBanner ? _jsx(AuthMediumLayout, { fullName: fullName }) : _jsx(ImageMediumLayout, {}) }), _jsx(MediaQuery, { minWidth: breakpoints.extraLarge.minWidth, children: showWelcomeBanner ? _jsx(AuthLargeLayout, { fullName: fullName }) : _jsx(ImageLargeLayout, {}) }), _jsx("div", { className: classNames('content', { 'align-items-center mt-0': showWelcomeBanner }), children: children })] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "col-md-12 extra-large-screen-top-stripe" }), _jsxs("div", { className: "layout", children: [_jsx(MediaQuery, { maxWidth: breakpoints.small.maxWidth - 1, children: showWelcomeBanner ? _jsx(AuthSmallLayout, { fullName: fullName }) : _jsx(DefaultSmallLayout, {}) }), _jsx(MediaQuery, { minWidth: breakpoints.medium.minWidth, maxWidth: breakpoints.large.maxWidth - 1, children: showWelcomeBanner ? _jsx(AuthMediumLayout, { fullName: fullName }) : _jsx(DefaultMediumLayout, {}) }), _jsx(MediaQuery, { minWidth: breakpoints.extraLarge.minWidth, children: showWelcomeBanner ? _jsx(AuthLargeLayout, { fullName: fullName }) : _jsx(DefaultLargeLayout, {}) }), _jsx("div", { className: classNames('content', { 'align-items-center mt-0': showWelcomeBanner }), children: children })] })] }));
+};
+BaseContainer.defaultProps = {
+    showWelcomeBanner: false,
+    fullName: null,
+};
+BaseContainer.propTypes = {
+    children: PropTypes.node.isRequired,
+    showWelcomeBanner: PropTypes.bool,
+    fullName: PropTypes.string,
+};
+export default BaseContainer;
+//# sourceMappingURL=index.js.map

package/dist/base-container/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/base-container/index.jsx"],"names":[],"mappings":"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","sourcesContent":["import { useAppConfig } from '@openedx/frontend-base';\nimport { breakpoints } from '@openedx/paragon';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport MediaQuery from 'react-responsive';\n\nimport { DefaultLargeLayout, DefaultMediumLayout, DefaultSmallLayout } from './components/default-layout';\nimport {\n  ImageExtraSmallLayout, ImageLargeLayout, ImageMediumLayout, ImageSmallLayout,\n} from './components/image-layout';\nimport { AuthLargeLayout, AuthMediumLayout, AuthSmallLayout } from './components/welcome-page-layout';\n\nconst BaseContainer = ({ children, showWelcomeBanner, fullName }) => {\n  const enableImageLayout = useAppConfig().ENABLE_IMAGE_LAYOUT;\n\n  if (enableImageLayout) {\n    return (\n      <div className=\"layout\">\n        <MediaQuery maxWidth={breakpoints.extraSmall.maxWidth - 1}>\n          {showWelcomeBanner ? <AuthSmallLayout fullName={fullName} /> : <ImageExtraSmallLayout />}\n        </MediaQuery>\n        <MediaQuery minWidth={breakpoints.small.minWidth} maxWidth={breakpoints.small.maxWidth - 1}>\n          {showWelcomeBanner ? <AuthSmallLayout fullName={fullName} /> : <ImageSmallLayout />}\n        </MediaQuery>\n        <MediaQuery minWidth={breakpoints.medium.minWidth} maxWidth={breakpoints.large.maxWidth - 1}>\n          {showWelcomeBanner ? <AuthMediumLayout fullName={fullName} /> : <ImageMediumLayout />}\n        </MediaQuery>\n        <MediaQuery minWidth={breakpoints.extraLarge.minWidth}>\n          {showWelcomeBanner ? <AuthLargeLayout fullName={fullName} /> : <ImageLargeLayout />}\n        </MediaQuery>\n        <div className={classNames('content', { 'align-items-center mt-0': showWelcomeBanner })}>\n          {children}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <>\n      <div className=\"col-md-12 extra-large-screen-top-stripe\" />\n      <div className=\"layout\">\n        <MediaQuery maxWidth={breakpoints.small.maxWidth - 1}>\n          {showWelcomeBanner ? <AuthSmallLayout fullName={fullName} /> : <DefaultSmallLayout />}\n        </MediaQuery>\n        <MediaQuery minWidth={breakpoints.medium.minWidth} maxWidth={breakpoints.large.maxWidth - 1}>\n          {showWelcomeBanner ? <AuthMediumLayout fullName={fullName} /> : <DefaultMediumLayout />}\n        </MediaQuery>\n        <MediaQuery minWidth={breakpoints.extraLarge.minWidth}>\n          {showWelcomeBanner ? <AuthLargeLayout fullName={fullName} /> : <DefaultLargeLayout />}\n        </MediaQuery>\n        <div className={classNames('content', { 'align-items-center mt-0': showWelcomeBanner })}>\n          {children}\n        </div>\n      </div>\n    </>\n  );\n};\n\nBaseContainer.defaultProps = {\n  showWelcomeBanner: false,\n  fullName: null,\n};\n\nBaseContainer.propTypes = {\n  children: PropTypes.node.isRequired,\n  showWelcomeBanner: PropTypes.bool,\n  fullName: PropTypes.string,\n};\n\nexport default BaseContainer;\n"]}

package/dist/common-components/EmbeddedRegistrationRoute.d.ts

@@ -0,0 +1,14 @@
+export default EmbeddedRegistrationRoute;
+/**
+ * This wrapper redirects the requester to embedded register page only if host
+ * query param is present.
+ */
+declare function EmbeddedRegistrationRoute({ children }: {
+    children: any;
+}): any;
+declare namespace EmbeddedRegistrationRoute {
+    namespace propTypes {
+        let children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+    }
+}
+import PropTypes from 'prop-types';

package/dist/common-components/EmbeddedRegistrationRoute.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import PropTypes from 'prop-types';
+import { Navigate } from 'react-router-dom';
+import { notFoundPath } from '../constants';
+import { isHostAvailableInQueryParams } from '../data/utils';
+/**
+ * This wrapper redirects the requester to embedded register page only if host
+ * query param is present.
+ */
+const EmbeddedRegistrationRoute = ({ children }) => {
+    const registrationEmbedded = isHostAvailableInQueryParams();
+    // Show registration page for embedded experience even if the user is authenticated
+    if (registrationEmbedded) {
+        return children;
+    }
+    return _jsx(Navigate, { to: `../${notFoundPath}`, replace: true });
+};
+EmbeddedRegistrationRoute.propTypes = {
+    children: PropTypes.node.isRequired,
+};
+export default EmbeddedRegistrationRoute;
+//# sourceMappingURL=EmbeddedRegistrationRoute.js.map

package/dist/common-components/EmbeddedRegistrationRoute.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmbeddedRegistrationRoute.js","sourceRoot":"","sources":["../../src/common-components/EmbeddedRegistrationRoute.jsx"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAE,4BAA4B,EAAE,MAAM,eAAe,CAAC;AAE7D;;;GAGG;AACH,MAAM,yBAAyB,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACjD,MAAM,oBAAoB,GAAG,4BAA4B,EAAE,CAAC;IAE5D,mFAAmF;IACnF,IAAI,oBAAoB,EAAE,CAAC;QACzB,OAAO,QAAQ,CAAC;IAClB,CAAC;IAED,OAAO,KAAC,QAAQ,IAAC,EAAE,EAAE,MAAM,YAAY,EAAE,EAAE,OAAO,SAAG,CAAC;AACxD,CAAC,CAAC;AAEF,yBAAyB,CAAC,SAAS,GAAG;IACpC,QAAQ,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;CACpC,CAAC;AAEF,eAAe,yBAAyB,CAAC","sourcesContent":["import PropTypes from 'prop-types';\nimport { Navigate } from 'react-router-dom';\n\nimport { notFoundPath } from '../constants';\nimport { isHostAvailableInQueryParams } from '../data/utils';\n\n/**\n * This wrapper redirects the requester to embedded register page only if host\n * query param is present.\n */\nconst EmbeddedRegistrationRoute = ({ children }) => {\n  const registrationEmbedded = isHostAvailableInQueryParams();\n\n  // Show registration page for embedded experience even if the user is authenticated\n  if (registrationEmbedded) {\n    return children;\n  }\n\n  return <Navigate to={`../${notFoundPath}`} replace />;\n};\n\nEmbeddedRegistrationRoute.propTypes = {\n  children: PropTypes.node.isRequired,\n};\n\nexport default EmbeddedRegistrationRoute;\n"]}

package/dist/common-components/EnterpriseSSO.d.ts

@@ -0,0 +1,29 @@
+export default EnterpriseSSO;
+/**
+ * This component renders the Single sign-on (SSO) button only for the tpa provider passed
+ * */
+declare function EnterpriseSSO(props: any): import("react/jsx-runtime").JSX.Element;
+declare namespace EnterpriseSSO {
+    namespace defaultProps {
+        namespace provider {
+            let id: string;
+            let name: string;
+            let iconClass: string;
+            let iconImage: string;
+            let loginUrl: string;
+            let registerUrl: string;
+        }
+    }
+    namespace propTypes {
+        let provider_1: PropTypes.Requireable<PropTypes.InferProps<{
+            id: PropTypes.Requireable<string>;
+            name: PropTypes.Requireable<string>;
+            iconClass: PropTypes.Requireable<string>;
+            iconImage: PropTypes.Requireable<string>;
+            loginUrl: PropTypes.Requireable<string>;
+            registerUrl: PropTypes.Requireable<string>;
+        }>>;
+        export { provider_1 as provider };
+    }
+}
+import PropTypes from 'prop-types';

package/dist/common-components/EnterpriseSSO.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useAppConfig, getSiteConfig, getUrlByRouteRole, useIntl } from '@openedx/frontend-base';
+import { Button, Form, Icon, } from '@openedx/paragon';
+import { Login } from '@openedx/paragon/icons';
+import PropTypes from 'prop-types';
+import { useNavigate } from 'react-router-dom';
+import { loginRole } from '../constants';
+import { SUPPORTED_ICON_CLASSES } from '../data/constants';
+import messages from './messages';
+/**
+ * This component renders the Single sign-on (SSO) button only for the tpa provider passed
+ * */
+const EnterpriseSSO = (props) => {
+    const { formatMessage } = useIntl();
+    const navigate = useNavigate();
+    const tpaProvider = props.provider;
+    const hideRegistrationLink = useAppConfig().ALLOW_PUBLIC_ACCOUNT_CREATION === false
+        || useAppConfig().SHOW_REGISTRATION_LINKS === false;
+    const handleSubmit = (e, url) => {
+        e.preventDefault();
+        window.location.href = getSiteConfig().lmsBaseUrl + url;
+    };
+    const handleClick = (e) => {
+        e.preventDefault();
+        navigate(getUrlByRouteRole(loginRole));
+    };
+    if (tpaProvider) {
+        return (_jsx("div", { className: "d-flex justify-content-center m-4", children: _jsx("div", { className: "d-flex flex-column", children: _jsx("div", { className: "mw-450", children: _jsxs(Form, { className: "m-0", children: [_jsx("p", { children: formatMessage(messages['enterprisetpa.title.heading'], { providerName: tpaProvider.name }) }), _jsx(Button, { id: tpaProvider.id, type: "submit", variant: "link", className: `btn-tpa btn-${tpaProvider.id}`, onClick: (e) => handleSubmit(e, tpaProvider.loginUrl), children: tpaProvider.iconImage ? (_jsxs("div", { "aria-hidden": "true", children: [_jsx("img", { className: "btn-tpa__image-icon", src: tpaProvider.iconImage, alt: `icon ${tpaProvider.name}` }), _jsx("span", { className: "pl-2", "aria-hidden": "true", children: tpaProvider.name })] }))
+                                    : (_jsxs(_Fragment, { children: [_jsx("div", { className: "btn-tpa__font-container", "aria-hidden": "true", children: SUPPORTED_ICON_CLASSES.includes(tpaProvider.iconClass) ? (_jsx(FontAwesomeIcon, { icon: ['fab', tpaProvider.iconClass] }))
+                                                    : (_jsx(Icon, { className: "h-75", src: Login })) }), _jsx("span", { className: "pl-2", "aria-hidden": "true", children: tpaProvider.name })] })) }, tpaProvider.id), _jsx("div", { className: "mb-4" }), _jsx(Button, { type: "submit", id: "other-ways-to-sign-in", variant: "outline-primary", state: "Complete", className: "w-100", onClick: (e) => handleClick(e), children: hideRegistrationLink
+                                    ? formatMessage(messages['enterprisetpa.login.button.text.public.account.creation.disabled'])
+                                    : formatMessage(messages['enterprisetpa.login.button.text']) })] }) }) }) }));
+    }
+    return _jsx("div", {});
+};
+EnterpriseSSO.defaultProps = {
+    provider: {
+        id: '',
+        name: '',
+        iconClass: '',
+        iconImage: '',
+        loginUrl: '',
+        registerUrl: '',
+    },
+};
+EnterpriseSSO.propTypes = {
+    provider: PropTypes.shape({
+        id: PropTypes.string,
+        name: PropTypes.string,
+        iconClass: PropTypes.string,
+        iconImage: PropTypes.string,
+        loginUrl: PropTypes.string,
+        registerUrl: PropTypes.string,
+    }),
+};
+export default EnterpriseSSO;
+//# sourceMappingURL=EnterpriseSSO.js.map

package/dist/common-components/EnterpriseSSO.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnterpriseSSO.js","sourceRoot":"","sources":["../../src/common-components/EnterpriseSSO.jsx"],"names":[],"mappings":"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","sourcesContent":["import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { useAppConfig, getSiteConfig, getUrlByRouteRole, useIntl } from '@openedx/frontend-base';\nimport {\n  Button, Form,\n  Icon,\n} from '@openedx/paragon';\nimport { Login } from '@openedx/paragon/icons';\nimport PropTypes from 'prop-types';\nimport { useNavigate } from 'react-router-dom';\n\nimport { loginRole } from '../constants';\nimport { SUPPORTED_ICON_CLASSES } from '../data/constants';\nimport messages from './messages';\n\n/**\n * This component renders the Single sign-on (SSO) button only for the tpa provider passed\n * */\nconst EnterpriseSSO = (props) => {\n  const { formatMessage } = useIntl();\n  const navigate = useNavigate();\n  const tpaProvider = props.provider;\n  const hideRegistrationLink = useAppConfig().ALLOW_PUBLIC_ACCOUNT_CREATION === false\n    || useAppConfig().SHOW_REGISTRATION_LINKS === false;\n\n  const handleSubmit = (e, url) => {\n    e.preventDefault();\n    window.location.href = getSiteConfig().lmsBaseUrl + url;\n  };\n\n  const handleClick = (e) => {\n    e.preventDefault();\n    navigate(getUrlByRouteRole(loginRole));\n  };\n\n  if (tpaProvider) {\n    return (\n      <div className=\"d-flex justify-content-center m-4\">\n        <div className=\"d-flex flex-column\">\n          <div className=\"mw-450\">\n            <Form className=\"m-0\">\n              <p>{formatMessage(messages['enterprisetpa.title.heading'], { providerName: tpaProvider.name })}</p>\n              <Button\n                id={tpaProvider.id}\n                key={tpaProvider.id}\n                type=\"submit\"\n                variant=\"link\"\n                className={`btn-tpa btn-${tpaProvider.id}`}\n                onClick={(e) => handleSubmit(e, tpaProvider.loginUrl)}\n              >\n                {tpaProvider.iconImage ? (\n                  <div aria-hidden=\"true\">\n                    <img className=\"btn-tpa__image-icon\" src={tpaProvider.iconImage} alt={`icon ${tpaProvider.name}`} />\n                    <span className=\"pl-2\" aria-hidden=\"true\">{tpaProvider.name}</span>\n                  </div>\n                )\n                  : (\n                    <>\n                      <div className=\"btn-tpa__font-container\" aria-hidden=\"true\">\n                        {SUPPORTED_ICON_CLASSES.includes(tpaProvider.iconClass) ? (\n                          <FontAwesomeIcon icon={['fab', tpaProvider.iconClass]} />)\n                          : (\n                            <Icon className=\"h-75\" src={Login} />\n                          )}\n                      </div>\n                      <span className=\"pl-2\" aria-hidden=\"true\">{tpaProvider.name}</span>\n                    </>\n                  )}\n              </Button>\n              <div className=\"mb-4\" />\n              <Button\n                type=\"submit\"\n                id=\"other-ways-to-sign-in\"\n                variant=\"outline-primary\"\n                state=\"Complete\"\n                className=\"w-100\"\n                onClick={(e) => handleClick(e)}\n              >\n                {hideRegistrationLink\n                  ? formatMessage(messages['enterprisetpa.login.button.text.public.account.creation.disabled'])\n                  : formatMessage(messages['enterprisetpa.login.button.text'])}\n              </Button>\n            </Form>\n          </div>\n        </div>\n      </div>\n    );\n  }\n  return <div />;\n};\n\nEnterpriseSSO.defaultProps = {\n  provider: {\n    id: '',\n    name: '',\n    iconClass: '',\n    iconImage: '',\n    loginUrl: '',\n    registerUrl: '',\n  },\n};\n\nEnterpriseSSO.propTypes = {\n  provider: PropTypes.shape({\n    id: PropTypes.string,\n    name: PropTypes.string,\n    iconClass: PropTypes.string,\n    iconImage: PropTypes.string,\n    loginUrl: PropTypes.string,\n    registerUrl: PropTypes.string,\n  }),\n};\n\nexport default EnterpriseSSO;\n"]}

package/dist/common-components/FormGroup.d.ts

@@ -0,0 +1,60 @@
+export default FormGroup;
+declare function FormGroup(props: any): import("react/jsx-runtime").JSX.Element;
+declare namespace FormGroup {
+    namespace defaultProps {
+        let as: string;
+        let autoComplete: null;
+        let borderClass: string;
+        let children: null;
+        let className: string;
+        let errorMessage: string;
+        let handleBlur: null;
+        function handleChange(): void;
+        let handleClick: null;
+        let handleFocus: null;
+        let helpText: never[];
+        let options: null;
+        let readOnly: boolean;
+        let spellCheck: null;
+        let trailingElement: null;
+        let type: string;
+    }
+    namespace propTypes {
+        let as_1: PropTypes.Requireable<string>;
+        export { as_1 as as };
+        let autoComplete_1: PropTypes.Requireable<string>;
+        export { autoComplete_1 as autoComplete };
+        let borderClass_1: PropTypes.Requireable<string>;
+        export { borderClass_1 as borderClass };
+        let children_1: PropTypes.Requireable<PropTypes.ReactElementLike>;
+        export { children_1 as children };
+        let className_1: PropTypes.Requireable<string>;
+        export { className_1 as className };
+        let errorMessage_1: PropTypes.Requireable<string>;
+        export { errorMessage_1 as errorMessage };
+        export let floatingLabel: PropTypes.Validator<string>;
+        let handleBlur_1: PropTypes.Requireable<(...args: any[]) => any>;
+        export { handleBlur_1 as handleBlur };
+        let handleChange_1: PropTypes.Requireable<(...args: any[]) => any>;
+        export { handleChange_1 as handleChange };
+        let handleClick_1: PropTypes.Requireable<(...args: any[]) => any>;
+        export { handleClick_1 as handleClick };
+        let handleFocus_1: PropTypes.Requireable<(...args: any[]) => any>;
+        export { handleFocus_1 as handleFocus };
+        let helpText_1: PropTypes.Requireable<(string | null | undefined)[]>;
+        export { helpText_1 as helpText };
+        export let name: PropTypes.Validator<string>;
+        let options_1: PropTypes.Requireable<(...args: any[]) => any>;
+        export { options_1 as options };
+        let readOnly_1: PropTypes.Requireable<boolean>;
+        export { readOnly_1 as readOnly };
+        let spellCheck_1: PropTypes.Requireable<string>;
+        export { spellCheck_1 as spellCheck };
+        let trailingElement_1: PropTypes.Requireable<PropTypes.ReactElementLike>;
+        export { trailingElement_1 as trailingElement };
+        let type_1: PropTypes.Requireable<string>;
+        export { type_1 as type };
+        export let value: PropTypes.Validator<string>;
+    }
+}
+import PropTypes from 'prop-types';

package/dist/common-components/FormGroup.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Form, TransitionReplace, } from '@openedx/paragon';
+import PropTypes from 'prop-types';
+const FormGroup = (props) => {
+    const [hasFocus, setHasFocus] = useState(false);
+    const handleFocus = (e) => {
+        setHasFocus(true);
+        if (props.handleFocus) {
+            props.handleFocus(e);
+        }
+    };
+    const handleClick = (e) => {
+        if (props.handleClick) {
+            props.handleClick(e);
+        }
+    };
+    const handleOnBlur = (e) => {
+        setHasFocus(false);
+        if (props.handleBlur) {
+            props.handleBlur(e);
+        }
+    };
+    return (_jsxs(Form.Group, { controlId: props.name, className: props.className, isInvalid: props.errorMessage !== '', children: [_jsx(Form.Control, { as: props.as, readOnly: props.readOnly, type: props.type, "aria-invalid": props.errorMessage !== '', className: "form-group__form-field", autoComplete: props.autoComplete, spellCheck: props.spellCheck, name: props.name, value: props.value, onFocus: handleFocus, onBlur: handleOnBlur, onClick: handleClick, onChange: props.handleChange, controlClassName: props.borderClass, trailingElement: props.trailingElement, floatingLabel: props.floatingLabel, children: props.options ? props.options() : null }), _jsx(TransitionReplace, { children: hasFocus && props.helpText ? (_jsx(Form.Control.Feedback, { type: "default", className: "d-block form-text-size", children: props.helpText.map((message, index) => (_jsxs("span", { children: [message, _jsx("br", {})] }, `help-text-${index.toString()}`))) }, "help-text")) : _jsx("div", {}, "empty") }), props.errorMessage !== '' && (_jsx(Form.Control.Feedback, { className: "form-text-size", hasIcon: false, "feedback-for": props.name, type: "invalid", children: props.errorMessage }, "error")), props.children] }));
+};
+FormGroup.defaultProps = {
+    as: 'input',
+    autoComplete: null,
+    borderClass: '',
+    children: null,
+    className: '',
+    errorMessage: '',
+    handleBlur: null,
+    handleChange: () => { },
+    handleClick: null,
+    handleFocus: null,
+    helpText: [],
+    options: null,
+    readOnly: false,
+    spellCheck: null,
+    trailingElement: null,
+    type: 'text',
+};
+FormGroup.propTypes = {
+    as: PropTypes.string,
+    autoComplete: PropTypes.string,
+    borderClass: PropTypes.string,
+    children: PropTypes.element,
+    className: PropTypes.string,
+    errorMessage: PropTypes.string,
+    floatingLabel: PropTypes.string.isRequired,
+    handleBlur: PropTypes.func,
+    handleChange: PropTypes.func,
+    handleClick: PropTypes.func,
+    handleFocus: PropTypes.func,
+    helpText: PropTypes.arrayOf(PropTypes.string),
+    name: PropTypes.string.isRequired,
+    options: PropTypes.func,
+    readOnly: PropTypes.bool,
+    spellCheck: PropTypes.string,
+    trailingElement: PropTypes.element,
+    type: PropTypes.string,
+    value: PropTypes.string.isRequired,
+};
+export default FormGroup;
+//# sourceMappingURL=FormGroup.js.map

package/dist/common-components/FormGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormGroup.js","sourceRoot":"","sources":["../../src/common-components/FormGroup.jsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from 'react';\n\nimport {\n  Form, TransitionReplace,\n} from '@openedx/paragon';\nimport PropTypes from 'prop-types';\n\nconst FormGroup = (props) => {\n  const [hasFocus, setHasFocus] = useState(false);\n\n  const handleFocus = (e) => {\n    setHasFocus(true);\n    if (props.handleFocus) { props.handleFocus(e); }\n  };\n  const handleClick = (e) => {\n    if (props.handleClick) { props.handleClick(e); }\n  };\n  const handleOnBlur = (e) => {\n    setHasFocus(false);\n    if (props.handleBlur) { props.handleBlur(e); }\n  };\n\n  return (\n    <Form.Group controlId={props.name} className={props.className} isInvalid={props.errorMessage !== ''}>\n      <Form.Control\n        as={props.as}\n        readOnly={props.readOnly}\n        type={props.type}\n        aria-invalid={props.errorMessage !== ''}\n        className=\"form-group__form-field\"\n        autoComplete={props.autoComplete}\n        spellCheck={props.spellCheck}\n        name={props.name}\n        value={props.value}\n        onFocus={handleFocus}\n        onBlur={handleOnBlur}\n        onClick={handleClick}\n        onChange={props.handleChange}\n        controlClassName={props.borderClass}\n        trailingElement={props.trailingElement}\n        floatingLabel={props.floatingLabel}\n      >\n        {props.options ? props.options() : null}\n      </Form.Control>\n      <TransitionReplace>\n        {hasFocus && props.helpText ? (\n          <Form.Control.Feedback type=\"default\" key=\"help-text\" className=\"d-block form-text-size\">\n            {props.helpText.map((message, index) => (\n              <span key={`help-text-${index.toString()}`}>\n                {message}\n                <br />\n              </span>\n            ))}\n          </Form.Control.Feedback>\n        ) : <div key=\"empty\" />}\n      </TransitionReplace>\n      {props.errorMessage !== '' && (\n        <Form.Control.Feedback key=\"error\" className=\"form-text-size\" hasIcon={false} feedback-for={props.name} type=\"invalid\">{props.errorMessage}</Form.Control.Feedback>\n      )}\n      {props.children}\n    </Form.Group>\n  );\n};\n\nFormGroup.defaultProps = {\n  as: 'input',\n  autoComplete: null,\n  borderClass: '',\n  children: null,\n  className: '',\n  errorMessage: '',\n  handleBlur: null,\n  handleChange: () => {},\n  handleClick: null,\n  handleFocus: null,\n  helpText: [],\n  options: null,\n  readOnly: false,\n  spellCheck: null,\n  trailingElement: null,\n  type: 'text',\n};\n\nFormGroup.propTypes = {\n  as: PropTypes.string,\n  autoComplete: PropTypes.string,\n  borderClass: PropTypes.string,\n  children: PropTypes.element,\n  className: PropTypes.string,\n  errorMessage: PropTypes.string,\n  floatingLabel: PropTypes.string.isRequired,\n  handleBlur: PropTypes.func,\n  handleChange: PropTypes.func,\n  handleClick: PropTypes.func,\n  handleFocus: PropTypes.func,\n  helpText: PropTypes.arrayOf(PropTypes.string),\n  name: PropTypes.string.isRequired,\n  options: PropTypes.func,\n  readOnly: PropTypes.bool,\n  spellCheck: PropTypes.string,\n  trailingElement: PropTypes.element,\n  type: PropTypes.string,\n  value: PropTypes.string.isRequired,\n};\n\nexport default FormGroup;\n"]}

package/dist/common-components/InstitutionLogistration.d.ts

@@ -0,0 +1,34 @@
+export function RenderInstitutionButton(props: any): import("react/jsx-runtime").JSX.Element;
+export namespace RenderInstitutionButton {
+    namespace propTypes {
+        let buttonTitle: PropTypes.Requireable<string>;
+        let onSubmitHandler: PropTypes.Validator<(...args: any[]) => any>;
+        let secondaryProviders: PropTypes.Requireable<(PropTypes.InferProps<{
+            name: PropTypes.Validator<string>;
+            loginUrl: PropTypes.Validator<string>;
+        }> | null | undefined)[]>;
+    }
+    namespace defaultProps {
+        let secondaryProviders_1: never[];
+        export { secondaryProviders_1 as secondaryProviders };
+        let buttonTitle_1: string;
+        export { buttonTitle_1 as buttonTitle };
+    }
+}
+export default InstitutionLogistration;
+import PropTypes from 'prop-types';
+/**
+ * This component renders the page list of available institutions for login
+ * */
+declare function InstitutionLogistration(props: any): import("react/jsx-runtime").JSX.Element;
+declare namespace InstitutionLogistration {
+    export namespace propTypes_1 {
+        let headingTitle: PropTypes.Requireable<string>;
+    }
+    export { propTypes_1 as propTypes };
+    export namespace defaultProps_1 {
+        let headingTitle_1: string;
+        export { headingTitle_1 as headingTitle };
+    }
+    export { defaultProps_1 as defaultProps };
+}

package/dist/common-components/InstitutionLogistration.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { getSiteConfig, useIntl } from '@openedx/frontend-base';
+import { Button, Hyperlink, Icon } from '@openedx/paragon';
+import { Institution } from '@openedx/paragon/icons';
+import PropTypes from 'prop-types';
+import messages from './messages';
+/**
+ * This component renders the Institution login button
+ * */
+export const RenderInstitutionButton = props => {
+    const { onSubmitHandler, buttonTitle } = props;
+    return (_jsxs(Button, { className: "btn-sm text-body p-0 mb-4 border-0", variant: "link", "data-event-name": "institution_login", onClick: onSubmitHandler, children: [_jsx(Icon, { src: Institution, className: "institute-icon" }), buttonTitle] }));
+};
+/**
+ * This component renders the page list of available institutions for login
+ * */
+const InstitutionLogistration = props => {
+    const lmsBaseUrl = getSiteConfig().lmsBaseUrl;
+    const { formatMessage } = useIntl();
+    const { secondaryProviders, headingTitle, } = props;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "d-flex justify-content-left mb-4 mt-2", children: _jsxs("div", { className: "flex-column", children: [_jsx("h4", { className: "mb-2 font-weight-bold institutions__heading", children: headingTitle }), _jsx("p", { className: "mb-2", children: formatMessage(messages['institution.login.page.sub.heading']) })] }) }), _jsx("div", { className: "mb-5", children: _jsx("table", { className: "pgn__data-table table-striped table-borderless", children: _jsx("tbody", { children: secondaryProviders.map(provider => (_jsx("tr", { className: "pgn__data-table-row", children: _jsx("td", { children: _jsx(Hyperlink, { className: "btn nav-item p-0 mb-1 institutions--provider-link", destination: lmsBaseUrl + provider.loginUrl, children: provider.name }) }) }, provider))) }) }) })] }));
+};
+const LogistrationDefaultProps = {
+    secondaryProviders: [],
+    buttonTitle: '',
+};
+const LogistrationProps = {
+    secondaryProviders: PropTypes.arrayOf(PropTypes.shape({
+        name: PropTypes.string.isRequired,
+        loginUrl: PropTypes.string.isRequired,
+    })),
+};
+RenderInstitutionButton.propTypes = Object.assign(Object.assign({}, LogistrationProps), { buttonTitle: PropTypes.string, onSubmitHandler: PropTypes.func.isRequired });
+RenderInstitutionButton.defaultProps = Object.assign({}, LogistrationDefaultProps);
+InstitutionLogistration.propTypes = Object.assign(Object.assign({}, LogistrationProps), { headingTitle: PropTypes.string });
+InstitutionLogistration.defaultProps = Object.assign(Object.assign({}, LogistrationDefaultProps), { headingTitle: '' });
+export default InstitutionLogistration;
+//# sourceMappingURL=InstitutionLogistration.js.map

package/dist/common-components/InstitutionLogistration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InstitutionLogistration.js","sourceRoot":"","sources":["../../src/common-components/InstitutionLogistration.jsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC;;KAEK;AACL,MAAM,CAAC,MAAM,uBAAuB,GAAG,KAAK,CAAC,EAAE;IAC7C,MAAM,EAAE,eAAe,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;IAE/C,OAAO,CACL,MAAC,MAAM,IACL,SAAS,EAAC,oCAAoC,EAC9C,OAAO,EAAC,MAAM,qBACE,mBAAmB,EACnC,OAAO,EAAE,eAAe,aAExB,KAAC,IAAI,IAAC,GAAG,EAAE,WAAW,EAAE,SAAS,EAAC,gBAAgB,GAAG,EACpD,WAAW,IACL,CACV,CAAC;AACJ,CAAC,CAAC;AAEF;;KAEK;AACL,MAAM,uBAAuB,GAAG,KAAK,CAAC,EAAE;IACtC,MAAM,UAAU,GAAG,aAAa,EAAE,CAAC,UAAU,CAAC;IAC9C,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,EACJ,kBAAkB,EAClB,YAAY,GACb,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,8BACE,cAAK,SAAS,EAAC,uCAAuC,YACpD,eAAK,SAAS,EAAC,aAAa,aAC1B,aAAI,SAAS,EAAC,6CAA6C,YACxD,YAAY,GACV,EACL,YAAG,SAAS,EAAC,MAAM,YAChB,aAAa,CAAC,QAAQ,CAAC,oCAAoC,CAAC,CAAC,GAC5D,IACA,GACF,EACN,cAAK,SAAS,EAAC,MAAM,YACnB,gBAAO,SAAS,EAAC,gDAAgD,YAC/D,0BACG,kBAAkB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAClC,aAAmB,SAAS,EAAC,qBAAqB,YAChD,uBACE,KAAC,SAAS,IACR,SAAS,EAAC,mDAAmD,EAC7D,WAAW,EAAE,UAAU,GAAG,QAAQ,CAAC,QAAQ,YAE1C,QAAQ,CAAC,IAAI,GACJ,GACT,IARE,QAAQ,CASZ,CACN,CAAC,GACI,GACF,GACJ,IACL,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,wBAAwB,GAAG;IAC/B,kBAAkB,EAAE,EAAE;IACtB,WAAW,EAAE,EAAE;CAChB,CAAC;AACF,MAAM,iBAAiB,GAAG;IACxB,kBAAkB,EAAE,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC;QACpD,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU;QACjC,QAAQ,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU;KACtC,CAAC,CAAC;CACJ,CAAC;AAEF,uBAAuB,CAAC,SAAS,mCAC5B,iBAAiB,KACpB,WAAW,EAAE,SAAS,CAAC,MAAM,EAC7B,eAAe,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU,GAE3C,CAAC;AACF,uBAAuB,CAAC,YAAY,qBAC/B,wBAAwB,CAC5B,CAAC;AAEF,uBAAuB,CAAC,SAAS,mCAC5B,iBAAiB,KACpB,YAAY,EAAE,SAAS,CAAC,MAAM,GAC/B,CAAC;AACF,uBAAuB,CAAC,YAAY,mCAC/B,wBAAwB,KAC3B,YAAY,EAAE,EAAE,GACjB,CAAC;AAEF,eAAe,uBAAuB,CAAC","sourcesContent":["import { getSiteConfig, useIntl } from '@openedx/frontend-base';\nimport { Button, Hyperlink, Icon } from '@openedx/paragon';\nimport { Institution } from '@openedx/paragon/icons';\nimport PropTypes from 'prop-types';\n\nimport messages from './messages';\n\n/**\n * This component renders the Institution login button\n * */\nexport const RenderInstitutionButton = props => {\n  const { onSubmitHandler, buttonTitle } = props;\n\n  return (\n    <Button\n      className=\"btn-sm text-body p-0 mb-4 border-0\"\n      variant=\"link\"\n      data-event-name=\"institution_login\"\n      onClick={onSubmitHandler}\n    >\n      <Icon src={Institution} className=\"institute-icon\" />\n      {buttonTitle}\n    </Button>\n  );\n};\n\n/**\n * This component renders the page list of available institutions for login\n * */\nconst InstitutionLogistration = props => {\n  const lmsBaseUrl = getSiteConfig().lmsBaseUrl;\n  const { formatMessage } = useIntl();\n  const {\n    secondaryProviders,\n    headingTitle,\n  } = props;\n\n  return (\n    <>\n      <div className=\"d-flex justify-content-left mb-4 mt-2\">\n        <div className=\"flex-column\">\n          <h4 className=\"mb-2 font-weight-bold institutions__heading\">\n            {headingTitle}\n          </h4>\n          <p className=\"mb-2\">\n            {formatMessage(messages['institution.login.page.sub.heading'])}\n          </p>\n        </div>\n      </div>\n      <div className=\"mb-5\">\n        <table className=\"pgn__data-table table-striped table-borderless\">\n          <tbody>\n            {secondaryProviders.map(provider => (\n              <tr key={provider} className=\"pgn__data-table-row\">\n                <td>\n                  <Hyperlink\n                    className=\"btn nav-item p-0 mb-1 institutions--provider-link\"\n                    destination={lmsBaseUrl + provider.loginUrl}\n                  >\n                    {provider.name}\n                  </Hyperlink>\n                </td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n    </>\n  );\n};\n\nconst LogistrationDefaultProps = {\n  secondaryProviders: [],\n  buttonTitle: '',\n};\nconst LogistrationProps = {\n  secondaryProviders: PropTypes.arrayOf(PropTypes.shape({\n    name: PropTypes.string.isRequired,\n    loginUrl: PropTypes.string.isRequired,\n  })),\n};\n\nRenderInstitutionButton.propTypes = {\n  ...LogistrationProps,\n  buttonTitle: PropTypes.string,\n  onSubmitHandler: PropTypes.func.isRequired,\n\n};\nRenderInstitutionButton.defaultProps = {\n  ...LogistrationDefaultProps,\n};\n\nInstitutionLogistration.propTypes = {\n  ...LogistrationProps,\n  headingTitle: PropTypes.string,\n};\nInstitutionLogistration.defaultProps = {\n  ...LogistrationDefaultProps,\n  headingTitle: '',\n};\n\nexport default InstitutionLogistration;\n"]}

package/dist/common-components/NotFoundPage.d.ts

@@ -0,0 +1,2 @@
+export default NotFoundPage;
+declare function NotFoundPage(): import("react/jsx-runtime").JSX.Element;

package/dist/common-components/NotFoundPage.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormattedMessage } from '@openedx/frontend-base';
+const NotFoundPage = () => (_jsx("div", { className: "container-fluid d-flex py-5 justify-content-center align-items-start text-center", children: _jsx("p", { className: "my-0 py-5 text-muted mw-32em", children: _jsx(FormattedMessage, { id: "error.notfound.message", defaultMessage: "The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.", description: "error message when a page does not exist" }) }) }));
+export default NotFoundPage;
+//# sourceMappingURL=NotFoundPage.js.map

package/dist/common-components/NotFoundPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotFoundPage.js","sourceRoot":"","sources":["../../src/common-components/NotFoundPage.jsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE1D,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,CACzB,cAAK,SAAS,EAAC,kFAAkF,YAC/F,YAAG,SAAS,EAAC,8BAA8B,YACzC,KAAC,gBAAgB,IACf,EAAE,EAAC,wBAAwB,EAC3B,cAAc,EAAC,gHAAgH,EAC/H,WAAW,EAAC,0CAA0C,GACtD,GACA,GACA,CACP,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { FormattedMessage } from '@openedx/frontend-base';\n\nconst NotFoundPage = () => (\n  <div className=\"container-fluid d-flex py-5 justify-content-center align-items-start text-center\">\n    <p className=\"my-0 py-5 text-muted mw-32em\">\n      <FormattedMessage\n        id=\"error.notfound.message\"\n        defaultMessage=\"The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.\"\n        description=\"error message when a page does not exist\"\n      />\n    </p>\n  </div>\n);\n\nexport default NotFoundPage;\n"]}

package/dist/common-components/PasswordField.d.ts

@@ -0,0 +1,47 @@
+export default PasswordField;
+declare function PasswordField(props: any): import("react/jsx-runtime").JSX.Element;
+declare namespace PasswordField {
+    namespace defaultProps {
+        export let borderClass: string;
+        export let errorMessage: string;
+        export let handleBlur: null;
+        export let handleFocus: null;
+        export function handleChange(): void;
+        export let handleErrorChange: null;
+        export let showRequirements: boolean;
+        export let showScreenReaderText: boolean;
+        export let autoComplete: null;
+        export { noopFn as clearRegistrationBackendError };
+        export { noopFn as validateField };
+        export let validationApiRateLimited: boolean;
+    }
+    namespace propTypes {
+        let borderClass_1: PropTypes.Requireable<string>;
+        export { borderClass_1 as borderClass };
+        let errorMessage_1: PropTypes.Requireable<string>;
+        export { errorMessage_1 as errorMessage };
+        export let floatingLabel: PropTypes.Validator<string>;
+        let handleBlur_1: PropTypes.Requireable<(...args: any[]) => any>;
+        export { handleBlur_1 as handleBlur };
+        let handleFocus_1: PropTypes.Requireable<(...args: any[]) => any>;
+        export { handleFocus_1 as handleFocus };
+        let handleChange_1: PropTypes.Requireable<(...args: any[]) => any>;
+        export { handleChange_1 as handleChange };
+        let handleErrorChange_1: PropTypes.Requireable<(...args: any[]) => any>;
+        export { handleErrorChange_1 as handleErrorChange };
+        export let name: PropTypes.Validator<string>;
+        let showRequirements_1: PropTypes.Requireable<boolean>;
+        export { showRequirements_1 as showRequirements };
+        export let value: PropTypes.Validator<string>;
+        let autoComplete_1: PropTypes.Requireable<string>;
+        export { autoComplete_1 as autoComplete };
+        let showScreenReaderText_1: PropTypes.Requireable<boolean>;
+        export { showScreenReaderText_1 as showScreenReaderText };
+        export let clearRegistrationBackendError: PropTypes.Requireable<(...args: any[]) => any>;
+        export let validateField: PropTypes.Requireable<(...args: any[]) => any>;
+        let validationApiRateLimited_1: PropTypes.Requireable<boolean>;
+        export { validationApiRateLimited_1 as validationApiRateLimited };
+    }
+}
+declare function noopFn(): void;
+import PropTypes from 'prop-types';

package/dist/common-components/PasswordField.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useIntl } from '@openedx/frontend-base';
+import { Form, Icon, IconButton, OverlayTrigger, Tooltip, useToggle, } from '@openedx/paragon';
+import { Check, Remove, Visibility, VisibilityOff, } from '@openedx/paragon/icons';
+import PropTypes from 'prop-types';
+import { LETTER_REGEX, NUMBER_REGEX } from '../data/constants';
+import { validatePasswordField } from '../register/data/utils';
+import messages from './messages';
+const noopFn = () => { };
+const PasswordField = (props) => {
+    const { formatMessage } = useIntl();
+    const [isPasswordHidden, setHiddenTrue, setHiddenFalse] = useToggle(true);
+    const [showTooltip, setShowTooltip] = useState(false);
+    const { validationApiRateLimited = false, clearRegistrationBackendError = noopFn, validateField = noopFn, } = props;
+    const handleBlur = (e) => {
+        var _a;
+        const { name, value } = e.target;
+        if (name === props.name && ((_a = e.relatedTarget) === null || _a === void 0 ? void 0 : _a.name) === 'passwordIcon') {
+            return; // Do not run validations on password icon click
+        }
+        let passwordValue = value;
+        if (name === 'passwordIcon') {
+            // To validate actual password value when onBlur is triggered by focusing out the password icon
+            passwordValue = props.value;
+        }
+        if (props.handleBlur) {
+            props.handleBlur({
+                target: {
+                    name: props.name,
+                    value: passwordValue,
+                },
+            });
+        }
+        setShowTooltip(props.showRequirements && false);
+        if (props.handleErrorChange) { // If rendering from register page
+            const fieldError = validatePasswordField(passwordValue, formatMessage);
+            if (fieldError) {
+                props.handleErrorChange('password', fieldError);
+            }
+            else if (!validationApiRateLimited) {
+                validateField({ password: passwordValue });
+            }
+        }
+    };
+    const handleFocus = (e) => {
+        var _a;
+        if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.name) === 'passwordIcon') {
+            return; // Do not clear error on password icon focus
+        }
+        if (props.handleFocus) {
+            props.handleFocus(e);
+        }
+        if (props.handleErrorChange) {
+            props.handleErrorChange('password', '');
+            clearRegistrationBackendError('password');
+        }
+        setTimeout(() => setShowTooltip(props.showRequirements && true), 150);
+    };
+    const HideButton = (_jsx(IconButton, { onFocus: handleFocus, onBlur: handleBlur, name: "passwordIcon", src: VisibilityOff, iconAs: Icon, onClick: setHiddenTrue, size: "sm", variant: "secondary", alt: formatMessage(messages['hide.password']) }));
+    const ShowButton = (_jsx(IconButton, { onFocus: handleFocus, onBlur: handleBlur, name: "passwordIcon", src: Visibility, iconAs: Icon, onClick: setHiddenFalse, size: "sm", variant: "secondary", alt: formatMessage(messages['show.password']) }));
+    const placement = window.innerWidth < 768 ? 'top' : 'left';
+    const tooltip = (_jsxs(Tooltip, { id: `password-requirement-${placement}`, children: [_jsxs("span", { id: "letter-check", className: "d-flex align-items-center", children: [LETTER_REGEX.test(props.value) ? _jsx(Icon, { className: "text-success mr-1", src: Check }) : _jsx(Icon, { className: "mr-1 text-light-700", src: Remove }), formatMessage(messages['one.letter'])] }), _jsxs("span", { id: "number-check", className: "d-flex align-items-center", children: [NUMBER_REGEX.test(props.value) ? _jsx(Icon, { className: "text-success mr-1", src: Check }) : _jsx(Icon, { className: "mr-1 text-light-700", src: Remove }), formatMessage(messages['one.number'])] }), _jsxs("span", { id: "characters-check", className: "d-flex align-items-center", children: [props.value.length >= 8 ? _jsx(Icon, { className: "text-success mr-1", src: Check }) : _jsx(Icon, { className: "mr-1 text-light-700", src: Remove }), formatMessage(messages['eight.characters'])] })] }));
+    return (_jsxs(Form.Group, { controlId: props.name, isInvalid: props.errorMessage !== '', children: [_jsx(OverlayTrigger, { placement: placement, overlay: tooltip, show: showTooltip, children: _jsx(Form.Control, { as: "input", className: "form-group__form-field", type: isPasswordHidden ? 'password' : 'text', name: props.name, value: props.value, autoComplete: props.autoComplete, "aria-invalid": props.errorMessage !== '', onFocus: handleFocus, onBlur: handleBlur, onChange: props.handleChange, controlClassName: props.borderClass, trailingElement: isPasswordHidden ? ShowButton : HideButton, floatingLabel: props.floatingLabel }) }, "tooltip"), props.errorMessage !== '' && (_jsxs(Form.Control.Feedback, { className: "form-text-size", hasIcon: false, "feedback-for": props.name, type: "invalid", children: [props.errorMessage, props.showScreenReaderText && _jsx("span", { className: "sr-only", children: formatMessage(messages['password.sr.only.helping.text']) })] }, "error"))] }));
+};
+PasswordField.defaultProps = {
+    borderClass: '',
+    errorMessage: '',
+    handleBlur: null,
+    handleFocus: null,
+    handleChange: () => { },
+    handleErrorChange: null,
+    showRequirements: true,
+    showScreenReaderText: true,
+    autoComplete: null,
+    clearRegistrationBackendError: noopFn,
+    validateField: noopFn,
+    validationApiRateLimited: false,
+};
+PasswordField.propTypes = {
+    borderClass: PropTypes.string,
+    errorMessage: PropTypes.string,
+    floatingLabel: PropTypes.string.isRequired,
+    handleBlur: PropTypes.func,
+    handleFocus: PropTypes.func,
+    handleChange: PropTypes.func,
+    handleErrorChange: PropTypes.func,
+    name: PropTypes.string.isRequired,
+    showRequirements: PropTypes.bool,
+    value: PropTypes.string.isRequired,
+    autoComplete: PropTypes.string,
+    showScreenReaderText: PropTypes.bool,
+    clearRegistrationBackendError: PropTypes.func,
+    validateField: PropTypes.func,
+    validationApiRateLimited: PropTypes.bool,
+};
+export default PasswordField;
+//# sourceMappingURL=PasswordField.js.map