feat: ✨ Add error page on login when the correct URI parameters are m…

…issing
versia-pub · Dec 8, 2024 · 73ca0fb · 73ca0fb
1 parent 714781b
commit 73ca0fb
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 7 deletions.
diff --git a/messages/en-pt.json b/messages/en-pt.json
@@ -315,5 +315,7 @@
     "pretty_born_jackal_dial": "Sailor's tongue",
     "tired_happy_lobster_pet": "Change the ship's language. Requires resetting yer sails to apply.",
     "keen_aware_goldfish_thrive": "King's English",
-    "vivid_mellow_sawfish_approve": "Fancy French"
+    "vivid_mellow_sawfish_approve": "Fancy French",
+    "gray_clean_shark_comfort": "The following URI parameters be required:",
+    "grand_spry_goldfish_embrace": "Yer URI parameters be invalid"
 }
diff --git a/messages/en-rot.json b/messages/en-rot.json
@@ -316,5 +316,7 @@
     "tired_happy_lobster_pet": "Change the language of the interface. Requires a reload to apply.",
     "keen_aware_goldfish_thrive": "English",
     "vivid_mellow_sawfish_approve": "French",
-    "these_awful_ape_reside": "Pirate"
+    "these_awful_ape_reside": "Pirate",
+    "gray_clean_shark_comfort": "The following rizzy parameters are required:",
+    "grand_spry_goldfish_embrace": "Invalid URI parameters"
 }
diff --git a/messages/en.json b/messages/en.json
@@ -316,5 +316,7 @@
     "tired_happy_lobster_pet": "Change the language of the interface. Requires a reload to apply.",
     "keen_aware_goldfish_thrive": "English",
     "vivid_mellow_sawfish_approve": "French",
-    "these_awful_ape_reside": "Pirate"
+    "these_awful_ape_reside": "Pirate",
+    "gray_clean_shark_comfort": "The following URI parameters are required:",
+    "grand_spry_goldfish_embrace": "Invalid URI parameters"
 }
diff --git a/messages/fr.json b/messages/fr.json
@@ -298,6 +298,8 @@
     "tired_happy_lobster_pet": "Changer la langue de l'interface. Nécessite un rechargement.",
     "keen_aware_goldfish_thrive": "Anglais",
     "vivid_mellow_sawfish_approve": "Français",
+    "these_awful_ape_reside": "Pirate",
     "dirty_inclusive_meerkat_nudge": "Annuler",
-    "these_awful_ape_reside": "Pirate"
+    "gray_clean_shark_comfort": "Les paramètres de l'URI suivants sont obligatoires:",
+    "grand_spry_goldfish_embrace": "Paramètres URI non valides"
 }
diff --git a/pages/oauth/authorize.vue b/pages/oauth/authorize.vue
@@ -13,7 +13,17 @@ useHead({
 
 const host = new URL(useBaseUrl().value).host;
 const instance = useInstanceFromClient(new Client(new URL(useBaseUrl().value)));
-const { error, error_description } = useUrlSearchParams();
+const {
+    error,
+    error_description,
+    redirect_uri,
+    response_type,
+    client_id,
+    scope,
+    state,
+} = useUrlSearchParams();
+const hasValidUrlSearchParams =
+    redirect_uri && response_type && client_id && scope;
 </script>
 
 <template>
@@ -63,10 +73,23 @@ const { error, error_description } = useUrlSearchParams();
                     })">
                     </p>
                 </div>
-                <UserAuthForm v-if="instance" :instance="instance" />
-                <div v-else class="p-4 flex items-center justify-center h-48">
+                <UserAuthForm v-if="instance && hasValidUrlSearchParams" :instance="instance" />
+                <div v-else-if="hasValidUrlSearchParams" class="p-4 flex items-center justify-center h-48">
                     <Loader class="size-8 animate-spin" />
                 </div>
+                <Alert v-else variant="destructive" class="mb-4">
+                    <AlertCircle class="size-4" />
+                    <AlertTitle>{{ m.grand_spry_goldfish_embrace() }}</AlertTitle>
+                    <AlertDescription>
+                        <p>{{ m.gray_clean_shark_comfort() }}</p>
+                        <ul class="list-disc list-inside mt-2 font-mono">
+                            <li>redirect_uri</li>
+                            <li>response_type</li>
+                            <li>client_id</li>
+                            <li>scope</li>
+                        </ul>
+                    </AlertDescription>
+                </Alert>
             </div>
         </div>
     </div>