added warning pop-up

RimRaider639 · Mar 6, 2023 · 51d6438 · 51d6438
1 parent 6dc65b1
commit 51d6438
Show file tree

Hide file tree

Showing 3 changed files with 125 additions and 61 deletions.
diff --git a/src/components/HomePage.jsx b/src/components/HomePage.jsx
@@ -12,6 +12,7 @@ import {
   Text,
   Button,
   GridItem,
+  useToast,
 } from "@chakra-ui/react";
 import Carousel from "better-react-carousel";
 import "../styles/Hamburger.css";
@@ -251,6 +252,20 @@ const HomePage = () => {
     { id: 13, title: "Nine West" },
   ];
 
+  const toast = useToast();
+
+  React.useEffect(() => {
+    toast({
+      title: "Allow Insecure Content",
+      description:
+        "To see all Products in the website, Kindly allow INSECURE CONTENT from your browser setting (Site Settings)",
+      status: "warning",
+      isClosable: true,
+      duration: 150000,
+      position: "top",
+    });
+  }, []);
+
   return (
     <Stack id="home" margin="auto">
       <VStack w={"88%"} margin="auto" mt={{ md: "150px", lg: "150px" }}>

diff --git a/src/components/Singin.jsx b/src/components/Singin.jsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState } from "react";
 import {
   FormControl,
   FormLabel,
@@ -13,62 +13,69 @@ import {
   Text,
   Divider,
   useToast,
-  Flex
-} from '@chakra-ui/react';
-import { Link, NavLink } from "react-router-dom"
-import { useForm } from 'react-hook-form';
-import { RiEyeCloseFill } from "react-icons/ri"
-import { IoMdEye } from "react-icons/io"
-import axios from 'axios';
-import { useNavigate } from 'react-router-dom';
-import { blue } from './Cart/colors';
+  Flex,
+} from "@chakra-ui/react";
+import { Link, NavLink } from "react-router-dom";
+import { useForm } from "react-hook-form";
+import { RiEyeCloseFill } from "react-icons/ri";
+import { IoMdEye } from "react-icons/io";
+import axios from "axios";
+import { useNavigate } from "react-router-dom";
+import { blue } from "./Cart/colors";
 function Signin() {
-  const { register, handleSubmit, formState: { errors } } = useForm();
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm();
   const [showPassword, setShowPassword] = useState(false);
   const [email, setEmail] = useState("");
   const [pwd, setPwd] = useState("");
-  const [loading, setLoading] = useState(false)
-  const toast = useToast()
-  const [go, setGo] = useState(false)
-  const navigate = useNavigate()
+  const [loading, setLoading] = useState(false);
+  const toast = useToast();
+  const [go, setGo] = useState(false);
+  const navigate = useNavigate();
   const Signin = (data) => {
     const payload = {
       email,
       pwd,
-    }
-    setLoading(true)
-    axios.post("https://wide-eyed-pinafore-duck.cyclic.app/users/login", payload)
+    };
+    setLoading(true);
+    axios
+      .post("https://wide-eyed-pinafore-duck.cyclic.app/users/login", payload)
       .then((res) => {
         console.log(res);
         if (res.data.token) {
           toast({
-            position: 'top',
-            title: 'Successful',
+            position: "top",
+            title: "Successful",
             description: res.data.message,
-            status: 'success',
+            status: "success",
             duration: 3000,
             isClosable: true,
-          })
-          setGo(true)
-          localStorage.setItem("token", res.data.token)
+          });
+          setGo(true);
+          localStorage.setItem("token", res.data.token);
         }
-        setLoading(false)
+        setLoading(false);
+      })
+      .then((res) => {
+        GetSign();
       })
-      .then(res => { GetSign() })
       .catch((err) => {
-        console.log(err)
+        console.log(err);
         if (err) {
           toast({
-            position: 'top',
-            title: 'Unsuccessfull',
+            position: "top",
+            title: "Unsuccessfull",
             description: err.response.data.message,
-            status: 'error',
+            status: "error",
             duration: 3000,
             isClosable: true,
-          })
+          });
         }
