From 4d8f34218added2a85a594c8f6c4639b2ba13cfd Mon Sep 17 00:00:00 2001
From: Keshav Kishor Ram <ramabishek40@gmail.com>
Date: Thu, 10 Mar 2022 16:57:01 +0545
Subject: [PATCH] Create the Login component and reuse the register component's
 scss in login component

---
 src/app/Interfaces/ILogin.ts                  |  3 ++
 src/app/components/Layout/Layout.tsx          |  2 ++
 src/app/components/Login/Login.module.scss    | 17 +++++++++++
 .../components/Login/Login.module.scss.d.ts   |  3 ++
 src/app/components/Login/Login.tsx            | 30 +++++++++++++++++++
 .../components/Register/Register.module.scss  | 16 ++++++++--
 .../Register/Register.module.scss.d.ts        |  1 +
 7 files changed, 70 insertions(+), 2 deletions(-)
 create mode 100644 src/app/Interfaces/ILogin.ts
 create mode 100644 src/app/components/Login/Login.module.scss
 create mode 100644 src/app/components/Login/Login.module.scss.d.ts
 create mode 100644 src/app/components/Login/Login.tsx

diff --git a/src/app/Interfaces/ILogin.ts b/src/app/Interfaces/ILogin.ts
new file mode 100644
index 0000000..369e627
--- /dev/null
+++ b/src/app/Interfaces/ILogin.ts
@@ -0,0 +1,3 @@
+export interface ILogin{
+
+                      }
\ No newline at end of file
diff --git a/src/app/components/Layout/Layout.tsx b/src/app/components/Layout/Layout.tsx
index fa3061b..42a8de2 100644
--- a/src/app/components/Layout/Layout.tsx
+++ b/src/app/components/Layout/Layout.tsx
@@ -6,6 +6,7 @@ import Cart from "app/components/Cart/Cart";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import PageNotFound from "app/components/PageNotFound/PageNotFound";
 import Register from "app/components/Register/Register";
+import Login from "app/components/Login/Login";
 const Layout = React.memo(() => {
   return (
     <Router>
@@ -15,6 +16,7 @@ const Layout = React.memo(() => {
       <Routes>
         <Route path="/" element={<Homepage />} />
         <Route path="/register" element={<Register />} />
+        <Route path="/login" element={<Login />} />
         <Route path="/cart" element={<Cart />} />
         <Route path="*" element={<PageNotFound />} />
       </Routes>
diff --git a/src/app/components/Login/Login.module.scss b/src/app/components/Login/Login.module.scss
new file mode 100644
index 0000000..9d09c21
--- /dev/null
+++ b/src/app/components/Login/Login.module.scss
@@ -0,0 +1,17 @@
+.login {
+  min-height: 80vh;
+  padding: 40px 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.form {
+  border: 1px solid rgba($color: #000000, $alpha: 0.1);
+  padding: 20px;
+}
+
+.formTitle {
+  font-family: "Cabin", sans-serif;
+  margin-bottom: 10px;
+}
diff --git a/src/app/components/Login/Login.module.scss.d.ts b/src/app/components/Login/Login.module.scss.d.ts
new file mode 100644
index 0000000..7260bf3
--- /dev/null
+++ b/src/app/components/Login/Login.module.scss.d.ts
@@ -0,0 +1,3 @@
+export const login: string;
+export const form: string;
+export const formTitle: string;
diff --git a/src/app/components/Login/Login.tsx b/src/app/components/Login/Login.tsx
new file mode 100644
index 0000000..35ea0e1
--- /dev/null
+++ b/src/app/components/Login/Login.tsx
@@ -0,0 +1,30 @@
+import React, { useState } from "react";
+import styles from "app/components/Register/Register.module.scss";
+import InputLabelGroup from "../InputLabelGroup/InputLabelGroup";
+import { Formik, Form } from "formik";
+import PrimaryButton from "app/components/Buttons/PrimaryButton/PrimaryButton";
+const Login = () => {
+  const initialValues = { email: "", password: "" };
+  const [formData, setFormData] = useState(initialValues);
+
+  return (
+    <Formik
+      initialValues={initialValues}
+      onSubmit={(values) => setFormData(values)}
+    >
+      <div className={styles.login}>
+        <Form className={styles.form}>
+          <h2 className={styles.formTitle}>Login</h2>
+          <p className={styles.formDescription}>
+            Please login to unleash the features of WooleSale that only true
+            customers can have.
+          </p>
+          <InputLabelGroup name="email" label="Email" type="email" />
+          <InputLabelGroup name="password" label="Password" type="password" />
+          <PrimaryButton type="submit">Login</PrimaryButton>
+        </Form>
+      </div>
+    </Formik>
+  );
+};
+export default Login;
diff --git a/src/app/components/Register/Register.module.scss b/src/app/components/Register/Register.module.scss
index b86dadf..2395679 100644
--- a/src/app/components/Register/Register.module.scss
+++ b/src/app/components/Register/Register.module.scss
@@ -6,6 +6,16 @@
   padding: 40px 20px;
   gap: 20px;
 }
+.login {
+  min-height: 80vh;
+  display: flex;
+  justify-content: center;
+  padding: 40px 20px;
+  align-items: center;
+  min-width: 270px;
+  max-width: 500px;
+  margin: auto;
+}
 
 .form {
   border: 1px solid rgba($color: #000000, $alpha: 0.1);
@@ -58,7 +68,8 @@
   }
 }
 @media only screen and(max-width:425px) {
-  .register {
+  .register,
+  .login {
     padding: 20px;
   }
   .helperSection {
@@ -66,7 +77,8 @@
   }
 }
 @media only screen and(max-width:375px) {
-  .register {
+  .register,
+  .login {
     padding: 10px;
   }
 }
diff --git a/src/app/components/Register/Register.module.scss.d.ts b/src/app/components/Register/Register.module.scss.d.ts
index 814e4f1..e4f3149 100644
--- a/src/app/components/Register/Register.module.scss.d.ts
+++ b/src/app/components/Register/Register.module.scss.d.ts
@@ -1,4 +1,5 @@
 export const register: string;
+export const login: string;
 export const form: string;
 export const formTitle: string;
 export const formDescription: string;