versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2025-12-06 08:28:20 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: 💄 UI changes, new collapsible sidebars

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-05-08 02:15:21 -10:00
parent 45eb8c6309
commit d8c7558bcb
No known key found for this signature in database
14 changed files with 222 additions and 180 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -22,3 +22,4 @@ logs
.env .env
.env.* .env.*
!.env.example !.env.example
config

18
components/avatars/Centered.vue Normal file
View file

@ -0,0 +1,18 @@
<template>
<div v-bind="$props" class="bg-dark-700 overflow-hidden flex items-center justify-center">
<Skeleton :enabled="!url" class="!h-full !w-full">
<img class="cursor-pointer bg-dark-700 ring-1 w-full h-full object-cover" :src="url" :alt="alt" />
</Skeleton>
</div>
</template>
<script lang="ts" setup>
import type { HTMLAttributes } from "vue";
interface Props extends /* @vue-ignore */ HTMLAttributes {
url?: string;
alt?: string;
}
defineProps<Props>();
</script>

2
components/composer/modal.vue
View file

@ -14,7 +14,7 @@
leave-from="opacity-100 translate-y-0 sm:scale-100" leave-from="opacity-100 translate-y-0 sm:scale-100"
leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"> leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
<HeadlessDialogPanel <HeadlessDialogPanel
class="relative transform overflow-hidden rounded-lg bg-dark-700 ring-1 ring-white/10 text-left shadow-xl transition-all sm:my-8 w-full max-w-xl"> class="relative transform overflow-hidden rounded-lg bg-dark-700 ring-1 ring-dark-800 text-left shadow-xl transition-all sm:my-8 w-full max-w-xl">
<Composer v-if="instance" :instance="instance" /> <Composer v-if="instance" :instance="instance" />
</HeadlessDialogPanel> </HeadlessDialogPanel>
</HeadlessTransitionChild> </HeadlessTransitionChild>

39
components/sidebars/collapsible-aside.vue Normal file
View file

@ -0,0 +1,39 @@
<template>
<aside v-bind="$props" class="overflow-hidden">
<div
:class="['flex max-h-dvh overflow-hidden w-full duration-200', open ? enterClass : leaveClass, direction === 'left' ? 'flex-row' : 'flex-row-reverse']">
<div class="bg-dark-900 ring-1 ring-white/10 h-full overflow-y-auto w-full">
<slot />
</div>
<button @click="open = !open"
class="h-full bg-dark-700/50 hover:bg-dark-400/50 hover:cursor-pointer duration-200 py-4 px-0.5 flex items-center justify-center w-4 shrink-0">
<Icon name="tabler:chevron-right"
:class="['text-gray-200 duration-200', direction === 'left' ? open ? 'rotate-180' : 'rotate-0' : open ? 'rotate-0' : 'rotate-180']"
aria-hidden="true" />
</button>
</div>
</aside>
</template>
<script lang="ts" setup>
// slides in and out from the left or right
import type { HTMLAttributes } from "vue";
interface Props extends /* @vue-ignore */ HTMLAttributes {
direction?: "left" | "right";
initial?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
direction: "left",
initial: false,
});
const leaveClass = computed(() =>
props.direction === "left"
? "-translate-x-[calc(100%-1rem)]"
: "translate-x-[calc(100%-1rem)]",
);
const enterClass = "translate-x-0";
const open = ref(props.initial);
</script>

60
components/sidebars/navigation.vue
View file

