alert qrcode
This commit is contained in:
Elisee ADJIGUIDI
parent
41f8ad0d4d
commit
20314382e6
@ -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 */
|
||||
/* */
|
||||
/* ************************************************************************** */
|
||||
|
||||
|
||||
@ -6,30 +6,30 @@ 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({
|
||||
width: 300,
|
||||
height: 300,
|
||||
// image: "../assets/profile.jpg",
|
||||
dotsOptions: {
|
||||
color: "black",
|
||||
type: "rounded"
|
||||
},
|
||||
backgroundOptions: {
|
||||
color: "#5843e4",
|
||||
},
|
||||
imageOptions: {
|
||||
crossOrigin: "anonymous",
|
||||
margin: 20
|
||||
}
|
||||
});
|
||||
width: 300,
|
||||
height: 300,
|
||||
// image: "../assets/profile.jpg",
|
||||
dotsOptions: {
|
||||
color: "black",
|
||||
type: "rounded"
|
||||
},
|
||||
backgroundOptions: {
|
||||
color: "#5843e4",
|
||||
},
|
||||
imageOptions: {
|
||||
crossOrigin: "anonymous",
|
||||
margin: 20
|
||||
}
|
||||
});
|
||||
|
||||
function QrCode () {
|
||||
// const url = "https://www.youtube.com";
|
||||
// const ref = useRef(null);
|
||||
function QrCode() {
|
||||
// const url = "https://www.youtube.com";
|
||||
// const ref = useRef(null);
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const [user, setUser] = useState(false);
|
||||
const [url, setUrl] = useState("");
|
||||
@ -39,17 +39,16 @@ function QrCode () {
|
||||
|
||||
// const history = useHistory();
|
||||
|
||||
useEffect(() => {
|
||||
useEffect(() => {
|
||||
if (ref.current)
|
||||
qrCode.append(ref.current);
|
||||
const getUser = async ()=>{
|
||||
try{
|
||||
qrCode.append(ref.current);
|
||||
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,30 +57,33 @@ function QrCode () {
|
||||
// console.log("test")
|
||||
// console.table(convs);
|
||||
}
|
||||
catch(err){
|
||||
catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
};
|
||||
getUser();
|
||||
|
||||
}, []);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
qrCode.update({data: url});
|
||||
}, [url]);
|
||||
useEffect(() => {
|
||||
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,15 +92,14 @@ function QrCode () {
|
||||
window.location.reload();
|
||||
|
||||
}
|
||||
else
|
||||
{
|
||||
else {
|
||||
console.log("bad code")
|
||||
//alert ?? retry
|
||||
}
|
||||
// redirect('/test')
|
||||
}
|
||||
catch(err){
|
||||
console.log(err)
|
||||
catch (err) {
|
||||
console.log(err)
|
||||
}
|
||||
}
|
||||
|
||||
@ -108,59 +109,66 @@ 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);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
return (
|
||||
return (
|
||||
// <motion.div className="page"
|
||||
// initial={{opacity: -1}}
|
||||
// animate={{opacity: 1}}
|
||||
// exit={{opacity: -1}}>
|
||||
// <h1>QRcode</h1>
|
||||
// <h3>{secret}</h3>
|
||||
// <div ref={ref} />
|
||||
// <input type="text" className="qr" placeholder="Type The Code"/>
|
||||
// {}
|
||||
// <h1>QRcode</h1>
|
||||
// <h3>{secret}</h3>
|
||||
// <div ref={ref} />
|
||||
// <input type="text" className="qr" placeholder="Type The Code"/>
|
||||
// {}
|
||||
|
||||
// </motion.div>
|
||||
|
||||
<motion.div
|
||||
className="page"
|
||||
initial={{ opacity: -1 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: -1 }}
|
||||
>
|
||||
{!activated && (
|
||||
<>
|
||||
<h1>Enter The Secret</h1>
|
||||
<h3>{secret}</h3>
|
||||
<h1>Or Scan The QRCode</h1>
|
||||
<div ref={ref} />
|
||||
{/* <div>{ref}</div> */}
|
||||
</>
|
||||
)}
|
||||
className="page"
|
||||
initial={{ opacity: -1 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: -1 }}
|
||||
>
|
||||
{!activated && (
|
||||
<>
|
||||
<h1>Enter The Secret</h1>
|
||||
<h3>{secret}</h3>
|
||||
<h1>Or Scan The QRCode</h1>
|
||||
<div ref={ref} />
|
||||
{/* <div>{ref}</div> */}
|
||||
</>
|
||||
)}
|
||||
|
||||
<>
|
||||
{!activated && localStorage.getItem('token') ? (
|
||||
<>
|
||||
<h1>Double Auth Validation</h1>
|
||||
<input
|
||||
onKeyDown={handleKeyPress}
|
||||
type="number"
|
||||
className="qr"
|
||||
placeholder="6 Digits Code"
|
||||
value={code}
|
||||
onChange={(e) => setCode(e.target.value)}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<button onClick={handleDesactivate}>Desactivate 2FA</button>
|
||||
)}
|
||||
</>
|
||||
<>
|
||||
{!activated && localStorage.getItem('token') ? (
|
||||
<>
|
||||
<h1>Double Auth Validation</h1>
|
||||
<input
|
||||
onKeyDown={handleKeyPress}
|
||||
type="number"
|
||||
className="qr"
|
||||
placeholder="6 Digits Code"
|
||||
value={code}
|
||||
onChange={(e) => setCode(e.target.value)}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<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>
|
||||
<input onKeyDown={handleKeyPress}
|
||||
@ -172,11 +180,11 @@ function QrCode () {
|
||||
</>
|
||||
) : (<button onClick={ handleDesactivate }>Desactivate 2FA</button>)}
|
||||
*/}
|
||||
{/* {!activated && (
|
||||
{/* {!activated && (
|
||||
<button onClick={() => setActivated(true)}>Activate</button>
|
||||
)} */}
|
||||
</motion.div>
|
||||
)
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
|
||||
export default QrCode
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user