-        setLoading(false)
-      })
+        setLoading(false);
+      });
   };
 
   const GetSign = () => {
@@ -80,49 +87,61 @@ function Signin() {
         token: localStorage.getItem("token"),
         "Content-Type": "application/json",
       },
-    }
-    axios.get("https://wide-eyed-pinafore-duck.cyclic.app/users/", config)
-      .then(res => {
-        console.log(res)
+    };
+    axios
+      .get("https://wide-eyed-pinafore-duck.cyclic.app/users/", config)
+      .then((res) => {
+        console.log(res);
         if (res.data.role === "customer") {
           console.log("customer", res.data.role);
           // setGo(true)
-          navigate("/")
-
-
-        }
-        else if (res.data.role === "admin") {
-          window.location = "https://admin-lint.netlify.app/"
+          navigate("/");
+        } else if (res.data.role === "admin") {
+          window.location = "https://lint-admin.netlify.app/";
           // console.log(res.data.role)
         } else {
-          navigate("/signin")
+          navigate("/signin");
         }
       })
-      .catch(err => console.log(err))
-  }
+      .catch((err) => console.log(err));
+  };
 
   const handleShowPassword = () => setShowPassword(!showPassword);
 
   return (
-    <Box bg="gray.50" minH="100vh" py={10} >
+    <Box bg="gray.50" minH="100vh" py={10}>
       <Box maxW="xl" mx="auto" px={4}>
         <Heading as="h1" size="2xl" textAlign="center" mb={8}>
           Sign In
         </Heading>
 
-        <Box bg="white" p={8} borderRadius="md" boxShadow="lg" mt={'100px'}>
-          <form onSubmit={handleSubmit(Signin)}  >
+        <Box bg="white" p={8} borderRadius="md" boxShadow="lg" mt={"100px"}>
+          <form onSubmit={handleSubmit(Signin)}>
             <Stack spacing={4}>
               <FormControl id="email" isRequired isInvalid={errors.email}>
                 <FormLabel>Email</FormLabel>
-                <Input type="email" name="email" {...register('email', { required: true })} value={email} onChange={(e) => setEmail(e.target.value)} />
-                <FormErrorMessage>Please enter a valid email address</FormErrorMessage>
+                <Input
+                  type="email"
+                  name="email"
+                  {...register("email", { required: true })}
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                />
+                <FormErrorMessage>
+                  Please enter a valid email address
+                </FormErrorMessage>
               </FormControl>
 
               <FormControl id="password" isRequired isInvalid={errors.password}>
                 <FormLabel>Password</FormLabel>
                 <InputGroup>
-                  <Input type={showPassword ? 'text' : 'password'} name="password" {...register('password', { required: true })} value={pwd} onChange={(e) => setPwd(e.target.value)} />
+                  <Input
+                    type={showPassword ? "text" : "password"}
+                    name="password"
+                    {...register("password", { required: true })}
+                    value={pwd}
+                    onChange={(e) => setPwd(e.target.value)}
+                  />
                   <InputRightElement>
                     <Button size="sm" onClick={handleShowPassword}>
                       {showPassword ? <IoMdEye /> : <RiEyeCloseFill />}
@@ -136,18 +155,48 @@ function Signin() {
                <NavLink to="/signin" > <Button type="submit" colorScheme="blue">Sign In</Button> </NavLink>
                
              } */}
-              <Button type="submit" backgroundColor={'gray.200'} isLoading={loading}
-                loadingText='Signing In'
-                colorScheme='teal'
-                variant='outline' onClick={GetSign}>Sign In</Button>
+              <Button
+                type="submit"
+                backgroundColor={"gray.200"}
+                isLoading={loading}
+                loadingText="Signing In"
+                colorScheme="teal"
+                variant="outline"
+                onClick={GetSign}>
+                Sign In
+              </Button>
             </Stack>
           </form>
         </Box>
-
       </Box>
-      <Text fontSize={'10px'} textAlign={'center'} pb={'20px'} marginTop={'10px'}>By signing into your account, you agree to Belk's Privacy Policy & Terms of Use.</Text>
-      <Divider orientation='vertical' width={'20%'} mt={'50px'} margin={'auto'} borderColor="gray.500" borderWidth="1px" />
-      <Flex w="100%" justify={'center'}> <Link to='/register' color='blue.500' ><Button border={'2px solid'} borderColor={blue} mt='20px' color={blue}>Create Account</Button> </Link></Flex>
+      <Text
+        fontSize={"10px"}
+        textAlign={"center"}
+        pb={"20px"}
+        marginTop={"10px"}>
+        By signing into your account, you agree to Belk's Privacy Policy & Terms
+        of Use.
+      </Text>
+      <Divider
+        orientation="vertical"
+        width={"20%"}
+        mt={"50px"}
+        margin={"auto"}
+        borderColor="gray.500"
+        borderWidth="1px"
+      />
+      <Flex w="100%" justify={"center"}>
+        {" "}
+        <Link to="/register" color="blue.500">
+          <Button
+            border={"2px solid"}
+            borderColor={blue}
+            mt="20px"
+            color={blue}>
+            Create Account
+          </Button>{" "}
+        </Link>
+      </Flex>
     </Box>
   );
 }

diff --git a/src/styles/NavTop.css b/src/styles/NavTop.css
@@ -13,7 +13,7 @@
   width: 90%;
   margin: auto;
   align-items: center;
-  height: 90px;
+  height: 70px;
 }
 
 .logo > img:hover {