From 20314382e6a3c04c7ed5681ef98d1f75d755b356 Mon Sep 17 00:00:00 2001
From: Elisee ADJIGUIDI <sadjigui@bess-f2r4s17.clusters.42paris.fr>
Date: Sat, 24 Jun 2023 16:00:18 +0200
Subject: [PATCH] alert qrcode

---
 containers/react/src/pages/Home.tsx      |   6 +-
 containers/react/src/pages/QrCode.tsx    | 180 ++++++++++++-----------
 containers/react/src/styles/Messages.css |  11 +-
 3 files changed, 104 insertions(+), 93 deletions(-)

diff --git a/containers/react/src/pages/Home.tsx b/containers/react/src/pages/Home.tsx
index 02a10663..2b54ec79 100644
--- a/containers/react/src/pages/Home.tsx
+++ b/containers/react/src/pages/Home.tsx
@@ -6,11 +6,7 @@
 /*   By: sadjigui <sadjigui@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2023/06/09 08:19:04 by apommier          #+#    #+#             */
-<<<<<<< HEAD
-/*   Updated: 2023/06/24 14:31:22 by sadjigui         ###   ########.fr       */
-=======
-/*   Updated: 2023/06/23 17:33:51 by apommier         ###   ########.fr       */
->>>>>>> origin/ereali
+/*   Updated: 2023/06/24 15:14:45 by sadjigui         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
diff --git a/containers/react/src/pages/QrCode.tsx b/containers/react/src/pages/QrCode.tsx
index 4da2138a..d968dd95 100644
--- a/containers/react/src/pages/QrCode.tsx
+++ b/containers/react/src/pages/QrCode.tsx
@@ -6,30 +6,30 @@ import "../styles/App.css";
 import api from '../script/axiosApi.tsx';
 
 import QRCodeStyling from "qr-code-styling";
-import { motion } from 'framer-motion'
-
+import { motion , AnimatePresence} from 'framer-motion'
+import RedAlert from "../components/Alert/RedAlert.tsx";
 
 
 const qrCode = new QRCodeStyling({
-    width: 300,
-    height: 300,
-    // image: "../assets/profile.jpg",
-    dotsOptions: {
-        color: "black",
-        type: "rounded"
-    },
-    backgroundOptions: {
-        color: "#5843e4",
-    },
-    imageOptions: {
-        crossOrigin: "anonymous",
-        margin: 20
-    }
-    });
+	width: 300,
+	height: 300,
+	// image: "../assets/profile.jpg",
+	dotsOptions: {
+		color: "black",
+		type: "rounded"
+	},
+	backgroundOptions: {
+		color: "#5843e4",
+	},
+	imageOptions: {
+		crossOrigin: "anonymous",
+		margin: 20
+	}
+});
 
-function QrCode () {
-    // const url = "https://www.youtube.com";
-    // const ref = useRef(null);
+function QrCode() {
+	// const url = "https://www.youtube.com";
+	// const ref = useRef(null);
 	const ref = useRef<HTMLDivElement>(null);
 	const [user, setUser] = useState(false);
 	const [url, setUrl] = useState("");
@@ -39,17 +39,16 @@ function QrCode () {
 
 	// const history = useHistory();
 
-    useEffect(() => {
+	useEffect(() => {
 		if (ref.current)
-        	qrCode.append(ref.current);
-		const getUser = async ()=>{
-			try{
+			qrCode.append(ref.current);
+		const getUser = async () => {
+			try {
 				const tmpUser = await api.get("/profile");
 				setUser(tmpUser.data);
-				if (tmpUser.data.otp_verified)
-				{
+				if (tmpUser.data.otp_verified) {
 					setActivated(true);
-					return ;
+					return;
 				}
 				const otpData = await api.post("/otp");
 				setUrl(otpData.data.otpauth_url);
@@ -58,30 +57,33 @@ function QrCode () {
 				// console.log("test")
 				// console.table(convs);
 			}
-			catch(err){
+			catch (err) {
 				console.log(err);
 			}
 		};
 		getUser();
 
-    }, []);
+	}, []);
 
-    useEffect(() => {
-        qrCode.update({data: url});
-    }, [url]);
+	useEffect(() => {
+		qrCode.update({ data: url });
+	}, [url]);
 
-
-	const handleKeyPress = async (e: { key: string; })=>{
+	const [errCode, setErrCode] = useState(false);
+	const closeErr = () => setErrCode(false);
+	const handleKeyPress = async (e: { key: string; }) => {
 		// console.log(`e in press= ${e.key}`)
 		if (e.key !== "Enter")
-			return ;
-		try{
+			return;
+		try {
 			console.log("code= ", code)
-			const res = await api.post("/verifyOtp", {token: code})
+			const res = await api.post("/verifyOtp", { token: code })
+			if (!res.data) {
+				setErrCode(true);
+			}
 			console.log("res= ", res.data)
 			console.log("res= ", res)
-			if (res.data === 1)
-			{
+			if (res.data === 1) {
 				console.log("registered")
 				// history.push('/login')
 
@@ -90,15 +92,14 @@ function QrCode () {
 				window.location.reload();
 
 			}
-			else
-			{
+			else {
 				console.log("bad code")
 				//alert ?? retry
 			}
 			// redirect('/test')
 		}
-		catch(err){
-			 console.log(err)
+		catch (err) {
+			console.log(err)
 		}
 	}
 
@@ -108,59 +109,66 @@ function QrCode () {
 			// const path = 'http://' + process.env.REACT_APP_BASE_URL + '/';
 			// window.history.pushState({}, '', path);
 			window.location.reload();
-		} catch(err) {
+		} catch (err) {
 			console.log(err);
 		}
-    };
+	};
 
-    return (
+	return (
 		// <motion.div className="page"
 		// initial={{opacity: -1}}
 		// animate={{opacity: 1}}
 		// exit={{opacity: -1}}>
-        //     <h1>QRcode</h1>
-        //     <h3>{secret}</h3>
-        //     <div ref={ref} />
-        //     <input type="text" className="qr" placeholder="Type The Code"/>
-        //     {}
+		//     <h1>QRcode</h1>
+		//     <h3>{secret}</h3>
+		//     <div ref={ref} />
+		//     <input type="text" className="qr" placeholder="Type The Code"/>
+		//     {}
 
 		// </motion.div>
 
 		<motion.div
-		className="page"
-		initial={{ opacity: -1 }}
-		animate={{ opacity: 1 }}
-		exit={{ opacity: -1 }}
-	  >
-		{!activated && (
-		  <>
-			<h1>Enter The Secret</h1>
-			<h3>{secret}</h3>
-			<h1>Or Scan The QRCode</h1>
-			<div ref={ref} />
-			{/* <div>{ref}</div> */}
-		  </>
-		)}
+			className="page"
+			initial={{ opacity: -1 }}
+			animate={{ opacity: 1 }}
+			exit={{ opacity: -1 }}
+		>
+			{!activated && (
+				<>
+					<h1>Enter The Secret</h1>
+					<h3>{secret}</h3>
+					<h1>Or Scan The QRCode</h1>
+					<div ref={ref} />
+					{/* <div>{ref}</div> */}
+				</>
+			)}
 
