From 2ff535286acad07213fcee34663a49b7bf5cf62f Mon Sep 17 00:00:00 2001 From: Crimekillz Date: Thu, 18 Apr 2024 00:55:03 +0200 Subject: [PATCH] Accessibility settings without login 2/2 --- packages/client/src/pages/settings/index.vue | 373 +++++++++++-------- packages/client/src/router.ts | 36 +- 2 files changed, 245 insertions(+), 164 deletions(-) diff --git a/packages/client/src/pages/settings/index.vue b/packages/client/src/pages/settings/index.vue index 5b71457b9..86995ec70 100644 --- a/packages/client/src/pages/settings/index.vue +++ b/packages/client/src/pages/settings/index.vue @@ -89,60 +89,7 @@ const ro = new ResizeObserver((entries, observer) => { narrow = entries[0].borderBoxSize[0].inlineSize < NARROW_THRESHOLD; }); -const menuDef = computed(() => [ - { - title: i18n.ts.basicSettings, - items: [ - { - icon: "ph-user ph-bold ph-lg", - text: i18n.ts.profile, - to: "/settings/profile", - active: currentPage?.route.name === "profile", - }, - { - icon: "ph-keyhole ph-bold ph-lg", - text: i18n.ts.privacy, - to: "/settings/privacy", - active: currentPage?.route.name === "privacy", - }, - { - icon: "ph-smiley ph-bold ph-lg", - text: i18n.ts.reaction, - to: "/settings/reaction", - active: currentPage?.route.name === "reaction", - }, - { - icon: "ph-cloud ph-bold ph-lg", - text: i18n.ts.drive, - to: "/settings/drive", - active: currentPage?.route.name === "drive", - }, - { - icon: "ph-bell ph-bold ph-lg", - text: i18n.ts.notifications, - to: "/settings/notifications", - active: currentPage?.route.name === "notifications", - }, - { - icon: "ph-envelope-simple-open ph-bold ph-lg", - text: i18n.ts.email, - to: "/settings/email", - active: currentPage?.route.name === "email", - }, - { - icon: "ph-share-network ph-bold ph-lg", - text: i18n.ts.integration, - to: "/settings/integration", - active: currentPage?.route.name === "integration", - }, - { - icon: "ph-lock ph-bold ph-lg", - text: i18n.ts.security, - to: "/settings/security", - active: currentPage?.route.name === "security", - }, - ], - }, +let menuDef = computed(() => [ { title: i18n.ts.clientSettings, items: [ @@ -158,18 +105,6 @@ const menuDef = computed(() => [ to: "/settings/theme", active: currentPage?.route.name === "theme", }, - { - icon: "ph-list ph-bold ph-lg", - text: i18n.ts.navbar, - to: "/settings/navbar", - active: currentPage?.route.name === "navbar", - }, - { - icon: "ph-traffic-signal ph-bold ph-lg", - text: i18n.ts.statusbar, - to: "/settings/statusbar", - active: currentPage?.route.name === "statusbar", - }, { icon: "ph-speaker-high ph-bold ph-lg", text: i18n.ts.sounds, @@ -182,103 +117,203 @@ const menuDef = computed(() => [ to: "/settings/wellness", active: currentPage?.route.name === "wellness", }, - { - icon: "ph-plug ph-bold ph-lg", - text: i18n.ts.plugins, - to: "/settings/plugin", - active: currentPage?.route.name === "plugin", - }, - ], - }, - { - title: i18n.ts.otherSettings, - items: [ - { - icon: "ph-airplane-takeoff ph-bold ph-lg", - text: i18n.ts.migration, - to: "/settings/migration", - active: currentPage?.route.name === "migration", - }, - { - icon: "ph-package ph-bold ph-lg", - text: i18n.ts.importAndExport, - to: "/settings/import-export", - active: currentPage?.route.name === "import-export", - }, - { - icon: "ph-speaker-none ph-bold ph-lg", - text: i18n.ts.instanceMute, - to: "/settings/instance-mute", - active: currentPage?.route.name === "instance-mute", - }, - { - icon: "ph-prohibit ph-bold ph-lg", - text: i18n.ts.muteAndBlock, - to: "/settings/mute-block", - active: currentPage?.route.name === "mute-block", - }, - { - icon: "ph-speaker-x ph-bold ph-lg", - text: i18n.ts.wordMute, - to: "/settings/word-mute", - active: currentPage?.route.name === "word-mute", - }, - { - icon: "ph-key ph-bold ph-lg", - text: "API", - to: "/settings/api", - active: currentPage?.route.name === "api", - }, - { - icon: "ph-webhooks-logo ph-bold ph-lg", - text: "Webhook", - to: "/settings/webhook", - active: currentPage?.route.name === "webhook", - }, - { - icon: "ph-dots-three-outline ph-bold ph-lg", - text: i18n.ts.other, - to: "/settings/other", - active: currentPage?.route.name === "other", - }, - ], - }, - { - items: [ - { - icon: "ph-floppy-disk ph-bold ph-lg", - text: i18n.ts.preferencesBackups, - to: "/settings/preferences-backups", - active: currentPage?.route.name === "preferences-backups", - }, - { - type: "button", - icon: "ph-trash ph-bold ph-lg", - text: i18n.ts.clearCache, - action: () => { - localStorage.removeItem("locale"); - localStorage.removeItem("theme"); - unisonReload(); - }, - }, - { - type: "button", - icon: "ph-sign-in ph-bold ph-lg fa-flip-horizontal", - text: i18n.ts.logout, - action: async () => { - const { canceled } = await os.confirm({ - type: "warning", - text: i18n.ts.logoutConfirm, - }); - if (canceled) return; - signout(); - }, - danger: true, - }, ], }, ]); +// If logged in, give more options... +if ($i) { + menuDef = computed(() => [ + { + title: i18n.ts.basicSettings, + items: [ + { + icon: "ph-user ph-bold ph-lg", + text: i18n.ts.profile, + to: "/settings/profile", + active: currentPage?.route.name === "profile", + }, + { + icon: "ph-keyhole ph-bold ph-lg", + text: i18n.ts.privacy, + to: "/settings/privacy", + active: currentPage?.route.name === "privacy", + }, + { + icon: "ph-smiley ph-bold ph-lg", + text: i18n.ts.reaction, + to: "/settings/reaction", + active: currentPage?.route.name === "reaction", + }, + { + icon: "ph-cloud ph-bold ph-lg", + text: i18n.ts.drive, + to: "/settings/drive", + active: currentPage?.route.name === "drive", + }, + { + icon: "ph-bell ph-bold ph-lg", + text: i18n.ts.notifications, + to: "/settings/notifications", + active: currentPage?.route.name === "notifications", + }, + { + icon: "ph-envelope-simple-open ph-bold ph-lg", + text: i18n.ts.email, + to: "/settings/email", + active: currentPage?.route.name === "email", + }, + { + icon: "ph-share-network ph-bold ph-lg", + text: i18n.ts.integration, + to: "/settings/integration", + active: currentPage?.route.name === "integration", + }, + { + icon: "ph-lock ph-bold ph-lg", + text: i18n.ts.security, + to: "/settings/security", + active: currentPage?.route.name === "security", + }, + ], + }, + { + title: i18n.ts.clientSettings, + items: [ + { + icon: "ph-gear-six ph-bold ph-lg", + text: i18n.ts.general, + to: "/settings/general", + active: currentPage?.route.name === "general", + }, + { + icon: "ph-palette ph-bold ph-lg", + text: i18n.ts.theme, + to: "/settings/theme", + active: currentPage?.route.name === "theme", + }, + { + icon: "ph-list ph-bold ph-lg", + text: i18n.ts.navbar, + to: "/settings/navbar", + active: currentPage?.route.name === "navbar", + }, + { + icon: "ph-traffic-signal ph-bold ph-lg", + text: i18n.ts.statusbar, + to: "/settings/statusbar", + active: currentPage?.route.name === "statusbar", + }, + { + icon: "ph-speaker-high ph-bold ph-lg", + text: i18n.ts.sounds, + to: "/settings/sounds", + active: currentPage?.route.name === "sounds", + }, + { + icon: "ph-heart ph-bold ph-lg", + text: i18n.ts._wellness.name, + to: "/settings/wellness", + active: currentPage?.route.name === "wellness", + }, + { + icon: "ph-plug ph-bold ph-lg", + text: i18n.ts.plugins, + to: "/settings/plugin", + active: currentPage?.route.name === "plugin", + }, + ], + }, + { + title: i18n.ts.otherSettings, + items: [ + { + icon: "ph-airplane-takeoff ph-bold ph-lg", + text: i18n.ts.migration, + to: "/settings/migration", + active: currentPage?.route.name === "migration", + }, + { + icon: "ph-package ph-bold ph-lg", + text: i18n.ts.importAndExport, + to: "/settings/import-export", + active: currentPage?.route.name === "import-export", + }, + { + icon: "ph-speaker-none ph-bold ph-lg", + text: i18n.ts.instanceMute, + to: "/settings/instance-mute", + active: currentPage?.route.name === "instance-mute", + }, + { + icon: "ph-prohibit ph-bold ph-lg", + text: i18n.ts.muteAndBlock, + to: "/settings/mute-block", + active: currentPage?.route.name === "mute-block", + }, + { + icon: "ph-speaker-x ph-bold ph-lg", + text: i18n.ts.wordMute, + to: "/settings/word-mute", + active: currentPage?.route.name === "word-mute", + }, + { + icon: "ph-key ph-bold ph-lg", + text: "API", + to: "/settings/api", + active: currentPage?.route.name === "api", + }, + { + icon: "ph-webhooks-logo ph-bold ph-lg", + text: "Webhook", + to: "/settings/webhook", + active: currentPage?.route.name === "webhook", + }, + { + icon: "ph-dots-three-outline ph-bold ph-lg", + text: i18n.ts.other, + to: "/settings/other", + active: currentPage?.route.name === "other", + }, + ], + }, + { + items: [ + { + icon: "ph-floppy-disk ph-bold ph-lg", + text: i18n.ts.preferencesBackups, + to: "/settings/preferences-backups", + active: currentPage?.route.name === "preferences-backups", + }, + { + type: "button", + icon: "ph-trash ph-bold ph-lg", + text: i18n.ts.clearCache, + action: () => { + localStorage.removeItem("locale"); + localStorage.removeItem("theme"); + unisonReload(); + }, + }, + { + type: "button", + icon: "ph-sign-in ph-bold ph-lg fa-flip-horizontal", + text: i18n.ts.logout, + action: async () => { + const { canceled } = await os.confirm({ + type: "warning", + text: i18n.ts.logoutConfirm, + }); + if (canceled) return; + signout(); + }, + danger: true, + }, + ], + }, + ]); +} + watch($$(narrow), () => {}); onMounted(() => { @@ -287,7 +322,11 @@ onMounted(() => { narrow = el.value.offsetWidth < NARROW_THRESHOLD; if (!narrow && currentPage?.route.name == null) { - router.replace("/settings/profile"); + // Check if logged in... + if ($i) + router.replace("/settings/profile"); + else + router.replace("/settings/general"); } }); @@ -295,7 +334,11 @@ onActivated(() => { narrow = el.value.offsetWidth < NARROW_THRESHOLD; if (!narrow && currentPage?.route.name == null) { - router.replace("/settings/profile"); + // Check if logged in... + if ($i) + router.replace("/settings/profile"); + else + router.replace("/settings/general"); } }); @@ -309,12 +352,16 @@ watch(router.currentRef, (to) => { to.child?.route.name == null && !narrow ) { - router.replace("/settings/profile"); + // Check if logged in... + if ($i) + router.replace("/settings/profile"); + else + router.replace("/settings/general"); } }); const emailNotConfigured = computed( - () => instance.enableEmail && ($i.email == null || !$i.emailVerified), + () => instance.enableEmail && ($i) && ($i.email == null || !$i.emailVerified), ); provideMetadataReceiver((info) => { diff --git a/packages/client/src/router.ts b/packages/client/src/router.ts index ff6a72e21..4b164b0a8 100644 --- a/packages/client/src/router.ts +++ b/packages/client/src/router.ts @@ -58,47 +58,54 @@ export const routes = [ name: "settings", path: "/settings", component: page(() => import("./pages/settings/index.vue")), - loginRequired: true, children: [ { path: "/profile", name: "profile", component: page(() => import("./pages/settings/profile.vue")), + loginRequired: true, }, { path: "/privacy", name: "privacy", component: page(() => import("./pages/settings/privacy.vue")), + loginRequired: true, }, { path: "/reaction", name: "reaction", component: page(() => import("./pages/settings/reaction.vue")), + loginRequired: true, }, { path: "/drive", name: "drive", component: page(() => import("./pages/settings/drive.vue")), + loginRequired: true, }, { path: "/notifications", name: "notifications", component: page(() => import("./pages/settings/notifications.vue")), + loginRequired: true, }, { path: "/email", name: "email", component: page(() => import("./pages/settings/email.vue")), + loginRequired: true, }, { path: "/integration", name: "integration", component: page(() => import("./pages/settings/integration.vue")), + loginRequired: true, }, { path: "/security", name: "security", component: page(() => import("./pages/settings/security.vue")), + loginRequired: true, }, { path: "/general", @@ -109,11 +116,13 @@ export const routes = [ path: "/theme/install", name: "theme", component: page(() => import("./pages/settings/theme.install.vue")), + loginRequired: true, }, { path: "/theme/manage", name: "theme", component: page(() => import("./pages/settings/theme.manage.vue")), + loginRequired: true, }, { path: "/theme", @@ -124,6 +133,7 @@ export const routes = [ path: "/custom-css", name: "custom-css", component: page(() => import("./pages/settings/custom-css.vue")), + loginRequired: true, }, { path: "/custom-katex-macro", @@ -131,21 +141,25 @@ export const routes = [ component: page( () => import("./pages/settings/custom-katex-macro.vue"), ), + loginRequired: true, }, { path: "/account-info", name: "account-info", component: page(() => import("./pages/settings/account-info.vue")), + loginRequired: true, }, { path: "/navbar", name: "navbar", component: page(() => import("./pages/settings/navbar.vue")), + loginRequired: true, }, { path: "/statusbar", name: "statusbar", component: page(() => import("./pages/settings/statusbar.vue")), + loginRequired: true, }, { path: "/sounds", @@ -156,56 +170,67 @@ export const routes = [ path: "/plugin/install", name: "plugin", component: page(() => import("./pages/settings/plugin.install.vue")), + loginRequired: true, }, { path: "/plugin", name: "plugin", component: page(() => import("./pages/settings/plugin.vue")), + loginRequired: true, }, { path: "/import-export", name: "import-export", component: page(() => import("./pages/settings/import-export.vue")), + loginRequired: true, }, { path: "/instance-mute", name: "instance-mute", component: page(() => import("./pages/settings/instance-mute.vue")), + loginRequired: true, }, { path: "/mute-block", name: "mute-block", component: page(() => import("./pages/settings/mute-block.vue")), + loginRequired: true, }, { path: "/word-mute", name: "word-mute", component: page(() => import("./pages/settings/word-mute.vue")), + loginRequired: true, }, { path: "/api", name: "api", component: page(() => import("./pages/settings/api.vue")), + loginRequired: true, }, { path: "/apps", name: "apps", component: page(() => import("./pages/settings/apps.vue")), + loginRequired: true, }, { path: "/webhook/edit/:webhookId", name: "webhook", component: page(() => import("./pages/settings/webhook.edit.vue")), + loginRequired: true, }, { path: "/webhook/new", name: "webhook", component: page(() => import("./pages/settings/webhook.new.vue")), + loginRequired: true, }, { path: "/webhook", name: "webhook", component: page(() => import("./pages/settings/webhook.vue")), + loginRequired: true, }, { path: "/deck", @@ -216,6 +241,7 @@ export const routes = [ path: "/delete-account", name: "delete-account", component: page(() => import("./pages/settings/delete-account.vue")), + loginRequired: true, }, { path: "/preferences-backups", @@ -223,16 +249,19 @@ export const routes = [ component: page( () => import("./pages/settings/preferences-backups.vue"), ), + loginRequired: true, }, { path: "/migration", name: "migration", component: page(() => import("./pages/settings/migration.vue")), + loginRequired: true, }, { path: "/custom-css", name: "general", component: page(() => import("./pages/settings/custom-css.vue")), + loginRequired: true, }, { path: "/custom-katex-macro", @@ -240,26 +269,31 @@ export const routes = [ component: page( () => import("./pages/settings/custom-katex-macro.vue"), ), + loginRequired: true, }, { path: "/accounts", name: "profile", component: page(() => import("./pages/settings/accounts.vue")), + loginRequired: true, }, { path: "/account-info", name: "other", component: page(() => import("./pages/settings/account-info.vue")), + loginRequired: true, }, { path: "/delete-account", name: "other", component: page(() => import("./pages/settings/delete-account.vue")), + loginRequired: true, }, { path: "/other", name: "other", component: page(() => import("./pages/settings/other.vue")), + loginRequired: true, }, { path: "/wellness",