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

Remove old pages/ directory

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-04-09 01:55:03 -10:00
parent 577b866bb3
commit 8ec34f7138
No known key found for this signature in database
19 changed files with 4 additions and 802 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
pages/beemovie.txt → beemovie.txt
View file

2
build.ts
View file

@ -49,6 +49,6 @@ await $`cp -r ${process.cwd()}/node_modules/sharp/build/ .`;
await $`cp -r packages/frontend/.output dist/frontend`;
// Copy the Bee Movie script from pages
await $`cp ${process.cwd()}/pages/beemovie.txt dist/beemovie.txt`;
await $`cp beemovie.txt dist/beemovie.txt`;
console.log("Built!");

8
packages/frontend/pages/register/index.vue
View file

@ -107,11 +107,9 @@ 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 & {
const instanceInfo = (await fetch(
new URL("/api/v1/instance", config.http.url),
).then((data) => data.json())) as APIInstance & {
tos_url: string;
};

10
pages/App.vue
View file

@ -1,10 +0,0 @@
<script setup>
// Import Tailwind style reset
import "@unocss/reset/tailwind-compat.css";
</script>
<template>
<suspense>
<router-view></router-view>
</suspense>
</template>

30
pages/components/LoginInput.vue
View file

@ -1,30 +0,0 @@
<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>

BIN
pages/favicon.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 13 KiB

16
pages/index.html
View file

@ -1,16 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/png" href="/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lysand</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="./main.ts"></script>
</body>
</html>

16
pages/main.ts
View file

@ -1,16 +0,0 @@
import "virtual:uno.css";
import { createApp } from "vue";
import { createRouter, createWebHistory } from "vue-router";
import App from "./App.vue";
import routes from "./routes";
import "./style.css";
const router = createRouter({
history: createWebHistory(),
routes: routes,
});
const app = createApp(App);
app.use(router);
app.mount("#app");

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

@ -1,65 +0,0 @@
<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 location = window.location;
const route = useRoute();
const data = await fetch(
new URL(`/api/v1/statuses/${route.params.uuid}`, location.origin),
{
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>
.code 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;
--at-apply: "ring-1 ring-white/10 mt-4 bg-white/5 px-4 py-3 rounded";
}
.code pre code {
--at-apply: "block p-0";
}
</style>

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

@ -1,82 +0,0 @@
<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 location = window.location;
const route = useRoute();
const username = (route.params.username as string).replace("@", "");
const id = await fetch(
new URL(`/api/v1/accounts/search?q=${username}`, location.origin),
{
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}`, location.origin),
{
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>
.code 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;
--at-apply: "ring-1 ring-white/10 mt-4 bg-white/5 px-4 py-3 rounded";
}
.code pre code {
--at-apply: "block p-0";
}
</style>

75
pages/pages/index.vue
View file

@ -1,75 +0,0 @@
<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">{{ location.host }}</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>
<a :href="client.link" class="underline text-purple-700">{{ client.link }}</a>
</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>
const location = window.location;
const version = __VERSION__;
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/",
},
];
</script>

126
pages/pages/oauth/authorize.vue
View file

@ -1,126 +0,0 @@
<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>
<a :href="client.link" class="underline text-purple-700">{{ client.link }}</a>
</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";
const query = useRoute().query;
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/",
},
];
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>

144
pages/pages/oauth/redirect.vue
View file

@ -1,144 +0,0 @@
<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 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>
</template>
<script setup lang="ts">
import { useRoute } from "vue-router";
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 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>

165
pages/pages/register/index.vue
View file

@ -1,165 +0,0 @@
<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 { computed, ref, watch } from "vue";
import type { APIInstance } from "~types/entities/instance";
import LoginInput from "../../components/LoginInput.vue";
const instanceInfo = (await fetch("/api/v1/instance").then((res) =>
res.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");
// @ts-ignore
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
pages/pages/register/success.vue
View file

@ -1,14 +0,0 @@
<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>

18
pages/routes.ts
View file

@ -1,18 +0,0 @@
import type { RouteRecordRaw } from "vue-router";
import indexVue from "./pages/index.vue";
import authorizeVue from "./pages/oauth/authorize.vue";
import redirectVue from "./pages/oauth/redirect.vue";
import registerIndexVue from "./pages/register/index.vue";
import successVue from "./pages/register/success.vue";
import statusVue from "./pages/[username]/[uuid].vue";
import userVue from "./pages/[username]/index.vue";
export default [
{ path: "/", component: indexVue },
{ path: "/oauth/authorize", component: authorizeVue },
{ path: "/oauth/redirect", component: redirectVue },
{ path: "/register", component: registerIndexVue },
{ path: "/register/success", component: successVue },
{ path: "/:username/:uuid", component: statusVue },
{ path: "/:username", component: userVue },
] as RouteRecordRaw[];

0
pages/style.css
View file

1
pages/vite-env.d.ts vendored
View file

@ -1 +0,0 @@
/// <reference types="vite/client" />

34
pages/vite.config.ts
View file

@ -1,34 +0,0 @@
import vue from "@vitejs/plugin-vue";
import UnoCSS from "unocss/vite";
import { defineConfig } from "vite";
import pkg from "../package.json";
export default defineConfig({
base: "/",
build: {
outDir: "./dist",
},
// main.ts is in pages/ directory
resolve: {
alias: {
vue: "vue/dist/vue.esm-bundler",
},
},
server: {
hmr: {
clientPort: 5173,
},
},
define: {
__VERSION__: JSON.stringify(pkg.version),
},
ssr: {
noExternal: ["@prisma/client"],
},
plugins: [
UnoCSS({
mode: "global",
}),
vue(),
],
});