@ -64,13 +64,15 @@
</template> </template>
<template #items> <template #items>
<HeadlessMenuItem v-for="timeline in visibleTimelines" :key="timeline.href" :href="timeline.href"> <ClientOnly>
<NuxtLink> <HeadlessMenuItem v-for="timeline in visibleTimelines" :key="timeline.href" :href="timeline.href">
<ButtonsDropdownElement :icon="timeline.icon" class="w-full"> <NuxtLink>
{{ timeline.name }} <ButtonsDropdownElement :icon="timeline.icon" class="w-full">
</ButtonsDropdownElement> {{ timeline.name }}
</NuxtLink> </ButtonsDropdownElement>
</HeadlessMenuItem> </NuxtLink>
</HeadlessMenuItem>
</ClientOnly>
</template> </template>
</DropdownsAdaptiveDropdown> </DropdownsAdaptiveDropdown>
<NuxtLink href="/notifications" class="flex flex-col items-center justify-center p-2 rounded"> <NuxtLink href="/notifications" class="flex flex-col items-center justify-center p-2 rounded">
@ -86,25 +88,27 @@
</template> </template>
<template #items> <template #items>
<HeadlessMenuItem v-if="tokenData"> <ClientOnly>
<ButtonsDropdownElement icon="tabler:logout" class="w-full" <HeadlessMenuItem v-if="tokenData">
@click="signOut().finally(() => loadingAuth = false)" :loading="loadingAuth"> <ButtonsDropdownElement icon="tabler:logout" class="w-full"
Sign Out @click="signOut().finally(() => loadingAuth = false)" :loading="loadingAuth">
</ButtonsDropdownElement> Sign Out
</HeadlessMenuItem>
<HeadlessMenuItem v-if="!tokenData">
<ButtonsDropdownElement icon="tabler:login" class="w-full"
@click="signIn().finally(() => loadingAuth = false)" :loading="loadingAuth">
Sign In
</ButtonsDropdownElement>
</HeadlessMenuItem>
<HeadlessMenuItem v-if="!tokenData">
<NuxtLink href="/register">
<ButtonsDropdownElement icon="tabler:certificate" class="w-full">
Register
</ButtonsDropdownElement> </ButtonsDropdownElement>
</NuxtLink> </HeadlessMenuItem>
</HeadlessMenuItem> <HeadlessMenuItem v-if="!tokenData">
<ButtonsDropdownElement icon="tabler:login" class="w-full"
@click="signIn().finally(() => loadingAuth = false)" :loading="loadingAuth">
Sign In
</ButtonsDropdownElement>
</HeadlessMenuItem>
<HeadlessMenuItem v-if="!tokenData">
<NuxtLink href="/register">
<ButtonsDropdownElement icon="tabler:certificate" class="w-full">
Register
</ButtonsDropdownElement>
</NuxtLink>
</HeadlessMenuItem>
</ClientOnly>
</template> </template>
</DropdownsAdaptiveDropdown> </DropdownsAdaptiveDropdown>
<button @click="compose" v-if="tokenData" <button @click="compose" v-if="tokenData"
@ -133,6 +137,12 @@ const timelines = ref([
name: "Local", name: "Local",
icon: "tabler:home", icon: "tabler:home",
}, },
{
href: "/notifications",
name: "Notifications",
icon: "tabler:bell",
requiresAuth: true,
},
]); ]);
const visibleTimelines = computed(() => const visibleTimelines = computed(() =>

20
components/social-elements/notes/header.vue
View file

@ -1,11 +1,9 @@
<template> <template>
<div v-if="small" class="flex flex-row"> <div v-if="small" class="flex flex-row">
<Skeleton :enabled="!note" shape="rect" class="!h-6 w-6"> <NuxtLink :href="accountUrl" class="shrink-0">
<NuxtLink :href="accountUrl" class="shrink-0"> <AvatarsCentered :url="note?.account.avatar" :alt="`${note?.account.acct}'s avatar`"
<img class="h-6 w-6 rounded ring-1 ring-white/5 shrink-0" :src="note?.account.avatar" class="h-6 w-6 rounded ring-1 ring-white/5" />
:alt="`${note?.account.acct}'s avatar`" /> </NuxtLink>
</NuxtLink>
</Skeleton>
<div class="flex flex-col items-start justify-around ml-4 grow overflow-hidden"> <div class="flex flex-col items-start justify-around ml-4 grow overflow-hidden">
<div class="flex flex-row text-sm items-center justify-between w-full"> <div class="flex flex-row text-sm items-center justify-between w-full">
<NuxtLink :href="accountUrl" class="font-semibold text-gray-200 line-clamp-1 break-all"> <NuxtLink :href="accountUrl" class="font-semibold text-gray-200 line-clamp-1 break-all">
@ -23,12 +21,10 @@
</div> </div>
</div> </div>
<div v-else class="flex flex-row"> <div v-else class="flex flex-row">
<Skeleton :enabled="!note" shape="rect" class="!h-12 w-12"> <NuxtLink :href="accountUrl" class="shrink-0">
<NuxtLink :href="accountUrl" class="shrink-0"> <AvatarsCentered :url="note?.account.avatar" :alt="`${note?.account.acct}'s avatar`"
<img class="h-12 w-12 rounded ring-1 ring-white/5" :src="note?.account.avatar" class="h-12 w-12 rounded ring-1 ring-white/5" />
:alt="`${note?.account.acct}'s avatar`" /> </NuxtLink>
</NuxtLink>
</Skeleton>
<div class="flex flex-col items-start justify-around ml-4 grow overflow-hidden"> <div class="flex flex-col items-start justify-around ml-4 grow overflow-hidden">
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<NuxtLink :href="accountUrl" class="font-semibold text-gray-200 line-clamp-1 break-all"> <NuxtLink :href="accountUrl" class="font-semibold text-gray-200 line-clamp-1 break-all">

2
components/social-elements/notes/note.vue
View file

@ -42,7 +42,7 @@
</div> </div>
<Skeleton class="!h-10 w-full mt-6" :enabled="!props.note || !loaded" v-if="!small || !showInteractions"> <Skeleton class="!h-10 w-full mt-6" :enabled="!props.note || !loaded" v-if="!small || !showInteractions">
<div v-if="showInteractions" <div v-if="showInteractions"
class="mt-6 flex flex-row items-stretch disabled:*:opacity-70 disabled:*:cursor-not-allowed relative justify-between text-sm h-10 hover:enabled:[&>button]:bg-dark-800 [&>button]:duration-200 [&>button]:rounded [&>button]:flex [&>button]:flex-1 [&>button]:flex-row [&>button]:items-center [&>button]:justify-center"> class="mt-6 flex flex-row items-stretch disabled:*:opacity-70 *:max-w-28 disabled:*:cursor-not-allowed relative justify-around text-sm h-10 hover:enabled:[&>button]:bg-dark-800 [&>button]:duration-200 [&>button]:rounded [&>button]:flex [&>button]:flex-1 [&>button]:flex-row [&>button]:items-center [&>button]:justify-center">
<button class="group" @click="note && useEvent('note:reply', note)" :disabled="!isSignedIn"> <button class="group" @click="note && useEvent('note:reply', note)" :disabled="!isSignedIn">
<Icon name="tabler:arrow-back-up" <Icon name="tabler:arrow-back-up"
class="h-5 w-5 text-gray-200 group-hover:group-enabled:text-blue-600" aria-hidden="true" /> class="h-5 w-5 text-gray-200 group-hover:group-enabled:text-blue-600" aria-hidden="true" />

18
components/social-elements/users/Account.vue
View file

@ -1,20 +1,12 @@
<template> <template>
<ClientOnly> <ClientOnly>
<div class="w-full rounded ring-1 ring-white/10 pb-10"> <div class="w-full ring-1 ring-inset ring-white/5 pb-10">
<Skeleton :enabled="skeleton" class="!w-full !h-full !aspect-[8/3]"> <AvatarsCentered :url="account?.header" :alt="`${account?.acct}'s header image'`"
<div class="w-full aspect-[8/3] border-b border-white/10 bg-dark-700"> class="w-full aspect-[8/3] border-b border-white/10 bg-dark-700" />
<img v-if="account?.header" :src="account.header"
class="object-cover w-full h-full" :alt="`${account.acct}'s header image'`" />
</div>
</Skeleton>
<div class="flex items-start justify-between px-4 py-3"> <div class="flex items-start justify-between px-4 py-3">
<div class="h-32 w-32 -mt-[4.5rem] z-10 bg-dark-700 rounded shrink-0 overflow-hidden"> <AvatarsCentered :url="account?.avatar" :alt="`${account?.acct}'s avatar'`"
<Skeleton :enabled="skeleton" class="!h-full !w-full"> class="h-32 w-32 -mt-[4.5rem] z-10 shrink-0 rounded ring-2 ring-dark-800" />
<img class="cursor-pointer bg-dark-700 ring-1 ring-white/10"
:src="account?.avatar" :alt="`${account?.acct}'s avatar'`" />
</Skeleton>
</div>
<ClientOnly> <ClientOnly>
<ButtonsSecondary v-if="account && account?.id === me?.id">Edit Profile <ButtonsSecondary v-if="account && account?.id === me?.id">Edit Profile

51
layouts/app.vue
View file

@ -1,25 +1,22 @@
<template> <template>
<div class="from-dark-600 to-dark-900 bg-gradient-to-tl min-h-dvh"> <div class="from-dark-600 to-dark-900 bg-gradient-to-tl min-h-dvh">
<SidebarsNavigation /> <SidebarsNavigation />
<div class="relative md:pl-20 min-h-dvh flex flex-row justify-center lg:justify-between"> <div class="relative md:pl-20 min-h-dvh flex flex-row justify-center xl:justify-between">
<aside v-if="width > 1024" <ClientOnly>
class="max-w-md max-h-dvh overflow-y-auto w-full bg-dark-900 ring-1 ring-white/10 hidden lg:flex flex-col"> <CollapsibleAside v-if="width > 1280" class="max-w-md max-h-dvh overflow-y-auto w-full xl:flex hidden">
<ClientOnly> <SocialElementsInstancePresentation />
<div class="grow p-10 mb-10" v-if="!tokenData"> </CollapsibleAside>
<button type="button" </ClientOnly>
class="relative block h-full w-full rounded-lg border-2 border-dashed border-dark-300 p-12 text-center"> <div class="w-full max-h-dvh max-w-2xl">
<Icon name="tabler:notification" class="mx-auto h-12 w-12 text-gray-400" /> <slot />
<span class="mt-3 block text-sm font-semibold text-gray-200 max-w-56 mx-auto">Notifications </div>
will <ClientOnly>
appear here <CollapsibleAside v-if="width > 1280 && tokenData" direction="right"
when you class="max-w-md max-h-dvh overflow-y-auto w-full hidden xl:flex">
sign in</span> <TimelinesTimelineScroller>
</button>
</div>
<TimelinesTimelineScroller v-else>
<TimelinesNotifications /> <TimelinesNotifications />
</TimelinesTimelineScroller> </TimelinesTimelineScroller>
<div class="mt-auto prose prose-invert prose-sm flex flex-col gap-4 px-10 pb-10" v-if="!tokenData"> <!-- <div class="mt-auto prose prose-invert prose-sm flex flex-col gap-4 px-10 pb-10" v-if="!tokenData">
<div class="text-center"> <div class="text-center">
<strong <strong
class="bg-gradient-to-tr from-pink-300 via-purple-300 to-indigo-400 text-transparent bg-clip-text">Lysand class="bg-gradient-to-tr from-pink-300 via-purple-300 to-indigo-400 text-transparent bg-clip-text">Lysand
@ -40,18 +37,12 @@
Mobile Apps Mobile Apps
</ButtonsSecondary> </ButtonsSecondary>
</NuxtLink> </NuxtLink>
</div> </div> -->
</ClientOnly> </CollapsibleAside>
</aside> <div v-else-if="width > 1280" class="max-w-md w-full max-h-dvh hidden xl:flex">
<div class="w-full max-h-dvh"> <!-- Padding only container -->
<slot /> </div>
</div> </ClientOnly>
<aside v-if="width > 1024"
class="max-w-md max-h-dvh overflow-y-auto w-full bg-dark-900 ring-1 ring-white/10 lg:block hidden">
<slot name="right">
<SocialElementsInstancePresentation />
</slot>
</aside>
</div> </div>
</div> </div>
<ComposerModal /> <ComposerModal />
@ -59,6 +50,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { convert } from "html-to-text"; import { convert } from "html-to-text";
import CollapsibleAside from "~/components/sidebars/collapsible-aside.vue";
const tokenData = useTokenData(); const tokenData = useTokenData();
const client = useMegalodon(tokenData); const client = useMegalodon(tokenData);
@ -72,7 +64,6 @@ useServerSeoMeta({
description: convert(description.value?.content ?? ""), description: convert(description.value?.content ?? ""),
ogSiteName: "Lysand", ogSiteName: "Lysand",
colorScheme: "dark", colorScheme: "dark",
referrer: "no-referrer",
}); });
const { n } = useMagicKeys(); const { n } = useMagicKeys();

