versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2026-03-13 03:29:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: ✨ Make whole app client-only, add noscript fallback

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-06-15 11:18:58 -10:00
parent 961eccafa0
commit 2266dcd725
No known key found for this signature in database
19 changed files with 597 additions and 604 deletions
Download patch file Download diff file Expand all files Collapse all files

20
pages/[username]/[uuid].vue
View file

@ -1,16 +1,14 @@
<template>
<ClientOnly>
<div v-if="loaded" :defer="true" class="mx-auto max-w-2xl w-full pb-72">
<LazySocialElementsNotesNote v-for="note of context?.ancestors" :note="note" />
<div ref="element" class="first:rounded-t last:rounded-b overflow-hidden">
<LazySocialElementsNotesNote class="!rounded-none border-2 border-pink-500" v-if="note" :note="note" />
</div>
<LazySocialElementsNotesNote v-for="note of context?.descendants" :note="note" />
<div v-if="loaded" :defer="true" class="mx-auto max-w-2xl w-full pb-72">
<LazySocialElementsNotesNote v-for="note of context?.ancestors" :note="note" />
<div ref="element" class="first:rounded-t last:rounded-b overflow-hidden">
<LazySocialElementsNotesNote class="!rounded-none border-2 border-pink-500" v-if="note" :note="note" />
</div>
<div v-else class="mx-auto max-w-2xl w-full overflow-y-auto">
<LazySocialElementsNotesNote v-for="_ of 5" :skeleton="true" />
</div>
</ClientOnly>
<LazySocialElementsNotesNote v-for="note of context?.descendants" :note="note" />
</div>
<div v-else class="mx-auto max-w-2xl w-full overflow-y-auto">
<LazySocialElementsNotesNote v-for="_ of 5" :skeleton="true" />
</div>
</template>
<script setup lang="ts">

38
pages/notifications.vue
View file

@ -1,25 +1,23 @@
<template>
<ClientOnly>
<div class="mx-auto max-w-2xl w-full">
<div class="shrink-0 p-10 h-dvh" v-if="!identity">
<button type="button"
class="relative block h-full w-full rounded-lg border-2 border-dashed border-dark-300 p-12 text-center">
<iconify-icon name="tabler:notification" width="3rem" height="3rem" class="mx-auto text-gray-400" />
<span class="mt-3 block text-sm font-semibold text-gray-200 max-w-56 mx-auto">Notifications
will
appear here
when you
sign in</span>
</button>
</div>
<LazyTimelinesTimelineScroller v-else>
<LazyHeadersGreeting />
<div class="rounded overflow-hidden ring-1 ring-white/10">
<LazyTimelinesNotifications />
</div>
</LazyTimelinesTimelineScroller>
<div class="mx-auto max-w-2xl w-full">
<div class="shrink-0 p-10 h-dvh" v-if="!identity">
<button type="button"
class="relative block h-full w-full rounded-lg border-2 border-dashed border-dark-300 p-12 text-center">
<iconify-icon name="tabler:notification" width="3rem" height="3rem" class="mx-auto text-gray-400" />
<span class="mt-3 block text-sm font-semibold text-gray-200 max-w-56 mx-auto">Notifications
will
appear here
when you
sign in</span>
</button>
</div>
</ClientOnly>
<LazyTimelinesTimelineScroller v-else>
<LazyHeadersGreeting />
<div class="rounded overflow-hidden ring-1 ring-white/10">
<LazyTimelinesNotifications />
</div>
</LazyTimelinesTimelineScroller>
</div>
</template>
<script lang="ts" setup>

151
pages/oauth/authorize.vue
View file

