Added new component Login Form using Formik

PoojaSharma291 · Jul 15, 2021 · abc1d7c · abc1d7c
1 parent 540d62c
commit abc1d7c
Show file tree

Hide file tree

Showing 6 changed files with 182 additions and 72 deletions.
diff --git a/package.json b/package.json
@@ -10,8 +10,10 @@
     "@types/node": "^12.20.15",
     "@types/react": "^16.14.8",
     "@types/react-dom": "^16.9.13",
+    "formik": "^2.2.9",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "typescript": "^4.3.2",
     "web-vitals": "^0.2.4",
@@ -51,5 +53,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/react-router-dom": "^5.1.8"
   }
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,12 +1,44 @@
 import React from 'react';
 import "./App.css";
 import RegistrationForm  from "./components/RegistrationForm";
+import LoginForm from './components/Login/LoginForm';
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  Link
+} from "react-router-dom";
 
 function App() {
   return (
-    <div className="App">
-      <RegistrationForm></RegistrationForm>
-    </div>
+    <Router>
+      <div className="App">
+        <nav>
+          <ul>
+            <li>
+              <Link to="/">Login</Link>
+            </li>
+            <li>
+              <Link to="/registerForm">Registration</Link>
+            </li>
+          </ul>
+        </nav>
+
+        {/* A <Switch> looks through its children <Route>s and
+            renders the first one that matches the current URL. */}
+        <Switch>
+          <Route path="/login">
+          <LoginForm></LoginForm>
+          </Route>
+          <Route path="/registerForm">
+          <RegistrationForm></RegistrationForm>
+          </Route>
+          <Route path="/">
+          <LoginForm/>
+          </Route>
+        </Switch>
+      </div>
+    </Router>
   );
 }
 

diff --git a/src/components/Login/LoginForm.css b/src/components/Login/LoginForm.css
@@ -0,0 +1,23 @@
+.heading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: crimson;
+    font-weight: bold;
+  }
+  .labelField {
+    font-weight: bolder;
+  }
+  .inputField {
+    margin-left: 1%;
+  }
+  .buttonField {
+    margin-left: 25%;
+  }
+  .errorMsg {
+    display: block;
+    font-weight: bold;
+    font-size: 12px;
+    color: crimson;
+  }
+
diff --git a/src/components/Login/LoginForm.tsx b/src/components/Login/LoginForm.tsx
@@ -0,0 +1,50 @@
+import "./LoginForm.css";
+import { useState } from "react";
+import { Formik, Field, Form, ErrorMessage } from 'formik';
+
+function LoginForm() {
+
+    const handleValidation = () => {
+        console.log("Validation was invoked");
+    };
+    return (
+        <>
+            <h1>Sign Up</h1>
+            <Formik
+                initialValues={{
+                    email: '',
+                    password: '',
+                    confirmPassword: '',
+                }}
+                onSubmit={async (values) => {
+                    await new Promise((r) => setTimeout(r, 500));
+                    alert(JSON.stringify(values, null, 2));
+                }}
+                validate = {handleValidation}
+            >
+                <Form>
+                    <label htmlFor="email">Email id</label>
+                    <Field id="email" name="email" placeholder="Enter Email" type="email"/>
+                    {/* <ErrorMessage name="email" >{error}</ErrorMessage> */}
+
+                    <label htmlFor="password">Password</label>
+                    <Field id="password" name="password" placeholder="Enter Password" type="password" />
+                    {/* <ErrorMessage name="password" >{error}</ErrorMessage> */}
+
+                    <label htmlFor="confirmPassword">Confirm Password</label>
+                    <Field
+                        id="confirmPassword"
+                        name="confirmPassword"
+                        placeholder="Confirm Password"
+                        type="password"
+                    />
+                    {/* <ErrorMessage name="confirmPassword" >{error}</ErrorMessage> */}
+
+                    <button type="submit">Submit</button>
+                </Form>
+            </Formik>
+        </>
+    )
+}
+
+export default LoginForm;
diff --git a/src/components/RegistrationForm.css b/src/components/RegistrationForm.css
@@ -1,16 +1,22 @@
-.heading{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color:crimson;
-    font-weight: bold;
-}
-.labelField{
+.heading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: crimson;
   font-weight: bold;
 }
-.inputField{
- margin-left: 1%;
+.labelField {
+  font-weight: bolder;
+}
+.inputField {
+  margin-left: 1%;
+}
+.buttonField {
+  margin-left: 25%;
+}
+.errorMsg {
+  display: block;
+  font-weight: bold;
+  font-size: 12px;
+  color: crimson;
 }
-.buttonField{
- margin-left: 25%;
-}