Web code descriptions

Levminer · Nov 12, 2024 · b6b2670 · b6b2670
1 parent 891f3d1
commit b6b2670
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 41 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/website/src/components/header.svelte b/website/src/components/header.svelte
@@ -6,38 +6,18 @@
 		</a>
 
 		<nav class="flex flex-wrap items-center justify-center text-base md:ml-auto md:mr-auto">
-			<a href="/" class="mr-5 text-2xl duration-200 ease-in hover:text-gray-300">Home</a>
+			<a href="/" class="mr-5 text-xl duration-200 ease-in hover:text-gray-300">Home</a>
 
-			<a href="/#features" class="mr-5 text-2xl duration-200 ease-in hover:text-gray-300"
+			<a href="/#features" class="mr-5 text-xl duration-200 ease-in hover:text-gray-300"
 				>Features</a
 			>
 
-			<a href="/#downloads" class="mr-5 text-2xl duration-200 ease-in hover:text-gray-300">
+			<a href="/#downloads" class="mr-5 text-xl duration-200 ease-in hover:text-gray-300">
 				Downloads
 			</a>
 		</nav>
-		<a class="mx-3 mt-3 md:mt-0" href="/codes">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="h-10 w-10"
-				viewBox="0 0 24 24"
-				fill="none"
-				stroke="currentColor"
-				stroke-width="2"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				><circle cx="12" cy="12" r="10" /><circle cx="12" cy="12" r="4" /><line
-					x1="21.17"
-					x2="12"
-					y1="8"
-					y2="8"
-				/><line x1="3.95" x2="8.54" y1="6.06" y2="14" /><line
-					x1="10.88"
-					x2="15.46"
-					y1="21.94"
-					y2="14"
-				/></svg
-			>
+		<a class="mx-3 mt-3 md:mt-0 button" href="/codes">
+			Web version
 		</a>
 	</div>
 </header>
diff --git a/website/src/routes/(app)/codes/+page.svelte b/website/src/routes/(app)/codes/+page.svelte
@@ -2,6 +2,7 @@
 	import { onDestroy, onMount } from "svelte"
 	import type {} from "@interface/utils/types.d.ts"
 	import { TOTP } from "otpauth"
+	import { settings } from "../../../../../interface/stores/settings"
 
 	$: codes = {
 		names: [],
@@ -102,12 +103,8 @@
 						<div class="flex flex-row justify-between">
 							<div class="flex flex-col justify-start mb-3">
 								<div class="flex">
-									<p class="text-2xl font-medium whitespace-nowrap">
-										{#if item.length > 16}
-											{item.slice(0, 16)}...
-										{:else}
-											{item}
-										{/if}
+									<p class="text-2xl font-medium whitespace-nowrap truncate">
+										{item}
 									</p>
 								</div>
 
@@ -140,9 +137,15 @@
 							</div>
 						</div>
 
-						<div class="progressFull">
+						<div class="progressFull mb-3">
 							<div id={`progress${i}`} class="progressFill" />
 						</div>
+
+						{#if $settings.settings.codesDescription === true}
+							<div>
+								<p class="text-xl truncate text-gray-200" id={`code${i}`}>{codes.names[i]}</p>
+							</div>
+						{/if}
 					</div>
 				{/each}
 			{/if}

diff --git a/website/src/routes/(app)/settings/+page.svelte b/website/src/routes/(app)/settings/+page.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
 	import build from "../../../../../build.json"
+	import { settings } from "../../../../../interface/stores/settings"
+	import Toggle from "../../../../../interface/components/toggle.svelte"
 
 	const about = () => {
 		alert(
@@ -8,13 +10,22 @@
 	}
 </script>
 
-<div class="min-h-screen flex justify-center items-start">
-	<div class="transparent-900 p-5 rounded-xl main m-auto my-20 w-[95%] lg:w-2/3">
+<div class="flex flex-col my-20 justify-center items-start space-y-10">
+	<div class="transparent-900 p-5 rounded-xl m-auto w-[95%] lg:w-2/3">
 		<div class="flex flex-col justify-start items-start">
 			<h1 class="text-2xl">About Authme</h1>
 			<h2 class="text-xl text-gray-200">Information about your Authme build and your computer.</h2>
-			<input class="hidden" type="file" id="fileUpload" accept=".authme" />
 			<button class="button mt-3" on:click={about}>About</button>
 		</div>
 	</div>
+
+	<div class="transparent-900 p-5 rounded-xl m-auto w-[95%] lg:w-2/3">
+		<div class="flex flex-col justify-start items-start">
+			<h1 class="text-2xl">Codes description</h1>
+			<h2 class="text-xl text-gray-200">2FA code descriptions will be visible.</h2>
+			<div class="mt-3">
+				<Toggle bind:checked={$settings.settings.codesDescription} />
+			</div>
+		</div>
+	</div>
 </div>
diff --git a/website/src/routes/+layout.server.ts b/website/src/routes/+layout.server.ts
@@ -1 +1,2 @@
 export const prerender = true
+export const ssr = false
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export const prerender = true
		export const ssr = false