versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2025-12-06 08:28:20 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: ♻️ Refactor toaster code for more accessibility and better UI

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-06-19 15:40:13 -10:00
parent 2b14813555
commit 5e6e881b98
No known key found for this signature in database
14 changed files with 96 additions and 151 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
bun.lockb
View file

Binary file not shown.

58
components/loading.vue
View file

@ -10,15 +10,7 @@
<script lang="ts" setup> <script lang="ts" setup>
const loading = ref(true); const loading = ref(true);
const oidcError = useRequestURL().searchParams.get( const params = useUrlSearchParams();
"oidc_account_linking_error",
);
const oidcErrorDesc = useRequestURL().searchParams.get(
"oidc_account_linking_error_message",
);
const oidcAccountLinked = useRequestURL().searchParams.get(
"oidc_account_linked",
);
const estimatedProgress = (duration: number, elapsed: number) => const estimatedProgress = (duration: number, elapsed: number) =>
(2 / Math.PI) * 100 * Math.atan(((elapsed / duration) * 100) / 50); (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)); await new Promise((resolve) => setTimeout(resolve, 300));
loading.value = false; loading.value = false;
if (oidcError) { if (params.oidc_account_linking_error) {
useEvent("notification:new", { useEvent("notification:new", {
type: "error", type: "error",
title: oidcError, title: params.oidc_account_linking_error,
message: oidcErrorDesc ?? undefined, description: params.oidc_account_linking_error_message ?? undefined,
persistent: true, duration: 999999,
onDismiss: () => { onStatusChange: (details) => {
// Remove data from URL if (details.status === "dismissing") {
window.history.replaceState( // Remove data from URL
{}, window.history.replaceState(
document.title, {},
window.location.pathname, document.title,
); window.location.pathname,
);
}
}, },
}); });
// Remove the error from the URL
} }
if (oidcAccountLinked) { if (params.oidc_account_linked) {
useEvent("notification:new", { useEvent("notification:new", {
type: "success", type: "success",
title: "Account linked", title: "Account linked",
message: description:
"Your account has been successfully linked to your OpenID Connect provider.", "Your account has been successfully linked to your OpenID Connect provider.",
persistent: true, duration: 999999,
onDismiss: () => { onStatusChange: (details) => {
// Remove data from URL if (details.status === "dismissing") {
window.history.replaceState( // Remove data from URL
{}, window.history.replaceState(
document.title, {},
window.location.pathname, document.title,
); window.location.pathname,
);
}
}, },
}); });
} }

93
components/notifications/Renderer.vue
View file

