✨ Advanced Authentication

frontend/src/routes/account/settings/security/backup_codes.svelte

@@ -0,0 +1,54 @@
+<!--
+  - This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at https://mozilla.org/MPL/2.0/.
+  -->
+<script lang="ts">
+	export let backup_code;
+
+	let already_downloaded = false;
+
+	const download_code = (force: boolean = false) => {
+		if (already_downloaded && !force) {
+			return;
+		}
+		const el = document.createElement('a');
+		el.setAttribute('href', `data:text/plain;charset=utf-8,${backup_code}`);
+		el.setAttribute('download', 'ClassQuiz-Backup-Code.txt');
+		el.style.display = 'none';
+		document.body.appendChild(el);
+		el.click();
+		document.body.removeChild(el);
+		already_downloaded = true;
+	};
+</script>
+
+<div class="w-screen h-screen fixed top-0 left-0 p-48 z-30 bg-black bg-opacity-50">
+	<div class="w-full h-full">
+		<button
+			class="bg-gray-200 px-2 py-1 rounded-t-lg hover:bg-gray-300 transition"
+			on:click={() => {
+				backup_code = undefined;
+			}}
+			>Close
+		</button>
+		<div class="bg-white rounded-b-lg rounded-tr-lg w-full h-full flex flex-col">
+			<h2 class="text-3xl m-auto">Your Backup-Code</h2>
+			<p
+				class="select-all font-mono text-xl m-auto"
+				on:click={() => {
+					download_code(false);
+				}}
+			>
+				{backup_code}
+			</p>
+			<p class="m-auto">Save this somewhere safe!</p>
+			<button
+				on:click={() => {
+					download_code(true);
+				}}
+				class="m-auto p-2 bg-[#B07156] rounded-lg">Download code</button
+			>
+		</div>
+	</div>
+</div>