2
layouts/default.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="from-dark-600 to-dark-900 bg-gradient-to-tl min-h-dvh"> <div class="from-dark-600 to-dark-900 bg-gradient-to-tl min-h-dvh pb-20 md:pb-0">
<SidebarsNavigation /> <SidebarsNavigation />
<slot /> <slot />
</div> </div>

126
package.json
View file

@ -1,65 +1,65 @@
{ {
"name": "lysand-fe", "name": "lysand-fe",
"private": true, "private": true,
"type": "module", "type": "module",
"license": "AGPL-3.0", "license": "AGPL-3.0",
"author": { "author": {
"email": "contact@cpluspatch.com", "email": "contact@cpluspatch.com",
"name": "CPlusPatch", "name": "CPlusPatch",
"url": "https://cpluspatch.com" "url": "https://cpluspatch.com"
}, },
"maintainers": [ "maintainers": [
{ {
"email": "contact@cpluspatch.com", "email": "contact@cpluspatch.com",
"name": "CPlusPatch", "name": "CPlusPatch",
"url": "https://cpluspatch.com" "url": "https://cpluspatch.com"
} }
], ],
"repository": { "repository": {
"type": "git", "type": "git",
"url": "git+https://github.com/lysand-org/lysand-fe.git" "url": "git+https://github.com/lysand-org/lysand-fe.git"
}, },
"scripts": { "scripts": {
"build": "nuxt build", "build": "nuxt build",
"dev": "nuxt dev", "dev": "nuxt dev",
"generate": "nuxt generate", "generate": "nuxt generate",
"preview": "nuxt preview", "preview": "nuxt preview",
"postinstall": "nuxt prepare" "postinstall": "nuxt prepare"
}, },
"dependencies": { "dependencies": {
"@nuxt/fonts": "^0.7.0", "@nuxt/fonts": "^0.7.0",
"@tailwindcss/typography": "^0.5.12", "@tailwindcss/typography": "^0.5.12",
"@vee-validate/nuxt": "^4.12.6", "@vee-validate/nuxt": "^4.12.6",
"@vee-validate/zod": "^4.12.6", "@vee-validate/zod": "^4.12.6",
"c12": "^1.10.0", "c12": "^1.10.0",
"html-to-text": "^9.0.5", "html-to-text": "^9.0.5",
"megalodon": "^10.0.0", "megalodon": "^10.0.0",
"mitt": "^3.0.1", "mitt": "^3.0.1",
"nuxt": "^3.11.2", "nuxt": "^3.11.2",
"nuxt-headlessui": "^1.2.0", "nuxt-headlessui": "^1.2.0",
"nuxt-icon": "^0.6.10", "nuxt-icon": "^0.6.10",
"nuxt-security": "^2.0.0-beta.0", "nuxt-security": "^2.0.0-beta.0",
"nuxt-shiki": "^0.3.0", "nuxt-shiki": "^0.3.0",
"shiki": "^1.3.0", "shiki": "^1.3.0",
"vue": "^3.4.21", "vue": "^3.4.21",
"vue-router": "^4.3.0", "vue-router": "^4.3.0",
"zod": "^3.23.0" "zod": "^3.23.0"
}, },
"devDependencies": { "devDependencies": {
"@biomejs/biome": "^1.6.4", "@biomejs/biome": "^1.6.4",
"@nuxtjs/seo": "^2.0.0-rc.10", "@nuxtjs/seo": "^2.0.0-rc.10",
"@nuxtjs/tailwindcss": "^6.11.4", "@nuxtjs/tailwindcss": "^6.11.4",
"@tailwindcss/forms": "^0.5.7", "@tailwindcss/forms": "^0.5.7",
"@types/html-to-text": "^9.0.4", "@types/html-to-text": "^9.0.4",
"@vue-email/nuxt": "^0.8.19" "@vue-email/nuxt": "^0.8.19"
}, },
"trustedDependencies": [ "trustedDependencies": [
"@biomejs/biome", "@biomejs/biome",
"@fortawesome/fontawesome-common-types", "@fortawesome/fontawesome-common-types",
"@fortawesome/free-regular-svg-icons", "@fortawesome/free-regular-svg-icons",
"@fortawesome/free-solid-svg-icons", "@fortawesome/free-solid-svg-icons",
"esbuild", "esbuild",
"json-editor-vue", "json-editor-vue",
"vue-demi" "vue-demi"
] ]
} }

