versia-pub/server
2
0
Fork 0
mirror of https://github.com/versia-pub/server.git synced 2025-12-06 16:38:19 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Switch frontend server to Nuxt

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-04-09 01:14:53 -10:00
parent 9476770cdb
commit dc17cffd75
No known key found for this signature in database
24 changed files with 921 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
build.ts
View file

@ -3,16 +3,13 @@ import { $ } from "bun";
import { exists, mkdir, rm } from "node:fs/promises";
import { rawRoutes } from "~routes";
if (!(await exists("./pages/dist"))) {
console.log("Please build the Vite server first, or use `bun prod-build`");
process.exit(1);
}
console.log("Building frontend...");
await $`bun fe:build`;
console.log(`Building at ${process.cwd()}`);
await rm("./dist", { recursive: true });
await mkdir(`${process.cwd()}/dist`);
await $`rm -rf dist && mkdir dist`;
await Bun.build({
entrypoints: [
@ -26,7 +23,7 @@ await Bun.build({
target: "bun",
splitting: true,
minify: false,
external: ["bullmq", "@prisma/client"],
external: ["bullmq", "@prisma/client", "frontend"],
}).then((output) => {
if (!output.success) {
console.log(output.logs);
@ -48,13 +45,10 @@ await $`cp -r ${process.cwd()}/node_modules/prisma dist/node_modules/`;
// Copy Sharp to dist
await $`cp -r ${process.cwd()}/node_modules/sharp/build/ .`;
// Create pages directory
await $`mkdir -p dist/pages/dist`;
// Copy Vite build output to dist
await $`cp -r ${process.cwd()}/pages/dist dist/pages/`;
await $`cp -r packages/frontend/.output dist/frontend`;
// Copy the Bee Movie script from pages
await $`cp ${process.cwd()}/pages/beemovie.txt dist/pages/beemovie.txt`;
await $`cp ${process.cwd()}/pages/beemovie.txt dist/beemovie.txt`;
console.log("Built!");

BIN
bun.lockb
View file

Binary file not shown.

13
package.json
View file

@ -32,11 +32,14 @@
"dev": "bun run --watch index.ts",
"vite:dev": "bunx --bun vite pages",
"vite:build": "bunx --bun vite build pages",
"start": "NODE_ENV=production bun run dist/index.js --prod",
"fe:dev": "bun --bun nuxt dev packages/frontend",
"fe:build": "bun --bun nuxt build packages/frontend",
"fe:analyze": "bun --bun nuxt analyze packages/frontend",
"start": "NITRO_PORT=5173 bun run dist/frontend/server/index.mjs & NODE_ENV=production bun run dist/index.js --prod",
"migrate-dev": "bun prisma migrate dev",
"migrate": "bun prisma migrate deploy",
"lint": "bunx --bun eslint --config .eslintrc.cjs --ext .ts .",
"prod-build": "bunx --bun vite build pages && bun run build.ts",
"prod-build": "bun run build.ts",
"prisma": "DATABASE_URL=$(bun run prisma.ts) bunx prisma",
"generate": "bun prisma generate",
"benchmark:timeline": "bun run benchmarks/timelines.ts",
@ -48,13 +51,17 @@
"@prisma/client",
"@prisma/engines",
"esbuild",
"msgpackr-extract",
"nuxt-app",
"prisma",
"sharp",
"msgpackr-extract"
"vue-demi"
],
"devDependencies": {
"@biomejs/biome": "1.6.4",
"@julr/unocss-preset-forms": "^0.1.0",
"@nuxtjs/seo": "^2.0.0-rc.10",
"@nuxtjs/tailwindcss": "^6.11.4",
"@types/cli-table": "^0.3.4",
"@types/html-to-text": "^9.0.4",
"@types/ioredis": "^5.0.0",

5
packages/config-manager/config.type.ts
View file

@ -1,4 +1,7 @@
import { MediaBackendType } from "~packages/media-manager";
export enum MediaBackendType {
LOCAL = "local",
S3 = "s3",
}
export interface Config {
database: {

24
packages/frontend/.gitignore vendored Normal file
View file

@ -0,0 +1,24 @@
# Nuxt dev/build outputs
.output
.data
.nuxt
.nitro
.cache
dist
# Node dependencies
node_modules
# Logs
logs
*.log
# Misc
.DS_Store
.fleet
.idea
# Local env files
.env
.env.*
!.env.example

1
packages/frontend/README.md Normal file
View file

@ -0,0 +1 @@
# FE

13
packages/frontend/app.vue Normal file
View file

@ -0,0 +1,13 @@
<template>
<NuxtPage>
<slot />
</NuxtPage>
</template>
<script setup lang="ts">
useServerSeoMeta({
titleTemplate: (titleChunk) => {
return titleChunk ? `${titleChunk} · Lysand` : "Lysand";
},
});
</script>

30
packages/frontend/components/LoginInput.vue Normal file
View file

@ -0,0 +1,30 @@
<template>
<div class="flex items-center justify-between">
<label for="password" class="block text-sm font-medium leading-6 text-gray-900">{{ label }}</label>
</div>
<div class="mt-2">
<input v-bind="$attrs" @input="checkValid" :class="['block w-full rounded-md 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',
(isInvalid || error) && 'invalid:!ring-red-600 invalid:ring-2']">
<span v-if="isInvalid || error" class="mt-1 text-xs text-red-600">{{ error ? error : `${label} is invalid` }}</span>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const props = defineProps<{
label: string;
error?: string;
}>();
const isInvalid = ref(false);
const checkValid = (e: Event) => {
const target = e.target as HTMLInputElement;
if (target.checkValidity()) {
isInvalid.value = false;
} else {
isInvalid.value = true;
}
};
</script>

12
packages/frontend/constants.ts Normal file
View file

@ -0,0 +1,12 @@
export const recommendedClients = [
{
name: "Soapbox",
icon: "https://soapbox.pub/assets/logo.svg",
link: "https://fe.soapbox.pub/",
},
{
name: "Megalodon",
icon: "https://sk22.github.io/megalodon/mastodon/src/main/res/mipmap-xhdpi/ic_launcher_round.png",
link: "https://sk22.github.io/megalodon/",
},
];

62
packages/frontend/nuxt.config.ts Normal file
View file

@ -0,0 +1,62 @@
// import { loadConfig } from "c12";
import pkg from "../../package.json";
// import { defaultConfig } from "config-manager/config.type";
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
modules: ["@nuxtjs/seo", "@nuxtjs/tailwindcss", "@vueuse/nuxt"],
app: {
head: {
link: [
{
rel: "icon",
href: "/favicon.png",
type: "image/png",
},
],
htmlAttrs: { lang: "en-us" },
},
},
nitro: {
compressPublicAssets: {
gzip: false,
brotli: false,
},
preset: "bun",
minify: true,
prerender: {
failOnError: true,
},
},
devServer: {
port: 5173,
},
schemaOrg: {
enabled: false,
},
vite: {
define: {
__VERSION__: JSON.stringify(pkg.version),
},
server: {
hmr: {
clientPort: 5173,
},
},
},
runtimeConfig: {
public: {
language: "en-US",
titleSeparator: "·",
siteName: "Lysand",
trailingSlash: true,
// @ts-ignore
url2: async () => await Promise.resolve("cheese"),
//url: `${config?.http.bind}:${config?.http.bind_port}`,
},
},
site: {
url: "https://social.lysand.org",
},
});

21
packages/frontend/package.json Normal file
View file

@ -0,0 +1,21 @@
{
"name": "nuxt-app",
"private": true,
"type": "module",
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"dependencies": {
"c12": "^1.10.0",
"nuxt": "^3.11.2",
"vue": "^3.4.21",
"vue-router": "^4.3.0"
},
"devDependencies": {
"@tailwindcss/forms": "^0.5.7"
}
}

71
packages/frontend/pages/[username]/[uuid].vue Normal file
View file

@ -0,0 +1,71 @@
<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 class="code" v-html="code">
</div>
</div>
</template>
<script setup lang="ts">
import { useRoute } from "vue-router";
import { getHighlighterCore } from "shiki/core";
import getWasm from "shiki/wasm";
const config = (await useFetch("/api/config")).data.value;
if (!config) {
throw new Error("Config not found");
}
const url = `${config.http.bind}:${config.http.bind_port}`;
const route = useRoute();
const data = await fetch(
new URL(`/api/v1/statuses/${route.params.uuid}`, 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>

82
packages/frontend/pages/[username]/index.vue Normal file
View file

@ -0,0 +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 id="code" v-html="code">
</div>
</div>
</template>
<script setup lang="ts">
import { useRoute } from "vue-router";
import { getHighlighterCore } from "shiki/core";
import getWasm from "shiki/wasm";
const config = (await useFetch("/api/config")).data.value;
if (!config) {
throw new Error("Config not found");
}
const url = `${config.http.bind}:${config.http.bind_port}`;
const route = useRoute();
const username = (route.params.username as string).replace("@", "");
const id = await fetch(new URL(`/api/v1/accounts/search?q=${username}`, 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}`, 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>

69
packages/frontend/pages/index.vue Normal file
View file

@ -0,0 +1,69 @@
<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>
<p class="mt-6 text-lg leading-8 text-gray-600">Here are some recommended clients:</p>
<ul class="w-full flex flex-col gap-3 mt-4">
<li v-for="client of recommendedClients" :key="client.name" class="w-full">
<a :href="client.link" class="rounded-sm ring-2 ring-black/10 px-4 py-2 w-full flex flex-row gap-3 items-center">
<img :src="client.icon" :alt="client.name" class="h-10 w-10" />
<div class="flex flex-col justify-between items-start">
<h2 class="font-bold">{{ client.name }}</h2>
<span class="underline text-purple-700">{{ client.link }}</span>
</div>
</a>
</li>
</ul>
<p class="mt-6 text-lg leading-8 text-gray-600">
Many other clients exist, but <strong class="font-bold">they have not been tested for compatibility</strong>. Bug reports are nevertheless welcome.
</p>
<p class="mt-6 text-lg leading-8 text-gray-600">
Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose" class="underline text-purple-700">the issue tracker</a>.
</p>
</div>
</div>
<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>
</div>
</div>
</template>
<script setup lang="ts">
import { recommendedClients } from "../constants";
// @ts-ignore
const version = __VERSION__;
const config = (await useFetch("/api/config")).data.value;
useServerSeoMeta({
title: "Welcome to Lysand!",
});
</script>

114
packages/frontend/pages/oauth/authorize.vue Normal file
View file

@ -0,0 +1,114 @@
<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 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>
<div>
<LoginInput label="Email" id="email" name="email" type="email" autocomplete="email" required />
</div>
<div>
<LoginInput label="Password" id="password" name="password" type="password"
autocomplete="current-password" required />
</div>
<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>
<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>
<p class="mt-6 text-lg leading-8 text-gray-600">
Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose" class="underline text-purple-700">the issue tracker</a>.
</p>
</div>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import LoginInput from "../../components/LoginInput.vue";
import { recommendedClients } from "../../constants";
const query = useRoute().query;
const redirect_uri = query.redirect_uri;
const response_type = query.response_type;
const client_id = query.client_id;
const scope = query.scope;
const error = decodeURIComponent(query.error 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();
});
</script>

175
packages/frontend/pages/oauth/redirect.vue Normal file
View file

@ -0,0 +1,175 @@
<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/redirect?redirect_uri=${encodeURIComponent(redirect_uri)}&client_id=${client_id}&code=${code}`">
<div class="flex flex-col items-center gap-y-5">
<h1 class="font-bold text-2xl text-center tracking-tight">Allow this application to access your
account?</h1>
<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>
</div>
<h2 class="text-gray-900 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"
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">
<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
account.</p>
<p class="text-sm text-gray-700">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>
</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>
<p class="mt-6 text-lg leading-8 text-gray-600">
Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose" class="underline text-purple-700">the issue tracker</a>.
</p>
</div>
</div>
</template>
<script setup lang="ts">
import { useRoute } from "vue-router";
import { recommendedClients } from "../../constants";
const query = useRoute().query;
const application = query.application;
const website = decodeURIComponent(query.website as string);
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 validUrlParameters =
application && website && redirect_uri && client_id && scope && code;
const oauthScopeText: Record<string, string> = {
"rw:accounts": "$VERB your account information",
"rw:blocks": "$VERB your block list",
"rw:bookmarks": "$VERB your bookmarks",
"rw:favourites": "$VERB your favourites",
"rw:filters": "$VERB your filters",
"rw:follows": "$VERB your follows",
"rw:lists": "$VERB your lists",
"rw:mutes": "$VERB your mutes",
"rw:notifications": "$VERB your notifications",
"r:search": "Perform searches",
"rw:statuses": "$VERB your statuses",
"w:conversations": "Edit your conversations",
"w:media": "Upload media",
"w:reports": "Report users",
};
const scopes = scope.split(" ");
// If only read scope, then we can just say "read your account information"
// If only write, then we can just say "write to your account information"
// If both, then we can say "read and write to your account information"
// Return an array of strings to display
// "read write:accounts" returns all the fields with $VERB as read, plus the accounts field with $VERB as write
const getScopeText = (fullScopes: string[]) => {
const scopeTexts = [];
const readScopes = fullScopes.filter((scope) => scope.includes("read"));
const writeScopes = fullScopes.filter((scope) => scope.includes("write"));
for (const possibleScope of Object.keys(oauthScopeText)) {
const [scopeAction, scopeName] = possibleScope.split(":");
if (
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"))
scopeTexts.push([
"Read and write",
oauthScopeText[possibleScope].replace("$VERB", ""),
]);
else scopeTexts.push(["", oauthScopeText[possibleScope]]);
continue;
}
if (
scopeAction.includes("r") &&
(readScopes.includes(`read:${scopeName}`) ||
readScopes.find((scope) => scope === "read"))
) {
if (oauthScopeText[possibleScope].includes("$VERB"))
scopeTexts.push([
"Read",
oauthScopeText[possibleScope].replace("$VERB", ""),
]);
else scopeTexts.push(["", oauthScopeText[possibleScope]]);
}
if (
scopeAction.includes("w") &&
(writeScopes.includes(`write:${scopeName}`) ||
writeScopes.find((scope) => scope === "write"))
) {
if (oauthScopeText[possibleScope].includes("$VERB"))
scopeTexts.push([
"Write",
oauthScopeText[possibleScope].replace("$VERB", ""),
]);
else scopeTexts.push(["", oauthScopeText[possibleScope]]);
}
}
return scopeTexts;
};
</script>

172
packages/frontend/pages/register/index.vue Normal file
View file

@ -0,0 +1,172 @@
<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>
<div>
<LoginInput label="Email" id="email" name="email" type="email" autocomplete="email" required />
</div>
<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>
<div>
<LoginInput label="Username" id="username" name="username" type="text" autocomplete="username"
required />
</div>
<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>
<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
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" />
</div>
</div>
<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>
<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>
</div>
<div v-else>
<h1 class="text-2xl font-bold tracking-tight text-gray-900 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 config!
</p>
</div>
</div>
</template>
<script setup lang="ts">
import type { APIInstance } from "../../../../types/entities/instance";
import LoginInput from "../../components/LoginInput.vue";
const config = (await useFetch("/api/config")).data.value;
if (!config) {
throw new Error("Config not found");
}
const url = `${config.http.bind}:${config.http.bind_port}`;
const instanceInfo = (await fetch(new URL("/api/v1/instance", url)).then(
(data) => data.json(),
)) as APIInstance & {
tos_url: string;
};
const errors = ref<{
[key: string]: {
error: string;
description: string;
}[];
}>({});
const password1 = ref<string>("");
const password2 = ref<string>("");
const tosAccepted = ref<boolean>(false);
const reason = ref<string>("");
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,
})
.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";
}
})
.catch(async (err) => {
console.error(err);
});
};
</script>

14
packages/frontend/pages/register/success.vue Normal file
View file

@ -0,0 +1,14 @@
<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>
<p class="mt-6 text-lg leading-8 text-gray-600 text-center"> You can now login to your account in any Mastodon
client </p>
</div>
</div>
</template>

BIN
packages/frontend/public/favicon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 13 KiB

18
packages/frontend/server/api/config.ts Normal file
View file

@ -0,0 +1,18 @@
import { loadConfig } from "c12";
import { type Config, defaultConfig } from "config-manager/config.type";
const promise = loadConfig<Config>({
configFile: "./config/config.toml",
defaultConfig: defaultConfig,
});
export default defineEventHandler(async () => {
const { config } = await promise;
return {
http: {
bind: config?.http.bind,
bind_port: config?.http.bind_port,
base_url: config?.http.base_url,
},
};
});

3
packages/frontend/server/tsconfig.json Normal file
View file

@ -0,0 +1,3 @@
{
"extends": "../.nuxt/tsconfig.server.json"
}

9
packages/frontend/tailwind.config.ts Normal file
View file

@ -0,0 +1,9 @@
import type { Config } from "tailwindcss";
import forms from "@tailwindcss/forms";
// Default are on https://tailwindcss.nuxtjs.org/tailwind/config#default-configuration
export default (<Partial<Config>>{
theme: {},
plugins: [forms],
content: [],
});

7
packages/frontend/tsconfig.json Normal file
View file

@ -0,0 +1,7 @@
{
// https://nuxt.com/docs/guide/concepts/typescript
"extends": "./.nuxt/tsconfig.json",
"compilerOptions": {
"target": "ESNext"
}
}

8
server.ts
View file

@ -50,8 +50,7 @@ export const createServer = (
try {
if (matches(ip, request_ip)) {
const file = Bun.file(
config.http.bait.send_file ||
"./pages/beemovie.txt",
config.http.bait.send_file || "./beemovie.txt",
);
if (await file.exists()) {
@ -75,8 +74,7 @@ export const createServer = (
for (const agent of config.http.bait.bait_user_agents) {
if (new RegExp(agent).test(ua)) {
const file = Bun.file(
config.http.bait.send_file ||
"./pages/beemovie.txt",
config.http.bait.send_file || "./beemovie.txt",
);
if (await file.exists()) {
@ -176,7 +174,7 @@ export const createServer = (
}
// Proxy response from Vite at localhost:5173 if in development mode
if (isProd) {
if (false) {
let file = Bun.file("./pages/dist/index.html");
if (new URL(req.url).pathname.startsWith("/assets")) {
file = Bun.file(`./pages/dist${new URL(req.url).pathname}`);