Settings page improvements

interface/components/dropdown.svelte → interface/components/sortCodes.svelte

@@ -3,7 +3,7 @@
 	on:change={(event) => {
 		active = event.detail
 
-		sendEvent()
+		$settings.settings.sortCodes = options.indexOf(active)
 	}}
 >
 	<div class="relative">
@@ -16,7 +16,7 @@
 		<Transition enter="transition duration-100 ease-out" enterFrom="transform scale-95 opacity-0" enterTo="transform scale-100 opacity-100" leave="transition duration-75 ease-out" leaveFrom="transform scale-100 opacity-100" leaveTo="transform scale-95 opacity-0">
 			<div class="absolute mt-1 w-full rounded-xl bg-white shadow-lg ">
 				<ListboxOptions class="max-h-60 overflow-auto p-2 text-base leading-6 shadow-xl focus:outline-none sm:text-sm sm:leading-5">
-					{#each people as name (name)}
+					{#each options as name (name)}
 						<ListboxOption
 							value={name}
 							class={({ active }) => {
@@ -45,22 +45,17 @@
 
 <script lang="ts">
 	import { Listbox, ListboxButton, ListboxOption, ListboxOptions, Transition } from "@rgossiaux/svelte-headlessui"
-	import { createEventDispatcher } from "svelte"
+	import { settings } from "../stores/settings"
 
 	const classNames = (...classes: (string | false | null | undefined)[]) => {
 		return classes.filter(Boolean).join(" ")
 	}
-	const people = ["Default", "A-Z", "Z-A"]
-	let active: string | undefined
-	if (active === undefined) {
-		active = people[Math.floor(Math.random() * people.length)]
-	}
 
-	const dispatch = createEventDispatcher()
+	const options = ["Default", "A-Z", "Z-A"]
 
-	const sendEvent = () => {
-		dispatch("message", {
-			value: active,
-		})
+	let active: string | undefined
+
+	if (active === undefined) {
+		active = options[$settings.settings.sortCodes]
 	}
 </script>

interface/windows/settings/index.ts

@@ -3,28 +3,31 @@ import { resetSettings } from "../../stores/settings"
 import build from "../../../build.json"
 import { fs, path, invoke, os, dialog, app } from "@tauri-apps/api"
 import { UAParser } from "ua-parser-js"
-import { navigate } from "../../libraries/navigate"
+import { navigate, open } from "../../libraries/navigate"
 
 export const about = async () => {
 	const appVersion = await app.getVersion()
 	const tauriVersion = await app.getTauriVersion()
 	const osType = await os.type()
 	const osArch = await os.arch()
 	const osVersion = await os.version()
-	const chromeVersion = new UAParser().getBrowser().version
+	const browser = new UAParser().getBrowser()
 
-	let hardware: any = await invoke("system_info")
+	const browserName = browser.name.replace("Edge", "Chromium").replace("Safari", "WebKit")
+	const browserVersion = browser.version
 
-	hardware = hardware.split("+")
+	const systemInfo: string = await invoke("system_info")
+	const hardware = systemInfo.split("+")
 
 	const cpu = hardware[0]
 		.split("@")[0]
 		.replaceAll("(R)", "")
 		.replaceAll("(TM)", "")
 		.replace(/ +(?= )/g, "")
-	const memory = `${Math.round(hardware[1] / 1024 / 1024)}GB`
 
-	dialog.message(`Authme: ${appVersion} \n\nTauri: ${tauriVersion}\nChrome: ${chromeVersion}\n\nOS version: ${osType} ${osArch.replace("x86_64", "x64")} ${osVersion}\nHardware info: ${cpu}${memory} RAM\n\nRelease date: ${build.date}\nBuild number: ${build.number}\n\nCreated by: Lőrik Levente`)
+	const memory = `${Math.round(parseInt(hardware[1]) / 1024 / 1024)}GB`
+
+	dialog.message(`Authme: ${appVersion} \n\nTauri: ${tauriVersion}\n${browserName}: ${browserVersion}\n\nOS version: ${osType} ${osArch.replace("x86_64", "x64")} ${osVersion}\nHardware info: ${cpu}${memory} RAM\n\nRelease date: ${build.date}\nBuild number: ${build.number}\n\nCreated by: Lőrik Levente`)
 }
 
 export const clearData = async () => {

interface/windows/settings/settings.svelte

@@ -89,7 +89,7 @@
 				<h3>You can choose how to sort the codes. By default codes are sorted by importing order.</h3>
 			</div>
 			<div class="ml-20 flex gap-3">
-				<Dropdown />
+				<SortCodes />
 			</div>
 		</div>
 	</div>
@@ -105,7 +105,12 @@
 				<h3>Authme is an open source software. You can view the licenses.</h3>
 			</div>
 			<div class="ml-20 flex gap-3">
-				<button class="button" on:click={about}>
+				<button
+					class="button"
+					on:click={() => {
+						open("https://authme.levminer.com/licenses")
+					}}
+				>
 					<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" />
 						<circle cx="12" cy="12" r="9" />
@@ -121,7 +126,7 @@
 				<h3>You can view the logs for debugging. You can view all the logs in the settings folder.</h3>
 			</div>
 			<div class="ml-20 flex gap-3">
-				<button class="button" on:click={about}>
+				<button class="button" on:click={showLogs}>
 					<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
 						<path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
 					</svg>
@@ -148,8 +153,9 @@
 </div>
 
 <script>
-	import Dropdown from "../../components/dropdown.svelte"
+	import SortCodes from "../../components/sortCodes.svelte"
 	import Toggle from "../../components/toggle.svelte"
-	import { about, clearData } from "./index"
+	import { about, clearData, showLogs, launchOnStartup } from "./index"
 	import { settings } from "../../stores/settings"
+	import { open } from "../../libraries/navigate"
 </script>