mirror of
https://github.com/Drop-OSS/drop-app.git
synced 2025-11-13 08:12:44 +10:00
feat: cleanup settings menu and fix styles
This commit is contained in:
DecDuck
@ -99,11 +99,6 @@ function navigate(close: () => any, to: NavigationItem) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const navigation: NavigationItem[] = [
|
const navigation: NavigationItem[] = [
|
||||||
{
|
|
||||||
label: "Account settings",
|
|
||||||
route: "/account",
|
|
||||||
prefix: "",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
label: "App settings",
|
label: "App settings",
|
||||||
route: "/settings",
|
route: "/settings",
|
||||||
|
|||||||
@ -1,72 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="mx-auto max-w-7xl px-8">
|
|
||||||
<div class="border-b border-zinc-700 py-5">
|
|
||||||
<h3 class="text-base font-semibold font-display leading-6 text-zinc-100">
|
|
||||||
Account
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-5">
|
|
||||||
<div class="divide-y divide-zinc-700">
|
|
||||||
<div class="py-6">
|
|
||||||
<div class="flex flex-col gap-4">
|
|
||||||
<div class="flex flex-row items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<h3 class="text-sm font-medium leading-6 text-zinc-100">Sign out</h3>
|
|
||||||
<p class="mt-1 text-sm leading-6 text-zinc-400">
|
|
||||||
Sign out of your Drop account on this device
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
@click="signOut"
|
|
||||||
type="button"
|
|
||||||
class="rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
|
|
||||||
>
|
|
||||||
Sign out
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="error" class="rounded-md bg-red-600/10 p-4">
|
|
||||||
<div class="flex">
|
|
||||||
<div class="flex-shrink-0">
|
|
||||||
<XCircleIcon class="h-5 w-5 text-red-600" aria-hidden="true" />
|
|
||||||
</div>
|
|
||||||
<div class="ml-3">
|
|
||||||
<h3 class="text-sm font-medium text-red-600">
|
|
||||||
{{ error }}
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { invoke } from "@tauri-apps/api/core";
|
|
||||||
import { listen } from '@tauri-apps/api/event'
|
|
||||||
import { useRouter } from '#imports'
|
|
||||||
import { XCircleIcon } from "@heroicons/vue/16/solid";
|
|
||||||
|
|
||||||
const router = useRouter()
|
|
||||||
const error = ref<string | null>(null)
|
|
||||||
|
|
||||||
// Listen for auth events
|
|
||||||
onMounted(async () => {
|
|
||||||
await listen('auth/signedout', () => {
|
|
||||||
router.push('/auth/signedout')
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
async function signOut() {
|
|
||||||
try {
|
|
||||||
error.value = null
|
|
||||||
await invoke('sign_out')
|
|
||||||
} catch (e) {
|
|
||||||
error.value = `Failed to sign out: ${e}`
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -45,6 +45,7 @@ import type { Component } from "vue";
|
|||||||
import type { NavigationItem } from "~/types";
|
import type { NavigationItem } from "~/types";
|
||||||
import { platform } from '@tauri-apps/plugin-os';
|
import { platform } from '@tauri-apps/plugin-os';
|
||||||
import { invoke } from "@tauri-apps/api/core";
|
import { invoke } from "@tauri-apps/api/core";
|
||||||
|
import { UserIcon } from "@heroicons/vue/20/solid";
|
||||||
|
|
||||||
const systemData = await invoke<{
|
const systemData = await invoke<{
|
||||||
clientId: string;
|
clientId: string;
|
||||||
@ -101,6 +102,12 @@ const navigation = computed(() => [
|
|||||||
prefix: "/settings/downloads",
|
prefix: "/settings/downloads",
|
||||||
icon: ArrowDownTrayIcon,
|
icon: ArrowDownTrayIcon,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
label: "Account",
|
||||||
|
route: "/settings/account",
|
||||||
|
prefix: "/settings/account",
|
||||||
|
icon: UserIcon
|
||||||
|
},
|
||||||
...(isDebugMode.value ? [{
|
...(isDebugMode.value ? [{
|
||||||
label: "Debug Info",
|
label: "Debug Info",
|
||||||
route: "/settings/debug",
|
route: "/settings/debug",
|
||||||
|
|||||||
64
pages/settings/account.vue
Normal file
64
pages/settings/account.vue
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
<template>
|
||||||
|
<div class="border-b border-zinc-700 py-5">
|
||||||
|
<h3 class="text-base font-semibold font-display leading-6 text-zinc-100">
|
||||||
|
General
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-5 flex flex-col gap-4">
|
||||||
|
<div class="flex flex-row items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h3 class="text-sm font-medium leading-6 text-zinc-100">Sign out</h3>
|
||||||
|
<p class="mt-1 text-sm leading-6 text-zinc-400">
|
||||||
|
Sign out of your Drop account on this device
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
@click="signOut"
|
||||||
|
type="button"
|
||||||
|
class="rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
|
||||||
|
>
|
||||||
|
Sign out
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="error" class="rounded-md bg-red-600/10 p-4">
|
||||||
|
<div class="flex">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<XCircleIcon class="h-5 w-5 text-red-600" aria-hidden="true" />
|
||||||
|
</div>
|
||||||
|
<div class="ml-3">
|
||||||
|
<h3 class="text-sm font-medium text-red-600">
|
||||||
|
{{ error }}
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { invoke } from "@tauri-apps/api/core";
|
||||||
|
import { listen } from "@tauri-apps/api/event";
|
||||||
|
import { useRouter } from "#imports";
|
||||||
|
import { XCircleIcon } from "@heroicons/vue/16/solid";
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const error = ref<string | null>(null);
|
||||||
|
|
||||||
|
// Listen for auth events
|
||||||
|
onMounted(async () => {
|
||||||
|
await listen("auth/signedout", () => {
|
||||||
|
router.push("/auth/signedout");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
async function signOut() {
|
||||||
|
try {
|
||||||
|
error.value = null;
|
||||||
|
await invoke("sign_out");
|
||||||
|
} catch (e) {
|
||||||
|
error.value = `Failed to sign out: ${e}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -1,8 +1,15 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="border-b border-zinc-700 py-5">
|
||||||
<div class="border-b border-zinc-600 py-2 px-1">
|
<h3 class="text-base font-semibold font-display leading-6 text-zinc-100">
|
||||||
|
Downloads
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="mt-5">
|
||||||
|
<div class="border-b border-zinc-600">
|
||||||
<div class="-ml-4 -mt-2 flex flex-wrap items-center justify-between sm:flex-nowrap">
|
<div class="-ml-4 -mt-2 flex flex-wrap items-center justify-between sm:flex-nowrap">
|
||||||
<div class="ml-4 mt-2">
|
<div class="ml-4 mt-2 pb-4">
|
||||||
<h3 class="text-base font-display font-semibold text-zinc-100">
|
<h3 class="text-base font-display font-semibold text-zinc-100">
|
||||||
Install directories
|
Install directories
|
||||||
</h3>
|
</h3>
|
||||||
|
|||||||
@ -1,60 +1,59 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="divide-y divide-zinc-700">
|
<div class="border-b border-zinc-700 py-5">
|
||||||
<div class="py-6">
|
<h3 class="text-base font-semibold font-display leading-6 text-zinc-100">
|
||||||
<h2 class="text-base font-semibold font-display leading-7 text-zinc-100">General</h2>
|
General
|
||||||
<p class="mt-1 text-sm leading-6 text-zinc-400">
|
</h3>
|
||||||
Configure basic application settings
|
</div>
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="mt-10 space-y-8">
|
<div class="mt-5 space-y-8">
|
||||||
<div class="flex flex-row items-center justify-between">
|
<div class="flex flex-row items-center justify-between">
|
||||||
<div>
|
<div>
|
||||||
<h3 class="text-sm font-medium leading-6 text-zinc-100">Start with system</h3>
|
<h3 class="text-sm font-medium leading-6 text-zinc-100">
|
||||||
<p class="mt-1 text-sm leading-6 text-zinc-400">
|
Start with system
|
||||||
Drop will automatically start when you log into your computer
|
</h3>
|
||||||
</p>
|
<p class="mt-1 text-sm leading-6 text-zinc-400">
|
||||||
</div>
|
Drop will automatically start when you log into your computer
|
||||||
<Switch
|
</p>
|
||||||
v-model="autostartEnabled"
|
</div>
|
||||||
:class="[
|
<Switch
|
||||||
autostartEnabled ? 'bg-blue-600' : 'bg-zinc-700',
|
v-model="autostartEnabled"
|
||||||
'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out'
|
:class="[
|
||||||
]"
|
autostartEnabled ? 'bg-blue-600' : 'bg-zinc-700',
|
||||||
>
|
'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out',
|
||||||
<span
|
]"
|
||||||
:class="[
|
>
|
||||||
autostartEnabled ? 'translate-x-5' : 'translate-x-0',
|
<span
|
||||||
'pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out'
|
:class="[
|
||||||
]"
|
autostartEnabled ? 'translate-x-5' : 'translate-x-0',
|
||||||
/>
|
'pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out',
|
||||||
</Switch>
|
]"
|
||||||
</div>
|
/>
|
||||||
</div>
|
</Switch>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { Switch } from '@headlessui/vue'
|
import { Switch } from "@headlessui/vue";
|
||||||
import { invoke } from "@tauri-apps/api/core";
|
import { invoke } from "@tauri-apps/api/core";
|
||||||
|
|
||||||
defineProps<{}>()
|
defineProps<{}>();
|
||||||
|
|
||||||
const autostartEnabled = ref<boolean>(false)
|
const autostartEnabled = ref<boolean>(false);
|
||||||
|
|
||||||
// Load initial state
|
// Load initial state
|
||||||
invoke('get_autostart_enabled').then((enabled) => {
|
invoke("get_autostart_enabled").then((enabled) => {
|
||||||
autostartEnabled.value = enabled as boolean
|
autostartEnabled.value = enabled as boolean;
|
||||||
})
|
});
|
||||||
|
|
||||||
// Watch for changes and update autostart
|
// Watch for changes and update autostart
|
||||||
watch(autostartEnabled, async (newValue: boolean) => {
|
watch(autostartEnabled, async (newValue: boolean) => {
|
||||||
try {
|
try {
|
||||||
await invoke('toggle_autostart', { enabled: newValue })
|
await invoke("toggle_autostart", { enabled: newValue });
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Failed to toggle autostart:', error)
|
console.error("Failed to toggle autostart:", error);
|
||||||
// Revert the toggle if it failed
|
// Revert the toggle if it failed
|
||||||
autostartEnabled.value = !newValue
|
autostartEnabled.value = !newValue;
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user