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({
@@ -46,8 +46,7 @@ function QrCode () {
 			try {
 				const tmpUser = await api.get("/profile");
 				setUser(tmpUser.data);
-				if (tmpUser.data.otp_verified)
-				{
+				if (tmpUser.data.otp_verified) {
 					setActivated(true);
 					return;
 				}
@@ -70,7 +69,8 @@ function QrCode () {
 		qrCode.update({ data: url });
 	}, [url]);
 
-
+	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")
@@ -78,10 +78,12 @@ function QrCode () {
 		try {
 			console.log("code= ", 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,8 +92,7 @@ function QrCode () {
 				window.location.reload();
 
 			}
-			else
-			{
+			else {
 				console.log("bad code")
 				//alert ?? retry
 			}
@@ -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;
 }