Make clear data button more granular (#315)

Levminer · Sep 1, 2024 · 8305443 · 8305443
1 parent 97a3aa5
commit 8305443
Show file tree

Hide file tree

Showing 3 changed files with 119 additions and 19 deletions.
diff --git a/interface/components/toggle.svelte b/interface/components/toggle.svelte
@@ -1,5 +1,5 @@
 <SwitchGroup as="div" class="flex items-center space-x-4">
-	<SwitchLabel class="text-xl">{checked ? "On" : "Off"}</SwitchLabel>
+	<SwitchLabel class={classNames("text-xl ", showLabel ? "visible" : "hidden")}>{checked ? "On" : "Off"}</SwitchLabel>
 
 	<Switch as="button" {checked} on:click 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 left-1 top-[4px] 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")} />
@@ -13,5 +13,6 @@
 		return classes.filter(Boolean).join(" ")
 	}
 
+	export let showLabel = true
 	export let checked = false
 </script>
diff --git a/interface/windows/settings/index.ts b/interface/windows/settings/index.ts
@@ -44,31 +44,90 @@ export const about = async () => {
 	}
 }
 
-export const clearData = async () => {
-	const confirm0 = await dialog.ask("Are you sure you want to clear all data? \n\nThis cannot be undone!", { type: "warning" })
+/**
+ * Delete selected data
+ */
+export const clearData = async (clearCodesOption: boolean, clearSettingsOption: boolean) => {
+	const dialogClearData: LibDialogElement = document.querySelector(".dialogClearData")
+
+	// clear codes
+	if (clearCodesOption && !clearSettingsOption) {
+		const confirm0 = await dialog.ask("Are you sure you want to clear 2FA codes? \n\nThis cannot be undone!", { type: "warning" })
+
+		if (confirm0 === false) {
+			return
+		}
+
+		settings.vault.codes = null
+		setSettings(settings)
+
+		dialogClearData.close()
+		navigate("codes")
+	}
+
+	// clear settings
+	if (!clearCodesOption && clearSettingsOption) {
+		const confirm0 = await dialog.ask("Are you sure you want to clear all settings? \n\nThis cannot be undone!", { type: "warning" })
+
+		if (confirm0 === false) {
+			return
+		}
 
-	if (confirm0 === false) {
-		return
+		settings.settings.language = 0
+		settings.settings.launchOnStartup = true
+		settings.settings.minimizeToTray = true
+		settings.settings.optionalAnalytics = true
+		settings.settings.codesDescription = false
+		settings.settings.blurCodes = false
+		settings.settings.sortCodes = 0
+		settings.settings.codesLayout = 0
+		setSettings(settings)
+
+		dialogClearData.close()
+		navigate("settings")
 	}
 
-	const confirm1 = await dialog.ask("Are you absolutely sure? \n\nThere is no way back!", { type: "warning" })
+	// clear everything
+	if (clearCodesOption && clearSettingsOption) {
+		const confirm0 = await dialog.ask("Are you sure you want to clear all data? \n\nThis cannot be undone!", { type: "warning" })
+
+		if (confirm0 === false) {
+			return
+		}
 
-	if (confirm1 === true) {
-		localStorage.clear()
-		sessionStorage.clear()
+		const confirm1 = await dialog.ask("Are you absolutely sure? \n\nThere is no way back!", { type: "warning" })
 
-		await deleteEncryptionKey("encryptionKey")
+		if (confirm1 === true) {
+			localStorage.clear()
+			sessionStorage.clear()
 
-		if (build.dev === false) {
-			await invoke("disable_auto_launch")
-			process.exit()
-		} else {
-			navigate("/")
-			location.reload()
+			await deleteEncryptionKey("encryptionKey")
+
+			if (build.dev === false) {
+				await invoke("disable_auto_launch")
+				process.exit()
+			} else {
+				navigate("/")
+				location.reload()
+			}
 		}
 	}
 }
 
+/**
+ * Show Clear data dialog
+ */
+export const showClearDataDialog = () => {
+	const dialogClearData: LibDialogElement = document.querySelector(".dialogClearData")
+	const closeDialog = document.querySelector(".dialogClearDataClose")
+
+	closeDialog.addEventListener("click", () => {
+		dialogClearData.close()
+	})
+
+	dialogClearData.showModal()
+}
+
 /**
  * Delete all imported codes
  */

diff --git a/interface/windows/settings/settings.svelte b/interface/windows/settings/settings.svelte
@@ -57,8 +57,8 @@
 				<h2>{language.settings.clearData}</h2>
 				<h3>{language.settings.clearDataText}</h3>
 			</div>
-			<div class="ml-20 flex gap-3">
-				<button class="button" on:click={clearData}>
+			<div class="ml-20 flex flex-col items-end gap-3">
+				<button class="button" on:click={showClearDataDialog}>
 					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18" /><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" /><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" /><line x1="10" y1="11" x2="10" y2="17" /><line x1="14" y1="11" x2="14" y2="17" /></svg>
 					{language.settings.clearDataButton}
 				</button>
@@ -207,10 +207,48 @@
 	</div>
 </div>
 
+<dialog class="dialog dialogClearData">
+	<h2>{language.settings.clearData}</h2>
+	<h3>{language.settings.clearDataText}</h3>
+
+	<div class="transparent-800 mt-5 flex flex-row items-center justify-between rounded-xl p-5">
+		<div>
+			<h3>2FA Codes</h3>
+		</div>
+		<div class="ml-20 flex gap-3">
+			<Toggle showLabel={false} bind:checked={clearCodesOption} />
+		</div>
+	</div>
+
+	<div class="transparent-800 mt-5 flex flex-row items-center justify-between rounded-xl p-5">
+		<div>
+			<h3>Other Settings</h3>
+		</div>
+		<div class="ml-20 flex gap-3">
+			<Toggle showLabel={false} bind:checked={clearSettingsOption} />
+		</div>
+	</div>
+
+	<div class="mt-10 flex space-x-5">
+		<button class="button dialogClearDataClose">
+			<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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+			</svg>
+			{language.common.cancel}
+		</button>
+		<button class="button" on:click={() => clearData(clearCodesOption, clearSettingsOption)}>
+			<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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+			</svg>
+			{language.common.confirm}
+		</button>
+	</div>
+</dialog>
+
 <script>
 	import Select from "../../components/select.svelte"
 	import Toggle from "../../components/toggle.svelte"
-	import { about, clearData, showLogs, launchOnStartup, toggleWindowCapture, deleteCodes } from "./index"
+	import { about, clearData, showClearDataDialog, showLogs, launchOnStartup, toggleWindowCapture, deleteCodes } from "./index"
 	import { settings } from "../../stores/settings"
 	import { open } from "../../utils/navigate"
 	import { deleteShortcut, editShortcut, resetShortcut, shortcuts } from "../../utils/shortcuts"
@@ -220,4 +258,6 @@
 	const language = getLanguage()
 
 	$: windowCapture = false
+	$: clearCodesOption = true
+	$: clearSettingsOption = false
 </script>