feat: design login form

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';
 
 /**
  * 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/index.jsx

@@ -0,0 +1,4 @@
+// TODO: This will be removed when register form will be exported
+/* eslint-disable import/prefer-default-export */
+
+export { default as LoginForm } from './login';

src/forms/login/index.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Button, Container, Form, Hyperlink,
+} from '@openedx/paragon';
+
+import messages from './messages';
+import SocialAuthButtons 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 font-italic text-center mb-4">{formatMessage(messages.loginFormHeading1)}</h1>
+      <SocialAuthButtons />
+      <div className="text-center mb-4.5 mt-4.5">
+        {formatMessage(messages.loginFormHeading2)}
+      </div>
+      <Form>
+        <Form.Row className="mb-4">
+          <Form.Group controlId="email" className="w-100 m-0">
+            <Form.Control
+              type="email"
+              floatingLabel={formatMessage(messages.loginFormEmailFieldLabel)}
+            />
+          </Form.Group>
+        </Form.Row>
+        <Form.Row className="mb-3">
+          <Form.Group controlId="password" className="w-100 m-0">
+            <Form.Control
+              type="password"
+              floatingLabel={formatMessage(messages.loginFormPasswordFieldLabel)}
+            />
+          </Form.Group>
+        </Form.Row>
+        <Form.Row>
+          <Hyperlink className="hyper-link">
+            {formatMessage(messages.loginFormForgotPasswordButton)}
+          </Hyperlink>
+        </Form.Row>
+        <Form.Row className="mt-6 mb-4.5">
+          <Button className="w-100" variant="primary">{formatMessage(messages.loginFormSignInButton)}</Button>
+        </Form.Row>
+        <Form.Row>
+          <span>
+            {formatMessage(messages.loginFormRegistrationHelpText)}&nbsp;
+          </span>
+          <Hyperlink className="hyper-link">
+            {formatMessage(messages.loginFormRegistrationLink)}
+          </Hyperlink>
+        </Form.Row>
+      </Form>
+    </Container>
+  );
+};
+
+export default LoginForm;

src/forms/login/index.scss

@@ -0,0 +1,12 @@
+.form-layout {
+    padding: 3.5rem 2.5rem 3.5rem 2.5rem;
+  }
+
+  .hyper-link {
+    cursor: pointer;
+  }
+
+  .pgn__form-control-floating-label-text:after {
+    content:"*";
+    color: #AB0D02;
+  }

src/forms/login/messages.js

@@ -0,0 +1,46 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  loginFormHeading1: {
+    id: 'login.form.heading.1',
+    defaultMessage: 'Login',
+    description: 'Login form main heading',
+  },
+  loginFormSignInButton: {
+    id: 'login.form.signin.button.text',
+    defaultMessage: 'Sign in',
+    description: 'Sign in button label that appears on login page',
+  },
+  loginFormForgotPasswordButton: {
+    id: 'login.form.forgot.password.button.text',
+    defaultMessage: 'Forgot Password?',
+    description: 'Button text for forgot password',
+  },
+  loginFormRegistrationHelpText: {
+    id: 'login.form.sign.up.helping.text',
+    defaultMessage: 'Don’t have an account yet?',
+    description: 'Sign up link help text',
+  },
+  loginFormRegistrationLink: {
+    id: 'login.form.sign.up.link.text',
+    defaultMessage: 'Create an account',
+    description: 'Text that appears on the registration button',
+  },
+  loginFormEmailFieldLabel: {
+    id: 'login.form.email.field.text',
+    defaultMessage: 'Email',
+    description: 'Email field label',
+  },
+  loginFormPasswordFieldLabel: {
+    id: 'login.form.password.field.text',
+    defaultMessage: 'Password',
+    description: 'Password field label',
+  },
+  loginFormHeading2: {
+    id: 'login.form.or.message',
+    defaultMessage: 'or',
+    description: 'Heading that appears between social auth and basic login form',
+  },
+});
+
+export default messages;