Change settings

interface/components/dropdown.svelte

@@ -50,7 +50,7 @@
 	const classNames = (...classes: (string | false | null | undefined)[]) => {
 		return classes.filter(Boolean).join(" ")
 	}
-	const people = ["English (US)", "Magyar (HU)"]
+	const people = ["Default", "A-Z", "Z-A"]
 	let active: string | undefined
 	if (active === undefined) {
 		active = people[Math.floor(Math.random() * people.length)]

interface/components/toggle.svelte

@@ -1,7 +1,7 @@
 <SwitchGroup as="div" class="flex items-center space-x-4">
 	<SwitchLabel class="text-xl">{checked ? "On" : "Off"}</SwitchLabel>
 
-	<Switch as="button" {checked} on:change={(event) => (checked = event.detail)} class={({ checked }) => classNames("focus:shadow-outline focus-visible:ring-popup-magenta relative inline-flex h-7 w-12  flex-shrink-0 cursor-pointer rounded-full border-2 border-white transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-4", checked ? "bg-white" : "bg-transparent")} let:checked>
+	<Switch as="button" {checked} on:change={(event) => (checked = event.detail)} class={({ checked }) => classNames("focus:shadow-outline relative inline-flex h-7 w-12 flex-shrink-0  cursor-pointer rounded-full border-2 border-white transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-4 focus-visible:ring-popup-magenta", checked ? "bg-white" : "bg-transparent")} let:checked>
 		<span class={classNames("relative top-[4px] left-1 inline-block h-4 w-4 transform rounded-full bg-white transition duration-200 ease-in-out ", checked ? "translate-x-[21px] !bg-black" : "translate-x-0")} />
 	</Switch>
 </SwitchGroup>
@@ -12,5 +12,6 @@
 	const classNames = (...classes: (string | false | null | undefined)[]) => {
 		return classes.filter(Boolean).join(" ")
 	}
-	let checked = false
+
+	export let checked = false
 </script>

interface/layout/app.svelte

@@ -12,7 +12,7 @@
 		<div class="top" />
 
 		<Route path="/"><Landing /></Route>
-		<!-- <Route path="/confirm"><Confirm /></Route> -->
+		<Route path="/confirm"><Confirm /></Route>
 
 		<Route path="/codes"><Codes /></Route>
 		<Route path="/import"><Import /></Route>
@@ -35,7 +35,7 @@
 	import Settings from "../windows/settings/settings.svelte"
 	import Import from "../windows/import/import.svelte"
 	import Export from "../windows/export/export.svelte"
-	// import Confirm from "../windows/confirm/confirm.svelte"
+	import Confirm from "../windows/confirm/confirm.svelte"
 	import Navigation from "../components/navigation.svelte"
 	import Edit from "../windows/edit/edit.svelte"
 

interface/libraries/types.d.ts

@@ -32,11 +32,27 @@ declare global {
 	}
 
 	interface LibSettings {
+		info: {
+			version: string
+			build: string
+			date: string
+		}
+
 		security: {
 			requireAuthentication: null | boolean
 			password: null | string
 			key: null | string
 		}
+
+		settings: {
+			launchOnStartup: boolean
+			minimizeToTray: boolean
+			optionalAnalytics: boolean
+			codesDescription: boolean
+			blurCodes: boolean
+			searchHistory: boolean
+			sortCodes: null | number
+		}
 	}
 
 	/** Query selector element types */

interface/stores/settings.ts

@@ -1,14 +1,31 @@
-import { writable, get } from "svelte/store"
+import { writable, get, Writable } from "svelte/store"
+import build from "../../build.json"
 
 const defaultSettings: LibSettings = {
+	info: {
+		version: build.version,
+		build: build.number,
+		date: build.date,
+	},
+
 	security: {
 		requireAuthentication: null,
 		password: null,
 		key: null,
 	},
+
+	settings: {
+		launchOnStartup: true,
+		minimizeToTray: true,
+		optionalAnalytics: true,
+		codesDescription: false,
+		blurCodes: false,
+		searchHistory: true,
+		sortCodes: null,
+	},
 }
 
-export const settings = writable(localStorage.settings ? JSON.parse(localStorage.settings) : defaultSettings)
+export const settings: Writable<LibSettings> = writable(localStorage.settings ? JSON.parse(localStorage.settings) : defaultSettings)
 
 settings.subscribe((data) => {
 	console.log("Settings changed: ", data)

interface/windows/settings/settings.svelte

@@ -8,7 +8,7 @@
 				<h3>Start Authme after your computer started. Authme will start on the system tray.</h3>
 			</div>
 			<div class="ml-20 flex gap-3">
-				<Toggle />
+				<Toggle bind:checked={$settings.settings.launchOnStartup} />
 			</div>
 		</div>
 
@@ -18,7 +18,7 @@
 				<h3>When closeing the app Authme will not quit. You can open Authme from the system tray.</h3>
 			</div>
 			<div class="ml-20 flex gap-3">
-				<Toggle />
+				<Toggle bind:checked={$settings.settings.minimizeToTray} />
 			</div>
 		</div>
 
@@ -28,7 +28,7 @@
 				<h3>Send optional analytics, the sent data is completely anonymous. This includes your Authme version and your OS version.</h3>
 			</div>
 			<div class="ml-20 flex gap-3">
-				<Toggle />
+				<Toggle bind:checked={$settings.settings.optionalAnalytics} />
 			</div>
 		</div>
 
@@ -59,7 +59,7 @@
 				<h3>The saved codes description will be visible. You can copy it after clicking it.</h3>
 			</div>
 			<div class="ml-20 flex gap-3">
-				<Toggle />
+				<Toggle bind:checked={$settings.settings.codesDescription} />
 			</div>
 		</div>
 
@@ -69,7 +69,7 @@
 				<h3>Blur the saved codes. You can still copy the codes or hover over the codes to show them.</h3>
 			</div>
 			<div class="ml-20 flex gap-3">
-				<Toggle />
+				<Toggle bind:checked={$settings.settings.blurCodes} />
 			</div>
 		</div>
 
@@ -79,7 +79,7 @@
 				<h3>Save the latest code you searched for. Works even after restart.</h3>
 			</div>
 			<div class="ml-20 flex gap-3">
-				<Toggle />
+				<Toggle bind:checked={$settings.settings.searchHistory} />
 			</div>
 		</div>
 
@@ -151,6 +151,7 @@
 	import Dropdown from "../../components/dropdown.svelte"
 	import Toggle from "../../components/toggle.svelte"
 	import { about, clearData } from "./index"
+	import { settings } from "../../stores/settings"
 
 	const handleMessage = (event) => {
 		console.log(event.detail.value)