Update

Co-Authored-By: JehanKandy  <[email protected]>
Co-Authored-By: Anupa Gamage <[email protected]>

Author: 3 people

client/package-lock.json

@@ -7,10 +7,12 @@
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "SignInUp": "node node_modules/login-signup-react/index.js --destination=src/components/LoginSignUp"
   },
   "dependencies": {
     "axios": "^1.7.2",
+    "login-signup-react": "^1.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.2.1",

client/package.json

@@ -1,7 +1,11 @@
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+
 export default function App() {
   return (
-    <h1 className="text-3xl font-bold underline">
-      Hello world!
-    </h1>
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" />
+      </Routes>
+    </BrowserRouter>
   )
 }

client/src/App.jsx

@@ -0,0 +1,60 @@
+import React, { useState } from 'react'
+import { BsMortarboardFill } from "react-icons/bs";
+import { Link } from 'react-router-dom';
+
+const SignIn = () => {
+    // for login data
+    const [LoginData, SetLoginData] = useState({
+        email: '',
+        password: ''
+    })
+
+    // send data to backend using axios
+    const headleSubmit = (e) => {
+        e.preventDefault();
+
+        // login to system
+        // this will be updated in future versions
+    }
+  return (
+    <div className='bg-gray-200 min-h-screen py-24 px-8'>
+        <div className="md:grid grid-cols-3 gap-2">
+            <div className=""></div>
+            <div className="">
+                <div className="bg-white py-16 px-8 rounded shadow-md w-full ">
+                    <center className='text-gray-500'>
+                        {/* change the Icon According to your needs */}
+                        <h1 className=''><BsMortarboardFill className='h-20 w-auto'/></h1>
+                        <p className="pt-4 text-2xl">Welcome Back</p>
+                        <p className="">Your Project Name</p>
+                    </center>
+                    <hr className='my-2'/>
+                    <div className="my-4">
+                        <form onSubmit={headleSubmit}>
+                            <div className="my-2 md:mx-8">
+                                <label htmlFor="" className=''>Email : </label>
+                                <input type="email" name="" id="" className="w-full h-12 pl-2 rounded bg-gray-200" required placeholder='Enter Email Address'
+                                onChange={e => SetLoginData({...LoginData, email:e.target.value})}/>
+                            </div>
+                            <div className="my-2 md:mx-8">
+                                <label htmlFor="" className=''>Password : </label>
+                                <input type="password" name="" id="" className="w-full h-12 pl-2 rounded bg-gray-200" required placeholder='Enter Password' 
+                                onChange={e => SetLoginData({...LoginData, password:e.target.value})}/>
+                            </div>
+                            <div className="my-2 md:mx-8">
+                                <button type='submit' className='mt-8 font-semibold w-full py-4 px-8 rounded bg-blue-500 text-white shadow-md duration-500 hover:bg-blue-600'>SignIn</button>
+                            </div>
+                        </form>
+                        <Link><p className="my-2 md:mx-8 text-blue-500 font-semibold">Forget Password ? </p></Link>
+                    </div>
+                    <hr className='my-2'/>
+                    <p className="my-4">Don't have an Account ? <Link to={'/SignUp'}><span className="text-blue-500">SignUp</span></Link></p>
+                </div>  
+            </div>
+            <div className=""></div>
+        </div>
+    </div>
+  )
+}
+
+export default SignIn