From 86b7b885bb494ed76136c9f27a0fb97dbb5a127d Mon Sep 17 00:00:00 2001
From: ahtesham-quraish <ahtesham.quraish@gmail.com>
Date: Thu, 28 Mar 2024 17:57:35 +0500
Subject: [PATCH] feat: create login form Description: Create login form using
 paragon form fields VAN-1882

---
 src/authn-component/index.jsx |  3 +-
 src/forms/index.jsx           |  4 +++
 src/forms/login/index.jsx     | 66 +++++++++++++++++++++++++++++++++++
 src/forms/login/index.scss    | 12 +++++++
 src/forms/login/messages.js   | 46 ++++++++++++++++++++++++
 5 files changed, 130 insertions(+), 1 deletion(-)
 create mode 100644 src/forms/index.jsx
 create mode 100644 src/forms/login/index.jsx
 create mode 100644 src/forms/login/index.scss
 create mode 100644 src/forms/login/messages.js

diff --git a/src/authn-component/index.jsx b/src/authn-component/index.jsx
index 4f3bea6a..ac9bfd73 100644
--- a/src/authn-component/index.jsx
+++ b/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>
 );
 
diff --git a/src/forms/index.jsx b/src/forms/index.jsx
new file mode 100644
index 00000000..a0f9ff7a
--- /dev/null
+++ b/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';
diff --git a/src/forms/login/index.jsx b/src/forms/login/index.jsx
new file mode 100644
index 00000000..f7771005
--- /dev/null
+++ b/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;
diff --git a/src/forms/login/index.scss b/src/forms/login/index.scss
new file mode 100644
index 00000000..b9f45d90
--- /dev/null
+++ b/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;
+  }
\ No newline at end of file
diff --git a/src/forms/login/messages.js b/src/forms/login/messages.js
new file mode 100644
index 00000000..4e42f910
--- /dev/null
+++ b/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;