-<>
-      {!activated && localStorage.getItem('token') ? (
-        <>
-          <h1>Double Auth Validation</h1>
-          <input
-            onKeyDown={handleKeyPress}
-            type="number"
-            className="qr"
-            placeholder="6 Digits Code"
-            value={code}
-            onChange={(e) => setCode(e.target.value)}
-          />
-        </>
-      ) : (
-        <button onClick={handleDesactivate}>Desactivate 2FA</button>
-      )}
-    </>
+			<>
+				{!activated && localStorage.getItem('token') ? (
+					<>
+						<h1>Double Auth Validation</h1>
+						<input
+							onKeyDown={handleKeyPress}
+							type="number"
+							className="qr"
+							placeholder="6 Digits Code"
+							value={code}
+							onChange={(e) => setCode(e.target.value)}
+						/>
+					</>
+				) : (
+					<button onClick={handleDesactivate}>Desactivate 2FA</button>
+				)}
+				<AnimatePresence initial={false} onExitComplete={() => null}>
+					{
+						errCode ? (
+							<RedAlert handleClose={closeErr} text="Error: Incorrect Code" />
+						) : ("")
+					}
+				</AnimatePresence>
+			</>
 
-		{/* {!localStorage.getItem('token') && (
+			{/* {!localStorage.getItem('token') && (
 		<>
 		  <h1>Double Auth</h1>
 		  <input onKeyDown={handleKeyPress}
@@ -172,11 +180,11 @@ function QrCode () {
 		</>
 		) : (<button onClick={ handleDesactivate }>Desactivate 2FA</button>)}
 		 */}
-		{/* {!activated && (
+			{/* {!activated && (
 		  <button onClick={() => setActivated(true)}>Activate</button>
 		)} */}
-	  </motion.div>
-    )
+		</motion.div>
+	)
 }
 
 export default QrCode
diff --git a/containers/react/src/styles/Messages.css b/containers/react/src/styles/Messages.css
index 0c6a9d4c..613e84bf 100644
--- a/containers/react/src/styles/Messages.css
+++ b/containers/react/src/styles/Messages.css
@@ -233,8 +233,8 @@ p {
 	background-color: rgba(0, 0, 0, 0.3);
 	border-radius: 4px;
 	width: 11rem;
-	height: 1.5rem;
-	margin-top: 1rem;
+	height: 2rem;
+	margin-top: 1.3rem;
 }
 
 .greenAlert{
@@ -382,6 +382,13 @@ input.in_howLong{
 }
 
 .block{
+	font-size: 23px;
+	margin-left: 12px;
+	margin-top: 0.2rem;
+}
+
+.inline{
+
 	font-size: 25px;
 	margin-left: 12px;
 }