feat: ✨ Edit site to support Lysand's OIDC/OAuth2

versia-pub · Apr 18, 2024 · 9edfd5a · 9edfd5a
1 parent 65ad29e
commit 9edfd5a
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 32 deletions.
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -42,7 +42,7 @@ export default defineNuxtConfig({
             titleSeparator: "·",
             siteName: "Lysand",
             trailingSlash: true,
-            apiHost: "localhost:8080",
+            apiHost: "https://lysand.localhost",
         },
     },
     site: {

diff --git a/pages/oauth/redirect.vue b/pages/oauth/redirect.vue
@@ -6,8 +6,8 @@
                 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 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/redirect?redirect_uri=${encodeURIComponent(redirect_uri)}&client_id=${client_id}&code=${code}`">
+            <form class="space-y-6" method="POST" :action="url.pathname.replace('/oauth/redirect', '/oauth/authorize')">
+                <input type="hidden" v-for="([key, value]) in url.searchParams" :key="key" :name="key" :value="value" />
                 <div class="flex flex-col items-center gap-y-5">
                     <h1 class="font-bold text-2xl text-center tracking-tight">Allow this application to access your
                         account?</h1>
@@ -50,39 +50,44 @@
             </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>
-                        	<span class="underline text-purple-700">{{ client.link }}</span>
-						</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>
+            <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>
+                            <span class="underline text-purple-700">{{ client.link }}</span>
+                        </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>
 
 <script setup lang="ts">
 import { useRoute } from "vue-router";
 import { recommendedClients } from "../../constants";
 
+const url = useRequestURL();
 const query = useRoute().query;
 
 const application = query.application;
@@ -93,7 +98,7 @@ const scope = decodeURIComponent((query.scope as string) || "");
 const code = query.code;
 
 const validUrlParameters =
-    application && website && redirect_uri && client_id && scope && code;
+    application && website && redirect_uri && client_id && scope;
 
 const oauthScopeText: Record<string, string> = {
     "rw:accounts": "$VERB your account information",
@@ -172,4 +177,4 @@ const getScopeText = (fullScopes: string[]) => {
     }
     return scopeTexts;
 };
-</script>
+</script>
diff --git a/pages/register/index.vue b/pages/register/index.vue
@@ -112,7 +112,9 @@ if (!config) {
 
 const instanceInfo = (await fetch(new URL("/api/v1/instance", config.http.base_url)).then(
     (data) => data.json(),
-));
+)).catch((e: Error) => {
+    console.error(e);
+});
 
 const errors = ref<{
     [key: string]: {