[security]: remove external dependency for loading QR codes for 2FA
This commit is contained in:
parent
1f64086c67
commit
010ef8621b
|
@ -63,6 +63,7 @@
|
||||||
"@types/debounce": "^1.2.0",
|
"@types/debounce": "^1.2.0",
|
||||||
"@types/events": "^3.0.0",
|
"@types/events": "^3.0.0",
|
||||||
"@types/node": "^14.11.10",
|
"@types/node": "^14.11.10",
|
||||||
|
"@types/qrcode.react": "^1.0.1",
|
||||||
"@types/query-string": "^6.3.0",
|
"@types/query-string": "^6.3.0",
|
||||||
"@types/react": "^16.9.41",
|
"@types/react": "^16.9.41",
|
||||||
"@types/react-copy-to-clipboard": "^4.3.0",
|
"@types/react-copy-to-clipboard": "^4.3.0",
|
||||||
|
|
|
@ -11,6 +11,7 @@ import tw from 'twin.macro';
|
||||||
import Button from '@/components/elements/Button';
|
import Button from '@/components/elements/Button';
|
||||||
import asModal from '@/hoc/asModal';
|
import asModal from '@/hoc/asModal';
|
||||||
import ModalContext from '@/context/ModalContext';
|
import ModalContext from '@/context/ModalContext';
|
||||||
|
import QRCode from 'qrcode.react';
|
||||||
|
|
||||||
interface Values {
|
interface Values {
|
||||||
code: string;
|
code: string;
|
||||||
|
@ -18,7 +19,6 @@ interface Values {
|
||||||
|
|
||||||
const SetupTwoFactorModal = () => {
|
const SetupTwoFactorModal = () => {
|
||||||
const [ token, setToken ] = useState('');
|
const [ token, setToken ] = useState('');
|
||||||
const [ loading, setLoading ] = useState(true);
|
|
||||||
const [ recoveryTokens, setRecoveryTokens ] = useState<string[]>([]);
|
const [ recoveryTokens, setRecoveryTokens ] = useState<string[]>([]);
|
||||||
|
|
||||||
const { dismiss, setPropOverrides } = useContext(ModalContext);
|
const { dismiss, setPropOverrides } = useContext(ModalContext);
|
||||||
|
@ -108,11 +108,7 @@ const SetupTwoFactorModal = () => {
|
||||||
css={tw`w-64 h-64 rounded`}
|
css={tw`w-64 h-64 rounded`}
|
||||||
/>
|
/>
|
||||||
:
|
:
|
||||||
<img
|
<QRCode renderAs={'svg'} value={token} css={tw`w-full h-full shadow-none rounded-none`}/>
|
||||||
src={`https://api.qrserver.com/v1/create-qr-code/?size=500x500&data=${token}`}
|
|
||||||
onLoad={() => setLoading(false)}
|
|
||||||
css={tw`w-full h-full shadow-none rounded-none`}
|
|
||||||
/>
|
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -124,7 +120,6 @@ const SetupTwoFactorModal = () => {
|
||||||
type={'text'}
|
type={'text'}
|
||||||
title={'Code From Authenticator'}
|
title={'Code From Authenticator'}
|
||||||
description={'Enter the code from your authenticator device after scanning the QR image.'}
|
description={'Enter the code from your authenticator device after scanning the QR image.'}
|
||||||
autoFocus={!loading}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div css={tw`mt-6 md:mt-0 text-right`}>
|
<div css={tw`mt-6 md:mt-0 text-right`}>
|
||||||
|
|
|
@ -1228,6 +1228,13 @@
|
||||||
version "15.7.1"
|
version "15.7.1"
|
||||||
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.1.tgz#f1a11e7babb0c3cad68100be381d1e064c68f1f6"
|
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.1.tgz#f1a11e7babb0c3cad68100be381d1e064c68f1f6"
|
||||||
|
|
||||||
|
"@types/qrcode.react@^1.0.1":
|
||||||
|
version "1.0.1"
|
||||||
|
resolved "https://registry.yarnpkg.com/@types/qrcode.react/-/qrcode.react-1.0.1.tgz#0904e7a075a6274a5258f19567b4f64013c159d8"
|
||||||
|
integrity sha512-PcVCjpsiT2KFKfJibOgTQtkt0QQT/6GbQUp1Np/hMPhwUzMJ2DRUkR9j7tXN9Q8X06qukw+RbaJ8lJ22SBod+Q==
|
||||||
|
dependencies:
|
||||||
|
"@types/react" "*"
|
||||||
|
|
||||||
"@types/query-string@^6.3.0":
|
"@types/query-string@^6.3.0":
|
||||||
version "6.3.0"
|
version "6.3.0"
|
||||||
resolved "https://registry.yarnpkg.com/@types/query-string/-/query-string-6.3.0.tgz#b6fa172a01405abcaedac681118e78429d62ea39"
|
resolved "https://registry.yarnpkg.com/@types/query-string/-/query-string-6.3.0.tgz#b6fa172a01405abcaedac681118e78429d62ea39"
|
||||||
|
|
Loading…
Reference in New Issue