Add react-qr-code and display secret as QR code

jhaals · Feb 24, 2025 · e6a334b · e6a334b
1 parent 66a809c
commit e6a334b
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 1 deletion.
diff --git a/website/package.json b/website/package.json
@@ -20,6 +20,7 @@
     "react-dropzone": "^14.3.6",
     "react-hook-form": "^7.54.2",
     "react-i18next": "^15.4.1",
+    "react-qr-code": "^2.0.15",
     "react-router-dom": "^7.2.0",
     "react-use": "^17.6.0",
     "swr": "^2.3.2"

diff --git a/website/src/displaySecret/Secret.tsx b/website/src/displaySecret/Secret.tsx
@@ -1,10 +1,11 @@
 import { useTranslation } from 'react-i18next';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCopy } from '@fortawesome/free-solid-svg-icons';
-import { Button, Typography } from '@mui/material';
+import { Box, Button, Typography } from '@mui/material';
 import { useCopyToClipboard } from 'react-use';
 import { saveAs } from 'file-saver';
 import { useEffect } from 'react';
+import QRCode from 'react-qr-code';
 
 const RenderSecret = ({ secret }: { readonly secret: string }) => {
   const { t } = useTranslation();
@@ -38,6 +39,13 @@ const RenderSecret = ({ secret }: { readonly secret: string }) => {
       >
         {secret}
       </Typography>
+      <Box sx={{ display:"flex", justifyContent:"center", alignItems:"center", margin:5 }}>
+        <QRCode
+          size={512}
+          style={{ height: "auto" }}
+          value={secret}
+        />
+      </Box>
     </div>
   );
 };

diff --git a/website/yarn.lock b/website/yarn.lock
@@ -3428,6 +3428,11 @@ pump@^3.0.0:
     end-of-stream "^1.1.0"
     once "^1.3.1"
 
+qr.js@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/qr.js/-/qr.js-0.0.0.tgz#cace86386f59a0db8050fa90d9b6b0e88a1e364f"
+  integrity sha512-c4iYnWb+k2E+vYpRimHqSu575b1/wKl4XFeJGpFmrJQz5I88v9aY2czh7s0w36srfCM1sXgC/xpoJz5dJfq+OQ==
+
 qs@6.13.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.13.0.tgz#6ca3bd58439f7e245655798997787b0d88a51906"
@@ -3480,6 +3485,14 @@ react-is@^19.0.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-19.0.0.tgz#d6669fd389ff022a9684f708cf6fa4962d1fea7a"
   integrity sha512-H91OHcwjZsbq3ClIDHMzBShc1rotbfACdWENsmEf0IFvZ3FgGPtdHMcsv45bQ1hAbgdfiA8SnxTKfDS+x/8m2g==
 
+react-qr-code@^2.0.15:
+  version "2.0.15"
+  resolved "https://registry.yarnpkg.com/react-qr-code/-/react-qr-code-2.0.15.tgz#fbfc12952c504bcd64275647e9d1ea63251742ce"
+  integrity sha512-MkZcjEXqVKqXEIMVE0mbcGgDpkfSdd8zhuzXEl9QzYeNcw8Hq2oVIzDLWuZN2PQBwM5PWjc2S31K8Q1UbcFMfw==
+  dependencies:
+    prop-types "^15.8.1"
+    qr.js "0.0.0"
+
 react-refresh@^0.14.2:
   version "0.14.2"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.2.tgz#3833da01ce32da470f1f936b9d477da5c7028bf9"