Export HTML file

interface/windows/export/export.svelte

@@ -1,4 +1,4 @@
-<div class="transparent-900 m-auto my-20 w-4/5 rounded-2xl p-10 text-left">
+<div class="transparent-900 exportCodes m-auto my-20 w-4/5 rounded-2xl p-10 text-left">
 	<h1 class="px-10">Export codes</h1>
 	<div class="mx-auto flex flex-col items-center justify-center rounded-2xl p-10">
 		<div class="transparent-800 mb-5 flex w-full flex-row items-center justify-between rounded-xl p-5 text-left">
@@ -44,7 +44,7 @@
 				<h3>Ideal for scanning the QR codes or for security backup.</h3>
 			</div>
 			<div class="ml-20 flex gap-3">
-				<button class="button">
+				<button class="button" on:click={exportHtmlFile}>
 					<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
 						<path stroke="none" d="M0 0h24v24H0z" fill="none" />
 						<path d="M14 3v4a1 1 0 0 0 1 1h4" />
@@ -58,5 +58,5 @@
 </div>
 
 <script lang="ts">
-	import { exportCodes, exportAuthmeFile } from "./index"
+	import { exportCodes, exportAuthmeFile, exportHtmlFile } from "./index"
 </script>

interface/windows/export/index.ts

@@ -3,6 +3,7 @@ import { generateMasterKey, decrypt } from "../../libraries/auth"
 import { generateTimestamp } from "../../libraries/time"
 import { textConverter } from "../../libraries/convert"
 import { getSettings } from "../../stores/settings"
+import qrcode from "qrcode-generator"
 
 let codesArray: LibImportFile
 let codesText: string
@@ -15,6 +16,7 @@ export const exportCodes = async () => {
 		const saveFile: LibAuthmeFile = JSON.parse(await fs.readTextFile(filePath))
 
 		document.querySelector(".saveExportedCodes").style.display = "block"
+		document.querySelector(".exportCodes").style.display = "none"
 
 		const password = Buffer.from(settings.security.password, "base64")
 		const key = Buffer.from(settings.security.key, "base64")
@@ -44,3 +46,34 @@ export const exportAuthmeFile = async () => {
 		fs.writeFile(filePath, JSON.stringify(saveFile, null, "\t"))
 	}
 }
+
+export const exportHtmlFile = async () => {
+	const names = codesArray.names
+	const secrets = codesArray.secrets
+	const issuers = codesArray.issuers
+
+	let htmlString = ""
+
+	for (let i = 0; i < names.length; i++) {
+		const qr = qrcode(10, "M")
+
+		qr.addData(`otpauth://totp/${names[i]}?secret=${secrets[i]}&issuer=${issuers[i]}`)
+		qr.make()
+
+		const qrSrc = qr.createDataURL(3, 3)
+
+		const element = `
+			<div>
+				<img class="img" src="${qrSrc}">
+				<h1 style=font-family:Arial;>${issuers[i]}</h1>
+			</div>`
+
+		htmlString += element
+	}
+
+	const filePath = await dialog.save({ filters: [{ name: "HTML file", extensions: ["html"] }] })
+
+	if (filePath !== null) {
+		fs.writeFile(filePath, htmlString)
+	}
+}

package.json

@@ -46,6 +46,7 @@
 		"otpauth": "^8.0.1",
 		"protocol-buffers": "^5.0.0",
 		"qrcode-decoder": "^0.2.2",
+		"qrcode-generator": "^1.4.4",
 		"svelte": "^3.49.0",
 		"ua-parser-js": "^1.0.2"
 	}