feat: desgin registration form pop up

src/authn-component/index.jsx

@@ -1,9 +1,12 @@
 import React from 'react';
 
+import { useIntl } from '@edx/frontend-platform/i18n';
 import PropTypes from 'prop-types';
 
+import messages from './messages';
 import BaseContainer from '../base-container';
 import { LoginForm } from '../forms';
+import RegistrationForm from '../forms/registration-popup';
 
 /**
  * Main component that holds the logic for conditionally rendering login or registration form.
@@ -14,13 +17,17 @@ import { LoginForm } from '../forms';
  * @returns {JSX.Element} The rendered BaseContainer component containing either login or registration form.
  */
 
-const AuthnComponent = ({
-  open, setOpen,
-}) => (
-  <BaseContainer open={open} setOpen={setOpen}>
-    <LoginForm />
-  </BaseContainer>
-);
+const AuthnComponent = ({ open, setOpen }) => {
+  const { formatMessage } = useIntl();
+  const registrationFooterText = formatMessage(messages.footerText);
+
+  return (
+    <BaseContainer open={open} setOpen={setOpen} footerText={registrationFooterText}>
+      <LoginForm />
+      <RegistrationForm />
+    </BaseContainer>
+  );
+};
 
 AuthnComponent.propTypes = {
   open: PropTypes.bool.isRequired,

src/authn-component/messages.jsx

@@ -0,0 +1,12 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  footerText: {
+    id: 'footer.text',
+    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: 'Text that appears on registration form stating honor code and privacy policy',
+  },
+
+});
+
+export default messages;

src/base-container/index.jsx

