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: ♻️ Change code to build in static mode, add timelines, profiles and notes, new design

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-04-21 21:38:51 -10:00
parent 9edfd5ac2d
commit acd50ece9b
No known key found for this signature in database
75 changed files with 1603 additions and 549 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,70 +1,17 @@
<template>
<div class="flex min-h-screen flex-col justify-center px-6 py-12 lg:px-8 relative">
<div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
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%)" />
<ClientOnly>
<div v-if="note" class="max-w-2xl mx-auto md:py-20 md:px-10">
<SocialElementsNotesNote :note="note" />
</div>
<div class="code" v-html="code">
</div>
</div>
</ClientOnly>
</template>
<script setup lang="ts">
import { getHighlighterCore } from "shiki/core";
import getWasm from "shiki/wasm";
import { useRoute } from "vue-router";
const config = await useConfig();
if (!config) {
throw new Error("Config not found");
}
const route = useRoute();
const client = await useMegalodon();
const uuid = (route.params.uuid as string);
const data = await fetch(
new URL(`/api/v1/statuses/${route.params.uuid}`, config.http.base_url),
{
headers: {
Accept: "application/json",
},
},
)
.then((res) => res.json())
.catch(() => ({
error: "Failed to fetch status (it probably doesn't exist)",
}));
const highlighter = await getHighlighterCore({
themes: [import("shiki/themes/rose-pine.mjs")],
langs: [import("shiki/langs/json.mjs")],
loadWasm: getWasm,
});
const code = highlighter.codeToHtml(JSON.stringify(data, null, 4), {
lang: "json",
theme: "rose-pine",
});
</script>
<style lang="postcss">
pre:has(code) {
word-wrap: normal;
background: transparent;
-webkit-hyphens: none;
hyphens: none;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
white-space: pre;
word-break: normal;
word-spacing: normal;
overflow-x: auto;
@apply ring-1 ring-white/10 mt-4 bg-white/5 px-4 py-3 rounded;
}
pre code {
@apply block p-0;
}
</style>
const note = await useNote(client, uuid);
</script>

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