47
pages/[username]/index.vue
View file

@ -1,30 +1,19 @@
<template> <template>
<NuxtLayout name="app"> <div class="max-h-dvh overflow-y-scroll w-full">
<div class="max-h-dvh overflow-y-scroll"> <SocialElementsUsersAccount :account="account ?? undefined" />
<SocialElementsUsersAccount v-if="isMobile" :account="account ?? undefined" /> <TimelinesTimelineScroller>
<TimelinesTimelineScroller> <TimelinesAccount :id="accountId" :key="accountId" />
<TimelinesAccount :id="accountId ?? undefined" :key="accountId ?? undefined" /> </TimelinesTimelineScroller>
</TimelinesTimelineScroller> </div>
</div>
<template #right>
<SocialElementsUsersAccount v-if="!isMobile" :account="account ?? undefined" />
<div v-else>
</div>
</template>
</NuxtLayout>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import type { Account } from "~/types/mastodon/account"; import type { Account } from "~/types/mastodon/account";
definePageMeta({ definePageMeta({
layout: false, layout: "app",
}); });
const { width } = useWindowSize();
const isMobile = computed(() => width.value < 1024);
const route = useRoute(); const route = useRoute();
const client = useMegalodon(undefined, true); const client = useMegalodon(undefined, true);
const username = (route.params.username as string).replace("@", ""); const username = (route.params.username as string).replace("@", "");
@ -33,12 +22,22 @@ const accounts = useAccountSearch(client, username);
const account = computed<Account | null>( const account = computed<Account | null>(
() => accounts.value?.find((account) => account.acct === username) ?? null, () => accounts.value?.find((account) => account.acct === username) ?? null,
); );
const accountId = computed(() => account.value?.id ?? null); const accountId = computed(() => account.value?.id ?? undefined);
useSeoMeta({ useServerSeoMeta({
title: account.value?.display_name, title: computed(() =>
description: account.value?.note, account.value ? account.value.display_name : "Loading",
ogImage: account.value?.avatar, ),
profileUsername: account.value?.acct, ogTitle: computed(() =>
account.value ? account.value.display_name : "Loading",
),
ogImage: computed(() => (account.value ? account.value.avatar : undefined)),
ogType: "profile",
ogDescription: computed(() =>
account.value ? account.value.note : undefined,
),
description: computed(() =>
account.value ? account.value.note : undefined,
),
}); });
</script> </script>

