use qr-card component instead of plain qrcanvas

web/biome.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/2.4.6/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.4.7/schema.json",
   "vcs": {
     "enabled": false,
     "clientKind": "git",

web/package.json

@@ -51,10 +51,10 @@
     "zustand": "^5.0.12"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.4.6",
-    "@inlang/paraglide-js": "2.14.0",
-    "@tanstack/devtools-vite": "^0.5.5",
-    "@tanstack/react-devtools": "^0.9.13",
+    "@biomejs/biome": "2.4.7",
+    "@inlang/paraglide-js": "2.15.0",
+    "@tanstack/devtools-vite": "^0.6.0",
+    "@tanstack/react-devtools": "^0.10.0",
     "@tanstack/react-query-devtools": "^5.91.3",
     "@tanstack/react-router-devtools": "^1.166.9",
     "@tanstack/router-plugin": "^1.166.12",
@@ -65,7 +65,7 @@
     "@types/qs": "^6.15.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react-swc": "^4.3.0",
+    "@vitejs/plugin-react": "^6.0.1",
     "autoprefixer": "^10.4.27",
     "globals": "^17.4.0",
     "prettier": "^3.8.1",
@@ -75,7 +75,7 @@
     "stylelint-config-standard-scss": "^17.0.0",
     "stylelint-scss": "^7.0.0",
     "typescript": "~5.9.3",
-    "vite": "^7.3.1",
+    "vite": "^8.0.0",
     "vite-plugin-image-optimizer": "^2.0.3"
   }
 }

web/src/pages/user-profile/UserProfilePage/tabs/ProfileDetailsTab/modals/TotpSetupModal/TotpSetupModal.tsx

@@ -6,14 +6,14 @@ import './style.scss';
 import { useStore } from '@tanstack/react-form';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import type { AxiosError } from 'axios';
-import { QRCodeCanvas } from 'qrcode.react';
 import type z from 'zod';
 import api from '../../../../../../../shared/api/api';
 import type { ApiError } from '../../../../../../../shared/api/types';
 import { Badge } from '../../../../../../../shared/defguard-ui/components/Badge/Badge';
 import { CopyField } from '../../../../../../../shared/defguard-ui/components/CopyField/CopyField';
 import { Divider } from '../../../../../../../shared/defguard-ui/components/Divider/Divider';
 import { ModalControls } from '../../../../../../../shared/defguard-ui/components/ModalControls/ModalControls';
+import { QrCard } from '../../../../../../../shared/defguard-ui/components/QrCard/QrCard';
 import { SizedBox } from '../../../../../../../shared/defguard-ui/components/SizedBox/SizedBox';
 import { ThemeSpacing } from '../../../../../../../shared/defguard-ui/types';
 import { isPresent } from '../../../../../../../shared/defguard-ui/utils/isPresent';
