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

pages/oauth/authorize.vue

@@ -4,12 +4,12 @@
             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">
             <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>
 
-                <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>
-                    <span class="text-sm">{{ error_description }}</span>
+                    <span class="text-sm">{{ params.error_description }}</span>
                 </div>
 
                 <VeeField name="identifier" as="div" v-slot="{ errorMessage, field }" validate-on-change>
@@ -41,7 +41,7 @@
                     </div>
                     <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"
-                            :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">
                                 <img crossorigin="anonymous" :src="provider.icon" :alt="`${provider.name}'s logo'`"
                                     class="w-6 h-6" />
@@ -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();
 </script>

pages/oauth/code.vue

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

pages/oauth/consent.vue

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

pages/oauth/reset.vue

@@ -3,18 +3,14 @@
         <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" />
         <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">
-                <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>
 
                 <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>
-                    <span class="text-sm">{{ error_description }}</span>
+                    <span class="text-sm">{{ params.error_description }}</span>
                 </div>
 
                 <VeeField name="password" v-slot="{ errorMessage, field }" validate-on-change>
@@ -46,7 +42,7 @@
                 <ButtonsPrimary type="submit" class="w-full">Reset</ButtonsPrimary>
             </VeeForm>
         </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
                 successful!
             </h1>
@@ -95,20 +91,15 @@ const schema = toTypedSchema(
         }),
 );
 
-const query = new URLSearchParams(
-    window?.location.search ?? useRequestURL().search,
-);
-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");
+const params = useUrlSearchParams();
+let error = params.error;
+let errorDescription = params.error_description;
 
-if (loginReset) {
+if (params.login_reset) {
     error = "Login reset";
     errorDescription =
         "Your password has been reset by an administrator. Please change it here.";
 }
 
-const validUrlParameters = token;
+const validUrlParameters = !!params.token;
 </script>