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

26
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({
@ -46,8 +46,7 @@ function QrCode () {
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;
} }
@ -70,7 +69,8 @@ function QrCode () {
qrCode.update({ data: url }); qrCode.update({ data: url });
}, [url]); }, [url]);
const [errCode, setErrCode] = useState(false);
const closeErr = () => setErrCode(false);
const handleKeyPress = async (e: { key: string; }) => { 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")
@ -78,10 +78,12 @@ function QrCode () {
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,8 +92,7 @@ function QrCode () {
window.location.reload(); window.location.reload();
} }
else else {
{
console.log("bad code") console.log("bad code")
//alert ?? retry //alert ?? retry
} }
@ -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;
} }