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

qr code fonction incomplete

Browse Source
This commit is contained in:
Little Dipper 2023-06-17 21:30:19 +02:00
parent 196f2a5e88
commit 6571db859c
5 changed files with 119 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
containers/react/package-lock.json generated
View File

@ -14,6 +14,7 @@
"axios": "^1.3.5",
"framer-motion": "^10.12.8",
"npm": "^9.6.6",
"qr-code-styling": "^1.6.0-rc.1",
"query-string": "^8.1.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
@ -6140,6 +6141,7 @@
"dependencies": {
"anymatch": "~3.1.2",
"braces": "~3.0.2",
"fsevents": "~2.3.2",
"glob-parent": "~5.1.2",
"is-binary-path": "~2.1.0",
"is-glob": "~4.0.1",
@ -7510,7 +7512,8 @@
"esprima": "^4.0.1",
"estraverse": "^5.2.0",
"esutils": "^2.0.2",
"optionator": "^0.8.1"
"optionator": "^0.8.1",
"source-map": "~0.6.1"
},
"bin": {
"escodegen": "bin/escodegen.js",
@ -8840,6 +8843,7 @@
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.12.8.tgz",
"integrity": "sha512-ylobYq3tGFjjAmRdBs5pL/R1+4AmOm69g/JbF5DcNETfRe8L9CjaX4acG83MjYdIsbsTGJmtR5qKx4glNmXO4A==",
"dependencies": {
"@emotion/is-prop-valid": "^0.8.2",
"tslib": "^2.4.0"
},
"optionalDependencies": {
@ -10715,6 +10719,7 @@
"@types/node": "*",
"anymatch": "^3.0.3",
"fb-watchman": "^2.0.0",
"fsevents": "^2.3.2",
"graceful-fs": "^4.2.9",
"jest-regex-util": "^27.5.1",
"jest-serializer": "^27.5.1",
@ -12271,6 +12276,7 @@
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
"dependencies": {
"graceful-fs": "^4.1.6",
"universalify": "^2.0.0"
},
"optionalDependencies": {
@ -13770,6 +13776,7 @@
"inBundle": true,
"license": "MIT",
"dependencies": {
"@colors/colors": "1.5.0",
"string-width": "^4.2.0"
},
"engines": {
@ -14306,7 +14313,8 @@
"inBundle": true,
"license": "BlueOak-1.0.0",
"dependencies": {
"@isaacs/cliui": "^8.0.2"
"@isaacs/cliui": "^8.0.2",
"@pkgjs/parseargs": "^0.11.0"
},
"engines": {
"node": ">=14"
@ -14592,6 +14600,7 @@
"inBundle": true,
"license": "MIT",
"dependencies": {
"encoding": "^0.1.13",
"minipass": "^5.0.0",
"minipass-sized": "^1.0.3",
"minizlib": "^2.1.2"
@ -14971,6 +14980,7 @@
"inBundle": true,
"license": "MIT",
"dependencies": {
"encoding": "^0.1.13",
"minipass": "^3.1.6",
"minipass-sized": "^1.0.3",
"minizlib": "^2.1.2"
@ -17958,6 +17968,19 @@
"teleport": ">=0.2.0"
}
},
"node_modules/qr-code-styling": {
"version": "1.6.0-rc.1",
"resolved": "https://registry.npmjs.org/qr-code-styling/-/qr-code-styling-1.6.0-rc.1.tgz",
"integrity": "sha512-ModRIiW6oUnsP18QzrRYZSc/CFKFKIdj7pUs57AEVH20ajlglRpN3HukjHk0UbNMTlKGuaYl7Gt6/O5Gg2NU2Q==",
"dependencies": {
"qrcode-generator": "^1.4.3"
}
},
"node_modules/qrcode-generator": {
"version": "1.4.4",
"resolved": "https://registry.npmjs.org/qrcode-generator/-/qrcode-generator-1.4.4.tgz",
"integrity": "sha512-HM7yY8O2ilqhmULxGMpcHSF1EhJJ9yBj8gvDEuZ6M+KGJ0YY2hKpnXvRD+hZPLrDVck3ExIGhmPtSdcjC+guuw=="
},
"node_modules/qs": {
"version": "6.11.0",
"resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
@ -18306,6 +18329,7 @@
"eslint-webpack-plugin": "^3.1.1",
"file-loader": "^6.2.0",
"fs-extra": "^10.0.0",
"fsevents": "^2.3.2",
"html-webpack-plugin": "^5.5.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^27.4.3",
@ -18742,6 +18766,9 @@
"version": "2.79.1",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz",
"integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==",
"dependencies": {
"fsevents": "~2.3.2"
},
"bin": {
"rollup": "dist/bin/rollup"
},
@ -33695,6 +33722,19 @@
"resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
"integrity": "sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw=="
},
"qr-code-styling": {
"version": "1.6.0-rc.1",
"resolved": "https://registry.npmjs.org/qr-code-styling/-/qr-code-styling-1.6.0-rc.1.tgz",
"integrity": "sha512-ModRIiW6oUnsP18QzrRYZSc/CFKFKIdj7pUs57AEVH20ajlglRpN3HukjHk0UbNMTlKGuaYl7Gt6/O5Gg2NU2Q==",
"requires": {
"qrcode-generator": "^1.4.3"
}
},
"qrcode-generator": {
"version": "1.4.4",
"resolved": "https://registry.npmjs.org/qrcode-generator/-/qrcode-generator-1.4.4.tgz",
"integrity": "sha512-HM7yY8O2ilqhmULxGMpcHSF1EhJJ9yBj8gvDEuZ6M+KGJ0YY2hKpnXvRD+hZPLrDVck3ExIGhmPtSdcjC+guuw=="
},
"qs": {
"version": "6.11.0",
"resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",

1
containers/react/package.json
View File

@ -9,6 +9,7 @@
"axios": "^1.3.5",
"framer-motion": "^10.12.8",
"npm": "^9.6.6",
"qr-code-styling": "^1.6.0-rc.1",
"query-string": "^8.1.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",

2
containers/react/src/components/App.jsx
View File

@ -8,6 +8,7 @@ import PlayButton from "./Game/PlayButton.js";
import Field from "../pages/Field";
import Login42 from "../pages/Login42.js";
import Messages from "../pages/Messages.jsx";
import QrCode from '../pages/QrCode.jsx'
import { useLocation } from "react-router-dom";
import {AnimatePresence} from "framer-motion";
@ -28,6 +29,7 @@ function AnimatedRoute () {
<Route exact path="/" element={<HomeLogin/>}/>
<Route exact path="/profile" element={<Home/>}/>
<Route exact path="/profile/:username" element={<Home/>}/>
<Route exact path="/qr" element={<QrCode/>}/>
<Route exact path="/2fa" element={<DoubleAuth/>}/>
<Route exact path="/Social" element={<Social/>}/>

66
containers/react/src/pages/QrCode.jsx Normal file
View File

@ -0,0 +1,66 @@
import React, { useEffect, useRef, useState } from "react";
import "../styles/App.css";
import QRCodeStyling from "qr-code-styling";
import { motion } from 'framer-motion'
import api from '../script/axiosApi';
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
}
});
function QrCode () {
const url = "https://www.youtube.com";
const ref = useRef(null);
useEffect(() => {
qrCode.append(ref.current);
}, []);
useEffect(() => {
qrCode.update({
data: url
});
}, [url]);
const getConv = async ()=>{
try{
const convs = await api.get("/user")
// const tmpUser = await api.get("/profile")
console.log("test")
console.table(convs);
}
catch(err){
console.log(err);
}
};
getConv();
return (
<motion.div className="page"
initial={{opacity: -1}}
animate={{opacity: 1}}
exit={{opacity: -1}}>
<h1>QrCode</h1>
<h3>Your code is: 231 31 31</h3>
<div ref={ref} />
<input type="text" className="qr" placeholder="type the secret"/>
{}
</motion.div>
)
}
export default QrCode

8
containers/react/src/styles/App.css
View File

@ -6,6 +6,14 @@
height: 100%;
}
input.qr{
width: 20%;
border-radius: 5px;
background-color: rgb(66, 66, 66);
margin : 1%;
color:white;
}
.App-logo {
height: 40vmin;
pointer-events: none;