@ -1,81 +1,66 @@
<template>
<div class="flex min-h-screen flex-col justify-center px-6 py-12 lg:px-8 relative">
<div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
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 id="code" v-html="code">
<div class="flex min-h-screen flex-col justify-center py-12 lg:px-8 relative">
<div v-if="account" class="mx-auto max-w-lg w-full rounded ring-1 ring-white/10 pb-10">
<div 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" />
</div>
<div class="flex items-start justify-between px-4 py-3">
<img class="-mt-[4.5rem] h-32 w-32 cursor-pointer rounded ring-white/10 ring-1 bg-dark-700"
:src="account.avatar" />
<ButtonsSecondary>Edit Profile</ButtonsSecondary>
</div>
<div class="mt-2 px-4">
<h2
class="text-xl font-bold text-gray-100 tracking-tight bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-400 text-transparent bg-clip-text">
{{ account.display_name }}
<Icon v-if="account.locked" name="tabler:lock" class="w-5 h-5 mb-0.5 text-gray-400 cursor-pointer"
title="This account manually approves its followers" />
</h2>
<span class="text-gray-400">@{{ account.acct }}</span>
</div>
<div class="mt-4 px-4">
<div class="prose prose-invert" v-html="account.note"></div>
</div>
<div class="mt-3 flex items-center space-x-4 px-4">
<div class="flex items-center space-x-1">
<Icon name="tabler:calendar" class="w-5 h-5 text-gray-400" />
<span class="text-gray-400">Created {{ formattedJoin }}</span>
</div>
<div v-if="account.bot" class="flex items-center space-x-1">
<Icon name="tabler:robot" class="w-5 h-5 text-gray-400" />
<span class="text-gray-400">Bot</span>
</div>
</div>
<div class="mt-3 flex items-center space-x-4 px-4">
<div class="cursor-pointer hover:underline space-x-1">
<span class="font-bold text-gray-200">{{ account.following_count }}</span>
<span class="text-gray-400">Following</span>
</div>
<div class="cursor-pointer hover:underline space-x-1">
<span class="font-bold text-gray-200">{{ account.followers_count }}</span>
<span class="text-gray-400">Followers</span>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { getHighlighterCore } from "shiki/core";
import getWasm from "shiki/wasm";
import { useRoute } from "vue-router";
const config = await useConfig();
if (!config) {
throw new Error("Config not found");
}
const route = useRoute();
const client = await useMegalodon();
const username = (route.params.username as string).replace("@", "");
const id = await useAccountSearch(client, username);
const id = await fetch(new URL(`/api/v1/accounts/search?q=${username}`, config.http.base_url), {
headers: {
Accept: "application/json",
},
})
.then((res) => res.json())
.catch(() => null);
let data = null;
if (id && id.length > 0) {
data = await fetch(new URL(`/api/v1/accounts/${id[0].id}`, config.http.base_url), {
headers: {
Accept: "application/json",
},
})
.then((res) => res.json())
.catch(() => ({
error: "Failed to fetch user (it probably doesn't exist)",
}));
}
const highlighter = await getHighlighterCore({
themes: [import("shiki/themes/rose-pine.mjs")],
langs: [import("shiki/langs/json.mjs")],
loadWasm: getWasm,
});
const code = highlighter.codeToHtml(JSON.stringify(data, null, 4), {
lang: "json",
theme: "rose-pine",
});
</script>
<style lang="postcss">
pre:has(code) {
word-wrap: normal;
background: transparent;
-webkit-hyphens: none;
hyphens: none;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
white-space: pre;
word-break: normal;
word-spacing: normal;
overflow-x: auto;
@apply ring-1 ring-white/10 mt-4 bg-white/5 px-4 py-3 rounded;
}
pre code {
@apply block p-0;
}
</style>
const account = id ? await useAccount(client, id[0].id) : null;
const formattedJoin = Intl.DateTimeFormat("en-US", {
month: "long",
year: "numeric",
}).format(new Date(account?.created_at ?? 0));
</script>

106
pages/index.vue
View file