6
pages/oauth/authorize.vue
View file

@ -1,9 +1,9 @@
<template> <template>
<div class="flex min-h-screen relative flex-col justify-center py-12 lg:px-8"> <div class="flex min-h-screen relative flex-col justify-center py-12 px-8">
<img crossorigin="anonymous" src="https://cdn.lysand.org/logo-long-dark.webp" alt="Lysand logo" <img crossorigin="anonymous" src="https://cdn.lysand.org/logo-long-dark.webp" alt="Lysand logo"
class="mx-auto h-24 hidden md:block" /> class="mx-auto h-24 hidden md:block" />
<div v-if="validUrlParameters" <div v-if="validUrlParameters"
class="mt-10 sm:mx-auto w-full sm:max-w-md px-10 py-10 rounded md:ring-1 md:ring-white/10"> class="sm:mx-auto w-full sm:max-w-md px-10 py-10 rounded md:ring-1 md:ring-white/10">
<div v-if="error" class="ring-1 ring-white/10 rounded p-4 bg-red-500 text-white mb-10"> <div v-if="error" class="ring-1 ring-white/10 rounded p-4 bg-red-500 text-white mb-10">
<h2 class="font-bold text-lg">An error occured</h2> <h2 class="font-bold text-lg">An error occured</h2>
<span class="text-sm">{{ error_description }}</span> <span class="text-sm">{{ error_description }}</span>
@ -48,7 +48,7 @@
<ButtonsPrimary type="submit" class="w-full">Sign in</ButtonsPrimary> <ButtonsPrimary type="submit" class="w-full">Sign in</ButtonsPrimary>
</VeeForm> </VeeForm>
</div> </div>
<div v-else class="mx-auto max-w-md mt-10"> <div v-else class="mx-auto max-w-md">
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl">Invalid access <h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl">Invalid access
parameters parameters
</h1> </h1>