@@ -138,7 +138,7 @@ const ModalContent = () => {
         <SizedBox height={ThemeSpacing.Xl2} />
         {isPresent(qrData) && isPresent(totpInitResponse) && (
           <div className="qr">
-            <QRCodeCanvas value={qrData} size={200} />
+            <QrCard value={qrData} />
             <SizedBox height={ThemeSpacing.Xl} />
             <p>{m.modal_mfa_enable_totp_qr_problem()}</p>
             <SizedBox height={ThemeSpacing.Sm} />

web/src/shared/components/ModalDeviceConfigSection/ModalDeviceConfigSection.tsx

@@ -1,4 +1,3 @@
-import { QRCodeCanvas } from 'qrcode.react';
 import type { AddDeviceResponse, AddDeviceResponseConfig } from '../../api/types';
 import './style.scss';
 import { ZipArchive } from '@shortercode/webzip';
@@ -7,6 +6,7 @@ import { m } from '../../../paraglide/messages';
 import { Button } from '../../defguard-ui/components/Button/Button';
 import { ButtonMenu } from '../../defguard-ui/components/ButtonMenu/MenuButton';
 import type { MenuItemsGroup } from '../../defguard-ui/components/Menu/types';
+import { QrCard } from '../../defguard-ui/components/QrCard/QrCard';
 import { Select } from '../../defguard-ui/components/Select/Select';
 import type { SelectOption } from '../../defguard-ui/components/Select/types';
 import { SizedBox } from '../../defguard-ui/components/SizedBox/SizedBox';
@@ -102,7 +102,7 @@ export const ModalDeviceConfigSection = ({ data: response, privateKey }: Props)
   );
   return (
     <div className="modal-device-config-section">
-      <QRCodeCanvas size={200} value={qrConfig} />
+      <QrCard value={qrConfig} />
       <div className="right">
         <Select
           label={m.modal_add_user_device_manual_download_location_label()}

web/src/shared/components/ModalDeviceConfigSection/style.scss

@@ -1,6 +1,6 @@
 .modal-device-config-section {
   display: grid;
-  grid-template-columns: 200px 1fr;
+  grid-template-columns: 224px 1fr;
   grid-template-rows: 1fr;
   column-gap: var(--spacing-4xl);
 

web/src/shared/components/modals/AddUserDeviceModal/steps/AddDeviceModalClientConfigStep/AddDeviceModalClientConfigStep.tsx

@@ -5,7 +5,6 @@ import { ThemeSpacing } from '../../../../../defguard-ui/types';
 import { useAddUserDeviceModal } from '../../store/useAddUserDeviceModal';
 import './style.scss';
 import { useQuery } from '@tanstack/react-query';
-import { QRCodeCanvas } from 'qrcode.react';
 import { titleCase } from 'text-case';
 import { externalLink } from '../../../../../constants';
 import { Button } from '../../../../../defguard-ui/components/Button/Button';
@@ -16,6 +15,7 @@ import { FoldButton } from '../../../../../defguard-ui/components/FoldButton/Fol
 import { IconButton } from '../../../../../defguard-ui/components/IconButton/IconButton';
 import { IconButtonMenu } from '../../../../../defguard-ui/components/IconButtonMenu/IconButtonMenu';
 import type { MenuItemsGroup } from '../../../../../defguard-ui/components/Menu/types';
+import { QrCard } from '../../../../../defguard-ui/components/QrCard/QrCard';
 import { clientArtifactsQueryOptions } from '../../../../../query';
 import { openClientLink } from '../../../../../utils/openVirtualLink';
 import { ContainerWithIcon } from '../../../../ContainerWithIcon/ContainerWithIcon';
@@ -143,7 +143,7 @@ export const AddDeviceModalClientConfigStep = () => {
           </p>
         </header>
         <div className="buttons">
-          <a href={deepLink} target="_blank">
+          <a href={deepLink} target="_blank" rel="noopener">
             <Button
               text={m.modal_add_user_device_client_desktop_one_click()}
               variant="primary"
@@ -199,7 +199,7 @@ export const AddDeviceModalClientConfigStep = () => {
         </header>
         <div className="bottom">
           <div className="qr">
-            <QRCodeCanvas value={qrData} size={200} />
+            <QrCard value={qrData} />
           </div>
           <div className="download">
             <p>{m.modal_add_user_device_client_mobile_get_mobile()}</p>

web/src/shared/components/modals/AddUserDeviceModal/steps/AddDeviceModalClientConfigStep/style.scss

@@ -105,7 +105,7 @@
 
   .bottom {
     display: grid;
-    grid-template-columns: 200px 1fr;
+    grid-template-columns: 224px 1fr;
     grid-template-rows: 1fr;
     align-items: center;
     column-gap: var(--spacing-4xl);

web/vite.config.ts

@@ -4,7 +4,7 @@ import { defineConfig, loadEnv, type ProxyOptions } from 'vite';
 import { ViteImageOptimizer } from 'vite-plugin-image-optimizer';
 import { tanstackRouter } from '@tanstack/router-plugin/vite';
 import autoprefixer from 'autoprefixer';
-import react from '@vitejs/plugin-react-swc';
+import react from "@vitejs/plugin-react";
 import * as path from 'path';
 
 const isEnvTrue = (val: string | null | undefined) => {