@ -1,70 +1,62 @@
<template>
<div class="bg-white">
<div class="relative isolate px-6 pt-14 lg:px-8">
<div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
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 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">
You are using <a href="#" class="font-semibold text-indigo-600">Lysand {{ version }}</a>
</div>
</div>
<div class="text-center">
<h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">Welcome to Lysand</h1>
<p class="mt-6 text-lg leading-8 text-gray-600">You can login to this server by pointing any
Mastodon
client at <strong class="font-bold">{{ config?.http.base_url }}</strong></p>
<div class="mt-10 flex items-center justify-center gap-6 md:flex-row flex-col">
<a href="https://github.com/lysand-org/lysand" target="_blank"
class="rounded-md w-full bg-indigo-600 ring-indigo-600 ring-2 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Read
the docs</a>
<a href="https://lysand.org" target="_blank"
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>
<div class="relative isolate px-6 pt-14 lg:px-8">
<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 class="mx-auto max-w-md 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-300 ring-1 ring-white/10 hover:ring-white/20">
You are using <span class="font-semibold text-pink-400">Lysand 0.5-dev</span>
</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)]"
aria-hidden="true">
<div class="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] 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 class="text-center">
<h1
class="text-4xl font-bold tracking-tight bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-400 text-transparent bg-clip-text sm:text-5xl">
Welcome to Lysand</h1>
<p class="mt-6 text-lg leading-8 text-gray-300">You can login to this server by pointing any
Mastodon
client at <strong class="font-bold">{{ baseUrl }}</strong></p>
<div class="mt-10 flex items-center justify-center gap-6 md:flex-row flex-col">
<NuxtLink href="/public">
<ButtonsPrimary>
Public timeline
</ButtonsPrimary>
</NuxtLink>
<a href="https://github.com/lysand-org/lysand" target="_blank">
<ButtonsSecondary>
Create your own instance
</ButtonsSecondary>
</a>
</div>
<p class="mt-6 text-lg leading-8 text-gray-300">Here are some recommended clients:</p>
<ul class="w-full mx-auto max-w-md 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 :src="client.icon" :alt="client.name" 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 may 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-800">the issue tracker</a>.
</p>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { recommendedClients } from "../constants";
// @ts-ignore
const version = __VERSION__;
const config = await useConfig();
const baseUrl = useBaseUrl()
useServerSeoMeta({
title: "Welcome to Lysand!",

169
pages/oauth/authorize.vue
View file

@ -1,88 +1,92 @@
<template>
<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"
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"
:action="`/api/auth/login?redirect_uri=${redirect_uri}&response_type=${response_type}&client_id=${client_id}&scope=${scope}`">
<div>
<h1 class="font-bold text-2xl text-center tracking-tight">Login to your account</h1>
</div>
<div class="flex min-h-screen relative flex-col justify-center py-12 lg:px-8">
<img src="https://camo.githubusercontent.com/353460d1fdb1667ec993159270dcece12c491fb38165460215a519ab93f4e554/68747470733a2f2f63646e2d7765622e63706c757370617463682e636f6d2f6c7973616e642e77656270"
alt="Lysand logo" class="mx-auto h-24 hidden md:block" />
<div v-if="validUrlParameters"
class="mt-10 sm:mx-auto w-full sm:max-w-md md:bg-dark-900 px-10 py-10 rounded md:ring-1 md:ring-white/10">
<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}`">
<div v-if="error && error !== 'undefined'"
class="rounded bg-purple-100 ring-1 ring-purple-800 py-2 px-4">
<h3 class="font-bold">An error occured:</h3>
<p>{{ error }}</p>
</div>
<h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Login to your account</h1>
<div>
<LoginInput label="Email" id="email" name="email" type="email" autocomplete="email" required />
</div>
<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" />
<VeeErrorMessage name="email" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
{{ message }}
</VeeErrorMessage>
</VeeField>
<div>
<LoginInput label="Password" id="password" name="password" type="password"
autocomplete="current-password" required />
</div>
<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="oauthProviders && oauthProviders.length > 0" class="w-full flex flex-col gap-3">
<h2 class="text-sm text-gray-700">Or sign in with</h2>
<div class="grid grid-cols-2 gap-4 w-full">
<a v-for="provider of oauthProviders" :key="provider.id"
:href="`/oauth/authorize-external?issuer=${provider.id}&redirect_uri=${redirect_uri}&response_type=${response_type}&clientId=${client_id}&scope=${scope}`"
class="flex flex-row justify-center rounded ring-1 gap-2 p-2 ring-black/10 hover:shadow duration-200">
<img :src="provider.icon" :alt="provider.name" class="w-6 h-6" />
<div class="flex flex-col gap-0 justify-center">
<h3 class="font-bold">{{ provider.name }}</h3>
</div>
</a>
</div>
</div>
<div v-if="oauthProviders && oauthProviders.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 oauthProviders" :key="provider.id"
:href="`/oauth/authorize-external?issuer=${provider.id}&redirect_uri=${redirect_uri}&response_type=${response_type}&clientId=${client_id}&scope=${scope}`">
<ButtonsSecondary class="flex flex-row w-full items-center justify-center gap-3">
<img :src="provider.icon" :alt="provider.name" 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>
<div>
<button type="submit"
class="flex w-full justify-center rounded-md bg-purple-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:shadow-lg duration-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Sign
in</button>
</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>
<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>
<ButtonsPrimary type="submit" class="w-full">Sign in</ButtonsPrimary>
</VeeForm>
</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 :src="client.icon" :alt="client.name" 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-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>
<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">
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import LoginInput from "../../components/LoginInput.vue";
import { recommendedClients } from "../../constants";
import { toTypedSchema } from '@vee-validate/zod';
import { z } from 'zod';
const schema = toTypedSchema(z.object({
email: z.string().email(),
password: z.string().min(3),
}));
const query = useRoute().query;
@ -91,24 +95,9 @@ const response_type = query.response_type;
const client_id = query.client_id;
const scope = query.scope;
const error = decodeURIComponent(query.error as string);
const error_description = decodeURIComponent(query.error_description as string);
const validUrlParameters = redirect_uri && response_type && client_id && scope;
const oauthProviders = ref<
| {
name: string;
icon: string;
id: string;
}[]
| null
>(null);
const getOauthProviders = async () => {
const response = await fetch("/oauth/providers");
return await response.json();
};
onMounted(async () => {
oauthProviders.value = await getOauthProviders();
});
const oauthProviders = await useOAuthProviders()
</script>

60
pages/oauth/redirect.vue → pages/oauth/consent.vue
View file

@ -9,75 +9,77 @@
<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
<h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Allow this application to
access your
account?</h1>
<div class="rounded-sm ring-2 ring-black/10 px-4 py-2 w-full">
<h2 class="font-bold">{{ application }}</h2>
<a :href="website" class="underline text-purple-700">{{ website }}</a>
<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-900 tracking-tight text-xl font-semibold">
<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-purple-600 w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
<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">
<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-700">You are signing in to <b>{{ application }}</b> with your
<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-700">This allows <b>{{ application }}</b> to perform the above account
<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">
<button type="submit"
class="flex w-full justify-center rounded-md bg-purple-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:shadow-lg duration-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Authorize</button>
<a type="button" href="/"
class="flex w-full justify-center rounded-md bg-gray-50 px-3 py-1.5 text-sm font-semibold leading-6 text-red-600 shadow-sm hover:shadow-lg duration-200 border-2 border-red-600">Cancel</a>
<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">
<h1 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-4xl">Invalid access
<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-600">This page should be accessed
<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-600">Here are some recommended clients:</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 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">
<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 :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>
<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-600">
<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-600">
<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"
class="underline text-purple-700">the issue tracker</a>.
target="_blank" class="underline text-pink-700">the issue tracker</a>.
</p>
</div>
</div>
@ -85,17 +87,15 @@
<script setup lang="ts">
import { useRoute } from "vue-router";
import { recommendedClients } from "../../constants";
const url = useRequestURL();
const query = useRoute().query;
const application = query.application;
const website = decodeURIComponent(query.website as string);
const application = "Soapbox"; //query.application;
const website = query.website ? decodeURIComponent(query.website as string) : null;
const redirect_uri = query.redirect_uri as string;
const client_id = query.client_id;
const scope = decodeURIComponent((query.scope as string) || "");
const code = query.code;
const scope = query.scope ? decodeURIComponent(query.scope as string) : "";
const validUrlParameters =
application && website && redirect_uri && client_id && scope;

43
pages/public.vue Normal file
View file

@ -0,0 +1,43 @@
<template>
<ClientOnly>
<div class="max-w-2xl mx-auto md:py-20 md:px-10">
<SocialElementsNotesNote v-for="note of timeline" :key="note.id" :note="note" />
<span ref="skeleton"></span>
<SocialElementsNotesNote v-for="index of 5" v-if="!hasReachedEnd" :skeleton="true" />
<div v-if="hasReachedEnd"
class="text-center flex flex-row justify-center items-center py-10 text-gray-400 gap-3">
<Icon name="tabler:message-off" class="h-6 w-6" />
<span>No more posts, you've seen them all</span>
</div>
</div>
</ClientOnly>
</template>
<script lang="ts" setup>
const client = await useMegalodon();
const isLoading = ref(true);
const timelineParameters = ref({});
const hasReachedEnd = ref(false);
const { timeline, loadNext, loadPrev } = usePublicTimeline(client, timelineParameters);
const skeleton = ref<HTMLSpanElement | null>(null);
onMounted(() => {
useIntersectionObserver(skeleton, async (entries) => {
if (entries[0].isIntersecting && !hasReachedEnd.value && !isLoading.value) {
isLoading.value = true;
await loadNext();
}
});
})
watch(timeline, (newTimeline, oldTimeline) => {
isLoading.value = false;
// If less than NOTES_PER_PAGE statuses are returned, we have reached the end
if (newTimeline.length - oldTimeline.length < useConfig().NOTES_PER_PAGE) {
hasReachedEnd.value = true;
}
});
</script>

233
pages/register/index.vue
View file

@ -1,100 +1,82 @@
<template>
<div class="flex min-h-screen flex-col justify-center px-6 py-12 lg:px-8 relative">
<div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
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="instanceInfo.registrations" class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
<form ref="form" class="space-y-6" method="POST" action="" @submit.prevent="registerUser">
<div>
<h1 class="font-bold text-2xl text-center tracking-tight">Register for an account</h1>
</div>
<img src="https://camo.githubusercontent.com/353460d1fdb1667ec993159270dcece12c491fb38165460215a519ab93f4e554/68747470733a2f2f63646e2d7765622e63706c757370617463682e636f6d2f6c7973616e642e77656270"
alt="Lysand logo" class="mx-auto h-24 hidden md:block" />
<div v-if="instance && instance.registrations" class="mt-10 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>
<div>
<LoginInput label="Email" id="email" name="email" type="email" autocomplete="email" required />
</div>
<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>
<div v-if="errors['email']" v-for="error of errors['email']"
class="rounded bg-purple-100 ring-1 ring-purple-800 py-2 px-4">
<h3 class="font-bold">An error occured:</h3>
<p>{{ error.description }}</p>
</div>
<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>
<div>
<LoginInput label="Username" id="username" name="username" type="text" autocomplete="username"
required />
</div>
<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>
<div v-if="errors['username']" v-for="error of errors['username']"
class="rounded bg-purple-100 ring-1 ring-purple-800 py-2 px-4">
<h3 class="font-bold">An error occured:</h3>
<p>{{ error.description }}</p>
</div>
<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>
<div>
<LoginInput label="Password" id="password" name="password" type="password" autocomplete="" required
:spellcheck="false" :error="!passwordsMatch ? `Passwords dont match` : ``" :value="password1"
@input="password1 = $event.target.value" />
</div>
<div v-if="errors['password']" v-for="error of errors['password']"
class="rounded bg-purple-100 ring-1 ring-purple-800 py-2 px-4">
<h3 class="font-bold">An error occured:</h3>
<p>{{ error.description }}</p>
</div>
<div>
<LoginInput label="Confirm password" id="password2" name="password2" type="password" autocomplete=""
required :spellcheck="false" :error="!passwordsMatch ? `Passwords dont match` : ``"
:value="password2" @input="password2 = $event.target.value" />
</div>
<div>
<label for="comment" class="block text-sm font-medium leading-6 text-gray-900">Why do you want to
<VeeField name="reason" as="div" v-slot="{ errors, field }" 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 :value="reason" @input="reason = ($event.target as any).value"
name="comment" id="comment"
class="block w-full rounded-md px-2 border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" />
<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>
</div>
<VeeErrorMessage name="reason" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
{{ message }}
</VeeErrorMessage>
</VeeField>
<div v-if="errors['reason']" v-for="error of errors['reason']"
class="rounded bg-purple-100 ring-1 ring-purple-800 py-2 px-4">
<h3 class="font-bold">An error occured:</h3>
<p>{{ error.description }}</p>
</div>
<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="instance.uri">available here</a></span>
<VeeErrorMessage name="tos" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
{{ message }}
</VeeErrorMessage>
</VeeField>
<div class="">
<input type="checkbox" :value="tosAccepted"
@input="tosAccepted = Boolean(($event.target as any).value)"
class="rounded mr-1 align-middle mb-0.5" /> <span class="text-sm">I agree to the
terms and
conditions
of this
server, available <a class="underline font-bold" target="_blank"
:href="instanceInfo.tos_url">here</a></span>
</div>
<div v-if="errors['agreement']" v-for="error of errors['agreement']"
class="rounded bg-purple-100 ring-1 ring-purple-800 py-2 px-4">
<h3 class="font-bold">An error occured:</h3>
<p>{{ error.description }}</p>
</div>
<div>
<button type="submit" :disabled="!passwordsMatch || !tosAccepted"
class="flex w-full justify-center disabled:opacity-50 disabled:hover:shadow-none rounded-md bg-purple-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:shadow-lg duration-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Sign
in</button>
</div>
</form>
<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-900 sm:text-4xl text-center">Registrations are
<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-600 text-center">Ask this instance's admin to enable them in
<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>
@ -103,18 +85,30 @@
<script setup lang="ts">
import LoginInput from "../../components/LoginInput.vue";
import { toTypedSchema } from '@vee-validate/zod';
import type { AxiosError } from "axios";
import { z } from 'zod';
const config = await useConfig();
const schema = toTypedSchema(z.object({
email: z.string().email(),
password: z.string().min(3),
password2: z.string().min(3),
username: z.string().min(3).regex(/^[a-z0-9_]+$/),
reason: z.string().optional(),
tos: z.string(),
}).superRefine((data, ctx) => {
if (data.password !== data.password2) {
ctx.addIssue({
path: [...ctx.path, 'password2'],
code: "custom",
message: 'Passwords do not match',
});
}
return {};
}));
if (!config) {
throw new Error("Config not found");
}
const instanceInfo = (await fetch(new URL("/api/v1/instance", config.http.base_url)).then(
(data) => data.json(),
)).catch((e: Error) => {
console.error(e);
});
const client = await useMegalodon();
const instance = await useInstance(client);
const errors = ref<{
[key: string]: {
@ -123,51 +117,26 @@ const errors = ref<{
}[];
}>({});
const password1 = ref<string>("");
const password2 = ref<string>("");
const tosAccepted = ref<boolean>(false);
const reason = ref<string>("");
const isLoading = ref(false);
const passwordsMatch = computed(() => password1.value === password2.value);
const registerUser = (e: Event) => {
e.preventDefault();
const formData = new FormData();
const target = e.target as unknown as Record<string, HTMLInputElement>;
formData.append("email", target.email.value);
formData.append("password", target.password.value);
formData.append("username", target.username.value);
formData.append("reason", reason.value);
formData.append("locale", "en");
formData.append("agreement", "true");
fetch("/api/v1/accounts", {
method: "POST",
body: formData,
})
const register = (result: {
username: string;
email: string;
password: string;
reason: string;
}) => {
isLoading.value = true;
client.registerAccount(result.username, result.email, result.password, true, "en", result.reason || "Empty reason")
.then(async (res) => {
if (res.status === 422) {
errors.value = (
(await res.json()) as Record<
string,
{
[key: string]: {
error: string;
description: string;
}[];
}
>
).details;
console.log(errors.value);
} else {
// @ts-ignore
window.location.href = "/register/success";
}
navigateTo("/register/success");
})
.catch(async (err) => {
const error = err as AxiosError;
// @ts-ignore
errors.value = error.response?.data || {};
console.error(err);
}).finally(() => {
isLoading.value = false;
});
};
}
</script>

10
pages/register/success.vue
View file

@ -1,13 +1,11 @@
<template>
<div class="flex min-h-screen flex-col justify-center px-6 py-12 lg:px-8 relative">
<div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80" 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>
<h1 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-4xl text-center">Registration was a success!
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl text-center">Registration was a
success!
</h1>
<p class="mt-6 text-lg leading-8 text-gray-600 text-center"> You can now login to your account in any Mastodon
<p class="mt-6 text-lg leading-8 text-gray-300 text-center"> You can now login to your account in any
Mastodon
client </p>
</div>
</div>