10
pages/oauth/consent.vue
View file

@ -1,12 +1,7 @@
<template> <template>
<ClientOnly> <ClientOnly>
<div class="flex min-h-screen relative flex-col justify-center px-6 py-12 lg:px-8"> <div class="flex min-h-screen relative flex-col justify-center px-6 py-12 lg:px-8">
<div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80" <div v-if="validUrlParameters" class="sm:mx-auto sm:w-full sm:max-w-sm">
aria-hidden="true">
<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 v-if="validUrlParameters" class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
<form class="space-y-6" method="POST" <form class="space-y-6" method="POST"
:action="url.pathname.replace('/oauth/consent', '/oauth/authorize')"> :action="url.pathname.replace('/oauth/consent', '/oauth/authorize')">
<input type="hidden" v-for="([key, value]) in url.searchParams" :key="key" :name="key" <input type="hidden" v-for="([key, value]) in url.searchParams" :key="key" :name="key"
@ -68,7 +63,8 @@
<li v-for="client of useConfig().RECOMMENDED_CLIENTS" :key="client.name" class="w-full"> <li v-for="client of useConfig().RECOMMENDED_CLIENTS" :key="client.name" class="w-full">
<a :href="client.link" target="_blank" <a :href="client.link" target="_blank"
class="rounded-sm ring-2 ring-white/10 px-4 py-2 w-full flex flex-row gap-3 items-center"> class="rounded-sm ring-2 ring-white/10 px-4 py-2 w-full flex flex-row gap-3 items-center">
<img crossorigin="anonymous" :src="client.icon" :alt="`${client.name}'s logo'`" class="h-10 w-10" /> <img crossorigin="anonymous" :src="client.icon" :alt="`${client.name}'s logo'`"
class="h-10 w-10" />
<div class="flex flex-col justify-between items-start"> <div class="flex flex-col justify-between items-start">
<h2 class="font-bold text-gray-100">{{ client.name }}</h2> <h2 class="font-bold text-gray-100">{{ client.name }}</h2>
<span class="underline text-pink-700">{{ client.link }}</span> <span class="underline text-pink-700">{{ client.link }}</span>