From 5e6e881b9877e6db9d957b6608017b61b14bff01 Mon Sep 17 00:00:00 2001 From: Jesse Wierzbinski Date: Wed, 19 Jun 2024 15:40:13 -1000 Subject: [PATCH] refactor: :recycle: Refactor toaster code for more accessibility and better UI --- bun.lockb | Bin 646236 -> 646236 bytes components/loading.vue | 58 +++++++-------- components/notifications/Renderer.vue | 93 +++++++++---------------- components/settings/oidc.vue | 4 +- components/settings/profile-editor.vue | 2 +- components/sidebars/navigation.vue | 2 +- composables/CacheRefresh.ts | 2 +- composables/Client.ts | 2 +- composables/EventBus.ts | 11 ++- package.json | 2 +- pages/oauth/authorize.vue | 24 +++---- pages/oauth/code.vue | 6 +- pages/oauth/consent.vue | 16 ++--- pages/oauth/reset.vue | 25 +++---- 14 files changed, 96 insertions(+), 151 deletions(-) diff --git a/bun.lockb b/bun.lockb index c94105c98757008bc13eb94e813272a1ab53ccaf..1069226622bcb1bff2a6e686a9fb34e071903a56 100755 GIT binary patch delta 169 zcmV;a09OCpxF_7WCy*{6S${))v4*C0vl;Z1DC|uQ`wX3JuAk#OA`C25+~u|Zfljqf z0os0(=y))PSbqVBSbqYySbqbxOh6IamlCYG#DSt=3} const loading = ref(true); -const oidcError = useRequestURL().searchParams.get( - "oidc_account_linking_error", -); -const oidcErrorDesc = useRequestURL().searchParams.get( - "oidc_account_linking_error_message", -); -const oidcAccountLinked = useRequestURL().searchParams.get( - "oidc_account_linked", -); +const params = useUrlSearchParams(); const estimatedProgress = (duration: number, elapsed: number) => (2 / Math.PI) * 100 * Math.atan(((elapsed / duration) * 100) / 50); @@ -39,39 +31,41 @@ app.hook("page:finish", async () => { await new Promise((resolve) => setTimeout(resolve, 300)); loading.value = false; - if (oidcError) { + if (params.oidc_account_linking_error) { useEvent("notification:new", { type: "error", - title: oidcError, - message: oidcErrorDesc ?? undefined, - persistent: true, - onDismiss: () => { - // Remove data from URL - window.history.replaceState( - {}, - document.title, - window.location.pathname, - ); + title: params.oidc_account_linking_error, + description: params.oidc_account_linking_error_message ?? undefined, + duration: 999999, + onStatusChange: (details) => { + if (details.status === "dismissing") { + // Remove data from URL + window.history.replaceState( + {}, + document.title, + window.location.pathname, + ); + } }, }); - - // Remove the error from the URL } - if (oidcAccountLinked) { + if (params.oidc_account_linked) { useEvent("notification:new", { type: "success", title: "Account linked", - message: + description: "Your account has been successfully linked to your OpenID Connect provider.", - persistent: true, - onDismiss: () => { - // Remove data from URL - window.history.replaceState( - {}, - document.title, - window.location.pathname, - ); + duration: 999999, + onStatusChange: (details) => { + if (details.status === "dismissing") { + // Remove data from URL + window.history.replaceState( + {}, + document.title, + window.location.pathname, + ); + } }, }); } diff --git a/components/notifications/Renderer.vue b/components/notifications/Renderer.vue index c2bf835..c4d3269 100644 --- a/components/notifications/Renderer.vue +++ b/components/notifications/Renderer.vue @@ -1,71 +1,42 @@ - \ No newline at end of file diff --git a/components/settings/oidc.vue b/components/settings/oidc.vue index 67a8f4f..a81131c 100644 --- a/components/settings/oidc.vue +++ b/components/settings/oidc.vue @@ -51,7 +51,7 @@ const link = async (providerId: string) => { useEvent("notification:new", { title: "Failed to link account", - message: e.response.data.error, + description: e.response.data.error, type: "error", }); } @@ -78,7 +78,7 @@ const unlink = async (providerId: string) => { useEvent("notification:new", { title: "Failed to unlink account", - message: e.response.data.error, + description: e.response.data.error, type: "error", }); } diff --git a/components/settings/profile-editor.vue b/components/settings/profile-editor.vue index bd8b6d6..0de82a4 100644 --- a/components/settings/profile-editor.vue +++ b/components/settings/profile-editor.vue @@ -112,7 +112,7 @@ const save = async () => { useEvent("notification:new", { title: "Failed to update profile", - message: error.response.data.error, + description: error.response.data.error, type: "error", }); } diff --git a/components/sidebars/navigation.vue b/components/sidebars/navigation.vue index 79b6df9..e9f58eb 100644 --- a/components/sidebars/navigation.vue +++ b/components/sidebars/navigation.vue @@ -222,7 +222,7 @@ const signOut = async (id?: string) => { await useEvent("notification:new", { type: "success", title: "Signed out", - message: "Account signed out successfully", + description: "Account signed out successfully", }); }; \ No newline at end of file diff --git a/composables/CacheRefresh.ts b/composables/CacheRefresh.ts index 0fa89de..2f3dcb5 100644 --- a/composables/CacheRefresh.ts +++ b/composables/CacheRefresh.ts @@ -29,7 +29,7 @@ export const useCacheRefresh = (client: MaybeRef) => { useEvent("notification:new", { type: "error", title: "Your session has expired", - message: + description: "You have been logged out. Please log in again.", }); } diff --git a/composables/Client.ts b/composables/Client.ts index 92b3f21..d1a68d4 100644 --- a/composables/Client.ts +++ b/composables/Client.ts @@ -17,7 +17,7 @@ export const useClient = ( useEvent("notification:new", { title: "An error occured", type: "error", - message: + description: error.response.data.error ?? "No error message provided", }); diff --git a/composables/EventBus.ts b/composables/EventBus.ts index 65d07fa..0928750 100644 --- a/composables/EventBus.ts +++ b/composables/EventBus.ts @@ -1,14 +1,11 @@ +import type { createToaster } from "@ark-ui/vue"; import type { Attachment, Status } from "@lysand-org/client/types"; import mitt from "mitt"; import type { Identity } from "./Identities"; -export type NotificationEvent = { - type: "error" | "success" | "progress"; - title: string; - message?: string; - persistent?: boolean; - onDismiss?: () => void; -}; +export type NotificationEvent = Parameters< + ReturnType["create"] +>[0]; type ApplicationEvents = { "note:reply": Status; diff --git a/package.json b/package.json index f03354d..402be3b 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ }, "dependencies": { "@ark-ui/vue": "^3.4.0", - "@lysand-org/client": "^0.2.0", + "@lysand-org/client": "^0.2.1", "@nuxt/fonts": "^0.7.0", "@tailwindcss/typography": "^0.5.13", "@vee-validate/nuxt": "^4.13.1", diff --git a/pages/oauth/authorize.vue b/pages/oauth/authorize.vue index e24edde..abfc59f 100644 --- a/pages/oauth/authorize.vue +++ b/pages/oauth/authorize.vue @@ -4,12 +4,12 @@ class="mx-auto hidden md:inline-block h-20 ring-1 ring-white/20 rounded" />
+ :action="`/api/auth/login?redirect_uri=${params.redirect_uri}&response_type=${params.response_type}&client_id=${params.client_id}&scope=${params.scope}`">

