Add pending-user lock mode and access request note in profile flow

Author: wilhel1812

db/schema.sql

@@ -5,6 +5,7 @@ CREATE TABLE IF NOT EXISTS users (
   username TEXT,
   email TEXT,
   bio TEXT,
+  access_request_note TEXT,
   avatar_url TEXT,
   is_admin INTEGER NOT NULL DEFAULT 0,
   is_approved INTEGER NOT NULL DEFAULT 0,

functions/_lib/db.ts

@@ -50,6 +50,12 @@ const sanitizeBio = (value: unknown): string | null => {
   return bio.length <= 300 ? bio : bio.slice(0, 300);
 };
 
+const sanitizeAccessRequestNote = (value: unknown): string | null => {
+  if (typeof value !== "string") return null;
+  const note = value.trim();
+  return note.length <= 1200 ? note : note.slice(0, 1200);
+};
+
 const sanitizeAvatar = (value: unknown): string | null => {
   if (typeof value !== "string") return null;
   const raw = value.trim();
@@ -111,6 +117,7 @@ const ensureSchema = async (env: Env): Promise<void> => {
             username TEXT,
             email TEXT,
             bio TEXT,
+            access_request_note TEXT,
             avatar_url TEXT,
             is_admin INTEGER NOT NULL DEFAULT 0,
             is_approved INTEGER NOT NULL DEFAULT 0,
@@ -198,6 +205,7 @@ const ensureSchema = async (env: Env): Promise<void> => {
         !userNames.has("username") ? "ALTER TABLE users ADD COLUMN username TEXT" : "",
         !userNames.has("email") ? "ALTER TABLE users ADD COLUMN email TEXT" : "",
         !userNames.has("bio") ? "ALTER TABLE users ADD COLUMN bio TEXT" : "",
+        !userNames.has("access_request_note") ? "ALTER TABLE users ADD COLUMN access_request_note TEXT" : "",
         !userNames.has("avatar_url") ? "ALTER TABLE users ADD COLUMN avatar_url TEXT" : "",
         !userNames.has("is_admin") ? "ALTER TABLE users ADD COLUMN is_admin INTEGER NOT NULL DEFAULT 0" : "",
         !userNames.has("is_approved") ? "ALTER TABLE users ADD COLUMN is_approved INTEGER NOT NULL DEFAULT 0" : "",
@@ -239,6 +247,7 @@ type UserRow = {
   username: string | null;
   email: string | null;
   bio: string | null;
+  access_request_note: string | null;
   avatar_url: string | null;
   is_admin: number;
   is_approved: number;
@@ -253,6 +262,7 @@ const toUserProfile = (row: UserRow) => ({
   username: sanitizeName(row.username) ?? "User",
   email: sanitizeEmail(row.email) ?? "unknown@users.linksim.local",
   bio: row.bio ?? "",
+  accessRequestNote: row.access_request_note ?? "",
   avatarUrl: row.avatar_url ?? "",
   isAdmin: row.is_admin === 1,
   isApproved: row.is_approved === 1,
@@ -266,7 +276,7 @@ const readUserRow = async (env: Env, userId: string): Promise<UserRow | null> =>
   await ensureSchema(env);
   return env.DB
     .prepare(
-      "SELECT id, username, email, bio, avatar_url, is_admin, is_approved, approved_at, approved_by_user_id, created_at, updated_at FROM users WHERE id = ?",
+      "SELECT id, username, email, bio, access_request_note, avatar_url, is_admin, is_approved, approved_at, approved_by_user_id, created_at, updated_at FROM users WHERE id = ?",
     )
     .bind(userId)
     .first<UserRow>();
@@ -278,7 +288,7 @@ const reconcileUserIdentityByEmail = async (env: Env, userId: string, email: str
 
   const existing = await env.DB
     .prepare(
-      `SELECT id, username, email, bio, avatar_url, is_admin, is_approved, approved_at, approved_by_user_id, created_at, updated_at
+      `SELECT id, username, email, bio, access_request_note, avatar_url, is_admin, is_approved, approved_at, approved_by_user_id, created_at, updated_at
        FROM users
        WHERE lower(email) = lower(?) AND id <> ?
        ORDER BY is_admin DESC, is_approved DESC, created_at ASC
@@ -348,8 +358,8 @@ export const ensureUser = async (
 
   await env.DB.prepare(
     `INSERT OR IGNORE INTO users
-      (id, username, email, bio, avatar_url, is_admin, is_approved, approved_at, approved_by_user_id, created_at, updated_at)
-     VALUES (?, ?, ?, '', '', ?, ?, ?, ?, ?, ?)`,
+      (id, username, email, bio, access_request_note, avatar_url, is_admin, is_approved, approved_at, approved_by_user_id, created_at, updated_at)
+     VALUES (?, ?, ?, '', '', '', ?, ?, ?, ?, ?, ?)`,
   )
     .bind(
       userId,
@@ -409,14 +419,24 @@ export const assertUserAccess = async (env: Env, userId: string) => {
 export const updateUserProfile = async (
   env: Env,
   userId: string,
-  patch: { username?: unknown; email?: unknown; bio?: unknown; avatarUrl?: unknown },
+  patch: {
+    username?: unknown;
+    email?: unknown;
+    bio?: unknown;
+    accessRequestNote?: unknown;
+    avatarUrl?: unknown;
+  },
 ) => {
   const existing = await readUserRow(env, userId);
   if (!existing) throw new Error("User not found.");
 
   const nextName = patch.username === undefined ? sanitizeName(existing.username) : sanitizeName(patch.username);
   const nextEmail = patch.email === undefined ? sanitizeEmail(existing.email) : sanitizeEmail(patch.email);
   const nextBio = patch.bio === undefined ? existing.bio ?? "" : sanitizeBio(patch.bio) ?? "";
+  const nextAccessRequestNote =
+    patch.accessRequestNote === undefined
+      ? existing.access_request_note ?? ""
+      : sanitizeAccessRequestNote(patch.accessRequestNote) ?? "";
   const nextAvatar = patch.avatarUrl === undefined ? existing.avatar_url ?? "" : sanitizeAvatar(patch.avatarUrl);
 
   if (!nextName) throw new Error("Name is required (2-80 chars).");
@@ -425,10 +445,18 @@ export const updateUserProfile = async (
 
   await env.DB.prepare(
     `UPDATE users
-     SET username = ?, email = ?, bio = ?, avatar_url = ?, updated_at = ?
+     SET username = ?, email = ?, bio = ?, access_request_note = ?, avatar_url = ?, updated_at = ?
      WHERE id = ?`,
   )
-    .bind(nextName, nextEmail, nextBio, nextAvatar ?? "", new Date().toISOString(), userId)
+    .bind(
+      nextName,
+      nextEmail,
+      nextBio,
+      nextAccessRequestNote,
+      nextAvatar ?? "",
+      new Date().toISOString(),
+      userId,
+    )
     .run();
 
   const profile = await fetchUserProfile(env, userId);
@@ -440,7 +468,7 @@ export const listUsers = async (env: Env) => {
   await ensureSchema(env);
   const rows = await env.DB
     .prepare(
-      "SELECT id, username, email, bio, avatar_url, is_admin, is_approved, approved_at, approved_by_user_id, created_at, updated_at FROM users ORDER BY created_at DESC LIMIT 2000",
+      "SELECT id, username, email, bio, access_request_note, avatar_url, is_admin, is_approved, approved_at, approved_by_user_id, created_at, updated_at FROM users ORDER BY created_at DESC LIMIT 2000",
     )
     .all<UserRow>();
   return rows.results.map(toUserProfile);

functions/api/me.ts

@@ -39,6 +39,7 @@ export const onRequestPatch: PagesFunction<Env> = async ({ request, env }) => {
       username?: unknown;
       email?: unknown;
       bio?: unknown;
+      accessRequestNote?: unknown;
       avatarUrl?: unknown;
     };
     const user = await updateUserProfile(env, auth.userId, body);

functions/api/users/[id].ts

@@ -73,6 +73,7 @@ export const onRequestPatch: PagesFunction<Env> = async ({ request, env, params
       username?: unknown;
       email?: unknown;
       bio?: unknown;
+      accessRequestNote?: unknown;
       avatarUrl?: unknown;
       isAdmin?: unknown;
       isApproved?: unknown;
@@ -89,12 +90,14 @@ export const onRequestPatch: PagesFunction<Env> = async ({ request, env, params
       body.username !== undefined ||
       body.email !== undefined ||
       body.bio !== undefined ||
+      body.accessRequestNote !== undefined ||
       body.avatarUrl !== undefined
     ) {
       user = await updateUserProfile(env, targetId, {
         username: body.username,
         email: body.email,
         bio: body.bio,
+        accessRequestNote: body.accessRequestNote,
         avatarUrl: body.avatarUrl,
       });
     }

src/components/AppShell.tsx

@@ -1,21 +1,50 @@
 import { useEffect, useState } from "react";
+import { fetchMe } from "../lib/cloudUser";
 import { useAppStore } from "../store/appStore";
 import { LinkProfileChart } from "./LinkProfileChart";
 import { MapView } from "./MapView";
 import { Sidebar } from "./Sidebar";
+import { UserAdminPanel } from "./UserAdminPanel";
 
 export function AppShell() {
   const srtmTilesCount = useAppStore((state) => state.srtmTiles.length);
   const recommendAndFetchTerrainForCurrentArea = useAppStore(
     (state) => state.recommendAndFetchTerrainForCurrentArea,
   );
   const [isMapExpanded, setIsMapExpanded] = useState(false);
+  const [accessState, setAccessState] = useState<"checking" | "granted" | "pending">("checking");
 
   useEffect(() => {
     if (srtmTilesCount > 0) return;
     void recommendAndFetchTerrainForCurrentArea();
   }, [recommendAndFetchTerrainForCurrentArea, srtmTilesCount]);
 
+  useEffect(() => {
+    void (async () => {
+      try {
+        const me = await fetchMe();
+        setAccessState(me.isAdmin || me.isApproved ? "granted" : "pending");
+      } catch {
+        setAccessState("granted");
+      }
+    })();
+  }, []);
+
+  if (accessState === "pending") {
+    return (
+      <main className="app-shell access-locked-shell">
+        <section className="panel-section access-locked-panel">
+          <UserAdminPanel />
+          <h2>Account Pending Approval</h2>
+          <p className="field-help">
+            Complete your profile and add an access request note. An admin must approve your account before you can use
+            simulations or libraries.
+          </p>
+        </section>
+      </main>
+    );
+  }
+
   return (
     <main className={`app-shell ${isMapExpanded ? "is-map-expanded" : ""}`}>
       {!isMapExpanded ? <Sidebar /> : null}

src/components/UserAdminPanel.tsx

@@ -54,6 +54,7 @@ export function UserAdminPanel() {
   const [nameDraft, setNameDraft] = useState("");
   const [emailDraft, setEmailDraft] = useState("");
   const [bioDraft, setBioDraft] = useState("");
+  const [accessRequestNoteDraft, setAccessRequestNoteDraft] = useState("");
   const [avatarDraft, setAvatarDraft] = useState("");
 
   const canAdmin = Boolean(me?.isAdmin);
@@ -67,6 +68,7 @@ export function UserAdminPanel() {
       setNameDraft(current.username);
       setEmailDraft(current.email ?? "");
       setBioDraft(current.bio ?? "");
+      setAccessRequestNoteDraft(current.accessRequestNote ?? "");
       setAvatarDraft(current.avatarUrl ?? "");
       if (current.isAdmin) {
         const all = await fetchUsers();
@@ -96,6 +98,7 @@ export function UserAdminPanel() {
         username: nameDraft,
         email: emailDraft,
         bio: bioDraft,
+        accessRequestNote: accessRequestNoteDraft,
         avatarUrl: avatarDraft,
       });
       setMe(updated);
@@ -225,6 +228,15 @@ export function UserAdminPanel() {
                   <span>Bio</span>
                   <textarea maxLength={300} onChange={(event) => setBioDraft(event.target.value)} value={bioDraft} />
                 </label>
+                <label className="field-grid user-bio-field user-field-grid">
+                  <span>Access request note</span>
+                  <textarea
+                    maxLength={1200}
+                    onChange={(event) => setAccessRequestNoteDraft(event.target.value)}
+                    placeholder="Optional private note to admins."
+                    value={accessRequestNoteDraft}
+                  />
+                </label>
                 <div className="chip-group">
                   <button
                     className="inline-action"
@@ -289,6 +301,7 @@ function ManagedUserRow({
       <div className="field-help">
         {user.id} | created {fmtDate(user.createdAt)} | access {user.isApproved ? "approved" : "pending"}
       </div>
+      {user.accessRequestNote ? <p className="field-help">Request: {user.accessRequestNote}</p> : null}
       <label className="field-grid user-field-grid">
         <span>Name</span>
         <input onChange={(event) => setNameDraft(event.target.value)} type="text" value={nameDraft} />

src/index.css

@@ -109,6 +109,16 @@ input {
   grid-template-columns: minmax(0, 1fr);
 }
 
+.access-locked-shell {
+  grid-template-columns: minmax(320px, 560px);
+  justify-content: center;
+  align-content: start;
+}
+
+.access-locked-panel {
+  margin-top: 28px;
+}
+
 @keyframes fade-in {
   from {
     opacity: 0;

src/lib/cloudUser.ts

@@ -3,6 +3,7 @@ export type CloudUser = {
   username: string;
   email?: string;
   bio: string;
+  accessRequestNote?: string;
   avatarUrl: string;
   isAdmin: boolean;
   isApproved: boolean;
@@ -51,6 +52,7 @@ export const updateMyProfile = async (patch: {
   username?: string;
   email?: string;
   bio?: string;
+  accessRequestNote?: string;
   avatarUrl?: string;
 }): Promise<CloudUser> => {
   const data = await apiCall<{ user: CloudUser }>("/api/me", {
@@ -83,7 +85,13 @@ export const updateUserApproval = async (id: string, isApproved: boolean): Promi
 
 export const updateUserProfile = async (
   id: string,
-  patch: { username?: string; email?: string; bio?: string; avatarUrl?: string },
+  patch: {
+    username?: string;
+    email?: string;
+    bio?: string;
+    accessRequestNote?: string;
+    avatarUrl?: string;
+  },
 ): Promise<CloudUser> => {
   const data = await apiCall<{ user: CloudUser }>(`/api/users/${encodeURIComponent(id)}`, {
     method: "PATCH",