From 39a365e15a7c894a781e140864e8b5b08004d423 Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Mon, 8 Apr 2024 20:51:52 -1000
Subject: [PATCH] Work on prettier UI and more errors

---
 bun.lockb                       | Bin 297588 -> 297588 bytes
 pages/pages/index.vue           |  37 ++++++++++++++++++++++++---
 pages/pages/oauth/authorize.vue |  44 +++++++++++++++++++++++++++++++-
 pages/pages/oauth/redirect.vue  |   2 +-
 4 files changed, 78 insertions(+), 5 deletions(-)

diff --git a/bun.lockb b/bun.lockb
index 2fa0247f337b80547dfdb33e711e6586bd85072d..ee06f16a8ab72010acfd2aba61679592240f2c57 100755
GIT binary patch
delta 32
ocmew|Md-^Ep@tU5ElhX+a4^Oh=$TsT8MHtB!?gYBALjmE0P4&RdjJ3c

delta 32
kcmew|Md-^Ep@tU5ElhX+a4<1IK>O1_OxvISVean*0MzRY^Z)<=

diff --git a/pages/pages/index.vue b/pages/pages/index.vue
index a9eb6045..7c1ca85e 100644
--- a/pages/pages/index.vue
+++ b/pages/pages/index.vue
@@ -6,7 +6,7 @@
                 <div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
                     style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)" />
             </div>
-            <div class="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
+            <div class="mx-auto max-w-lg py-32 sm:py-48 lg:py-56">
                 <div class="hidden sm:mb-8 sm:flex sm:justify-center">
                     <div
                         class="relative rounded px-3 py-1 text-sm leading-6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
@@ -25,6 +25,26 @@
                             class="rounded-md w-full ring-indigo-600 ring-2 bg-white px-3.5 py-2.5 text-sm font-semibold text-indigo-500 shadow-sm hover:bg-gray-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">About
                             the Lysand Protocol</a>
                     </div>
+
+                    <p class="mt-6 text-lg leading-8 text-gray-600">Here are some recommended clients:</p>
+                    <ul class="w-full flex flex-col gap-3 mt-4">
+                        <li v-for="client of recommendedClients" :key="client.name" class="w-full">
+                            <a :href="client.link" class="rounded-sm ring-2 ring-black/10 px-4 py-2 w-full flex flex-row gap-3 items-center">
+                                <img :src="client.icon" :alt="client.name" class="h-10 w-10" />
+                                <div class="flex flex-col justify-between items-start">
+                                    <h2 class="font-bold">{{ client.name }}</h2>
+                                    <a :href="client.link" class="underline text-purple-700">{{ client.link }}</a>
+                                </div>
+                            </a>
+                        </li>
+                    </ul>
+                    <p class="mt-6 text-lg leading-8 text-gray-600">
+                        Many other clients exist, but <strong class="font-bold">they have not been tested for compatibility</strong>. Bug reports are nevertheless welcome.
+                    </p>
+
+                    <p class="mt-6 text-lg leading-8 text-gray-600">
+                        Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose" class="underline text-purple-700">the issue tracker</a>.
+                    </p>
                 </div>
             </div>
             <div class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
@@ -37,8 +57,19 @@
 </template>
   
 <script setup>
-import { ref } from "vue";
-
 const location = window.location;
 const version = __VERSION__;
+
+const recommendedClients = [
+    {
+        name: "Soapbox",
+        icon: "https://soapbox.pub/assets/logo.svg",
+        link: "https://fe.soapbox.pub/",
+    },
+    {
+        name: "Megalodon",
+        icon: "https://sk22.github.io/megalodon/mastodon/src/main/res/mipmap-xhdpi/ic_launcher_round.png",
+        link: "https://sk22.github.io/megalodon/",
+    },
+];
 </script>
\ No newline at end of file
diff --git a/pages/pages/oauth/authorize.vue b/pages/pages/oauth/authorize.vue
index 6a52823a..b6eb6bb8 100644
--- a/pages/pages/oauth/authorize.vue
+++ b/pages/pages/oauth/authorize.vue
@@ -5,7 +5,7 @@
 			<div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
 				style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)" />
 		</div>
-		<div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
+		<div v-if="validUrlParameters" class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
 			<form class="space-y-6" method="POST"
 				:action="`/api/auth/login?redirect_uri=${redirect_uri}&response_type=${response_type}&client_id=${client_id}&scope=${scope}`">
 				<div>
@@ -48,6 +48,33 @@
 				</div>
 			</form>
 		</div>
+		<div v-else class="mx-auto max-w-md">
+			<h1 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-4xl">Invalid access
+				parameters
+			</h1>
+			<p class="mt-6 text-lg leading-8 text-gray-600">This page should be accessed 
+				through a valid OAuth2 authorization request. Please use a <strong class="font-bold">Mastodon API</strong> client to access this page.
+			</p>
+			<p class="mt-6 text-lg leading-8 text-gray-600">Here are some recommended clients:</p>
+			<ul class="w-full flex flex-col gap-3 mt-4">
+				<li v-for="client of recommendedClients" :key="client.name" class="w-full">
+					<a :href="client.link" class="rounded-sm ring-2 ring-black/10 px-4 py-2 w-full flex flex-row gap-3 items-center">
+						<img :src="client.icon" :alt="client.name" class="h-10 w-10" />
+						<div class="flex flex-col justify-between items-start">
+							<h2 class="font-bold">{{ client.name }}</h2>
+                        	<a :href="client.link" class="underline text-purple-700">{{ client.link }}</a>
+						</div>
+					</a>
+				</li>
+			</ul>
+			<p class="mt-6 text-lg leading-8 text-gray-600">
+				Many other clients exist, but <strong class="font-bold">they have not been tested for compatibility</strong>. Bug reports are nevertheless welcome.
+			</p>
+
+			<p class="mt-6 text-lg leading-8 text-gray-600">
+				Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose" class="underline text-purple-700">the issue tracker</a>.
+			</p>
+		</div>
 	</div>
 </template>
 
@@ -58,12 +85,27 @@ import LoginInput from "../../components/LoginInput.vue";
 
 const query = useRoute().query;
 
+const recommendedClients = [
+    {
+        name: "Soapbox",
+        icon: "https://soapbox.pub/assets/logo.svg",
+        link: "https://fe.soapbox.pub/",
+    },
+    {
+        name: "Megalodon",
+        icon: "https://sk22.github.io/megalodon/mastodon/src/main/res/mipmap-xhdpi/ic_launcher_round.png",
+        link: "https://sk22.github.io/megalodon/",
+    },
+];
+
 const redirect_uri = query.redirect_uri;
 const response_type = query.response_type;
 const client_id = query.client_id;
 const scope = query.scope;
 const error = decodeURIComponent(query.error as string);
 
+const validUrlParameters = redirect_uri && response_type && client_id && scope;
+
 const oauthProviders = ref<
     | {
           name: string;
diff --git a/pages/pages/oauth/redirect.vue b/pages/pages/oauth/redirect.vue
index 99644a2d..d6f6e62f 100644
--- a/pages/pages/oauth/redirect.vue
+++ b/pages/pages/oauth/redirect.vue
@@ -13,7 +13,7 @@
                         account?</h1>
                     <div class="rounded-sm ring-2 ring-black/10 px-4 py-2 w-full">
                         <h2 class="font-bold">{{ application }}</h2>
-                        <a class="underline text-purple-700">{{ website }}</a>
+                        <a :href="website" class="underline text-purple-700">{{ website }}</a>
                     </div>
                 </div>