Login to your account

-
+

An error occured

- {{ error_description }} + {{ params.error_description }}
@@ -41,7 +41,7 @@
+ :href="`/oauth/sso?issuer=${provider.id}&redirect_uri=${params.redirect_uri}&response_type=${params.response_type}&client_id=${params.client_id}&scope=${params.scope}`"> @@ -108,17 +108,13 @@ const schema = toTypedSchema( ); const hostname = useRequestURL().hostname; -const query = new URLSearchParams( - window?.location.search ?? useRequestURL().search, -); -const redirectUri = query.get("redirect_uri"); -const responseType = query.get("response_type"); -const clientId = query.get("client_id"); -const scope = query.get("scope"); -const error = query.get("error"); -const errorDescription = query.get("error_description"); +const params = useUrlSearchParams(); -const validUrlParameters = redirectUri && responseType && clientId && scope; +const validUrlParameters = + params.redirect_uri && + params.response_type && + params.client_id && + params.scope; const ssoConfig = useSSOConfig(); \ No newline at end of file diff --git a/pages/oauth/code.vue b/pages/oauth/code.vue index af915fd..59b8bb9 100644 --- a/pages/oauth/code.vue +++ b/pages/oauth/code.vue @@ -23,9 +23,7 @@ diff --git a/pages/oauth/consent.vue b/pages/oauth/consent.vue index 3f96b5b..6369eb7 100644 --- a/pages/oauth/consent.vue +++ b/pages/oauth/consent.vue @@ -83,18 +83,16 @@ \ No newline at end of file