Merge pull request #59 from Etlas-SCU/auth

Auth

src/App.js

@@ -5,7 +5,7 @@ import Nav from "./components/Header/Nav.js";
 import Download from "./pages/Download/Download";
 import AboutUs from "./pages/About/AboutUs";
 import KnowHistory from "./pages/TimeLine/KnowHistory";
-import { Provider } from "./components/Context/Context";
+import { Context, Provider } from "./components/Context/Context";
 import Articles from "./pages/Articles/Articles";
 import Tours from "./pages/Tours/Tours";
 import ArticleInfo from "./pages/ArticleInfo/ArticleInfo";
@@ -17,16 +17,11 @@ import KnowledgeCheck from "./pages/KnowledgeCheck/KnowledgeCheck";
 import QandA from "./pages/QandA/QandA";
 import Profile from "./pages/Profile/Profile";
 import { GoogleOAuthProvider } from "@react-oauth/google";
-import { refreshToken } from "./repositories/authRepo";
+
 
 function App() {
   const { pathname } = useLocation();
-
-  useEffect(()=>{
-    refreshToken()
-    setInterval(refreshToken, 3* 60 * 1000);
-  },[])
-
+
   useEffect(() => {
     window.scrollTo(0, 0);
   }, [pathname]);

src/components/Context/Context.js

@@ -5,6 +5,7 @@ import neith from '../../images/Pics/neith.png'
 import statues from "../../images/Pics/statues.png";
 import landmarks from "../../images/Pics/landmarks.png";
 import monuments from "../../images/Pics/monuments.png";
+import { refreshToken } from "../../repositories/authRepo";
 export const Context = createContext();
 
 export const Provider = (props) => {
@@ -14,12 +15,21 @@ export const Provider = (props) => {
   const [selectedLanguage, setSelectedLanguage] = useState("English");
   const [buttonPopup, setButtonPopup] = useState([false, ""]);
   const [massagePopup, setMassagePopup] = useState(false);
+  const [step, setStep] = useState("enterEmail");
+
   var access=localStorage.getItem("access")
   const [LogIn ,setLogIn]=useState(access!==null)
 
   useEffect(()=>{
      setLogIn(access!==null)
   },[access])
+
+  useEffect(()=>{
+    if(LogIn!==null){
+      refreshToken()
+    }
+    setInterval(refreshToken, 3* 60 * 1000);
+  },[])
 
   const[statusScore,setStatusScore]=useState(0);
   const[MonumentsScore,setMonumentsScore]=useState(0);
@@ -184,6 +194,8 @@ const landmarksQ=[
     setMassagePopup,
     LogIn,
     setLogIn,
+    step,
+    setStep
 
   };
 

src/components/Header/Nav.js

@@ -58,6 +58,15 @@ export default function Nav() {
     i18n.changeLanguage(Object.keys(obj)[0]);
   };
 
+  const handelLogout=()=>{
+    var jsonBody = {
+      refresh: localStorage.getItem('refresh'),
+    };
+    Logout(jsonBody).then((res) => {
+      console.log(res.body)
+    });
+  }
+
   const drawer = (
     <Box
       onClick={handleDrawerToggle}
@@ -71,7 +80,7 @@ export default function Nav() {
           {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 style={{margin:"0 auto" ,display:"block", backgroundColor: "#003441" }} onClick={handelLogout} className={styles.nav__list__btn} >LogOut</button>
             </>
           ) : (
             <>

src/components/Header/registe-signin/ForgetPassword/ForgetPass.js

@@ -7,31 +7,86 @@ import { useState } from "react";
 import { Context } from "../../../Context/Context";
 import Otp from "../../../Otp/Otp";
 import MPopUp from "../../../PopUp_Message/error/MPopUp";
+import {
+  PasswordResetOtp,
+  RequestPasswordReset,
+  passwordResetComplete,
+} from "../../../../repositories/authRepo";
 
 export default function ForgetPass() {
   const { t } = useTranslation();
-  const [step, setStep] = useState("enterEmail");
   const [email, setEmail] = useState("");
-  const [verificationCode, setVerificationCode] = useState("");
-  const { setButtonPopup, setMassagePopup } = useContext(Context);
+  const { setButtonPopup, setMassagePopup, step, setStep } =
+    useContext(Context);
+  const [popup, setPopup] = useState(null);
+  const [uidb64, setuidb64] = useState(null);
+  const [token, setToken] = useState(null);
+  const [password, setPassword] = useState(null);
+  const [confirmPassword, setConfirmPassword] = useState(null);
 
-  // function handleChange(OTP) {
-  //   setOTP(OTP);
-  // }
-  const handleEmailSubmit = () => {
-    setStep("enterVerificationCode");
+  const handleresetOtp = (jsonBody) => {
+    PasswordResetOtp(jsonBody).then((result) => {
+      if (result.isError) {
+        setMassagePopup(true);
+        setPopup(<MPopUp type="error">otp is wrong</MPopUp>);
+      } else {
+        setStep("resetPassword");
+        setToken(result.body.token);
+        setuidb64(result.body.uidb64);
+      }
+    });
   };
 
-  const handleVerificationCodeSubmit = () => {
-    setStep("resetPassword");
+  const handleEmailSubmit = () => {
+    var jsonBody = {
+      email: email,
+    };
+    RequestPasswordReset(jsonBody).then((res) => {
+      if (res.isError) {
+        setMassagePopup(true);
+        setPopup(<MPopUp type="error">{res.body.error}</MPopUp>);
+      } else {
+        setMassagePopup(true);
+        setPopup(<MPopUp type="done">{res.body.success}</MPopUp>);
+        setStep("enterVerificationCode");
+
+        RequestPasswordReset(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 handlePasswordReset = () => {
-    setButtonPopup(false);
-    // setMassagePopup(true);
+    var jsonBody = {
+      token: token,
+      uidb64: uidb64,
+      password: password,
+      confirm_password: confirmPassword,
+    };
+    passwordResetComplete(jsonBody).then((res) => {
+      if (res.isError) {
+        setMassagePopup(true);
+        setPopup(<MPopUp type="error">{res.body.message}</MPopUp>);
+      } else {
+        setMassagePopup(true);
+        setPopup(<MPopUp type="done">{res.body.message}</MPopUp>);
+        setTimeout(() => {
+          setButtonPopup(false);
+        }, 2000);
+        console.log(res.body)
+      }
+    });
   };
   return (
     <>
+      {popup}
       <img className={styles.popup__img} src={forget} alt="formImg" />
       <Stack
         sx={{
@@ -71,7 +126,7 @@ export default function ForgetPass() {
         )}
 
         {step === "enterVerificationCode" && (
-          <Otp verfiy={handleVerificationCodeSubmit} />
+          <Otp callFrom="forgetPass" verify={handleresetOtp} />
         )}
 
         {step === "resetPassword" && (
@@ -87,12 +142,14 @@ export default function ForgetPass() {
                 type="password"
                 placeholder={t("nav.passwordPlaceholder")}
                 name="password"
+                onChange={(e) => setPassword(e.target.value)}
               />
               <label htmlFor="password">Confirm password</label>
               <input
                 type="password"
                 placeholder={t("nav.passwordPlaceholder")}
                 name="password"
+                onChange={(e) => setConfirmPassword(e.target.value)}
               />
 
               <Box>
@@ -104,14 +161,6 @@ export default function ForgetPass() {
           </>
         )}
       </Stack>
-      {/* <MPopUp type={"warning"}>
-        <h2>Oops!</h2>
-        <p style={{ marginTop: "10px", fontWeight: "300" }}>
-          Your password hasn’t been reset.
-          <br />
-          Please, try again!
-        </p>
-      </MPopUp> */}
     </>
   );
 }

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

@@ -64,7 +64,7 @@ export default function Register() {
       } else {
         setMassagePopup(true);
         setIsLoading(false);
-        setPopup(<MPopUp type="error">{result.body.email}</MPopUp>);
+        setPopup(<MPopUp type="error">{result.body.response.data.email[0]}</MPopUp>);
       }
     });
   }
@@ -84,7 +84,6 @@ export default function Register() {
     setTimeout(() => {
       resetForm({ values: initialValues });
     }, 2000);
-
     setEmail(values.email)
   };
 

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

@@ -13,13 +13,16 @@ import { Context } from "../../../Context/Context";
 import GoogleSignIn from "../../google-signin/GoogleSignIn";
 import { Login } from "../../../../repositories/authRepo";
 import MPopUp from "../../../PopUp_Message/error/MPopUp";
+import Otp from "../../../Otp/Otp";
 
 export default function SignIn() {
   const { t } = useTranslation();
   const { setButtonPopup, setMassagePopup, setLogIn } =
     useContext(Context);
   const [isLoading, setIsLoading] = useState(false);
   const [popup,setPopup]=useState(null)
+  const [otp, setOtp] = useState(false);
+  const [Email,setEmail]=useState(null)
 
   const initialValues = {
     email: "",
@@ -46,12 +49,17 @@ export default function SignIn() {
       } else {
         setMassagePopup(true);
         setIsLoading(false);
-        setPopup(<MPopUp type="error">{result.body.detail}</MPopUp>) 
+        setPopup(<MPopUp type="error">{result.body.response.data.detail}</MPopUp>) 
+        if(result.body.detail === "Email is not verified"){
+          setOtp(true);
+        }
+        console.log(result.body)
       }
     });
   }
 
   const onSubmit = (values, { resetForm }) => {
+    setEmail(values.email)
     var jsonBody = {
       email: values.email,
       password: values.password,
@@ -68,6 +76,11 @@ export default function SignIn() {
       {popup}
 
       <img className={styles.popup__img} src={sign} alt="formImg" />
+      {otp ? (
+        <Box m="50px 0 0 20px " width="60%">
+          <Otp email={Email}/>
+        </Box>
+      ) : (
       <Stack
         sx={{
           m: "80px 0 0 20px ",
@@ -157,7 +170,7 @@ export default function SignIn() {
             </Form>
           </Formik>
         </Box>
-      </Stack>
+      </Stack>)}
     </>
   );
 }

src/components/Otp/Otp.js

@@ -3,34 +3,39 @@ 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 { PasswordResetOtp, 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 { setButtonPopup, setMassagePopup ,step,setStep} = 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
+
+    if (props.callFrom === "forgetPass") {
+      props.verify(jsonBody);
+    } else {
+      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);
@@ -40,7 +45,7 @@ export default function Otp(props) {
         setPopup(<MPopUp type="done">otp sended</MPopUp>);
       }
     });
-  }
+  };
   return (
     <>
       {popup}
@@ -66,7 +71,6 @@ export default function Otp(props) {
               fontSize: "12px",
             }}
             onClick={handleResendOtp}
-
           >
             Resend the mail again.
           </span>