qr code fonction incomplete

containers/react/package-lock.json

@@ -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",

containers/react/package.json

@@ -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",

containers/react/src/components/App.jsx

@@ -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/>}/>

containers/react/src/pages/QrCode.jsx

@@ -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

containers/react/src/styles/App.css

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