@ -2,86 +2,83 @@
<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"
class="mx-auto h-24 hidden md:block mb-10" />
<ClientOnly>
<div v-if="validUrlParameters"
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">
<h2 class="font-bold text-lg">An error occured</h2>
<span class="text-sm">{{ error_description }}</span>
</div>
<VeeForm class="space-y-6" method="POST" :validation-schema="schema"
:action="`/api/auth/login?redirect_uri=${redirect_uri}&response_type=${response_type}&client_id=${client_id}&scope=${scope}`">
<h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Login to your account</h1>
<VeeField name="identifier" as="div" v-slot="{ errors, field }" validate-on-change>
<LoginInput label="Username or Email" placeholder="joemama" autocomplete="email" required
:is-invalid="errors.length > 0" v-bind="field" />
<VeeErrorMessage name="identifier" as="p" class="mt-2 text-sm text-red-600"
v-slot="{ message }">
{{ message }}
</VeeErrorMessage>
</VeeField>
<VeeField name="password" as="div" v-slot="{ errors, field }" validate-on-change>
<LoginInput label="Password" placeholder="Password here" type="password"
autocomplete="current-password" required :is-invalid="errors.length > 0" v-bind="field" />
<VeeErrorMessage name="password" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
{{ message }}
</VeeErrorMessage>
</VeeField>
<div v-if="ssoConfig && ssoConfig.providers.length > 0" class="w-full flex flex-col gap-3">
<h2 class="text-sm text-gray-200">Or sign in with</h2>
<div class="grid grid-cols-1 gap-4 w-full">
<a v-for="provider of ssoConfig.providers" :key="provider.id"
:href="`/oauth/sso?issuer=${provider.id}&redirect_uri=${redirect_uri}&response_type=${response_type}&client_id=${client_id}&scope=${scope}`">
<ButtonsSecondary class="flex flex-row w-full items-center justify-center gap-3">
<img crossorigin="anonymous" :src="provider.icon" :alt="`${provider.name}'s logo'`"
class="w-6 h-6" />
<div class="flex flex-col gap-0 justify-center">
<h3 class="font-bold">{{ provider.name }}</h3>
</div>
</ButtonsSecondary>
</a>
</div>
</div>
<ButtonsPrimary type="submit" class="w-full">Sign in</ButtonsPrimary>
</VeeForm>
<div v-if="validUrlParameters"
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">
<h2 class="font-bold text-lg">An error occured</h2>
<span class="text-sm">{{ error_description }}</span>
</div>
<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
parameters
</h1>
<p class="mt-6 text-lg leading-8 text-gray-300">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-300">Here are some recommended clients:</p>
<ul class="w-full flex flex-col gap-3 mt-4">
<li v-for="client of useConfig().RECOMMENDED_CLIENTS" :key="client.name" class="w-full">
<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">
<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">
<h2 class="font-bold text-gray-100">{{ client.name }}</h2>
<span class="underline text-pink-700">{{ client.link }}</span>
</div>
<VeeForm class="space-y-6" method="POST" :validation-schema="schema"
:action="`/api/auth/login?redirect_uri=${redirect_uri}&response_type=${response_type}&client_id=${client_id}&scope=${scope}`">
<h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Login to your account</h1>
<VeeField name="identifier" as="div" v-slot="{ errors, field }" validate-on-change>
<LoginInput label="Username or Email" placeholder="joemama" autocomplete="email" required
:is-invalid="errors.length > 0" v-bind="field" />
<VeeErrorMessage name="identifier" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
{{ message }}
</VeeErrorMessage>
</VeeField>
<VeeField name="password" as="div" v-slot="{ errors, field }" validate-on-change>
<LoginInput label="Password" placeholder="Password here" type="password"
autocomplete="current-password" required :is-invalid="errors.length > 0" v-bind="field" />
<VeeErrorMessage name="password" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
{{ message }}
</VeeErrorMessage>
</VeeField>
<div v-if="ssoConfig && ssoConfig.providers.length > 0" class="w-full flex flex-col gap-3">
<h2 class="text-sm text-gray-200">Or sign in with</h2>
<div class="grid grid-cols-1 gap-4 w-full">
<a v-for="provider of ssoConfig.providers" :key="provider.id"
:href="`/oauth/sso?issuer=${provider.id}&redirect_uri=${redirect_uri}&response_type=${response_type}&client_id=${client_id}&scope=${scope}`">
<ButtonsSecondary class="flex flex-row w-full items-center justify-center gap-3">
<img crossorigin="anonymous" :src="provider.icon" :alt="`${provider.name}'s logo'`"
class="w-6 h-6" />
<div class="flex flex-col gap-0 justify-center">
<h3 class="font-bold">{{ provider.name }}</h3>
</div>
</ButtonsSecondary>
</a>
</li>
</ul>
<p class="mt-6 text-lg leading-8 text-gray-300">
Many other clients exist, but <strong class="font-bold">they have not been tested for
compatibility</strong>. Bug reports are nevertheless welcome.
</p>
</div>
</div>
<p class="mt-6 text-lg leading-8 text-gray-300">
Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose"
target="_blank" class="underline text-pink-700">the issue tracker</a>.
</p>
</div>
</ClientOnly>
<ButtonsPrimary type="submit" class="w-full">Sign in</ButtonsPrimary>
</VeeForm>
</div>
<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
parameters
</h1>
<p class="mt-6 text-lg leading-8 text-gray-300">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-300">Here are some recommended clients:</p>
<ul class="w-full flex flex-col gap-3 mt-4">
<li v-for="client of useConfig().RECOMMENDED_CLIENTS" :key="client.name" class="w-full">
<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">
<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">
<h2 class="font-bold text-gray-100">{{ client.name }}</h2>
<span class="underline text-pink-700">{{ client.link }}</span>
</div>
</a>
</li>
</ul>
<p class="mt-6 text-lg leading-8 text-gray-300">
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-300">
Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose"
target="_blank" class="underline text-pink-700">the issue tracker</a>.
</p>
</div>
</div>
</template>

