add_database

Author: Atharv-2002-Kulkarni

client/package-lock.json

@@ -6,9 +6,12 @@
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^0.26.0",
     "node-modules": "^1.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router": "^6.2.1",
+    "react-router-dom": "^5.3.0",
     "react-scripts": "5.0.0",
     "web-vitals": "^2.1.4"
   },

client/package.json

@@ -1,12 +1,15 @@
-import logo from './logo.svg';
 import './App.css';
 import Login from './Components/Login';
-
+import signup from './Components/signup';
+import { BrowserRouter as Router,Route,Switch } from 'react-router-dom';
 function App() {
-  return (
-    <div>
-      <Login />
-    </div>
+  return ( 
+    <Router>
+    <Switch>
+      <Route exact path={'/'} component={Login} />
+      <Route exact path={'/signup.js'} component={signup} />
+    </Switch>
+    </Router>
   );
 }
 

client/src/pexels-johannes-plenio-1103970.jpg client/public/pexels-johannes-plenio-1103970.jpg

@@ -1,4 +1,3 @@
-
 *{
     font-family: 'Roboto', sans-serif;
 
@@ -24,7 +23,7 @@
 }
 
 .main::before{
-    background: url("../pexels-johannes-plenio-1103970.jpg")no-repeat center center/cover;
+    background: url("D:/projectws/FindPartner/client/public/pexels-johannes-plenio-1103970.jpg")no-repeat center center/cover;
     content: "";
     position: absolute;
     width: 100%;

client/src/App.js

@@ -1,18 +1,27 @@
-import React from "react";
+import React,{useState} from "react";
+import Axios from "axios";
+import { Link } from "react-router-dom";
 import "./Login.css";
 function Login() {
+  const [userEmail,setuserEmail]=useState("");
+  const [userPassword,setuserPassword]=useState("");
+  const createinfo=()=>{
+    Axios.post("http://localhost:3001/createinfo",{
+    userEmail: userEmail,
+    userPassword: userPassword,
+    });  
+  }
+
   return (
-    <>
-    
-    <div class="main">
+    <div className="main">
       <link rel="preconnect" href="https://fonts.googleapis.com"></link>
       <form>
-        <section class="container">
+        <section className="container">
           <header>
             <h1>Log In to ProjectPartner</h1>
           </header>
           <p>
-            <label for="email">E-Mail</label>
+            <label htmlFor="email">E-Mail</label>
             <br></br>
             <input
               type="email"
@@ -21,10 +30,13 @@ function Login() {
               required
               placeholder="📧"
               autoComplete="off"
+              onChange={(event)=>{
+                setuserEmail(event.target.value);
+              }}
             />
           </p>
           <p>
-            <label for="password">Password</label>
+            <label htmlFor="password">Password</label>
             <br></br>
 
             <input
@@ -33,15 +45,19 @@ function Login() {
               id="password"
               required
               placeholder="&#128274;"
-              autoComplete="off"/>
+              autoComplete="off"
+              onChange={(event)=>{
+                setuserPassword(event.target.value);
+              }}
+              />
           </p>
           <p>
-            <input type="button" name="button" id="btn" value="Login" />
+            <input type="button" name="button" id="btn" value="Login" onClick={createinfo}/>
+            <Link to={'/signup.js'}>signup</Link>
           </p>
         </section>
       </form>
     </div>
-    </>
   );
 }
 

client/src/Components/Login.css

@@ -0,0 +1,16 @@
+import React from "react";
+import { Link } from "react-router-dom";
+function signup() {
+    return (
+      <div>
+        Hi
+        kdsafoiawrgvonar
+        dsfoubavoasd
+        vowbro
+        <input type="text"></input>
+        <Link to={'/'}>Login</Link>
+      </div>
+    );
+  }
+  
+export default signup;

client/src/Components/Login.js

@@ -2,12 +2,13 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
+import { BrowserRouter } from 'react-router-dom';
 import reportWebVitals from './reportWebVitals';
 
 ReactDOM.render(
-  <React.StrictMode>
+  <BrowserRouter>
     <App />
-  </React.StrictMode>,
+    </BrowserRouter>,
   document.getElementById('root')
 );