diff --git a/website/package.json b/website/package.json index f97822504..da476a51b 100644 --- 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 index 3a0aedf89..c4450127f 100644 --- 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} + + + ); }; diff --git a/website/yarn.lock b/website/yarn.lock index 906bbfd71..a02ce40ab 100644 --- 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"