38
pages/oauth/code.vue
View file

@ -1,27 +1,25 @@
<template>
<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="mx-auto max-w-md mt-10">
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl">Here's your code
</h1>
<p class="mt-6 text-lg leading-8 text-gray-300">You have signed in successfully. Your code is
</p>
<div class="prose prose-invert select-all mt-6">
<pre
class="overflow-x-hidden whitespace-normal break-all bg-dark-500 ring-1 ring-white/10"><code class="text-wrap max-w-full">{{ code }}</code></pre>
</div>
<p class="mt-6 text-lg leading-8 text-gray-300">Paste this code into the application you are signing in
to.
</p>
<p class="mt-6 text-lg leading-8 text-gray-300">
Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose"
target="_blank" class="underline text-pink-700">the issue tracker</a>.
</p>
<div class="mx-auto max-w-md mt-10">
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl">Here's your code
</h1>
<p class="mt-6 text-lg leading-8 text-gray-300">You have signed in successfully. Your code is
</p>
<div class="prose prose-invert select-all mt-6">
<pre
class="overflow-x-hidden whitespace-normal break-all bg-dark-500 ring-1 ring-white/10"><code class="text-wrap max-w-full">{{ code }}</code></pre>
</div>
<p class="mt-6 text-lg leading-8 text-gray-300">Paste this code into the application you are signing in
to.
</p>
<p class="mt-6 text-lg leading-8 text-gray-300">
Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose"
target="_blank" class="underline text-pink-700">the issue tracker</a>.
</p>
</div>
</ClientOnly>
</div>
</template>
<script setup lang="ts">

170
pages/oauth/consent.vue
View file

