From 73ca0fb18beb30e68b557a6a804616404239f8d5 Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Sun, 8 Dec 2024 18:15:30 +0100
Subject: [PATCH] feat: :sparkles: Add error page on login when the correct URI
 parameters are missing

---
 messages/en-pt.json       |  4 +++-
 messages/en-rot.json      |  4 +++-
 messages/en.json          |  4 +++-
 messages/fr.json          |  4 +++-
 pages/oauth/authorize.vue | 29 ++++++++++++++++++++++++++---
 5 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/messages/en-pt.json b/messages/en-pt.json
index fc0f739..570bbe9 100644
--- 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
index 0e13daa..71151ec 100644
--- 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
index 308f461..92f4d9f 100644
--- 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
index 3faca5d..ebb0cff 100644
--- 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
index 87af022..f608234 100644
--- 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>