Frontend signup Cont../Frontend login functionality/Guest Login

IT18021080/Telemedicine-Chat-App/frontend/src/components/Authentication/Login.js

@@ -5,16 +5,77 @@
 
 import { Button, FormControl, FormLabel, Input, InputGroup, InputRightElement, VStack } from "@chakra-ui/react";
 import React, { useState } from "react";
+import { useToast } from "@chakra-ui/react";
+import axios from "axios";
+import { useHistory } from "react-router-dom";
 
 const Login = () => {
 
     const [show, setShow] = useState(false);
     const [email, setEmail] = useState();
     const [password, setPassword] = useState();
-
+    const [loading, setLoading] = useState(false);
+  
+    const toast = useToast();
+    const history = useHistory();
     const handleClick = () => setShow(!show);
 
-    const submitHandler = () => { };
+  const submitHandler =async() => { 
+    setLoading(true);
+    if (!email || !password) {
+      toast({
+        title: "Please Fill all the Fields",
+        status: "warning",
+        duration: 5000,
+        isClosable: true,
+        position:"bottom",
+      });
+      setLoading(false);
+      return;
+
+      }
+
+    //console.log(email,password);
+    try {
+      const config = {
+        headers: {
+          "Content-type": "application/json",
+        },
+      };
+
+      const { data } = await axios.post(
+        "/api/user/login",
+        { email, password, },
+        config
+      );
+
+      //console.log(JSON.stringfy(data));
+      toast({
+        title: "Login Successfull",
+        status: "success",
+        duration: 5000,
+        isClosable: true,
+        position:"bottom",
+      });
+
+      localStorage.setItem("userInfo", JSON.stringify(data));
+
+      setLoading(false);
+      //if the user has been succefully log in push him to chat page
+      history.push("/chats");
+
+    } catch (error) {
+      toast({//give the description of the error
+        title: "Error Occured!",
+        description: error.response.data.message,
+        status: "error",
+        duration: 5000,
+        isClosable: true,
+        position:"bottom",
+      });
+      setLoading(false);
+    }
+    };
 
     return (
         //Use vstack to allign verticaly
@@ -23,7 +84,8 @@ const Login = () => {
 
       <FormControl id="email" isRequired>
         <FormLabel>Email</FormLabel>
-        <Input
+          <Input
+          value={email}
           placeholder="Enter Your Email"
           onChange={(e)=>setEmail(e.target.value)}
 
@@ -38,6 +100,7 @@ const Login = () => {
           <Input
           type={show?"text":"password"}
           placeholder="Enter Your Password"
+          value={password}  
           onChange={(e)=>setPassword(e.target.value)}
 
           />
@@ -56,7 +119,7 @@ const Login = () => {
         width="100%"
         style={{ marginTop: 15 }}
         onClick={submitHandler}
-      
+        isLoading={loading}
       >
         Login
 

IT18021080/Telemedicine-Chat-App/frontend/src/components/Authentication/Signup.js

@@ -6,6 +6,8 @@
 import { Button, FormControl, FormLabel, Input, InputGroup, InputRightElement, VStack } from "@chakra-ui/react";
 import React, { useState } from "react";
 import { useToast } from "@chakra-ui/react";
+import axios from "axios";
+import { useHistory } from "react-router-dom";
 
 const Signup = () => {
 
@@ -17,6 +19,7 @@ const Signup = () => {
   const [pic, setPic] = useState();
   const [loading, setLoading] = useState(false);
   const toast = useToast();
+  const history = useHistory();
 
   const handleClick = () => setShow(!show);
 
@@ -64,8 +67,72 @@ const Signup = () => {
     }
    };
 
-  const submitHandler = () => {
-    
+  const submitHandler = async() => {
+    setLoading(true);
+    //going to check is all of the fields check by user or not
+    if (!name || !email || !password || !confirmpassword) {
+      toast({
+        title: "Please Fill all the Feilds",
+        status: "warning",
+        duration: 5000,
+        isClosable: true,
+        position:"bottom",
+      });
+      setLoading(false);
+      return;
+    }
+    //going to check both of the password is match or not (password/conformpassword)
+    if (password !== confirmpassword) {
+      toast({
+        title: "Passwords Do Not Match",
+        status: "warning",
+        duration: 5000,
+        isClosable: true,
+        position:"bottom",
+      });
+      return;
+    }
+
+    //Make API request to store that in to DB
+    try {
+      const config = {
+        headers: {
+          "Content-type": "application/json",
+        },
+      };
+
+      const { data } = await axios.post(
+        "/api/user",
+        { name, email, password, pic },
+        config
+      );
+
+      //toast if registration is succesfull
+      toast({
+        title: "Registration Successfull",
+        status: "success",
+        duration: 5000,
+        isClosable: true,
+        position:"bottom",
+      });
+
+      localStorage.setItem("userInfo", JSON.stringify(data));
+
+      setLoading(false);
+      //if the user has been succefully log in push him to chat page
+      history.push("/chats");
+
+    } catch (error) {
+      toast({//give the description of the error
+        title: "Error Occured!",
+        description: error.response.data.message,
+        status: "error",
+        duration: 5000,
+        isClosable: true,
+        position:"bottom",
+      });
+      setLoading(false);
+    }
    };
 
   return (