@ -1,71 +1,42 @@
<template> <template>
<Teleport to="body"> <Teleport to="body">
<div aria-live="assertive" <Toaster :toaster="toaster" v-slot="toast">
class="pointer-events-none fixed inset-0 flex items-end px-4 pt-6 pb-24 sm:pb-6 sm:items-start sm:p-6 z-50"> <Toast.Root
<div class="flex w-full flex-col items-center space-y-4 sm:items-end"> class="rounded-lg w-[calc(100vw-2rem)] sm:w-80 bg-dark-500 duration-200 shadow-lg ring-1 ring-white/10 p-4 [&:nth-child(n+5)]:opacity-0 data-[stack]:!opacity-100 scale-[--scale,100%] translate-x-[--x] translate-y-[--y] z-[--z-index] will-change-transform">
<!-- Notification panel, dynamically insert this into the live region when it needs to be displayed --> <div class="grid grid-cols-[auto_1fr_auto]">
<TransitionGroup enter-active-class="transform ease-out duration-300 transition" <div class="shrink-0 h-6 w-6">
enter-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2" <iconify-icon v-if="toast.type === 'success'" icon="tabler:check" height="none"
enter-to-class="translate-y-0 opacity-100 sm:translate-x-0" class="h-6 w-6 text-green-400" aria-hidden="true" />
leave-active-class="transition transform ease-in duration-100" <iconify-icon v-else-if="toast.type === 'error'" icon="tabler:alert-triangle" height="none"
leave-from-class="translate-y-0 opacity-100 sm:translate-x-0" class="h-6 w-6 text-red-400" aria-hidden="true" />
leave-to-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"> <iconify-icon v-else-if="toast.type === 'progress'" icon="tabler:loader" height="none"
<div v-for="notification in notifications" :key="notification.id" class="h-6 w-6 text-primary-500 animate-spin" aria-hidden="true" />
class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-dark-500 shadow-lg ring-1 ring-white/10"> <iconify-icon v-else-if="toast.type === 'info'" icon="tabler:info-circle" height="none"
<div class="p-4"> class="h-6 w-6 text-blue-500" aria-hidden="true" />
<div class="flex items-start">
<div class="shrink-0 h-6 w-6">
<iconify-icon v-if="notification.type === 'success'" icon="tabler:check"
height="none" class="h-6 w-6 text-green-400" aria-hidden="true" />
<iconify-icon v-else-if="notification.type === 'error'" icon="tabler:alert-triangle"
height="none" class="h-6 w-6 text-red-400" aria-hidden="true" />
<iconify-icon v-else-if="notification.type === 'progress'" icon="tabler:loader"
height="none" class="h-6 w-6 text-primary-500 animate-spin"
aria-hidden="true" />
</div>
<div class="ml-3 w-0 flex-1 pt-0.5">
<p class="text-sm font-semibold text-gray-50">{{ notification.title }}</p>
<p class="mt-1 text-sm text-gray-400" v-if="notification.message">{{
notification.message }}</p>
</div>
<div class="ml-4 flex flex-shrink-0">
<button type="button" title="Close this notification"
@click="notifications.splice(notifications.indexOf(notification), 1); notification.onDismiss?.()"
class="inline-flex rounded-md text-gray-400 hover:text-gray-300 duration-200">
<iconify-icon icon="tabler:x" class="h-5 w-5" aria-hidden="true" />
</button>
</div>
</div>
</div>
</div> </div>
</TransitionGroup> <div class="ml-3 flex-1 pt-0.5 shrink-0 min-w-48">
</div> <Toast.Title class="text-sm font-semibold text-gray-50">{{ toast.title }}</Toast.Title>
</div> <Toast.Description class="mt-1 text-sm text-gray-400">{{
toast.description }}</Toast.Description>
</div>
<div class="ml-4 flex shrink-0">
<Toast.CloseTrigger type="button" title="Close this notification"
class="inline-flex rounded-md text-gray-400 hover:text-gray-300 duration-200">
<iconify-icon icon="tabler:x" class="h-5 w-5" aria-hidden="true" />
</Toast.CloseTrigger>
</div>
</div>
</Toast.Root>
</Toaster>
</Teleport> </Teleport>
</template> </template>
<script lang="ts" setup> <script setup lang="tsx">
const notifications = ref< import { Toast, Toaster, createToaster } from "@ark-ui/vue";
(NotificationEvent & {
id: string;
})[]
>([]);
useListen("notification:new", (n) => { const toaster = createToaster({ placement: "top-end", overlap: true, gap: 24 });
const newNotification = {
...n,
id: Math.random().toString(36).substring(7),
};
notifications.value.push(newNotification); useListen("notification:new", (notification) => {
toaster.create(notification);
!newNotification.persistent &&
setTimeout(() => {
notifications.value.splice(
notifications.value.indexOf(newNotification),
1,
);
newNotification.onDismiss?.();
}, 5000);
}); });
</script> </script>

4
components/settings/oidc.vue
View file

@ -51,7 +51,7 @@ const link = async (providerId: string) => {
useEvent("notification:new", { useEvent("notification:new", {
title: "Failed to link account", title: "Failed to link account",
message: e.response.data.error, description: e.response.data.error,
type: "error", type: "error",
}); });
} }
@ -78,7 +78,7 @@ const unlink = async (providerId: string) => {
useEvent("notification:new", { useEvent("notification:new", {
title: "Failed to unlink account", title: "Failed to unlink account",
message: e.response.data.error, description: e.response.data.error,
type: "error", type: "error",
}); });
} }

2
components/settings/profile-editor.vue
View file

@ -112,7 +112,7 @@ const save = async () => {
useEvent("notification:new", { useEvent("notification:new", {
title: "Failed to update profile", title: "Failed to update profile",
message: error.response.data.error, description: error.response.data.error,
type: "error", type: "error",
}); });
} }

2
components/sidebars/navigation.vue
View file

@ -222,7 +222,7 @@ const signOut = async (id?: string) => {
await useEvent("notification:new", { await useEvent("notification:new", {
type: "success", type: "success",
title: "Signed out", title: "Signed out",
message: "Account signed out successfully", description: "Account signed out successfully",
}); });
}; };
</script> </script>

2
composables/CacheRefresh.ts
View file

@ -29,7 +29,7 @@ export const useCacheRefresh = (client: MaybeRef<LysandClient | null>) => {
useEvent("notification:new", { useEvent("notification:new", {
type: "error", type: "error",
title: "Your session has expired", title: "Your session has expired",
message: description:
"You have been logged out. Please log in again.", "You have been logged out. Please log in again.",
}); });
} }

2
composables/Client.ts
View file

