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

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

@ -6,8 +6,8 @@ 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({
@ -25,9 +25,9 @@ const qrCode = new QRCodeStyling({
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);
@ -42,14 +42,13 @@ function QrCode () {
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,7 +57,7 @@ function QrCode () {
// console.log("test") // console.log("test")
// console.table(convs); // console.table(convs);
} }
catch(err){ catch (err) {
console.log(err); console.log(err);
} }
}; };
@ -67,21 +66,24 @@ function QrCode () {
}, []); }, []);
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,14 +92,13 @@ 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,7 +109,7 @@ 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);
} }
}; };
@ -142,7 +143,7 @@ function QrCode () {
</> </>
)} )}
<> <>
{!activated && localStorage.getItem('token') ? ( {!activated && localStorage.getItem('token') ? (
<> <>
<h1>Double Auth Validation</h1> <h1>Double Auth Validation</h1>
@ -158,6 +159,13 @@ function QrCode () {
) : ( ) : (
<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') && (

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