added in QR code image (#6)

Author: Jibola

{{cookiecutter.project_slug}}/frontend/app/components/settings/Security.tsx

@@ -15,6 +15,7 @@ import {
   updateUserProfile,
 } from "../../lib/slices/authSlice"
 import { refreshTokens, token } from "../../lib/slices/tokensSlice"
+import { QRCodeSVG } from 'qrcode.react'
 
 const title = "Security"
 const redirectTOTP = "/settings"
@@ -313,7 +314,7 @@ export default function Security() {
                                 Open the app and scan the QR code below to pair
                                 your mobile with your account.
                               </p>
-                              {/* <QrcodeVue :value="totpNew.uri" :size="qrSize" level="M" render-as="svg" className="my-2 mx-auto"/> */}
+                              <QRCodeSVG value={totpNew.uri} size={qrSize} level="M" className="my-2 mx-auto"/>
                               <p>
                                 If you can&apos;t scan, you can type in the
                                 following key:

{{cookiecutter.project_slug}}/frontend/package.json

@@ -31,7 +31,8 @@
     "remark-gfm": "^4.0.0",
     "remark-html": "^16.0.1",
     "remark-toc": "^9.0.0",
-    "tailwind": "^4.0.0"
+    "tailwind": "^4.0.0",
+    "qrcode.react": "^3.1.0"
   },
   "devDependencies": {
     "@types/mdx": "^2.0.8",