diff --git a/example/index.jsx b/example/index.jsx index 9914eb60..cfb5abcd 100644 --- a/example/index.jsx +++ b/example/index.jsx @@ -7,14 +7,12 @@ import { AppProvider } from '@edx/frontend-platform/react'; import { initialize, subscribe, APP_READY } from '@edx/frontend-platform'; import './index.scss'; -import BaseContainer from '../src/base-container' +import AuthnComponent from '../src/authn-component' subscribe(APP_READY, () => { ReactDOM.render( - {}}> -
Login Form
-
+ {}}/>
, document.getElementById('root'), ); diff --git a/src/authn-component/index.jsx b/src/authn-component/index.jsx new file mode 100644 index 00000000..8ffe6cec --- /dev/null +++ b/src/authn-component/index.jsx @@ -0,0 +1,43 @@ +import React from 'react'; + +import { ModalDialog } from '@openedx/paragon'; +import PropTypes from 'prop-types'; + +import BaseContainer from '../base-container'; +import './index.scss'; + +const AuthnComponent = ({ + open, setOpen, footerContext, +}) => ( + + + +
Login Form
+
+
+ {footerContext && ( + +

{footerContext}

+
+ )} +
+); + +AuthnComponent.defaultProps = { + footerContext: null, +}; + +AuthnComponent.propTypes = { + open: PropTypes.bool.isRequired, + setOpen: PropTypes.func.isRequired, + footerContext: PropTypes.string, +}; + +export default AuthnComponent; diff --git a/src/authn-component/index.scss b/src/authn-component/index.scss new file mode 100644 index 00000000..1c745c9e --- /dev/null +++ b/src/authn-component/index.scss @@ -0,0 +1,12 @@ +@import "@edx/brand/paragon/variables"; + +.modal-body-container .pgn__modal-body-content { + height: 100%; +} + +.pgn__modal-close-container { + background: $light-400; + border-radius: 50%; + border: 2px solid $light-500; +} + diff --git a/src/base-container/PrivacyPolicyFooter.jsx b/src/base-container/PrivacyPolicyFooter.jsx deleted file mode 100644 index b9e5e023..00000000 --- a/src/base-container/PrivacyPolicyFooter.jsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; - -import { useIntl } from '@edx/frontend-platform/i18n'; - -import messages from './messages'; - -const PrivacyPolicy = () => { - const { formatMessage } = useIntl(); - return ( -

- {formatMessage(messages.privacyPolicyLabel)} -

- ); -}; -export default PrivacyPolicy; diff --git a/src/base-container/index.jsx b/src/base-container/index.jsx index 8025e418..5e9be954 100644 --- a/src/base-container/index.jsx +++ b/src/base-container/index.jsx @@ -1,47 +1,25 @@ import React from 'react'; -import { ModalDialog } from '@openedx/paragon'; import PropTypes from 'prop-types'; -import LargeLayout from './layout/LargeLayout'; -import PrivacyPolicy from './PrivacyPolicyFooter'; import './index.scss'; const BaseContainer = ({ - children, open, onClose, isPrivacyPolicy, + children, }) => ( - - -
-
- {children} -
- -
- -
- - - {isPrivacyPolicy && ()} - - -); -BaseContainer.defaultProps = { - isPrivacyPolicy: false, -}; +
+
+ {children} +
+
+
+
+
+); BaseContainer.propTypes = { children: PropTypes.node.isRequired, - open: PropTypes.bool.isRequired, - onClose: PropTypes.func.isRequired, - isPrivacyPolicy: PropTypes.bool, }; export default BaseContainer; diff --git a/src/base-container/index.scss b/src/base-container/index.scss index f80ec157..2d99f328 100644 --- a/src/base-container/index.scss +++ b/src/base-container/index.scss @@ -1,22 +1,6 @@ -.modal-body-container .pgn__modal-body-content { - height: 100%; -} - -.modal-body-container .modal-body-content-layout { +.modal-body-content-layout { display: flex; width: 100%; height: 100%; } -.pgn__modal-close-container { - background: white; - border-radius: 50%; -} - -.modal-footer-content { - padding: 0 !important; -} - -.privacy-policy-content { - margin-bottom: 0px; -} \ No newline at end of file diff --git a/src/base-container/layout/LargeLayout.jsx b/src/base-container/layout/LargeLayout.jsx deleted file mode 100644 index 3dbe4692..00000000 --- a/src/base-container/layout/LargeLayout.jsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; - -import PropTypes from 'prop-types'; - -const LargeLayout = ({ children }) => ( -
- {children} -
-); - -LargeLayout.propTypes = { - children: PropTypes.node.isRequired, -}; - -export default LargeLayout; diff --git a/src/base-container/messages.js b/src/base-container/messages.js deleted file mode 100644 index dfb6927e..00000000 --- a/src/base-container/messages.js +++ /dev/null @@ -1,13 +0,0 @@ -import { defineMessages } from '@edx/frontend-platform/i18n'; - -const messages = defineMessages({ - privacyPolicyLabel: { - id: 'privacy.policy.label', - defaultMessage: 'By creating an account, you agree to the Terms of ' - + 'Service and Honor Code and you acknowledge that edX and ' - + 'each Member process your personal data in accordance with the Privacy Policy.', - description: 'Label for Privacy Policy', - }, -}); - -export default messages;