mirror of
https://github.com/versia-pub/frontend.git
synced 2025-12-06 08:28:20 +01:00
refactor: 🎨 Move Lysand-FE into its own repository
This commit is contained in:
Jesse Wierzbinski
commit
f6989707f4
21
.dockerignore
Normal file
21
.dockerignore
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
node_modules
|
||||||
|
Dockerfile*
|
||||||
|
docker-compose*
|
||||||
|
.dockerignore
|
||||||
|
.git
|
||||||
|
.gitignore
|
||||||
|
README.md
|
||||||
|
LICENSE
|
||||||
|
.vscode
|
||||||
|
Makefile
|
||||||
|
helm-charts
|
||||||
|
.env
|
||||||
|
.editorconfig
|
||||||
|
.idea
|
||||||
|
coverage*
|
||||||
|
uploads
|
||||||
|
.output
|
||||||
|
.nuxt
|
||||||
|
logs
|
||||||
|
dist
|
||||||
|
pages/dist
|
||||||
11
.github/dependabot.yml
vendored
Normal file
11
.github/dependabot.yml
vendored
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
# To get started with Dependabot version updates, you'll need to specify which
|
||||||
|
# package ecosystems to update and where the package manifests are located.
|
||||||
|
# Please see the documentation for all configuration options:
|
||||||
|
# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
|
||||||
|
|
||||||
|
version: 2
|
||||||
|
updates:
|
||||||
|
- package-ecosystem: "npm" # See documentation for possible values
|
||||||
|
directory: "/" # Location of package manifests
|
||||||
|
schedule:
|
||||||
|
interval: "weekly"
|
||||||
79
.github/workflows/codeql.yml
vendored
Normal file
79
.github/workflows/codeql.yml
vendored
Normal file
|
|
@ -0,0 +1,79 @@
|
||||||
|
# For most projects, this workflow file will not need changing; you simply need
|
||||||
|
# to commit it to your repository.
|
||||||
|
#
|
||||||
|
# You may wish to alter this file to override the set of languages analyzed,
|
||||||
|
# or to provide custom queries or build logic.
|
||||||
|
#
|
||||||
|
# ******** NOTE ********
|
||||||
|
# We have attempted to detect the languages in your repository. Please check
|
||||||
|
# the `language` matrix defined below to confirm you have the correct set of
|
||||||
|
# supported CodeQL languages.
|
||||||
|
#
|
||||||
|
name: "CodeQL"
|
||||||
|
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
branches: ["main"]
|
||||||
|
pull_request:
|
||||||
|
# The branches below must be a subset of the branches above
|
||||||
|
branches: ["main"]
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
analyze:
|
||||||
|
name: Analyze
|
||||||
|
# Runner size impacts CodeQL analysis time. To learn more, please see:
|
||||||
|
# - https://gh.io/recommended-hardware-resources-for-running-codeql
|
||||||
|
# - https://gh.io/supported-runners-and-hardware-resources
|
||||||
|
# - https://gh.io/using-larger-runners
|
||||||
|
# Consider using larger runners for possible analysis time improvements.
|
||||||
|
runs-on: ${{ (matrix.language == 'swift' && 'macos-latest') || 'ubuntu-latest' }}
|
||||||
|
timeout-minutes: ${{ (matrix.language == 'swift' && 120) || 360 }}
|
||||||
|
permissions:
|
||||||
|
actions: read
|
||||||
|
contents: read
|
||||||
|
security-events: write
|
||||||
|
|
||||||
|
strategy:
|
||||||
|
fail-fast: false
|
||||||
|
matrix:
|
||||||
|
language: ["javascript"]
|
||||||
|
# CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby', 'swift' ]
|
||||||
|
# Use only 'java' to analyze code written in Java, Kotlin or both
|
||||||
|
# Use only 'javascript' to analyze code written in JavaScript, TypeScript or both
|
||||||
|
# Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
|
||||||
|
|
||||||
|
steps:
|
||||||
|
- name: Checkout repository
|
||||||
|
uses: actions/checkout@v4
|
||||||
|
|
||||||
|
# Initializes the CodeQL tools for scanning.
|
||||||
|
- name: Initialize CodeQL
|
||||||
|
uses: github/codeql-action/init@v2
|
||||||
|
with:
|
||||||
|
languages: ${{ matrix.language }}
|
||||||
|
# If you wish to specify custom queries, you can do so here or in a config file.
|
||||||
|
# By default, queries listed here will override any specified in a config file.
|
||||||
|
# Prefix the list here with "+" to use these queries and those in the config file.
|
||||||
|
|
||||||
|
# For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
|
||||||
|
# queries: security-extended,security-and-quality
|
||||||
|
|
||||||
|
# Autobuild attempts to build any compiled languages (C/C++, C#, Go, Java, or Swift).
|
||||||
|
# If this step fails, then you should remove it and run the build manually (see below)
|
||||||
|
- name: Autobuild
|
||||||
|
uses: github/codeql-action/autobuild@v2
|
||||||
|
|
||||||
|
# ℹ️ Command-line programs to run using the OS shell.
|
||||||
|
# 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
|
||||||
|
|
||||||
|
# If the Autobuild fails above, remove it and uncomment the following three lines.
|
||||||
|
# modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
|
||||||
|
|
||||||
|
# - run: |
|
||||||
|
# echo "Run, Build Application using script"
|
||||||
|
# ./location_of_script_within_repo/buildscript.sh
|
||||||
|
|
||||||
|
- name: Perform CodeQL Analysis
|
||||||
|
uses: github/codeql-action/analyze@v2
|
||||||
|
with:
|
||||||
|
category: "/language:${{matrix.language}}"
|
||||||
136
.github/workflows/docker-publish.yml
vendored
Normal file
136
.github/workflows/docker-publish.yml
vendored
Normal file
|
|
@ -0,0 +1,136 @@
|
||||||
|
name: Docker
|
||||||
|
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
branches: ["main"]
|
||||||
|
tags: ["v*.*.*"]
|
||||||
|
pull_request:
|
||||||
|
branches: ["*"]
|
||||||
|
workflow_dispatch:
|
||||||
|
inputs:
|
||||||
|
tag:
|
||||||
|
description: "Tag"
|
||||||
|
required: false
|
||||||
|
default: "v0.0.0"
|
||||||
|
|
||||||
|
env:
|
||||||
|
REGISTRY: ghcr.io
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
build:
|
||||||
|
name: Build for ${{ matrix.platform }}
|
||||||
|
runs-on: ${{ matrix.os }}
|
||||||
|
environment:
|
||||||
|
name: Production
|
||||||
|
strategy:
|
||||||
|
fail-fast: false
|
||||||
|
matrix:
|
||||||
|
include:
|
||||||
|
- os: ubuntu-latest
|
||||||
|
platform: linux/arm64
|
||||||
|
- os: ubuntu-latest
|
||||||
|
platform: linux/amd64
|
||||||
|
permissions:
|
||||||
|
contents: read
|
||||||
|
packages: write
|
||||||
|
id-token: write
|
||||||
|
|
||||||
|
steps:
|
||||||
|
- name: Prepare
|
||||||
|
run: |
|
||||||
|
platform=${{ matrix.platform }}
|
||||||
|
echo "PLATFORM_PAIR=${platform//\//-}" >> $GITHUB_ENV
|
||||||
|
echo "IMAGE_NAME=${GITHUB_REPOSITORY@L}" >> $GITHUB_ENV
|
||||||
|
|
||||||
|
- name: Checkout repository
|
||||||
|
uses: actions/checkout@v4
|
||||||
|
|
||||||
|
- name: Set up QEMU
|
||||||
|
uses: docker/setup-qemu-action@v3
|
||||||
|
|
||||||
|
- name: Setup Docker buildx
|
||||||
|
uses: docker/setup-buildx-action@v3
|
||||||
|
|
||||||
|
- name: Log into registry ${{ env.REGISTRY }}
|
||||||
|
if: github.event_name != 'pull_request'
|
||||||
|
uses: docker/login-action@v3
|
||||||
|
with:
|
||||||
|
registry: ${{ env.REGISTRY }}
|
||||||
|
username: ${{ github.actor }}
|
||||||
|
password: ${{ secrets.GITHUB_TOKEN }}
|
||||||
|
|
||||||
|
- name: Extract Docker metadata
|
||||||
|
id: meta
|
||||||
|
uses: docker/metadata-action@v5
|
||||||
|
with:
|
||||||
|
images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
|
||||||
|
|
||||||
|
- name: Build and push Docker image
|
||||||
|
id: build
|
||||||
|
uses: docker/build-push-action@v5
|
||||||
|
with:
|
||||||
|
context: .
|
||||||
|
file: Dockerfile
|
||||||
|
labels: ${{ steps.meta.outputs.labels }}
|
||||||
|
cache-from: type=gha
|
||||||
|
cache-to: type=gha,mode=max
|
||||||
|
platforms: ${{ matrix.platform }}
|
||||||
|
outputs: type=image,name=${{ env.REGISTRY }}/${{ env.IMAGE_NAME }},push-by-digest=true,name-canonical=true,push=true
|
||||||
|
|
||||||
|
- name: Export digest
|
||||||
|
run: |
|
||||||
|
mkdir -p /tmp/digests
|
||||||
|
digest="${{ steps.build.outputs.digest }}"
|
||||||
|
touch "/tmp/digests/${digest#sha256:}"
|
||||||
|
- name: Upload digest
|
||||||
|
uses: actions/upload-artifact@v4
|
||||||
|
with:
|
||||||
|
name: digests-${{ env.PLATFORM_PAIR }}
|
||||||
|
path: /tmp/digests/*
|
||||||
|
if-no-files-found: error
|
||||||
|
retention-days: 1
|
||||||
|
|
||||||
|
merge:
|
||||||
|
name: Merge digests
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
environment:
|
||||||
|
name: Production
|
||||||
|
needs:
|
||||||
|
- build
|
||||||
|
steps:
|
||||||
|
- name: Prepare
|
||||||
|
run: |
|
||||||
|
echo "IMAGE_NAME=${GITHUB_REPOSITORY@L}" >> $GITHUB_ENV
|
||||||
|
|
||||||
|
- name: Download digests
|
||||||
|
uses: actions/download-artifact@v4
|
||||||
|
with:
|
||||||
|
path: /tmp/digests
|
||||||
|
pattern: digests-*
|
||||||
|
merge-multiple: true
|
||||||
|
|
||||||
|
- name: Set up Docker Buildx
|
||||||
|
uses: docker/setup-buildx-action@v3
|
||||||
|
|
||||||
|
- name: Docker meta
|
||||||
|
id: meta
|
||||||
|
uses: docker/metadata-action@v5
|
||||||
|
with:
|
||||||
|
images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
|
||||||
|
|
||||||
|
- name: Login to Docker Hub
|
||||||
|
uses: docker/login-action@v3
|
||||||
|
with:
|
||||||
|
registry: ${{ env.REGISTRY }}
|
||||||
|
username: ${{ github.actor }}
|
||||||
|
password: ${{ secrets.GITHUB_TOKEN }}
|
||||||
|
|
||||||
|
- name: Create manifest list and push
|
||||||
|
working-directory: /tmp/digests
|
||||||
|
run: |
|
||||||
|
docker buildx imagetools create $(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON") \
|
||||||
|
$(printf '${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}@sha256:%s ' *)
|
||||||
|
|
||||||
|
- name: Inspect image
|
||||||
|
run: |
|
||||||
|
docker buildx imagetools inspect ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ steps.meta.outputs.version }}
|
||||||
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal 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
|
||||||
29
Dockerfile
Normal file
29
Dockerfile
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
FROM oven/bun:1.1.3 AS base
|
||||||
|
# Temporarily switch back to the non-alpine version of Bun because of Bun's issues with musl
|
||||||
|
|
||||||
|
# Install dependencies into temp directory
|
||||||
|
# This will cache them and speed up future builds
|
||||||
|
FROM base AS install
|
||||||
|
RUN mkdir -p /temp/dev
|
||||||
|
COPY package.json bun.lockb /temp/dev/
|
||||||
|
RUN cd /temp/dev && bun install --frozen-lockfile
|
||||||
|
|
||||||
|
FROM base AS builder
|
||||||
|
COPY . /app
|
||||||
|
|
||||||
|
COPY --from=install /temp/dev/node_modules /app/node_modules
|
||||||
|
RUN cd /app && bun run build
|
||||||
|
|
||||||
|
FROM base as final
|
||||||
|
|
||||||
|
COPY --from=builder /app/.output/ /app
|
||||||
|
|
||||||
|
LABEL org.opencontainers.image.authors "Gaspard Wierzbinski (https://cpluspatch.com)"
|
||||||
|
LABEL org.opencontainers.image.source "https://github.com/lysand-org/lysand-fe"
|
||||||
|
LABEL org.opencontainers.image.vendor "Lysand Org"
|
||||||
|
LABEL org.opencontainers.image.licenses "AGPL-3.0"
|
||||||
|
LABEL org.opencontainers.image.title "Lysand-FE"
|
||||||
|
LABEL org.opencontainers.image.description "Frontend for the Lysand Project"
|
||||||
|
|
||||||
|
WORKDIR /app/server
|
||||||
|
CMD ["bun", "index.mjs"]
|
||||||
13
app.vue
Normal file
13
app.vue
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<template>
|
||||||
|
<NuxtPage>
|
||||||
|
<slot />
|
||||||
|
</NuxtPage>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
useServerSeoMeta({
|
||||||
|
titleTemplate: (titleChunk) => {
|
||||||
|
return titleChunk ? `${titleChunk} · Lysand` : "Lysand";
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
20
biome.json
Normal file
20
biome.json
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://biomejs.dev/schemas/1.6.4/schema.json",
|
||||||
|
"organizeImports": {
|
||||||
|
"enabled": true,
|
||||||
|
"ignore": ["node_modules/**/*", "dist/**/*", ".output", ".nuxt"]
|
||||||
|
},
|
||||||
|
"linter": {
|
||||||
|
"enabled": true,
|
||||||
|
"rules": {
|
||||||
|
"recommended": true
|
||||||
|
},
|
||||||
|
"ignore": ["node_modules/**/*", "dist/**/*", ".output", ".nuxt"]
|
||||||
|
},
|
||||||
|
"formatter": {
|
||||||
|
"enabled": true,
|
||||||
|
"indentStyle": "space",
|
||||||
|
"indentWidth": 4,
|
||||||
|
"ignore": ["node_modules/**/*", "dist/**/*", ".output", ".nuxt"]
|
||||||
|
}
|
||||||
|
}
|
||||||
30
components/LoginInput.vue
Normal file
30
components/LoginInput.vue
Normal 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>
|
||||||
19
composables/useConfig.ts
Normal file
19
composables/useConfig.ts
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
export const useConfig = async () => {
|
||||||
|
let host = useRequestHeader("X-Forwarded-Host") ?? useRuntimeConfig().public.apiHost;
|
||||||
|
|
||||||
|
if (!host?.includes("http")) {
|
||||||
|
// On server, this will be some kind of localhost
|
||||||
|
host = `http://${host}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!host) {
|
||||||
|
throw createError({
|
||||||
|
statusCode: 500,
|
||||||
|
statusMessage: "No X-Forwarded-Host header found",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return await fetch(new URL("/api/_fe/config", host)).then((res) =>
|
||||||
|
res.json(),
|
||||||
|
);
|
||||||
|
};
|
||||||
12
constants.ts
Normal file
12
constants.ts
Normal 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/",
|
||||||
|
},
|
||||||
|
];
|
||||||
16
emails/welcome.vue
Normal file
16
emails/welcome.vue
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { EButton, ETailwind } from "vue-email";
|
||||||
|
import tailwindConfig from "~/tailwind.config";
|
||||||
|
|
||||||
|
defineProps<{
|
||||||
|
name: string;
|
||||||
|
}>();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<ETailwind :config="tailwindConfig">
|
||||||
|
<EButton href="https://example.com" class="bg-primary px-3 py-2 font-medium leading-4 text-white">
|
||||||
|
Click me
|
||||||
|
</EButton>
|
||||||
|
</ETailwind>
|
||||||
|
</template>
|
||||||
59
nuxt.config.ts
Normal file
59
nuxt.config.ts
Normal file
|
|
@ -0,0 +1,59 @@
|
||||||
|
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||||
|
export default defineNuxtConfig({
|
||||||
|
modules: [
|
||||||
|
"@nuxtjs/seo",
|
||||||
|
"@nuxtjs/tailwindcss",
|
||||||
|
"@vueuse/nuxt",
|
||||||
|
"@vue-email/nuxt",
|
||||||
|
],
|
||||||
|
app: {
|
||||||
|
head: {
|
||||||
|
link: [
|
||||||
|
{
|
||||||
|
rel: "icon",
|
||||||
|
href: "/favicon.png",
|
||||||
|
type: "image/png",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
htmlAttrs: { lang: "en-us" },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
nitro: {
|
||||||
|
preset: "bun",
|
||||||
|
minify: true,
|
||||||
|
prerender: {
|
||||||
|
failOnError: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
devServer: {
|
||||||
|
port: 5173,
|
||||||
|
},
|
||||||
|
schemaOrg: {
|
||||||
|
enabled: false,
|
||||||
|
},
|
||||||
|
ogImage: {
|
||||||
|
enabled: false,
|
||||||
|
},
|
||||||
|
vite: {
|
||||||
|
define: {
|
||||||
|
__VERSION__: JSON.stringify("0.4"),
|
||||||
|
},
|
||||||
|
server: {
|
||||||
|
hmr: {
|
||||||
|
clientPort: 5173,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
runtimeConfig: {
|
||||||
|
public: {
|
||||||
|
language: "en-US",
|
||||||
|
titleSeparator: "·",
|
||||||
|
siteName: "Lysand",
|
||||||
|
trailingSlash: true,
|
||||||
|
apiHost: "localhost:8080",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
site: {
|
||||||
|
url: "https://social.lysand.org",
|
||||||
|
},
|
||||||
|
});
|
||||||
33
package.json
Normal file
33
package.json
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
{
|
||||||
|
"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",
|
||||||
|
"shiki": "^1.2.4"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@biomejs/biome": "^1.6.4",
|
||||||
|
"@nuxtjs/seo": "^2.0.0-rc.10",
|
||||||
|
"@nuxtjs/tailwindcss": "^6.11.4",
|
||||||
|
"@tailwindcss/forms": "^0.5.7",
|
||||||
|
"@vue-email/nuxt": "^0.8.19"
|
||||||
|
},
|
||||||
|
"trustedDependencies": [
|
||||||
|
"@biomejs/biome",
|
||||||
|
"@fortawesome/fontawesome-common-types",
|
||||||
|
"@fortawesome/free-regular-svg-icons",
|
||||||
|
"@fortawesome/free-solid-svg-icons",
|
||||||
|
"json-editor-vue"
|
||||||
|
]
|
||||||
|
}
|
||||||
72
pages/[username]/[uuid].vue
Normal file
72
pages/[username]/[uuid].vue
Normal file
|
|
@ -0,0 +1,72 @@
|
||||||
|
<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 { 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 url = process.client ? config.http.base_url : config.http.url;
|
||||||
|
|
||||||
|
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>
|
||||||
83
pages/[username]/index.vue
Normal file
83
pages/[username]/index.vue
Normal file
|
|
@ -0,0 +1,83 @@
|
||||||
|
<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 { 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 url = process.client ? config.http.base_url : config.http.url;
|
||||||
|
|
||||||
|
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>
|
||||||
72
pages/index.vue
Normal file
72
pages/index.vue
Normal file
|
|
@ -0,0 +1,72 @@
|
||||||
|
<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 useConfig();
|
||||||
|
|
||||||
|
useServerSeoMeta({
|
||||||
|
title: "Welcome to Lysand!",
|
||||||
|
});
|
||||||
|
</script>
|
||||||
114
pages/oauth/authorize.vue
Normal file
114
pages/oauth/authorize.vue
Normal 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
pages/oauth/redirect.vue
Normal file
175
pages/oauth/redirect.vue
Normal 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>
|
||||||
176
pages/register/index.vue
Normal file
176
pages/register/index.vue
Normal file
|
|
@ -0,0 +1,176 @@
|
||||||
|
<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 useConfig();
|
||||||
|
|
||||||
|
if (!config) {
|
||||||
|
throw new Error("Config not found");
|
||||||
|
}
|
||||||
|
|
||||||
|
const url = process.client ? config.http.base_url : config.http.url;
|
||||||
|
|
||||||
|
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
pages/register/success.vue
Normal file
14
pages/register/success.vue
Normal 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
public/favicon.png
Normal file
BIN
public/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
9
tailwind.config.ts
Normal file
9
tailwind.config.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
import forms from "@tailwindcss/forms";
|
||||||
|
import type { Config } from "tailwindcss";
|
||||||
|
|
||||||
|
// Default are on https://tailwindcss.nuxtjs.org/tailwind/config#default-configuration
|
||||||
|
export default (<Partial<Config>>{
|
||||||
|
theme: {},
|
||||||
|
plugins: [forms],
|
||||||
|
content: [],
|
||||||
|
});
|
||||||
8
tsconfig.json
Normal file
8
tsconfig.json
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
{
|
||||||
|
// https://nuxt.com/docs/guide/concepts/typescript
|
||||||
|
"extends": "./.nuxt/tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "esnext",
|
||||||
|
"module": "esnext"
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue