add import QR images/OTP URLs buttons to add account page

_locales/en/messages.json

@@ -229,10 +229,18 @@
         "message": "Import QR Image Backup",
         "description": "Import qr image backup."
     },
+    "import_qr_images": {
+        "message": "Import QR Images",
+        "description": "Import qr images. Shown as add account method."
+    },
     "import_backup_code": {
         "message": "Import Text Backup",
         "description": "Import backup code."
     },
+    "import_otp_urls": {
+        "message": "Import OTP URLs",
+        "description": "Import OTP URLs. Shown as add account method."
+    },
     "import_backup_qr_partly_failed": {
         "message": "Import successful, but some QR codes could not be recognized.",
         "description": "Import successful, but some QR image cannot be recognized."

src/components/Import/TextImport.vue

@@ -1,7 +1,14 @@
 <template>
   <div>
     <div class="import_code">
-      <textarea spellcheck="false" v-model="importCode"></textarea>
+      <textarea
+        spellcheck="false"
+        v-model="importCode"
+        placeholder="otpauth://totp/...
+otpauth://totp/...
+otpauth://hotp/...
+..."
+      ></textarea>
     </div>
     <div class="import_encrypted">
       <input type="checkbox" id="encryptedCode" v-model="importEncrypted" />

src/components/Popup/AddMethodPage.vue

@@ -4,6 +4,12 @@
     <a-button @click="showInfo('AddAccountPage')">
       {{ i18n.add_secret }}
     </a-button>
+    <a-button-link href="import.html?QrImport">{{
+      i18n.import_qr_images
+    }}</a-button-link>
+    <a-button-link href="import.html?TextImport">{{
+      i18n.import_otp_urls
+    }}</a-button-link>
   </div>
 </template>
 <script lang="ts">