fix: 2fa qr-code (#2996)

web/html/index.html

@@ -97,7 +97,7 @@
           <transition name="list" appear>
             <template>
               <a-row v-if="!status.isLoaded">
-                <a-card hoverable :style="{ textAlign: 'center', padding: '30px 0', marginTop: '10px', background: 'transparent' }">
+                <a-card :style="{ textAlign: 'center', padding: '30px 0', marginTop: '10px', background: 'transparent', border: 'none' }">
                   <a-spin tip='{{ i18n "loading" }}'></a-spin>
                 </a-card>
               </a-row>

web/html/modals/two_factor_modal.html

@@ -6,11 +6,8 @@
         <a-divider></a-divider>
         <p>{{ i18n "pages.settings.security.twoFactorModalFirstStep" }}</p>
         <div :style="{ display: 'flex', alignItems: 'center', flexDirection: 'column', gap: '12px' }">
-            <div
-                :style="{ border: '1px solid', borderRadius: '1rem', borderColor: themeSwitcher.isDarkTheme ? 'var(--dark-color-surface-300)' : '#d9d9d9', padding: 0 }">
-                <img :src="twoFactorModal.qrImage"
-                    :style="{ filter: themeSwitcher.isDarkTheme ? 'invert(1)' : 'none'}"
-                    :alt="twoFactorModal.token">
+            <div class="qr-bg" :style="{ width: '180px', height: '180px' }">
+                <canvas @click="copy(twoFactorModal.token)" id="twofactor-qrcode" class="qr-cv"></canvas>
             </div>
             <span :style="{ fontSize: '12px', fontFamily: 'monospace' }">[[ twoFactorModal.token ]]</span>
         </div>
@@ -88,18 +85,6 @@
                 period: 30,
                 secret: twoFactorModal.token,
             });
-
-            if (type === 'set') {
-                this.qrImage = new QRious({
-                    size: 150,
-                    value: twoFactorModal.totpObject.toString(),
-                    background: 'white',
-                    backgroundAlpha: 0,
-                    foreground: 'black',
-                    padding: 12,
-                    level: 'L'
-                }).toDataURL()
-            }
         },
         close: function () {
             twoFactorModal.enteredCode = "";
@@ -113,6 +98,36 @@
         data: {
             twoFactorModal: twoFactorModal,
         },
+        updated() {
+          if (
+            this.twoFactorModal.visible &&
+            this.twoFactorModal.type === 'set' &&
+            document.getElementById('twofactor-qrcode')
+          ) {
+            this.setQrCode('twofactor-qrcode', this.twoFactorModal.totpObject.toString());
+          }
+        },
+        methods: {
+          setQrCode(elementId, content) {
+            new QRious({
+              element: document.getElementById(elementId),
+              size: 200,
+              value: content,
+              background: 'white',
+              backgroundAlpha: 0,
+              foreground: 'black',
+              padding: 2,
+              level: 'L'
+            });
+          },
+          copy(content) {
+            ClipboardManager
+              .copyText(content)
+              .then(() => {
+                app.$message.success('{{ i18n "copied" }}')
+              })
+          },
+        }
     });
 </script>
 {{end}}