Add Login Form Page

.github/workflows/main.yaml

@@ -6,6 +6,9 @@ on:
     branches: ["**"]
     tags: ["*.*.*"]
 
+env:
+  AUBE_ALLOWED_UNPOPULAR_PACKAGES: pglite-cli
+
 jobs:
   check:
     runs-on: ubuntu-latest

.gitignore

@@ -1,5 +1,11 @@
 .DS_Store
+*.graphql
+*.graphql.ts
+__generated__/
 
 .pgdata/
+
 node_modules/
 packages/*/dist/
+
+index.db

.oxfmtrc.json

@@ -8,6 +8,7 @@
     "**/dist/*.{cjs,d.cts,d.mts,d.ts,js,mjs}",
     ".agents/skills/",
     ".claude/skills/",
-    "plans/"
+    "plans/",
+    "**/__generated__/**"
   ]
 }

.oxlintrc.json

@@ -24,8 +24,12 @@
       { "ignoreConsecutiveComments": true }
     ],
     "eslint/curly": ["error", "multi-line"],
+    "node/no-top-level-await": "off",
+    "oxc/no-optional-chaining": "off",
+    "oxc/no-async-await": "off",
     "eslint/eqeqeq": ["off", "smart"],
     "eslint/func-style": ["off"],
+    "eslint/max-lines-per-function": "off",
     "eslint/id-length": ["warn", { "exceptionPatterns": ["^_", "^[Tertv]$"] }],
     "eslint/init-declarations": "off",
     "eslint/max-params": ["warn", { "max": 4 }],

mise.toml

@@ -2,12 +2,12 @@ min_version = "2026.6.10"
 
 [tools]
 "aqua:dahlia/hongdown" = "0.4.3"
-"github:nushell/nushell" = "latest"
+"github:nushell/nushell" = "0.114.1"
 node = "26"
 "npm:@typescript/native-preview" = "7.0.0-dev.20260620.1"
-"npm:oxlint" = "latest"
-"npm:oxlint-tsgolint" = "latest"
-"npm:pglite-cli" = "latest"
+"npm:oxlint" = "1.75.0"
+"npm:oxlint-tsgolint" = "7.0.2001"
+"npm:pglite-cli" = "0.0.1"
 oxfmt = "0.55.0"
 pnpm = "11"
 
@@ -17,10 +17,26 @@ auto = true
 [hooks]
 postinstall = ["mise deps", "mise generate git-pre-commit --task check --write"]
 
+[tasks.build]
+description = "Build the project"
+depends = ["build:web"]
+silent = "stdout"
+
+[tasks."build:server"]
+description = "Build the project except web"
+run = "pnpm --parallel -F @drfed/graphql -F @drfed/models -F @drfed/drfed build"
+silent = "stdout"
+
 [tasks."build:web"]
 description = "Build SolidStart frontend server"
+depends = [
+  { task = "generate:graphql-schema", args = [
+    "--output-file",
+    "packages/web/schema.graphql",
+  ] },
+]
 dir = "./packages/web"
-run = "pnpm run build"
+run = "pnpm exec relay-compiler --noWatchman && pnpm run build"
 
 [tasks.check]
 description = "Check all"
@@ -77,11 +93,6 @@ run = """
 node scripts/add-license/main.mts
 """
 
-[tasks.build]
-description = "Build the project"
-run = "pnpm run --parallel --recursive build"
-silent = "stdout"
-
 [tasks.test]
 description = "Run tests"
 depends = ["build"]
@@ -130,7 +141,7 @@ description = "Generate GraphQL schema"
 usage = """
 flag "-o --output-file <file>" help="The output file for the generated GraphQL schema.  - for stdout.  Defaults to -"
 """
-depends = ["build"]
+depends = ["build:server"]
 run = """
 #!/usr/bin/env nu
 let output_file = (if "usage_output_file" in $env { $env.usage_output_file } else { "-" })
@@ -154,7 +165,11 @@ run = "node scripts/dev.mts"
 raw_args = true
 description = "Run SolidStart frontend server"
 dir = "./packages/web"
-run = "pnpm run dev"
+run = """
+#!/usr/bin/env nu
+mise run generate:graphql-schema --output-file ./packages/web/schema.graphql
+pnpm run dev
+"""
 
 [tasks."drfed-server"]
 description = "Invoke drfed-server command"

packages/graphql/src/index.ts

@@ -62,6 +62,10 @@ export function createYogaServer(
 ): YogaServerInstance<ServerContext, UserContext> {
   const options = fillOptions(_options);
   return createYoga({
+    cors: {
+      origin: [...options.origins],
+      credentials: true,
+    },
     async context(ctx) {
       const anonymous = { db, request: ctx.request, ...options };
       const accessToken = getAccessToken(ctx.request.headers);
@@ -92,7 +96,14 @@ function mockTransport() {
 const fillOptions = (opt: YogaServerOptions): Required<YogaServerOptions> => ({
   mailer: opt?.mailer ?? mockTransport(),
   emailFrom: opt?.emailFrom ?? "noreply@drfed.org",
-  origins: opt?.origins ?? new Set(["https://drfed.org"]),
+  // FIXME: Properly parametrize the following allowlist:
+  origins:
+    opt?.origins ??
+    new Set([
+      "https://drfed.org",
+      "http://localhost:5173",
+      "http://0.0.0.0:5173",
+    ]),
 });
 
 const getAccessToken = (headers: Headers) =>

packages/web/.env.example

@@ -0,0 +1 @@
+VITE_DRFED_URL=http://0.0.0.0:8888/graphql

packages/web/.oxlintrc.json

@@ -1,5 +1,6 @@
 {
   "extends": ["../../.oxlintrc.json"],
+  "ignorePatterns": ["**/__generated__/**"],
   "jsPlugins": ["eslint-plugin-solid"],
   "env": {
     "browser": true,

packages/web/env.d.ts

@@ -0,0 +1,7 @@
+interface ImportMetaEnv {
+  readonly VITE_DRFED_URL: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

packages/web/package.json

@@ -50,10 +50,16 @@
     "@solidjs/router": "^0.15.0",
     "@solidjs/start": "2.0.0-alpha.2",
     "@solidjs/vite-plugin-nitro-2": "^0.1.0",
+    "relay-runtime": "^21.0.1",
     "solid-js": "^1.9.5",
+    "solid-relay": "1.0.0-beta.27",
     "vite": "^7.0.0"
   },
   "devDependencies": {
-    "eslint-plugin-solid": "^0.14.5"
+    "@types/relay-runtime": "^20.1.1",
+    "eslint-plugin-solid": "^0.14.5",
+    "relay-compiler": "^21.0.1",
+    "vite-plugin-cjs-interop": "^4.0.3",
+    "vite-plugin-relay-lite": "^0.12.0"
   }
 }

packages/web/relay.config.json

@@ -0,0 +1,6 @@
+{
+  "src": "./src",
+  "schema": "./schema.graphql",
+  "language": "typescript",
+  "eagerEsModules": true
+}

packages/web/src/RelayEnviroment.ts

@@ -0,0 +1,57 @@
+// DrFed: A web-based platform for developing and debugging ActivityPub apps
+// Copyright (C) 2026 DrFed team
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+import {
+  Environment,
+  type FetchFunction,
+  Network,
+  RecordSource,
+  Store,
+} from "relay-runtime";
+import { getRequestEvent } from "solid-js/web";
+
+import { readSessionCookie } from "./routes/session.ts";
+
+// oxlint-disable no-async-await
+const fetchFn: FetchFunction = async (params, variables) => {
+  const event = getRequestEvent();
+  const accessToken = readSessionCookie(event?.request);
+  const headers: Record<string, string> = {
+    "Content-Type": "application/json",
+  };
+  if (accessToken !== undefined) {
+    headers.Authorization = `Bearer ${accessToken}`;
+  }
+  const response = await fetch(import.meta.env.VITE_DRFED_URL, {
+    method: "POST",
+    headers,
+    body: JSON.stringify({
+      query: params.text,
+      variables,
+    }),
+    credentials: "include"
+  });
+
+  // oxlint-disable return-await no-unsafe-return
+  return await response.json();
+};
+
+export function createRelayEnvironment() {
+  return new Environment({
+    network: Network.create(fetchFn),
+    store: new Store(new RecordSource()),
+  });
+}