feat: create login form

Description:
Create login form using paragon form fields
VAN-1882

src/authn-component/index.jsx

@@ -3,6 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import BaseContainer from '../base-container';
+import LoginForm from '../forms/login';
 
 /**
  * Main component that holds the logic for conditionally rendering login or registration form.
@@ -17,7 +18,7 @@ const AuthnComponent = ({
   open, setOpen,
 }) => (
   <BaseContainer open={open} setOpen={setOpen}>
-    <div>Login form</div>
+    <LoginForm />
   </BaseContainer>
 );
 

src/forms/login/index.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Button, Container, Form, Hyperlink,
+} from '@openedx/paragon';
+
+import messages from './messages';
+import SocialAuthButton from '../../common-ui/SocialAuthButtons';
+
+import './index.scss';
+
+/**
+ * Login form component that holds the login form functionality.
+ *
+ * @returns {JSX.Element} The rendered login component along with social auth buttons.
+ */
+
+const LoginForm = () => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Container size="lg" className="w-100 h-100 overflow-auto form-layout">
+      <h1 className="display-1 form-heading mb-4">{formatMessage(messages.loginFormHeadingText)}</h1>
+      <SocialAuthButton />
+      <div className="text-center mb-4.5 mt-4.5">
+        {formatMessage(messages.loginFormOrMsg)}
+      </div>
+      <Form>
+        <Form.Row className="mb-4">
+          <Form.Group controlId="formGridEmail" className="w-100 m-0">
+            <Form.Control
+              type="email"
+              floatingLabel="Email"
+            />
+          </Form.Group>
+        </Form.Row>
+        <Form.Row className="mb-3">
+          <Form.Group controlId="formGridPassword" className="w-100 m-0">
+            <Form.Control
+              type="password"
+              floatingLabel="Password"
+            />
+          </Form.Group>
+        </Form.Row>
+        <Form.Row>
+          <Hyperlink className="hyper-link">
+            {formatMessage(messages.loginFormForgotPasswordButtonText)}
+          </Hyperlink>
+        </Form.Row>
+        <Form.Row className="mt-6 mb-4.5">
+          <Button className="w-100" variant="primary">{formatMessage(messages.loginFormSignInButtonText)}</Button>
+        </Form.Row>
+        <Form.Row>
+          <span>
+            {formatMessage(messages.loginFormSignUpHelpingText)}&nbsp;
+            <Hyperlink className="hyper-link">
+              {formatMessage(messages.loginFormSignUpLink)}
+            </Hyperlink>
+          </span>
+        </Form.Row>
+      </Form>
+    </Container>
+  );
+};
+
+export default LoginForm;

src/forms/login/index.scss

@@ -0,0 +1,18 @@
+.form-layout {
+    padding: 3.5rem 2.5rem 3.5rem 2.5rem;
+}
+
+.form-heading {
+    text-align: center !important;
+    font-style: italic;
+}
+
+.hyper-link {
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+.pgn__form-control-floating-label-text:after {
+    content:"*";
+    color: #AB0D02;
+  }

src/forms/login/messages.js

@@ -0,0 +1,36 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  loginFormHeadingText: {
+    id: 'login.form.heading.text',
+    defaultMessage: 'Login',
+    description: 'Text of heading',
+  },
+  loginFormSignInButtonText: {
+    id: 'login.form.signin.button.text',
+    defaultMessage: 'Sign in',
+    description: 'Text of sign in button',
+  },
+  loginFormForgotPasswordButtonText: {
+    id: 'login.form.forgot.password.button.text',
+    defaultMessage: 'Forgot Password?',
+    description: 'Button text for forgot password',
+  },
+  loginFormSignUpHelpingText: {
+    id: 'login.form.sign.up.helping.text',
+    defaultMessage: 'Don’t have an account yet?',
+    description: 'Description of sign up link helping text',
+  },
+  loginFormSignUpLink: {
+    id: 'login.form.sign.up.link.text',
+    defaultMessage: 'Create an account',
+    description: 'Description of sign up link',
+  },
+  loginFormOrMsg: {
+    id: 'login.form.or.message',
+    defaultMessage: 'or',
+    description: 'Text of or',
+  },
+});
+
+export default messages;