@ -1,89 +1,85 @@
<template>
<ClientOnly>
<div class="flex min-h-screen relative flex-col justify-center px-6 py-12 lg:px-8">
<div v-if="validUrlParameters" class="sm:mx-auto sm:w-full sm:max-w-sm">
<form class="space-y-6" method="POST"
:action="url.pathname.replace('/oauth/consent', '/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-gray-50 text-center tracking-tight">Allow this application to
access your
account?</h1>
<div v-if="application" class="rounded-sm ring-2 ring-white/10 px-4 py-2 w-full">
<h2 class="font-bold text-gray-200">{{ application }}</h2>
<a v-if="website" :href="website" target="_blank" class="underline text-pink-700">{{ website
}}</a>
</div>
<div class="flex min-h-screen relative flex-col justify-center px-6 py-12 lg:px-8">
<div v-if="validUrlParameters" class="sm:mx-auto sm:w-full sm:max-w-sm">
<form class="space-y-6" method="POST" :action="url.pathname.replace('/oauth/consent', '/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-gray-50 text-center tracking-tight">Allow this application to
access your
account?</h1>
<div v-if="application" class="rounded-sm ring-2 ring-white/10 px-4 py-2 w-full">
<h2 class="font-bold text-gray-200">{{ application }}</h2>
<a v-if="website" :href="website" target="_blank" class="underline text-pink-700">{{ website
}}</a>
</div>
</div>
<h2 class="text-gray-50 tracking-tight text-xl font-semibold">
This application will be able to:
</h2>
<h2 class="text-gray-50 tracking-tight text-xl font-semibold">
This application will be able to:
</h2>
<ul class="flex flex-col gap-y-1.5">
<li v-for="text in getScopeText(scopes)" :key="text[1]" class="flex flex-row gap-1">
<svg class="fill-pink-600 w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
viewBox="0 0 16 16">
<path
d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z" />
</svg>
<h2 class="text-sm text-gray-200">
<strong class="font-bold">{{ text[0] }}</strong> {{ text[1] }}
</h2>
</li>
</ul>
<div class="flex-col flex gap-y-1">
<p class="text-sm text-gray-200">You are signing in to <b>{{ application }}</b> with your
account.</p>
<p class="text-sm text-gray-200">This allows <b>{{ application }}</b> to perform the above
account
actions.</p>
</div>
<div class="flex flex-col gap-3">
<ButtonsPrimary type="submit">Authorize</ButtonsPrimary>
<NuxtLink href="/" class="w-full">
<ButtonsSecondary class="w-full">Cancel</ButtonsSecondary>
</NuxtLink>
</div>
</form>
</div>
<div v-else class="mx-auto max-w-md mt-10">
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl">Invalid access
parameters
</h1>
<p class="mt-6 text-lg leading-8 text-gray-300">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-300">Here are some recommended clients:</p>
<ul class="w-full flex flex-col gap-3 mt-4">
<li v-for="client of useConfig().RECOMMENDED_CLIENTS" :key="client.name" class="w-full">
<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">
<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">
<h2 class="font-bold text-gray-100">{{ client.name }}</h2>
<span class="underline text-pink-700">{{ client.link }}</span>
</div>
</a>
<ul class="flex flex-col gap-y-1.5">
<li v-for="text in getScopeText(scopes)" :key="text[1]" class="flex flex-row gap-1">
<svg class="fill-pink-600 w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
viewBox="0 0 16 16">
<path
d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z" />
</svg>
<h2 class="text-sm text-gray-200">
<strong class="font-bold">{{ text[0] }}</strong> {{ text[1] }}
</h2>
</li>
</ul>
<p class="mt-6 text-lg leading-8 text-gray-300">
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-300">
Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose"
target="_blank" class="underline text-pink-700">the issue tracker</a>.
</p>
</div>
<div class="flex-col flex gap-y-1">
<p class="text-sm text-gray-200">You are signing in to <b>{{ application }}</b> with your
account.</p>
<p class="text-sm text-gray-200">This allows <b>{{ application }}</b> to perform the above
account
actions.</p>
</div>
<div class="flex flex-col gap-3">
<ButtonsPrimary type="submit">Authorize</ButtonsPrimary>
<NuxtLink href="/" class="w-full">
<ButtonsSecondary class="w-full">Cancel</ButtonsSecondary>
</NuxtLink>
</div>
</form>
</div>
</ClientOnly>
<div v-else class="mx-auto max-w-md mt-10">
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl">Invalid access
parameters
</h1>
<p class="mt-6 text-lg leading-8 text-gray-300">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-300">Here are some recommended clients:</p>
<ul class="w-full flex flex-col gap-3 mt-4">
<li v-for="client of useConfig().RECOMMENDED_CLIENTS" :key="client.name" class="w-full">
<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">
<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">
<h2 class="font-bold text-gray-100">{{ client.name }}</h2>
<span class="underline text-pink-700">{{ client.link }}</span>
</div>
</a>
</li>
</ul>
<p class="mt-6 text-lg leading-8 text-gray-300">
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-300">
Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose"
target="_blank" class="underline text-pink-700">the issue tracker</a>.
</p>
</div>
</div>
</template>
<script setup lang="ts">
@ -136,43 +132,43 @@ const getScopeText = (fullScopes: string[]) => {
const [scopeAction, scopeName] = possibleScope.split(":");
if (
scopeAction.includes("rw") &&
scopeAction?.includes("rw") &&
(readScopes.includes(`read:${scopeName}`) ||
readScopes.find((scope) => scope === "read")) &&
(writeScopes.includes(`write:${scopeName}`) ||
writeScopes.find((scope) => scope === "write"))
) {
if (oauthScopeText[possibleScope].includes("$VERB"))
if (oauthScopeText[possibleScope]?.includes("$VERB"))
scopeTexts.push([
"Read and write",
oauthScopeText[possibleScope].replace("$VERB", ""),
oauthScopeText[possibleScope]?.replace("$VERB", ""),
]);
else scopeTexts.push(["", oauthScopeText[possibleScope]]);
continue;
}
if (
scopeAction.includes("r") &&
scopeAction?.includes("r") &&
(readScopes.includes(`read:${scopeName}`) ||
readScopes.find((scope) => scope === "read"))
) {
if (oauthScopeText[possibleScope].includes("$VERB"))
if (oauthScopeText[possibleScope]?.includes("$VERB"))
scopeTexts.push([
"Read",
oauthScopeText[possibleScope].replace("$VERB", ""),
oauthScopeText[possibleScope]?.replace("$VERB", ""),
]);
else scopeTexts.push(["", oauthScopeText[possibleScope]]);
}
if (
scopeAction.includes("w") &&
scopeAction?.includes("w") &&
(writeScopes.includes(`write:${scopeName}`) ||
writeScopes.find((scope) => scope === "write"))
) {
if (oauthScopeText[possibleScope].includes("$VERB"))
if (oauthScopeText[possibleScope]?.includes("$VERB"))
scopeTexts.push([
"Write",
oauthScopeText[possibleScope].replace("$VERB", ""),
oauthScopeText[possibleScope]?.replace("$VERB", ""),
]);
else scopeTexts.push(["", oauthScopeText[possibleScope]]);
}

106
pages/oauth/reset.vue
View file

@ -2,63 +2,61 @@
<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"
class="mx-auto h-24 hidden md:block mb-10" />
<ClientOnly>
<div v-if="validUrlParameters"
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">
<h2 class="font-bold text-lg">An error occured</h2>
<span class="text-sm">{{ error_description }}</span>
</div>
<VeeForm class="space-y-6" method="POST" :validation-schema="schema" action="/api/auth/reset">
<input type="hidden" name="token" :value="token" />
<h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Reset your password</h1>
<VeeField name="password" as="div" v-slot="{ errors, field }" validate-on-change>
<LoginInput label="Password" placeholder="Password here" type="password"
autocomplete="current-password" required :is-invalid="errors.length > 0" v-bind="field" />
<VeeErrorMessage name="password" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
{{ message }}
</VeeErrorMessage>
</VeeField>
<VeeField name="password2" as="div" v-slot="{ errors, field }" validate-on-change>
<LoginInput label="Confirm password" placeholder="Confirm password" type="password"
autocomplete="current-password" required :is-invalid="errors.length > 0" v-bind="field" />
<VeeErrorMessage name="password2" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
{{ message }}
</VeeErrorMessage>
</VeeField>
<p class="mt-6 text-sm leading-8 font-semibold text-red-300">This will reset your
password. Be sure to put it in a password manager.
</p>
<ButtonsPrimary type="submit" class="w-full">Reset</ButtonsPrimary>
</VeeForm>
<div v-if="validUrlParameters"
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">
<h2 class="font-bold text-lg">An error occured</h2>
<span class="text-sm">{{ error_description }}</span>
</div>
<div v-else-if="success">
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl text-center">Password reset
successful!
</h1>
<p class="mt-6 text-lg leading-8 text-gray-300 text-center">
You can now login to your account with your new password.
</p>
</div>
<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
parameters
</h1>
<p class="mt-6 text-lg leading-8 text-gray-300">This page should be accessed
through a valid password reset request. Please ask your admin to reset your password.
<VeeForm class="space-y-6" method="POST" :validation-schema="schema" action="/api/auth/reset">
<input type="hidden" name="token" :value="token" />
<h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Reset your password</h1>
<VeeField name="password" as="div" v-slot="{ errors, field }" validate-on-change>
<LoginInput label="Password" placeholder="Password here" type="password"
autocomplete="current-password" required :is-invalid="errors.length > 0" v-bind="field" />
<VeeErrorMessage name="password" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
{{ message }}
</VeeErrorMessage>
</VeeField>
<VeeField name="password2" as="div" v-slot="{ errors, field }" validate-on-change>
<LoginInput label="Confirm password" placeholder="Confirm password" type="password"
autocomplete="current-password" required :is-invalid="errors.length > 0" v-bind="field" />
<VeeErrorMessage name="password2" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
{{ message }}
</VeeErrorMessage>
</VeeField>
<p class="mt-6 text-sm leading-8 font-semibold text-red-300">This will reset your
password. Be sure to put it in a password manager.
</p>
<p class="mt-6 text-lg leading-8 text-gray-300">
Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose"
target="_blank" class="underline text-pink-700">the issue tracker</a>.
</p>
</div>
</ClientOnly>
<ButtonsPrimary type="submit" class="w-full">Reset</ButtonsPrimary>
</VeeForm>
</div>
<div v-else-if="success">
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl text-center">Password reset
successful!
</h1>
<p class="mt-6 text-lg leading-8 text-gray-300 text-center">
You can now login to your account with your new password.
</p>
</div>
<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
parameters
</h1>
<p class="mt-6 text-lg leading-8 text-gray-300">This page should be accessed
through a valid password reset request. Please ask your admin to reset your password.
</p>
<p class="mt-6 text-lg leading-8 text-gray-300">
Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose"
target="_blank" class="underline text-pink-700">the issue tracker</a>.
</p>
</div>
</div>
</template>

165
pages/register/index.vue
View file

@ -1,94 +1,90 @@
<template>
<ClientOnly>
<div class="flex min-h-screen flex-col justify-center px-6 py-12 gap-10 lg:px-8 relative">
<img crossorigin="anonymous" src="https://cdn.lysand.org/logo-long-dark.webp" alt="Lysand logo"
class="mx-auto h-24 hidden md:block" />
<div v-if="instance && instance.registrations" class="mx-auto w-full max-w-md">
<div v-if="Object.keys(errors).length > 0"
class="ring-1 ring-white/10 rounded p-4 bg-red-500 text-white mb-10">
<h2 class="font-bold text-lg">Error</h2>
<span class="text-sm">{{ errors.error }}</span>
</div>
<VeeForm class="space-y-6" @submit="register as any" :validation-schema="schema">
<h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Register</h1>
<VeeField name="email" as="div" v-slot="{ errors, field }" validate-on-change>
<LoginInput label="Email" placeholder="contact@cpluspatch.com" type="email" autocomplete="email"
required :is-invalid="errors.length > 0" v-bind="field" :disabled="isLoading" />
<VeeErrorMessage name="email" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
{{ message }}
</VeeErrorMessage>
</VeeField>
<VeeField name="username" as="div" v-slot="{ errors, field }" validate-on-change>
<LoginInput label="Username" placeholder="thespeedy" type="text" autocomplete="username"
required :is-invalid="errors.length > 0" v-bind="field" :disabled="isLoading" />
<VeeErrorMessage name="username" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
{{ message }} (must only contain lowercase letters, numbers and underscores)
</VeeErrorMessage>
</VeeField>
<VeeField name="password" as="div" v-slot="{ errors, field }" validate-on-change>
<LoginInput label="Password" placeholder="hunter2" type="password"
autocomplete="current-password" required :is-invalid="errors.length > 0" v-bind="field"
:disabled="isLoading" />
<VeeErrorMessage name="password" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
{{ message }}
</VeeErrorMessage>
</VeeField>
<VeeField name="password2" as="div" v-slot="{ errors, field }" validate-on-change>
<LoginInput label="Confirm password" placeholder="hunter2" type="password"
autocomplete="current-password" required :is-invalid="errors.length > 0" v-bind="field"
:disabled="isLoading" />
<VeeErrorMessage name="password2" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
{{ message }}
</VeeErrorMessage>
</VeeField>
<VeeField name="reason" as="div" v-slot="{ errors }" validate-on-change>
<label for="reason" class="block text-sm font-medium leading-6 text-gray-50">Why do you want to
join?</label>
<div class="mt-2">
<textarea rows="4" required :is-invalid="errors.length > 0" name="reason"
:disabled="isLoading" placeholder="Brief text (optional)"
class="block w-full disabled:opacity-70 disabled:hover:cursor-wait bg-dark-500 rounded-md border-0 py-1.5 text-gray-50 shadow-sm ring-1 ring-inset ring-white/10 placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-pink-600 sm:text-sm sm:leading-6" />
</div>
<VeeErrorMessage name="reason" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
{{ message }}
</VeeErrorMessage>
</VeeField>
<VeeField name="tos" as="div" v-slot="{ errors, field }" validate-on-change>
<input type="checkbox" :disabled="isLoading" name="tos"
class="rounded disabled:hover:cursor-wait mr-1 align-middle mb-0.5 text-pink-700 !ring-0 !outline-none"
required />
<span class="text-sm text-gray-100">I agree to the terms and conditions of this server <a
class="underline font-bold" target="_blank" :href="'#'">available here</a></span>
<VeeErrorMessage name="tos" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
{{ message }}
</VeeErrorMessage>
</VeeField>
<ButtonsPrimary type="submit" class="w-full" :disabled="isLoading">{{ isLoading ? "Registering..." :
"Register" }}</ButtonsPrimary>
</VeeForm>
</div>
<div v-else>
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl text-center">Registrations are
disabled
</h1>
<p class="mt-6 text-lg leading-8 text-gray-200 text-center">Ask this instance's admin to enable them in
config!
</p>
<div class="flex min-h-screen flex-col justify-center px-6 py-12 gap-10 lg:px-8 relative">
<img crossorigin="anonymous" src="https://cdn.lysand.org/logo-long-dark.webp" alt="Lysand logo"
class="mx-auto h-24 hidden md:block" />
<div v-if="instance && instance.registrations" class="mx-auto w-full max-w-md">
<div v-if="Object.keys(errors).length > 0"
class="ring-1 ring-white/10 rounded p-4 bg-red-500 text-white mb-10">
<h2 class="font-bold text-lg">Error</h2>
<span class="text-sm">{{ errors.error }}</span>
</div>
<VeeForm class="space-y-6" @submit="register as any" :validation-schema="schema">
<h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Register</h1>
<VeeField name="email" as="div" v-slot="{ errors, field }" validate-on-change>
<LoginInput label="Email" placeholder="contact@cpluspatch.com" type="email" autocomplete="email"
required :is-invalid="errors.length > 0" v-bind="field" :disabled="isLoading" />
<VeeErrorMessage name="email" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
{{ message }}
</VeeErrorMessage>
</VeeField>
<VeeField name="username" as="div" v-slot="{ errors, field }" validate-on-change>
<LoginInput label="Username" placeholder="thespeedy" type="text" autocomplete="username" required
:is-invalid="errors.length > 0" v-bind="field" :disabled="isLoading" />
<VeeErrorMessage name="username" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
{{ message }} (must only contain lowercase letters, numbers and underscores)
</VeeErrorMessage>
</VeeField>
<VeeField name="password" as="div" v-slot="{ errors, field }" validate-on-change>
<LoginInput label="Password" placeholder="hunter2" type="password" autocomplete="current-password"
required :is-invalid="errors.length > 0" v-bind="field" :disabled="isLoading" />
<VeeErrorMessage name="password" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
{{ message }}
</VeeErrorMessage>
</VeeField>
<VeeField name="password2" as="div" v-slot="{ errors, field }" validate-on-change>
<LoginInput label="Confirm password" placeholder="hunter2" type="password"
autocomplete="current-password" required :is-invalid="errors.length > 0" v-bind="field"
:disabled="isLoading" />
<VeeErrorMessage name="password2" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
{{ message }}
</VeeErrorMessage>
</VeeField>
<VeeField name="reason" as="div" v-slot="{ errors }" validate-on-change>
<label for="reason" class="block text-sm font-medium leading-6 text-gray-50">Why do you want to
join?</label>
<div class="mt-2">
<textarea rows="4" required :is-invalid="errors.length > 0" name="reason" :disabled="isLoading"
placeholder="Brief text (optional)"
class="block w-full disabled:opacity-70 disabled:hover:cursor-wait bg-dark-500 rounded-md border-0 py-1.5 text-gray-50 shadow-sm ring-1 ring-inset ring-white/10 placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-pink-600 sm:text-sm sm:leading-6" />
</div>
<VeeErrorMessage name="reason" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
{{ message }}
</VeeErrorMessage>
</VeeField>
<VeeField name="tos" as="div" v-slot="{ errors, field }" validate-on-change>
<input type="checkbox" :disabled="isLoading" name="tos"
class="rounded disabled:hover:cursor-wait mr-1 align-middle mb-0.5 text-pink-700 !ring-0 !outline-none"
required />
<span class="text-sm text-gray-100">I agree to the terms and conditions of this server <a
class="underline font-bold" target="_blank" :href="'#'">available here</a></span>
<VeeErrorMessage name="tos" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
{{ message }}
</VeeErrorMessage>
</VeeField>
<ButtonsPrimary type="submit" class="w-full" :disabled="isLoading">{{ isLoading ? "Registering..." :
"Register" }}</ButtonsPrimary>
</VeeForm>
</div>
</ClientOnly>
<div v-else>
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl text-center">Registrations are
disabled
</h1>
<p class="mt-6 text-lg leading-8 text-gray-200 text-center">Ask this instance's admin to enable them in
config!
</p>
</div>
</div>
</template>
<script setup lang="ts">
import { toTypedSchema } from "@vee-validate/zod";
import type { AxiosError } from "axios";
import { z } from "zod";
import LoginInput from "../../components/LoginInput.vue";
// TODO: Add instance TOS link
@ -150,7 +146,6 @@ const register = (result: {
navigateTo("/register/success");
})
.catch(async (err) => {
const error = err as AxiosError;
// @ts-ignore
errors.value = error.response?.data || {};
console.error(err);