alert qrcode

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       */
 /*                                                                            */
 /* ************************************************************************** */
 

containers/react/src/pages/QrCode.tsx

@@ -6,8 +6,8 @@ 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({
@@ -25,9 +25,9 @@ const qrCode = new QRCodeStyling({
 		crossOrigin: "anonymous",
 		margin: 20
 	}
-    });
+});
 
-function QrCode () {
+function QrCode() {
 	// const url = "https://www.youtube.com";
 	// const ref = useRef(null);
 	const ref = useRef<HTMLDivElement>(null);
@@ -42,14 +42,13 @@ function QrCode () {
 	useEffect(() => {
 		if (ref.current)
 			qrCode.append(ref.current);
-		const getUser = async ()=>{
-			try{
+		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,7 +57,7 @@ function QrCode () {
 				// console.log("test")
 				// console.table(convs);
 			}
-			catch(err){
+			catch (err) {
 				console.log(err);
 			}
 		};
@@ -67,21 +66,24 @@ function QrCode () {
 	}, []);
 
 	useEffect(() => {
-        qrCode.update({data: url});
+		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,14 +92,13 @@ function QrCode () {
 				window.location.reload();
 
 			}
-			else
-			{
+			else {
 				console.log("bad code")
 				//alert ?? retry
 			}
 			// redirect('/test')
 		}
-		catch(err){
+		catch (err) {
 			console.log(err)
 		}
 	}
@@ -108,7 +109,7 @@ 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);
 		}
 	};
@@ -142,7 +143,7 @@ function QrCode () {
 				</>
 			)}
 
-<>
+			<>
 				{!activated && localStorage.getItem('token') ? (
 					<>
 						<h1>Double Auth Validation</h1>
@@ -158,6 +159,13 @@ function QrCode () {
 				) : (
 					<button onClick={handleDesactivate}>Desactivate 2FA</button>
 				)}
+				<AnimatePresence initial={false} onExitComplete={() => null}>
+					{
+						errCode ? (
+							<RedAlert handleClose={closeErr} text="Error: Incorrect Code" />
+						) : ("")
+					}
+				</AnimatePresence>
 			</>
 
 			{/* {!localStorage.getItem('token') && (

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;
 }