connected frontend to backend

Server/.gitignore

@@ -2,4 +2,4 @@
 node_modules
 
 #dotenv files
-key.env
+# key.env

Server/emails/welcome.js

@@ -27,5 +27,4 @@ mailTransporter.sendMail(mailDetails, function(err, data) {
 
 module.exports = {
     sendWelcomeEmail
-}
-
+}

Server/key.env

@@ -0,0 +1,3 @@
+PORT = 5000
+MONGODB_CONNECTION = "mongodb://127.0.0.1:27017/ClaimPrizeDB"
+SECRET_KEY_JWT = "sample_password"

client/.env

@@ -1 +1 @@
-REACT_APP_API=
+REACT_APP_API=http://localhost:5000/

client/src/components/about.jsx

@@ -1,17 +1,20 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import Navbar from './nav';
+import { useNavigate } from 'react-router-dom';
+import SessionService from "../services/SessionService";
 import "../styles/register.css";
 import registrationImg from "../assets/registration_img.png";
 
 const About = () => {
+  const navigate = useNavigate();
   // const [name,setName]= useState("User Name");
   // const [email,setEmail]= useState("User Email");
   // const [phone,setPhone]= useState("User Phone");
   // const [address,setAddress]= useState("User Address");
   // const [city,setCity]= useState("User City");
   // const [state,setState]= useState("User State");
   // const [pin, setPin] = useState("User Pincode");
-  
+
   // const onNameChange = (name) => {  
   //   setName(name);
   // }
@@ -35,40 +38,47 @@ const About = () => {
   //   setState(state);
   // }
 
+  useEffect(() => {
+    const token = SessionService.getSession();
+    if (!token) {
+      navigate("/login")
+    }
+    // console.log('token', token);
+  }, [])
 
   return <>
     < Navbar />
     <div className="registration">
-        <img src={registrationImg} alt="registration"  className="registrationImage" />
-      
+      <img src={registrationImg} alt="registration" className="registrationImage" />
+
       <div className="registrationForm">
         <div>
           <h1 className='header'>User Details</h1>
         </div>
-          <p className="user-details">
-            <i class="fa fa-user" aria-hidden="true"></i> name
-          </p>
-          <p className="user-details">
-            <i class="fa fa-envelope" aria-hidden="true"></i>email
-          </p>          
-          <p className="user-details">
-            <i class="fa fa-phone" aria-hidden="true"></i>phone
-          </p>
-          <p className="user-details">
-            <i class="fa fa-address-card" aria-hidden="true"></i>address
-          </p>
-          <p className="user-details">
-            <i class="fa fa-home" aria-hidden="true"></i>city
-          </p>
-          <p className="user-details">
-            <i class="fa fa-location-arrow" aria-hidden="true"></i>state
-          </p>          
-          <p className="user-details">
-            <i class="fa fa-map-marker" aria-hidden="true"></i>pin
-          </p>
+        <p className="user-details">
+          <i class="fa fa-user" aria-hidden="true"></i> name
+        </p>
+        <p className="user-details">
+          <i class="fa fa-envelope" aria-hidden="true"></i>email
+        </p>
+        <p className="user-details">
+          <i class="fa fa-phone" aria-hidden="true"></i>phone
+        </p>
+        <p className="user-details">
+          <i class="fa fa-address-card" aria-hidden="true"></i>address
+        </p>
+        <p className="user-details">
+          <i class="fa fa-home" aria-hidden="true"></i>city
+        </p>
+        <p className="user-details">
+          <i class="fa fa-location-arrow" aria-hidden="true"></i>state
+        </p>
+        <p className="user-details">
+          <i class="fa fa-map-marker" aria-hidden="true"></i>pin
+        </p>
       </div>
     </div>
-    </>;
+  </>;
 };
 
 export default About;

client/src/components/login.jsx

@@ -1,11 +1,13 @@
 import React, {useState} from "react";
+import { useNavigate } from 'react-router-dom';
 import logo from '../assets/logo512.png'
 import Navbar from './nav';
 import AuthService from "../services/AuthService";
 import Modal from "./modal";
 
 const Login = (props) => {
 
+  const navigate = useNavigate();
   const [email,setEmail] = useState("");
   const [password,setPassword] = useState("");
   const [modalOpen,setModalOpen] = useState(false);
@@ -27,7 +29,9 @@ const Login = (props) => {
         AuthService.login(email,password).then(
         (response) => {
 
-          console.log(email)
+          console.log(response);
+          alert("Logged in successfully!");
+          navigate('/about');
         },
         (error) => {
             const resMessage =

client/src/components/register.jsx

@@ -1,4 +1,5 @@
 import React ,{ useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
 import "../styles/register.css";
 import registration_img from "../assets/registration_img.png";
 import Navbar from './nav';
@@ -7,7 +8,8 @@ import { Link } from "react-router-dom";
 
 
 const Register = () => {
-
+
+  const navigate = useNavigate();
   const nameRef = useRef();
   const emailRef = useRef();
   const phoneNumberRef= useRef();
@@ -22,7 +24,11 @@ const Register = () => {
       password : passwordRef.current.value,
       cpassword : cpasswordRef.current.value}
 
+      // console.log('[data]', data);
+
       AuthService.register(data);
+      alert("Registration Successful!! Log in to continue...");
+      navigate('/login');
   }
   return <>
   <Navbar /><div className="registration">

client/src/services/AuthService.js

@@ -10,8 +10,7 @@ const login = (email, password) => {
         if (response.data.accessToken) {
           console.log(response.data.accessToken)
           //Session Saving
-          SessionService.setSession(response.data);
-
+          SessionService.setSession(response.data);          
         }
         return response.data;
       });