frontend/app/pages/oauth/authorize.vue

<script setup lang="ts">
import { Client } from "@versia/client";
import { AlertCircle, Loader } from "lucide-vue-next";
import { NuxtLink } from "#components";
import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
import { Button } from "~/components/ui/button";
import * as m from "~~/paraglide/messages.js";

useHead({
    title: m.fuzzy_sea_moth_absorb(),
});

const baseUrl = new URL("https://versia.localhost"); //useRequestURL();
const client = computed(() => new Client(baseUrl));
const instance = useInstanceFromClient(client);
const {
    error,
    error_description,
    redirect_uri,
    response_type,
    client_id,
    scope,
} = useUrlSearchParams();

const hasValidUrlSearchParams =
    redirect_uri && response_type && client_id && scope;

const isLoading = ref(false);
const getProviderUrl = (providerId: string) =>
    new URL(`/oauth/sso/${providerId}`, baseUrl).toString();
</script>

<template>
    <div
        class="container relative flex h-svh flex-col items-center justify-center md:flex-row lg:max-w-none lg:px-0"
    >
        <Button
            :as="NuxtLink"
            href="/register"
            variant="link"
            class="absolute right-4 top-4 md:right-8 md:top-8"
        >
            {{ m.noble_cute_ocelot_aim() }}
        </Button>
        <div
            class="relative hidden h-full flex-col bg-muted p-10 text-white dark:border-r lg:flex grow bg-center bg-no-repeat bg-cover"
            :style="{
                backgroundImage: 'url(/images/banner.webp)',
            }"
        >
            <div
                class="absolute top-0 left-0 w-full h-72 bg-linear-to-t from-transparent to-black/70"
            />
            <div class="relative z-20 flex items-center text-lg font-medium">
                <img
                    crossorigin="anonymous"
                    :src="
                        instance?.thumbnail?.url ||
                        'https://cdn.versia.pub/branding/icon.svg'
                    "
                    alt="Versia logo"
                    class="size-10 mr-4"
                />
                {{ instance?.title }}
            </div>
        </div>
        <div class="lg:p-8 w-full max-w-xl">
            <div
                class="mx-auto flex w-full flex-col justify-center space-y-10 sm:w-[350px]"
            >
                <Alert v-if="error" variant="destructive" class="mb-4">
                    <AlertCircle class="size-4" />
                    <AlertTitle>{{ error }}</AlertTitle>
                    <AlertDescription>
                        {{ error_description }}
                    </AlertDescription>
                </Alert>
                <div class="flex flex-col space-y-2 text-center">
                    <h1 class="text-2xl font-semibold tracking-tight">
                        {{ m.novel_fine_stork_snap() }}
                    </h1>
                    <p
                        class="text-sm text-muted-foreground"
                        v-html="
                            m.smug_main_whale_snip({
                                host: baseUrl.host,
                            })
                        "
                    ></p>
                </div>
                    <div v-if="instance && hasValidUrlSearchParams" class="grid gap-6">
                        <div
                            v-if="instance.sso.providers.length > 0"
                            class="flex flex-col gap-2"
                        >
                            <form v-for="provider of instance.sso.providers" :key="provider.id" method="POST" :action="getProviderUrl(provider.id)">
                                <input type="hidden" name="redirect_uri" :value="redirect_uri" />
                                <input type="hidden" name="client_id" :value="client_id" />
                                <input v-for="(scopePart, index) of (scope as string).split(' ')" type="hidden" :name="`scope[${index}]`" :value="scopePart" />
                                <Button
                                    variant="outline"
                                    type="submit"
                                    :disabled="isLoading"
                                    class="w-full"
                                >
                                    <Loader v-if="isLoading" class="mr-2 animate-spin" />
                                    <img
                                        crossorigin="anonymous"
                                        :src="provider.icon"
                                        :alt="`${provider.name}'s logo`"
                                        class="size-4 mr-2"
                                    />
                                    {{ provider.name }}
                                </Button>
                            </form>
                        </div>
                        <Alert v-else variant="destructive" class="mb-4">
                            <AlertCircle class="size-4" />
                            <AlertTitle>
                                No SSO providers are configured.
                            </AlertTitle>
                            <AlertDescription>
                                <p>
                                    Please ask the administrator of
                                    {{ instance.domain }} to set up SSO providers.
                                </p>
                            </AlertDescription>
                        </Alert>
                    </div>
                <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>
</template>