Kinou/ft_transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

alert qrcode

Browse Source
This commit is contained in:
Elisee ADJIGUIDI 2023-06-24 16:00:18 +02:00
parent 41f8ad0d4d
commit 20314382e6
3 changed files with 104 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
containers/react/src/pages/Home.tsx
View File

@ -6,11 +6,7 @@
/* By: sadjigui <sadjigui@student.42.fr> +#+ +:+ +#+ */ /* By: sadjigui <sadjigui@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2023/06/09 08:19:04 by apommier #+# #+# */ /* Created: 2023/06/09 08:19:04 by apommier #+# #+# */
<<<<<<< HEAD /* Updated: 2023/06/24 15:14:45 by sadjigui ### ########.fr */
/* Updated: 2023/06/24 14:31:22 by sadjigui ### ########.fr */
=======
/* Updated: 2023/06/23 17:33:51 by apommier ### ########.fr */
>>>>>>> origin/ereali
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */

180
containers/react/src/pages/QrCode.tsx
View File

@ -6,30 +6,30 @@ import "../styles/App.css";
import api from '../script/axiosApi.tsx'; import api from '../script/axiosApi.tsx';
import QRCodeStyling from "qr-code-styling"; 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({ const qrCode = new QRCodeStyling({
width: 300, width: 300,
height: 300, height: 300,
// image: "../assets/profile.jpg", // image: "../assets/profile.jpg",
dotsOptions: { dotsOptions: {
color: "black", color: "black",
type: "rounded" type: "rounded"
}, },
backgroundOptions: { backgroundOptions: {
color: "#5843e4", color: "#5843e4",
}, },
imageOptions: { imageOptions: {
crossOrigin: "anonymous", crossOrigin: "anonymous",
margin: 20 margin: 20
} }
}); });
function QrCode () { function QrCode() {
// const url = "https://www.youtube.com"; // const url = "https://www.youtube.com";
// const ref = useRef(null); // const ref = useRef(null);
const ref = useRef<HTMLDivElement>(null); const ref = useRef<HTMLDivElement>(null);
const [user, setUser] = useState(false); const [user, setUser] = useState(false);
const [url, setUrl] = useState(""); const [url, setUrl] = useState("");
@ -39,17 +39,16 @@ function QrCode () {
// const history = useHistory(); // const history = useHistory();
useEffect(() => { useEffect(() => {
if (ref.current) if (ref.current)
qrCode.append(ref.current); qrCode.append(ref.current);
const getUser = async ()=>{ const getUser = async () => {
try{ try {
const tmpUser = await api.get("/profile"); const tmpUser = await api.get("/profile");
setUser(tmpUser.data); setUser(tmpUser.data);
if (tmpUser.data.otp_verified) if (tmpUser.data.otp_verified) {
{
setActivated(true); setActivated(true);
return ; return;
} }
const otpData = await api.post("/otp"); const otpData = await api.post("/otp");
setUrl(otpData.data.otpauth_url); setUrl(otpData.data.otpauth_url);
@ -58,30 +57,33 @@ function QrCode () {
// console.log("test") // console.log("test")
// console.table(convs); // console.table(convs);
} }
catch(err){ catch (err) {
console.log(err); console.log(err);
} }
}; };
getUser(); getUser();
}, []); }, []);
useEffect(() => { useEffect(() => {
qrCode.update({data: url}); qrCode.update({ data: url });
}, [url]); }, [url]);
const [errCode, setErrCode] = useState(false);
const handleKeyPress = async (e: { key: string; })=>{ const closeErr = () => setErrCode(false);
const handleKeyPress = async (e: { key: string; }) => {
// console.log(`e in press= ${e.key}`) // console.log(`e in press= ${e.key}`)
if (e.key !== "Enter") if (e.key !== "Enter")
return ; return;
try{ try {
console.log("code= ", code) 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.data)
console.log("res= ", res) console.log("res= ", res)
if (res.data === 1) if (res.data === 1) {
{
console.log("registered") console.log("registered")
// history.push('/login') // history.push('/login')
@ -90,15 +92,14 @@ function QrCode () {
window.location.reload(); window.location.reload();
} }
else else {
{
console.log("bad code") console.log("bad code")
//alert ?? retry //alert ?? retry
} }
// redirect('/test') // redirect('/test')
} }
catch(err){ catch (err) {
console.log(err) console.log(err)
} }
} }
@ -108,59 +109,66 @@ function QrCode () {
// const path = 'http://' + process.env.REACT_APP_BASE_URL + '/'; // const path = 'http://' + process.env.REACT_APP_BASE_URL + '/';
// window.history.pushState({}, '', path); // window.history.pushState({}, '', path);
window.location.reload(); window.location.reload();
} catch(err) { } catch (err) {
console.log(err); console.log(err);
} }
}; };
return ( return (
// <motion.div className="page" // <motion.div className="page"
// initial={{opacity: -1}} // initial={{opacity: -1}}
// animate={{opacity: 1}} // animate={{opacity: 1}}
// exit={{opacity: -1}}> // exit={{opacity: -1}}>
// <h1>QRcode</h1> // <h1>QRcode</h1>
// <h3>{secret}</h3> // <h3>{secret}</h3>
// <div ref={ref} /> // <div ref={ref} />
// <input type="text" className="qr" placeholder="Type The Code"/> // <input type="text" className="qr" placeholder="Type The Code"/>
// {} // {}
// </motion.div> // </motion.div>
<motion.div <motion.div
className="page" className="page"
initial={{ opacity: -1 }} initial={{ opacity: -1 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
exit={{ opacity: -1 }} exit={{ opacity: -1 }}
> >
{!activated && ( {!activated && (
<> <>
<h1>Enter The Secret</h1> <h1>Enter The Secret</h1>
<h3>{secret}</h3> <h3>{secret}</h3>
<h1>Or Scan The QRCode</h1> <h1>Or Scan The QRCode</h1>
<div ref={ref} /> <div ref={ref} />
{/* <div>{ref}</div> */} {/* <div>{ref}</div> */}
</> </>
)} )}
<> <>
{!activated && localStorage.getItem('token') ? ( {!activated && localStorage.getItem('token') ? (
<> <>
<h1>Double Auth Validation</h1> <h1>Double Auth Validation</h1>
<input <input
onKeyDown={handleKeyPress} onKeyDown={handleKeyPress}
type="number" type="number"
className="qr" className="qr"
placeholder="6 Digits Code" placeholder="6 Digits Code"
value={code} value={code}
onChange={(e) => setCode(e.target.value)} onChange={(e) => setCode(e.target.value)}
/> />
</> </>
) : ( ) : (
<button onClick={handleDesactivate}>Desactivate 2FA</button> <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> <h1>Double Auth</h1>
<input onKeyDown={handleKeyPress} <input onKeyDown={handleKeyPress}
@ -172,11 +180,11 @@ function QrCode () {
</> </>
) : (<button onClick={ handleDesactivate }>Desactivate 2FA</button>)} ) : (<button onClick={ handleDesactivate }>Desactivate 2FA</button>)}
*/} */}
{/* {!activated && ( {/* {!activated && (
<button onClick={() => setActivated(true)}>Activate</button> <button onClick={() => setActivated(true)}>Activate</button>
)} */} )} */}
</motion.div> </motion.div>
) )
} }
export default QrCode export default QrCode

11
containers/react/src/styles/Messages.css
View File

@ -233,8 +233,8 @@ p {
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
border-radius: 4px; border-radius: 4px;
width: 11rem; width: 11rem;
height: 1.5rem; height: 2rem;
margin-top: 1rem; margin-top: 1.3rem;
} }
.greenAlert{ .greenAlert{
@ -382,6 +382,13 @@ input.in_howLong{
} }
.block{ .block{
font-size: 23px;
margin-left: 12px;
margin-top: 0.2rem;
}
.inline{
font-size: 25px; font-size: 25px;
margin-left: 12px; margin-left: 12px;
} }