@ -17,7 +17,7 @@ export const useClient = (
useEvent("notification:new", { useEvent("notification:new", {
title: "An error occured", title: "An error occured",
type: "error", type: "error",
message: description:
error.response.data.error ?? error.response.data.error ??
"No error message provided", "No error message provided",
}); });

11
composables/EventBus.ts
View file

@ -1,14 +1,11 @@
import type { createToaster } from "@ark-ui/vue";
import type { Attachment, Status } from "@lysand-org/client/types"; import type { Attachment, Status } from "@lysand-org/client/types";
import mitt from "mitt"; import mitt from "mitt";
import type { Identity } from "./Identities"; import type { Identity } from "./Identities";
export type NotificationEvent = { export type NotificationEvent = Parameters<
type: "error" | "success" | "progress"; ReturnType<typeof createToaster>["create"]
title: string; >[0];
message?: string;
persistent?: boolean;
onDismiss?: () => void;
};
type ApplicationEvents = { type ApplicationEvents = {
"note:reply": Status; "note:reply": Status;

2
package.json
View file

@ -30,7 +30,7 @@
}, },
"dependencies": { "dependencies": {
"@ark-ui/vue": "^3.4.0", "@ark-ui/vue": "^3.4.0",
"@lysand-org/client": "^0.2.0", "@lysand-org/client": "^0.2.1",
"@nuxt/fonts": "^0.7.0", "@nuxt/fonts": "^0.7.0",
"@tailwindcss/typography": "^0.5.13", "@tailwindcss/typography": "^0.5.13",
"@vee-validate/nuxt": "^4.13.1", "@vee-validate/nuxt": "^4.13.1",

24
pages/oauth/authorize.vue
View file

@ -4,12 +4,12 @@
class="mx-auto hidden md:inline-block h-20 ring-1 ring-white/20 rounded" /> class="mx-auto hidden md:inline-block h-20 ring-1 ring-white/20 rounded" />
<div v-if="validUrlParameters" class="mx-auto w-full max-w-md"> <div v-if="validUrlParameters" class="mx-auto w-full max-w-md">
<VeeForm class="flex flex-col gap-y-6" method="POST" :validation-schema="schema" <VeeForm class="flex flex-col gap-y-6" method="POST" :validation-schema="schema"
:action="`/api/auth/login?redirect_uri=${redirect_uri}&response_type=${response_type}&client_id=${client_id}&scope=${scope}`"> :action="`/api/auth/login?redirect_uri=${params.redirect_uri}&response_type=${params.response_type}&client_id=${params.client_id}&scope=${params.scope}`">
<h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Login to your account</h1> <h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Login to your account</h1>
<div v-if="error" class="ring-1 ring-white/10 rounded p-4 bg-red-500 text-white"> <div v-if="params.error" class="ring-1 ring-white/10 rounded p-4 bg-red-500 text-white">
<h2 class="font-bold text-lg">An error occured</h2> <h2 class="font-bold text-lg">An error occured</h2>
<span class="text-sm">{{ error_description }}</span> <span class="text-sm">{{ params.error_description }}</span>
</div> </div>
<VeeField name="identifier" as="div" v-slot="{ errorMessage, field }" validate-on-change> <VeeField name="identifier" as="div" v-slot="{ errorMessage, field }" validate-on-change>
@ -41,7 +41,7 @@
</div> </div>
<div class="grid md:grid-cols-2 md:[&:has(>:last-child:nth-child(1))]:grid-cols-1 gap-4 w-full"> <div class="grid md:grid-cols-2 md:[&:has(>:last-child:nth-child(1))]:grid-cols-1 gap-4 w-full">
<a v-for="provider of ssoConfig.providers" :key="provider.id" <a v-for="provider of ssoConfig.providers" :key="provider.id"
:href="`/oauth/sso?issuer=${provider.id}&redirect_uri=${redirect_uri}&response_type=${response_type}&client_id=${client_id}&scope=${scope}`"> :href="`/oauth/sso?issuer=${provider.id}&redirect_uri=${params.redirect_uri}&response_type=${params.response_type}&client_id=${params.client_id}&scope=${params.scope}`">
<ButtonsSecondary class="flex flex-row w-full items-center justify-center gap-3"> <ButtonsSecondary class="flex flex-row w-full items-center justify-center gap-3">
<img crossorigin="anonymous" :src="provider.icon" :alt="`${provider.name}'s logo'`" <img crossorigin="anonymous" :src="provider.icon" :alt="`${provider.name}'s logo'`"
class="w-6 h-6" /> class="w-6 h-6" />
@ -108,17 +108,13 @@ const schema = toTypedSchema(
); );
const hostname = useRequestURL().hostname; const hostname = useRequestURL().hostname;
const query = new URLSearchParams( const params = useUrlSearchParams();
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 validUrlParameters = redirectUri && responseType && clientId && scope; const validUrlParameters =
params.redirect_uri &&
params.response_type &&
params.client_id &&
params.scope;
const ssoConfig = useSSOConfig(); const ssoConfig = useSSOConfig();
</script> </script>

6
pages/oauth/code.vue
View file

@ -23,9 +23,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useRoute } from "vue-router"; const params = useUrlSearchParams();
const query = useRoute().query; const code = params.code;
const code = query.code;
</script> </script>

16
pages/oauth/consent.vue
View file

@ -83,18 +83,16 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useRoute } from "vue-router";
const url = useRequestURL(); const url = useRequestURL();
const query = useRoute().query; const params = useUrlSearchParams();
const application = query.application; const application = params.application;
const website = query.website const website = params.website
? decodeURIComponent(query.website as string) ? decodeURIComponent(params.website as string)
: null; : null;
const redirectUri = query.redirect_uri as string; const redirectUri = params.redirect_uri as string;
const clientId = query.client_id; const clientId = params.client_id;
const scope = query.scope ? decodeURIComponent(query.scope as string) : ""; const scope = params.scope ? decodeURIComponent(params.scope as string) : "";
const validUrlParameters = application && redirectUri && clientId && scope; const validUrlParameters = application && redirectUri && clientId && scope;

25
pages/oauth/reset.vue
View file

@ -3,18 +3,14 @@
<img crossorigin="anonymous" src="https://cdn.lysand.org/logo.webp" alt="Lysand logo" <img crossorigin="anonymous" src="https://cdn.lysand.org/logo.webp" alt="Lysand logo"
class="mx-auto hidden md:inline-block h-20 ring-1 ring-white/20 rounded" /> class="mx-auto hidden md:inline-block h-20 ring-1 ring-white/20 rounded" />
<div v-if="validUrlParameters" class="mx-auto w-full max-w-md"> <div v-if="validUrlParameters" class="mx-auto w-full max-w-md">
<div v-if="error" class="ring-1 ring-white/10 rounded p-4 bg-red-500 text-white mb-10">
<h2 class="font-bold text-lg">An error occured</h2>
<span class="text-sm">{{ error_description }}</span>
</div>
<VeeForm class="flex flex-col gap-y-6" method="POST" :validation-schema="schema" action="/api/auth/reset"> <VeeForm class="flex flex-col gap-y-6" method="POST" :validation-schema="schema" action="/api/auth/reset">
<input type="hidden" name="token" :value="token" /> <input type="hidden" name="token" :value="params.token" />
<h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Reset your password</h1> <h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Reset your password</h1>
<div v-if="error" class="ring-1 ring-white/10 rounded p-4 bg-red-500 text-white"> <div v-if="error" class="ring-1 ring-white/10 rounded p-4 bg-red-500 text-white">
<h2 class="font-bold text-lg">An error occured</h2> <h2 class="font-bold text-lg">An error occured</h2>
<span class="text-sm">{{ error_description }}</span> <span class="text-sm">{{ params.error_description }}</span>
</div> </div>
<VeeField name="password" v-slot="{ errorMessage, field }" validate-on-change> <VeeField name="password" v-slot="{ errorMessage, field }" validate-on-change>
@ -46,7 +42,7 @@
<ButtonsPrimary type="submit" class="w-full">Reset</ButtonsPrimary> <ButtonsPrimary type="submit" class="w-full">Reset</ButtonsPrimary>
</VeeForm> </VeeForm>
</div> </div>
<div v-else-if="success"> <div v-else-if="params.success">
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl text-center">Password reset <h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl text-center">Password reset
successful! successful!
</h1> </h1>
@ -95,20 +91,15 @@ const schema = toTypedSchema(
}), }),
); );
const query = new URLSearchParams( const params = useUrlSearchParams();
window?.location.search ?? useRequestURL().search, let error = params.error;
); let errorDescription = params.error_description;
const token = query.get("token");
const loginReset = query.get("login_reset") === "true";
const success = query.get("success") === "true";
let error = query.get("error");
let errorDescription = query.get("error_description");
if (loginReset) { if (params.login_reset) {
error = "Login reset"; error = "Login reset";
errorDescription = errorDescription =
"Your password has been reset by an administrator. Please change it here."; "Your password has been reset by an administrator. Please change it here.";
} }
const validUrlParameters = token; const validUrlParameters = !!params.token;
</script> </script>