@@ -39,7 +39,7 @@ const BaseContainer = ({
     </ModalDialog.Body>
     {footerText && (
       <ModalDialog.Footer className="bg-dark-500 p-4.5">
-        <p className="mb-0 text-white">{footerText}</p>
+        <p className="mb-0 text-white m-auto">{footerText}</p>
       </ModalDialog.Footer>
     )}
   </ModalDialog>

src/forms/login/messages.js

@@ -27,17 +27,17 @@ const messages = defineMessages({
     description: 'Text that appears on the registration button',
   },
   loginFormEmailFieldLabel: {
-    id: 'login.form.email.field.text',
+    id: 'login.form.email.field.label',
     defaultMessage: 'Email',
     description: 'Email field label',
   },
   loginFormPasswordFieldLabel: {
-    id: 'login.form.password.field.text',
+    id: 'login.form.password.field.label',
     defaultMessage: 'Password',
     description: 'Password field label',
   },
   loginFormHeading2: {
-    id: 'login.form.or.message',
+    id: 'login.form.heading.2',
     defaultMessage: 'or',
     description: 'Heading that appears between social auth and basic login form',
   },

src/forms/registration-popup/index.jsx

@@ -0,0 +1,87 @@
+import React from 'react';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Button, Container, Form, Hyperlink, Icon,
+} from '@openedx/paragon';
+import { CheckCircleOutline, RemoveRedEye } from '@openedx/paragon/icons';
+
+import messages from './messages';
+import SocialAuthButtons from '../../common-ui/SocialAuthButtons';
+import './index.scss';
+
+const RegistrationForm = () => {
+  const { formatMessage } = useIntl();
+  return (
+    <Container size="lg" className="registration-form overflow-auto">
+      <h2 className="font-italic text-center display-1 mb-4">{formatMessage(messages.registrationFormHeading)}</h2>
+      <hr className="separator mb-3 mt-3" />
+      <div className="d-flex mb-4">
+        <span className="pt-1">
+          <Icon src={CheckCircleOutline} className="mr-2" />
+        </span>
+        <div className="text-gray-800">
+          <span className="font-weight-bold mr-2">Lorem ipsum dolor sit amet</span>
+          <br />
+          <span className="small">Lorem ipsum dolor sit amet consectetur. Morbi etiam mauris enim est morbi aliquet ipsum iaculis</span>
+        </div>
+      </div>
+      <SocialAuthButtons isLoginPage={false} />
+      <div className="text-center mt-4.5 mb-4.5">
+        {formatMessage(messages.registrationFormOrText)}
+      </div>
+      <Form>
+        <Form.Row className="mb-4">
+          <Form.Group controlId="email" className="w-100 mb-0">
+            <Form.Control
+              type="email"
+              floatingLabel={formatMessage(messages.registrationFormEmailFieldLabel)}
+            />
+          </Form.Group>
+        </Form.Row>
+        <Form.Row className="mb-4">
+          <Form.Group controlId="fullName" className="w-100 mb-0">
+            <Form.Control
+              type="text"
+              floatingLabel={formatMessage(messages.registrationFormFullNameFieldLabel)}
+            />
+          </Form.Group>
+        </Form.Row>
+        <Form.Row className="mb-4">
+          <Form.Group controlId="password" className="w-100 mb-0">
+            <Form.Control
+              type="password"
+              trailingElement={<Icon src={RemoveRedEye} />}
+              floatingLabel={formatMessage(messages.registrationFormPasswordFieldLabel)}
+            />
+          </Form.Group>
+        </Form.Row>
+        <Form.Group id="formGridCheckbox">
+          <Form.Checkbox className="text-gray-800">{formatMessage(messages.registrationFormOptOutLabel)}</Form.Checkbox>
+        </Form.Group>
+        <div className="d-flex flex-column">
+          <Button variant="primary" type="submit" className="align-self-end">
+            {formatMessage(messages.registrationFormCreateAccountButton)}
+          </Button>
+        </div>
+      </Form>
+      <div>
+        <span className="mt-5.5 text-gray-800 mt-1">
+          {formatMessage(messages.registrationFormAlreadyHaveAccountText)}
+          <Hyperlink className="p-2">
+            {formatMessage(messages.registrationFormSignInLink)}
+          </Hyperlink>
+        </span>
+        <br />
+        <span className="font-weight-normal">
+          {formatMessage(messages.registrationFormSchoolOrOrganizationLink)}
+          <Hyperlink className="p-2">
+            {formatMessage(messages.registrationFormSignInWithCredentialsLink)}
+          </Hyperlink>
+        </span>
+      </div>
+    </Container>
+  );
+};
+
+export default RegistrationForm;

src/forms/registration-popup/index.scss

@@ -0,0 +1,15 @@
+@import "~@edx/brand/paragon/variables";
+
+.registration-form {
+  padding: 3.5rem 2.5rem;
+}
+
+.separator {
+  border: 0;
+  border-top: 0.075rem solid $light-500
+}
+
+.pgn__form-control-floating-label-text:after {
+  content:"*";
+  color: $danger-500;
+}

src/forms/registration-popup/messages.jsx

@@ -0,0 +1,61 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  registrationFormHeading: {
+    id: 'registration.form.heading',
+    defaultMessage: 'Create account',
+    description: 'registration form main heading',
+  },
+  registrationFormOrText: {
+    id: 'registration.form.or.message',
+    defaultMessage: 'or',
+    description: 'Heading that appears between social auth and basic registration form',
+  },
+  registrationFormEmailFieldLabel: {
+    id: 'registration.form.email.label',
+    defaultMessage: 'Email',
+    description: 'Label for email input field',
+  },
+  registrationFormFullNameFieldLabel: {
+    id: 'registration.form.full.name.label',
+    defaultMessage: 'Full Name',
+    description: 'Label for full name input field',
+  },
+  registrationFormPasswordFieldLabel: {
+    id: 'registration.form.password.label',
+    defaultMessage: 'Password',
+    description: 'Label for password input field',
+  },
+  registrationFormOptOutLabel: {
+    id: 'registration.Form.opt.out.label',
+    defaultMessage: 'I don’t want to receive marketing messages from edX',
+    description: 'Label marketing email opt out option on registration form',
+  },
+  registrationFormCreateAccountButton: {
+    id: 'registration.form.continue.button',
+    defaultMessage: 'Create an account for free',
+    description: 'Text for submit button',
+  },
+  registrationFormAlreadyHaveAccountText: {
+    id: 'registration.form.already.have.account.text',
+    defaultMessage: 'Already have an account?',
+    description: 'Text for registration button',
+  },
+  registrationFormSignInLink: {
+    id: 'registration.form.sign.in.link',
+    defaultMessage: 'Sign In',
+    description: 'Text for sign in link',
+  },
+  registrationFormSchoolOrOrganizationLink: {
+    id: 'registration.form.account.school.organization.text',
+    defaultMessage: 'Have an account through school or organization?',
+    description: 'Label for link that leads learners to the institution login page',
+  },
+  registrationFormSignInWithCredentialsLink: {
+    id: 'registration.form.sign.in.with.credentials.link',
+    defaultMessage: 'Sign in with your credentials',
+    description: 'Text for signing in with credentials',
+  },
+});
+
+export default messages;