Merge pull request #58 from Etlas-SCU/auth

Auth

src/components/Context/Context.js

@@ -1,4 +1,4 @@
-import { createContext, useState } from "react";
+import { createContext, useEffect, useState } from "react";
 import pic1 from "../../images/Pics/pic1.png";
 import pic2 from "../../images/Pics/pic2.png";
 import neith from '../../images/Pics/neith.png'
@@ -14,8 +14,12 @@ export const Provider = (props) => {
   const [selectedLanguage, setSelectedLanguage] = useState("English");
   const [buttonPopup, setButtonPopup] = useState([false, ""]);
   const [massagePopup, setMassagePopup] = useState(false);
-  const [LogIn ,setLogIn]=useState(false)
+  var access=localStorage.getItem("access")
+  const [LogIn ,setLogIn]=useState(access!==null)
 
+  useEffect(()=>{
+     setLogIn(access!==null)
+  },[access])
 
   const[statusScore,setStatusScore]=useState(0);
   const[MonumentsScore,setMonumentsScore]=useState(0);
@@ -179,7 +183,7 @@ const landmarksQ=[
     massagePopup,
     setMassagePopup,
     LogIn,
-    setLogIn
+    setLogIn,
 
   };
 

src/components/Header/Nav.js

@@ -13,6 +13,7 @@ import { useTranslation } from "react-i18next";
 import Popup from "./registe-signin/PopupOutline/Popup";
 import profile from "../../images/Pngs/Profile.png";
 import arrow from "../../images/Pngs/symbols_arrow.png";
+import { Logout } from "../../repositories/authRepo";
 
 export default function Nav() {
   const { t, i18n } = useTranslation();
@@ -68,7 +69,10 @@ export default function Nav() {
         <Box p="50px 0px 10px 0px" lineHeight="60px">
           {NavList}
           {LogIn ? (
+            <>
             <NavLink to="/profile" style={{marginRight:"2.5vw"}}>profile</NavLink>
+            <button style={{margin:"0 auto" ,display:"block", backgroundColor: "#003441" }} onClick={Logout} className={styles.nav__list__btn} >LogOut</button>
+            </>
           ) : (
             <>
               <button

src/components/Header/registe-signin/Signin/Register.js

@@ -13,11 +13,16 @@ import { Context } from "../../../Context/Context";
 import GoogleSignIn from "../../google-signin/GoogleSignIn";
 import Otp from "../../../Otp/Otp";
 import { useState } from "react";
+import { RequestOtp, register } from "../../../../repositories/authRepo";
+import MPopUp from "../../../PopUp_Message/error/MPopUp";
 
 export default function Register() {
   const { t } = useTranslation();
-  const { setButtonPopup } = useContext(Context);
+  const { setButtonPopup, setMassagePopup } = useContext(Context);
   const [otp, setOtp] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [popup, setPopup] = useState(null);
+  const [Email,setEmail]=useState(null)
 
   const initialValues = {
     name: "",
@@ -36,21 +41,60 @@ export default function Register() {
       .matches(/[a-zA-Z]/, t("nav.passwordLetters")),
   });
 
-  const onSubmit = (values) => {
-    console.log(values);
-    setOtp(true);
-    console.log(otp)
-  };
+  function  handleResendOtp(email){
+    var jsonBody={
+      email:email
+    }
+    RequestOtp(jsonBody).then((res) => {
+      if (res.isError) {
+        setMassagePopup(true);
+        setPopup(<MPopUp type="error">faild send otp</MPopUp>);
+      } else {
+        setMassagePopup(true);
+        setPopup(<MPopUp type="done">otp sended</MPopUp>);
+      }
+    });
+  }
 
-  const handleSubmitOtp =()=>{
-    setButtonPopup([false, ""]);
+  function handleRegister(jsonBody) {
+    register(jsonBody).then((result) => {
+      if (!result.isError) {
+        setOtp(true);
+        handleResendOtp(jsonBody.email)
+      } else {
+        setMassagePopup(true);
+        setIsLoading(false);
+        setPopup(<MPopUp type="error">{result.body.email}</MPopUp>);
+      }
+    });
   }
+
+  const onSubmit = (values, { resetForm }) => {
+    var jsonBody = {
+      full_name: values.name,
+      email: values.email,
+      phone_number: values.phone,
+      address: values.address,
+      password: values.password,
+      confirm_password: values.password,
+    };
+    localStorage.removeItem("access");
+    setIsLoading(true);
+    handleRegister(jsonBody);
+    setTimeout(() => {
+      resetForm({ values: initialValues });
+    }, 2000);
+
+    setEmail(values.email)
+  };
+
   return (
     <>
+      {popup}
       <img className={styles.popup__img} src={reg} alt="formImg" />
       {otp ? (
         <Box m="50px 0 0 20px " width="60%">
-          <Otp verfiy={handleSubmitOtp} />
+          <Otp email={Email}/>
         </Box>
       ) : (
         <Stack

src/components/Header/registe-signin/Signin/SignIn.js

@@ -16,9 +16,10 @@ import MPopUp from "../../../PopUp_Message/error/MPopUp";
 
 export default function SignIn() {
   const { t } = useTranslation();
-  const { setButtonPopup, setMassagePopup ,setLogIn} = useContext(Context);
+  const { setButtonPopup, setMassagePopup, setLogIn } =
+    useContext(Context);
   const [isLoading, setIsLoading] = useState(false);
-
+  const [popup,setPopup]=useState(null)
 
   const initialValues = {
     email: "",
@@ -33,30 +34,39 @@ export default function SignIn() {
       .matches(/[a-zA-Z]/, t("nav.passwordLetters")),
   });
 
-  function handleLogin(jsonBody){
+  function handleLogin(jsonBody) {
     Login(jsonBody).then((result) => {
       if (!result.isError) {
         setLogIn(true);
         setMassagePopup(true);
         setTimeout(() => {
           setButtonPopup([false, ""]);
         }, 2000);
+        setPopup(<MPopUp type="done">you are Login successfully</MPopUp>)
+      } else {
+        setMassagePopup(true);
+        setIsLoading(false);
+        setPopup(<MPopUp type="error">{result.body.detail}</MPopUp>) 
       }
     });
   }
 
-  const onSubmit = (values) => {
+  const onSubmit = (values, { resetForm }) => {
     var jsonBody = {
       email: values.email,
       password: values.password,
     };
     localStorage.removeItem("access");
     setIsLoading(true);
-    handleLogin(jsonBody)
+    handleLogin(jsonBody);
+    setTimeout(() => {
+      resetForm({ values: initialValues });
+    }, 2000);
   };
   return (
     <>
-      <MPopUp type="done">you are Login successfully</MPopUp>
+      {popup}
+
       <img className={styles.popup__img} src={sign} alt="formImg" />
       <Stack
         sx={{

src/components/Header/registe-signin/Signin/sign_reg.module.css

@@ -109,9 +109,12 @@
         width: 80%;
     }
 
-    .form input {
+    .form input  {
         width: 80%;
     }
+    .form .otp_input{
+        width: 54px !important;
+    }
 
     .popup__img {
         display: none;

src/components/Otp/Otp.js

@@ -1,40 +1,80 @@
-import React, { useState } from "react";
+import React, { useContext, useState } from "react";
 import OTPInput from "react-otp-input";
 import { Box, Typography } from "@mui/material";
 import styles from "../Header/registe-signin/Signin/sign_reg.module.css";
+import { Context } from "../Context/Context";
+import { RequestOtp, emailVerify } from "../../repositories/authRepo";
+import MPopUp from "../PopUp_Message/error/MPopUp";
 
 export default function Otp(props) {
   const [otp, setOtp] = useState("");
+  const { setButtonPopup, setMassagePopup } = useContext(Context);
+  const [popup, setPopup] = useState(null);
 
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    var jsonBody = {
+      otp: otp,
+    };
+    emailVerify(jsonBody).then((result) => {
+      if (!result.isError) {
+        setButtonPopup([false, ""]);
+        setButtonPopup([true, "Sign in"]);
+      } else {
+        setMassagePopup(true);
+        setPopup(<MPopUp type="error">otp is wrong</MPopUp>);
+      }
+    });
+  };
+
+  const handleResendOtp=()=>{
+    var jsonBody={
+      email:props.email
+    }
+    RequestOtp(jsonBody).then((res) => {
+      if (res.isError) {
+        setMassagePopup(true);
+        setPopup(<MPopUp type="error">faild send otp</MPopUp>);
+      } else {
+        setMassagePopup(true);
+        setPopup(<MPopUp type="done">otp sended</MPopUp>);
+      }
+    });
+  }
   return (
-    <Box className={styles.form}>
-      <Box>
-        <Typography className={styles.typo}>
-          Type the OTP you received on your e-mail.
-        </Typography>
+    <>
+      {popup}
+      <Box className={styles.form}>
+        <Box>
+          <Typography className={styles.typo}>
+            Type the OTP you received on your e-mail.
+          </Typography>
+        </Box>
+        <form onSubmit={handleSubmit}>
+          <OTPInput
+            value={otp}
+            onChange={setOtp}
+            numInputs={4}
+            inputStyle={styles.otp_input}
+            Separator={<span></span>}
+            renderInput={(props) => <input {...props} />}
+          />
+          <span
+            style={{
+              color: "#55c4e0",
+              textDecoration: "underline",
+              fontSize: "12px",
+            }}
+            onClick={handleResendOtp}
+
+          >
+            Resend the mail again.
+          </span>
+          <Box>
+            <button type="submit">Next</button>
+          </Box>
+        </form>
       </Box>
-      <OTPInput
-        value={otp}
-        onChange={setOtp}
-        numInputs={4}
-        inputStyle={styles.otp_input}
-        Separator={<span></span>}
-        renderInput={(props) => <input {...props} />}
-      />
-      <Typography
-        style={{
-          color: "#55c4e0",
-          textDecoration: "underline",
-          fontSize: "12px",
-        }}
-      >
-        Resend the mail again.
-      </Typography>
-      <Box>
-        <button type="submit" onClick={props.verfiy}>
-          Next
-        </button>
-      </Box>
-    </Box>
+    </>
   );
 }

src/components/PopUp_Message/error/MPopUp.module.css

@@ -58,19 +58,20 @@
 }
 .MImge{
     position: absolute;
-    width: 210px;
+    width: 50%;
     right: 0;
     bottom: 0;
 }
 
 @media only screen and (max-width: 950px) {
     .popup_inner{
         padding: 25px;
-        width: 50%;
+        width: 92%;
     }
 
     .close_img{
         width: 20px;
         height: 20px;
     }
 }
+

src/repositories/authRepo.js

@@ -11,24 +11,42 @@ export async function Login(body) {
     body: result.body,
   };
 }
+export async function Logout() {
+  localStorage.removeItem("access");
+}
 
 export async function refreshToken() {
   var refresh = localStorage.getItem("refresh");
-  const result = await Post("auth/token/refresh/",JSON.stringify({ refresh: refresh }));
+  const result = await Post(
+    "auth/token/refresh/",
+    JSON.stringify({ refresh: refresh })
+  );
   if (!result.isError) {
     localStorage.setItem("access", result.body.access);
     localStorage.setItem("refresh", result.body.refresh);
   }
 }
 
-// export function Register(body){
-//     Post('auth/login/',JSON.stringify(body))
-//     .then(result =>{
-//         if(result.isError){
-//             console.log("error")
-//         }else{
-//             localStorage.setItem('access',result.body.tokens.access)
-//             localStorage.setItem('refresh',result.body.tokens.refresh)
-//         }
-//     })
-// }
+export async function register(body) {
+  const result = await Post("auth/register/", JSON.stringify(body));
+  console.log(result.body)
+  return {
+    isError: result.isError,
+    body: result.body,
+  };
+}
+export async function RequestOtp(body) {
+  const result = await Post("auth/request-verify-otp/", JSON.stringify(body));
+  return {
+    isError: result.isError,
+    body: result.body,
+  };
+}
+
+export async function emailVerify(body) {
+  const result = await Post("auth/email-verify/", JSON.stringify(body));
+  return {
+    isError: result.isError,
+    body: result.body,
+  };
+}