chore: replace two factor token input with qr-code

web/assets/js/util/index.js

@@ -512,7 +512,7 @@ class Wireguard {
 }
 
 class ClipboardManager {
-    static copyText(content = "") {
+    static copyText(content = "", hasSuccessCopyMessage = false, successCopyMessage = '') {
         // !! here old way of copying is used because not everyone can afford https connection
         return new Promise((resolve) => {
             try {
@@ -535,6 +535,12 @@ class ClipboardManager {
 
                 window.document.body.removeChild(textarea);
 
+                if (
+                    hasSuccessCopyMessage
+                ) {
+                    Vue.prototype.$message['success'](successCopyMessage)
+                }
+
                 resolve(true)
             } catch {
                 resolve(false)

web/html/settings.html

@@ -122,6 +122,7 @@
     </a-layout>
   </a-layout>
 {{template "js" .}}
+<script src="{{ .base_path }}assets/qrcode/qrious2.min.js?{{ .cur_ver }}"></script>
 <script src="{{ .base_path }}assets/js/model/setting.js?{{ .cur_ver }}"></script>
 {{template "component/aSidebar" .}}
 {{template "component/aThemeSwitch" .}}
@@ -140,6 +141,7 @@
       lang: LanguageManager.getLanguage(),
       remarkModels: { i: 'Inbound', e: 'Email', o: 'Other' },
       remarkSeparators: [' ', '-', '_', '@', ':', '~', '|', ',', '.', '/'],
+      twoFactor: { qrElement: null },
       datepickerList: [{ name: 'Gregorian (Standard)', value: 'gregorian' }, { name: 'Jalalian (شمسی)', value: 'jalalian' }],
       remarkSample: '',
       defaultFragment: {
@@ -302,9 +304,22 @@
       },
       toggleTwoFactor(newValue) {
         if (newValue) {
-          this.allSetting.twoFactorToken = RandomUtil.randomBase32String();
+          const newTwoFactorToken = RandomUtil.randomBase32String();
+
+          this.allSetting.twoFactorToken = newTwoFactorToken;
+
+          this.twoFactor.qrElement = new QRious({
+            size: 150,
+            value: `otpauth://totp/3x-ui:Administrator?secret=${newTwoFactorToken}&issuer=3x-ui`,
+            background: 'white',
+            backgroundAlpha: 0,
+            foreground: 'black',
+            padding: 12,
+            level: 'L'
+          })
         } else {
           this.allSetting.twoFactorToken = "";
+          this.twoFactor.qrElement = null;
         }
       },
       addNoise() {
@@ -497,6 +512,19 @@
     },
     async mounted() {
       await this.getAllSetting();
+
+      if (this.allSetting.twoFactorEnable) {
+        this.twoFactor.qrElement = new QRious({
+          size: 150,
+          value: `otpauth://totp/3x-ui:Administrator?secret=${this.allSetting.twoFactorToken}&issuer=3x-ui`,
+          background: 'white',
+          backgroundAlpha: 0,
+          foreground: 'black',
+          padding: 12,
+          level: 'L'
+        })
+      }
+
       while (true) {
         await PromiseUtil.sleep(1000);
         this.saveBtnDisable = this.oldAllSetting.equals(this.allSetting);

web/html/settings/panel/security.html

@@ -43,9 +43,18 @@
             <template #title>{{ i18n "pages.settings.security.twoFactorToken" }}</template>
             <template #description>{{ i18n "pages.settings.security.twoFactorTokenDesc" }}</template>
             <template #control>
-                <a-input disabled="disabled" v-model="allSetting.twoFactorToken" :style="{ cursor: 'text' }">
-                    <a-icon slot="addonAfter" type="copy" @click="ClipboardManager.copyText(allSetting.twoFactorToken)"/>            
-                </a-input>
+                <a-space direction="horizontal" size="middle">
+                    <div
+                        :style="{ border: '1px solid', borderRadius: '1rem', borderColor: themeSwitcher.isDarkTheme ? 'var(--dark-color-surface-300)' : '#d9d9d9', padding: 0 }">
+                        <img id="twoFactorQr" :src="twoFactor.qrElement.toDataURL()" :style="{ filter: themeSwitcher.isDarkTheme ? 'invert(1)' : 'none'}"></canvas>
+                    </div>
+                    <a-tooltip>
+                        <template #title>
+                            <span>{{ i18n "copy" }}</span>
+                        </template>
+                        <a-icon type="copy" @click='ClipboardManager.copyText(allSetting.twoFactorToken, true, `{{ i18n "copySuccess" }}`)'></a-icon>
+                    </a-tooltip>
+                </a-space>
             </template>
         </a-setting-list-item>
     </a-collapse-panel>