docs-i18n 0.10.0 → 0.11.0

package/admin/app/lib/auth-client.ts

@@ -0,0 +1,21 @@
+import { createAuthClient } from 'better-auth/react';
+import { usernameClient } from 'better-auth/client/plugins';
+import { anonymousClient } from 'better-auth/client/plugins';
+import { adminClient } from 'better-auth/client/plugins';
+
+export const authClient = createAuthClient({
+  baseURL: typeof window !== 'undefined' ? window.location.origin : 'http://localhost:3456',
+  basePath: '/api/auth',
+  plugins: [
+    usernameClient(),
+    anonymousClient(),
+    adminClient(),
+  ],
+});
+
+export const {
+  useSession,
+  signIn,
+  signUp,
+  signOut,
+} = authClient;

package/admin/app/lib/auth.server.ts

@@ -0,0 +1,62 @@
+import { betterAuth } from 'better-auth';
+import { username } from 'better-auth/plugins';
+import { anonymous } from 'better-auth/plugins';
+import { admin } from 'better-auth/plugins';
+import Database from 'better-sqlite3';
+import { resolve } from 'node:path';
+import { mkdirSync } from 'node:fs';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let _auth: any = null;
+
+function getDbPath(): string {
+  const projectRoot = process.env.DOCS_I18N_PROJECT_ROOT || process.cwd();
+  const cacheDir = resolve(projectRoot, '.cache');
+  mkdirSync(cacheDir, { recursive: true });
+  return resolve(cacheDir, 'auth.db');
+}
+
+/**
+ * Get or create the better-auth instance (singleton).
+ * Uses better-sqlite3 stored at <projectRoot>/.cache/auth.db.
+ */
+export function getAuth() {
+  if (_auth) return _auth;
+
+  const dbPath = getDbPath();
+  const db = new Database(dbPath);
+
+  _auth = betterAuth({
+    database: db,
+    secret: process.env.BETTER_AUTH_SECRET || 'docs-i18n-admin-dev-secret-change-in-production',
+    baseURL: process.env.BETTER_AUTH_URL || 'http://localhost:3456',
+    basePath: '/api/auth',
+    emailAndPassword: {
+      enabled: true,
+    },
+    plugins: [
+      username(),
+      anonymous(),
+      admin({
+        defaultRole: 'user',
+      }),
+    ],
+    session: {
+      cookieCache: {
+        enabled: true,
+        maxAge: 5 * 60, // 5 min
+      },
+    },
+    user: {
+      additionalFields: {
+        displayName: {
+          type: 'string',
+          required: false,
+          defaultValue: '',
+        },
+      },
+    },
+  });
+
+  return _auth;
+}

package/admin/app/routeTree.gen.ts

@@ -9,8 +9,14 @@
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
 import { Route as rootRouteImport } from './routes/__root'
+import { Route as LoginRouteImport } from './routes/login'
 import { Route as IndexRouteImport } from './routes/index'
 
+const LoginRoute = LoginRouteImport.update({
+  id: '/login',
+  path: '/login',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const IndexRoute = IndexRouteImport.update({
   id: '/',
   path: '/',
@@ -19,28 +25,39 @@ const IndexRoute = IndexRouteImport.update({
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
+  '/login': typeof LoginRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
+  '/login': typeof LoginRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
+  '/login': typeof LoginRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/'
+  fullPaths: '/' | '/login'
   fileRoutesByTo: FileRoutesByTo
-  to: '/'
-  id: '__root__' | '/'
+  to: '/' | '/login'
+  id: '__root__' | '/' | '/login'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
+  LoginRoute: typeof LoginRoute
 }
 
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
+    '/login': {
+      id: '/login'
+      path: '/login'
+      fullPath: '/login'
+      preLoaderRoute: typeof LoginRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/': {
       id: '/'
       path: '/'
@@ -53,6 +70,7 @@ declare module '@tanstack/react-router' {
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
+  LoginRoute: LoginRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)

package/admin/app/routes/index.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute, useNavigate } from '@tanstack/react-router';
+import { createFileRoute, useNavigate, redirect } from '@tanstack/react-router';
 import { useQuery } from '@tanstack/react-query';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { FileList } from '../components/FileList';
@@ -7,6 +7,8 @@ import { JobPanel } from '../components/JobPanel';
 import { LangGrid } from '../components/LangGrid';
 import { Preview } from '../components/Preview';
 import { api } from '../lib/api';
+import { authClient } from '../lib/auth-client';
+import { getSession } from '../../server/functions/auth';
 
 type ViewMode = 'split' | 'en' | 'lang';
 type StatusFilter = 'all' | 'complete' | 'partial' | 'missing';
@@ -51,6 +53,25 @@ function parseProjectVersions(versionKeys: string[]) {
   };
 }
 
+/**
+ * Determine user role from session data.
+ * Anonymous users are "guest", others check the role field.
+ */
+function getUserRole(session: { user: Record<string, unknown> } | null): 'admin' | 'user' | 'guest' {
+  if (!session?.user) return 'guest';
+  if ((session.user as Record<string, unknown>).isAnonymous) return 'guest';
+  const role = (session.user as Record<string, unknown>).role;
+  if (role === 'admin') return 'admin';
+  return 'user';
+}
+
+function getUserDisplayName(session: { user: Record<string, unknown> } | null): string {
+  if (!session?.user) return 'Guest';
+  const user = session.user as Record<string, unknown>;
+  if (user.isAnonymous) return 'Guest';
+  return (user.displayName as string) || (user.name as string) || (user.username as string) || (user.email as string) || 'User';
+}
+
 export const Route = createFileRoute('/')({
   validateSearch: (search: Record<string, unknown>): AdminSearch => ({
     project: (search.project as string) || undefined,
@@ -64,13 +85,25 @@ export const Route = createFileRoute('/')({
     status: (search.status as StatusFilter) || undefined,
     section: (search.section as SectionFilter) || undefined,
   }),
+  beforeLoad: async () => {
+    const session = await getSession();
+    if (!session) {
+      throw redirect({ to: '/login' });
+    }
+    return { session };
+  },
   component: AdminPage,
 });
 
 function AdminPage() {
   const search = Route.useSearch();
+  const { session } = Route.useRouteContext();
   const navigate = useNavigate({ from: '/' });
 
+  const userRole = getUserRole(session);
+  const userName = getUserDisplayName(session);
+  const isAdmin = userRole === 'admin';
+
   const lang = search.lang || null;
   const file = search.file || null;
   const showFiles = search.files !== '0';
@@ -261,14 +294,27 @@ function AdminPage() {
   const handleClear = useCallback(() => setSelected(new Set()), []);
 
   const handleTranslateSelected = useCallback(() => {
+    if (!isAdmin) {
+      setToast('Only admin users can start translation jobs');
+      return;
+    }
     setDialogFiles([...selected]);
     setShowDialog(true);
-  }, [selected]);
+  }, [selected, isAdmin]);
 
   const handleNewJob = useCallback(() => {
+    if (!isAdmin) {
+      setToast('Only admin users can start translation jobs');
+      return;
+    }
     setDialogFiles(undefined);
     setShowDialog(true);
-  }, []);
+  }, [isAdmin]);
+
+  const handleSignOut = useCallback(async () => {
+    await authClient.signOut();
+    navigate({ to: '/login' });
+  }, [navigate]);
 
   if (!statusData) return <div className="loading">Loading...</div>;
 
@@ -276,14 +322,28 @@ function AdminPage() {
     <>
       <nav>
         <h1>
-          {'🌐 Translation Admin '}
+          {'Translation Admin '}
           {versionInfo?.version && (
             <span className="version-badge">v{versionInfo.version}</span>
           )}
         </h1>
         <span className="spacer" />
-        <button type="button" className="btn" onClick={handleNewJob}>
-          + New Job
+        {isAdmin && (
+          <button type="button" className="btn" onClick={handleNewJob}>
+            + New Job
+          </button>
+        )}
+        <div className="user-info">
+          <span>{userName}</span>
+          <span className={`user-role ${userRole}`}>{userRole}</span>
+        </div>
+        <button
+          type="button"
+          className="btn-signout"
+          onClick={handleSignOut}
+          title="Sign out"
+        >
+          Sign Out
         </button>
         <button
           type="button"
@@ -396,8 +456,8 @@ function AdminPage() {
       {/* Toast */}
       {toast && <div className="toast">{toast}</div>}
 
-      {/* Job dialog */}
-      {showDialog && (
+      {/* Job dialog — only for admin */}
+      {showDialog && isAdmin && (
         <JobDialog
           langs={statusData.langs}
           versions={statusData.versions}

package/admin/app/routes/login.tsx

@@ -0,0 +1,207 @@
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
+import { useState } from 'react';
+import { authClient } from '../lib/auth-client';
+
+export const Route = createFileRoute('/login')({
+  component: LoginPage,
+});
+
+function LoginPage() {
+  const navigate = useNavigate();
+  const [mode, setMode] = useState<'login' | 'register'>('login');
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [email, setEmail] = useState('');
+  const [name, setName] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+
+    try {
+      const { error: authError } = await authClient.signIn.username({
+        username,
+        password,
+      });
+
+      if (authError) {
+        setError(authError.message || 'Login failed');
+        setLoading(false);
+        return;
+      }
+
+      navigate({ to: '/' });
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Login failed');
+      setLoading(false);
+    }
+  };
+
+  const handleRegister = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+
+    try {
+      const { error: authError } = await authClient.signUp.email({
+        email,
+        password,
+        name: name || username,
+        username,
+      });
+
+      if (authError) {
+        setError(authError.message || 'Registration failed');
+        setLoading(false);
+        return;
+      }
+
+      navigate({ to: '/' });
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Registration failed');
+      setLoading(false);
+    }
+  };
+
+  const handleAnonymousLogin = async () => {
+    setError(null);
+    setLoading(true);
+
+    try {
+      const { error: authError } = await authClient.signIn.anonymous();
+
+      if (authError) {
+        setError(authError.message || 'Anonymous login failed');
+        setLoading(false);
+        return;
+      }
+
+      navigate({ to: '/' });
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Anonymous login failed');
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="login-page">
+      <div className="login-card">
+        <h2>Translation Admin</h2>
+        <p className="login-subtitle">Sign in to manage translations</p>
+
+        {/* Mode toggle */}
+        <div className="login-mode-toggle">
+          <button
+            type="button"
+            className={mode === 'login' ? 'active' : ''}
+            onClick={() => { setMode('login'); setError(null); }}
+          >
+            Sign In
+          </button>
+          <button
+            type="button"
+            className={mode === 'register' ? 'active' : ''}
+            onClick={() => { setMode('register'); setError(null); }}
+          >
+            Register
+          </button>
+        </div>
+
+        {error && <div className="login-error">{error}</div>}
+
+        {mode === 'login' ? (
+          <form onSubmit={handleLogin}>
+            <label htmlFor="login-username">Username</label>
+            <input
+              id="login-username"
+              type="text"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              placeholder="admin"
+              required
+              autoComplete="username"
+            />
+            <label htmlFor="login-password">Password</label>
+            <input
+              id="login-password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="password"
+              required
+              autoComplete="current-password"
+            />
+            <button type="submit" className="btn login-btn" disabled={loading}>
+              {loading ? 'Signing in...' : 'Sign In'}
+            </button>
+          </form>
+        ) : (
+          <form onSubmit={handleRegister}>
+            <label htmlFor="reg-username">Username</label>
+            <input
+              id="reg-username"
+              type="text"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              placeholder="username"
+              required
+              autoComplete="username"
+            />
+            <label htmlFor="reg-name">Display Name</label>
+            <input
+              id="reg-name"
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="John Doe"
+              autoComplete="name"
+            />
+            <label htmlFor="reg-email">Email</label>
+            <input
+              id="reg-email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="user@example.com"
+              required
+              autoComplete="email"
+            />
+            <label htmlFor="reg-password">Password</label>
+            <input
+              id="reg-password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="password"
+              required
+              minLength={4}
+              autoComplete="new-password"
+            />
+            <button type="submit" className="btn login-btn" disabled={loading}>
+              {loading ? 'Creating account...' : 'Create Account'}
+            </button>
+          </form>
+        )}
+
+        <div className="login-divider">
+          <span>or</span>
+        </div>
+
+        <button
+          type="button"
+          className="btn btn-outline login-btn"
+          onClick={handleAnonymousLogin}
+          disabled={loading}
+        >
+          Continue as Guest
+        </button>
+        <p className="login-hint">
+          Guests can view translations but cannot make changes.
+        </p>
+      </div>
+    </div>
+  );
+}

package/admin/app/server.ts

@@ -0,0 +1,23 @@
+/**
+ * Custom server entry that wraps TanStack Start's default handler
+ * to add better-auth API route handling at /api/auth/*.
+ */
+import { createStartHandler, defaultStreamHandler } from '@tanstack/react-start/server';
+import { getAuth } from './lib/auth.server';
+
+const startHandler = createStartHandler(defaultStreamHandler);
+
+export default {
+  async fetch(request: Request) {
+    const url = new URL(request.url);
+
+    // Intercept /api/auth/* requests and forward to better-auth
+    if (url.pathname.startsWith('/api/auth')) {
+      const auth = getAuth();
+      return auth.handler(request);
+    }
+
+    // Everything else goes to TanStack Start
+    return startHandler(request);
+  },
+};

package/admin/app/styles.css

@@ -1140,3 +1140,149 @@ a.preview-filename:hover {
 .log-copy:hover {
   background: var(--hover);
 }
+
+/* ── Login page ── */
+.login-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  padding: 2rem;
+}
+.login-card {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 0.75rem;
+  padding: 2rem;
+  width: 380px;
+  max-width: 100%;
+}
+.login-card h2 {
+  font-size: 1.3rem;
+  margin-bottom: 0.25rem;
+  text-align: center;
+}
+.login-subtitle {
+  text-align: center;
+  color: var(--fg2);
+  font-size: 0.85rem;
+  margin-bottom: 1.25rem;
+}
+.login-mode-toggle {
+  display: flex;
+  gap: 0;
+  margin-bottom: 1rem;
+  border: 1px solid var(--border);
+  border-radius: 0.375rem;
+  overflow: hidden;
+}
+.login-mode-toggle button {
+  flex: 1;
+  padding: 0.5rem;
+  border: none;
+  background: transparent;
+  color: var(--fg2);
+  cursor: pointer;
+  font-size: 0.85rem;
+  font-weight: 600;
+  transition: background 0.15s, color 0.15s;
+}
+.login-mode-toggle button.active {
+  background: var(--accent);
+  color: var(--btn-fg);
+}
+.login-card label {
+  display: block;
+  font-size: 0.8rem;
+  color: var(--fg2);
+  margin: 0.75rem 0 0.25rem;
+}
+.login-card input {
+  width: 100%;
+  background: var(--bg);
+  color: var(--fg);
+  border: 1px solid var(--border);
+  padding: 0.55rem 0.75rem;
+  border-radius: 0.375rem;
+  font-size: 0.85rem;
+  outline: none;
+}
+.login-card input:focus {
+  border-color: var(--accent);
+}
+.login-btn {
+  width: 100%;
+  margin-top: 1rem;
+  padding: 0.6rem;
+  font-size: 0.9rem;
+}
+.login-error {
+  background: color-mix(in srgb, var(--red) 10%, transparent);
+  color: var(--red);
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.375rem;
+  font-size: 0.8rem;
+  margin-bottom: 0.75rem;
+}
+.login-divider {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin: 1.25rem 0;
+  color: var(--fg2);
+  font-size: 0.8rem;
+}
+.login-divider::before,
+.login-divider::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: var(--border);
+}
+.login-hint {
+  text-align: center;
+  color: var(--fg2);
+  font-size: 0.75rem;
+  margin-top: 0.75rem;
+}
+
+/* ── User info in nav ── */
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.8rem;
+  color: var(--fg2);
+}
+.user-role {
+  font-size: 0.65rem;
+  padding: 0.1rem 0.4rem;
+  border-radius: 0.25rem;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+.user-role.admin {
+  background: color-mix(in srgb, var(--accent) 20%, transparent);
+  color: var(--accent);
+}
+.user-role.user {
+  background: color-mix(in srgb, var(--green) 20%, transparent);
+  color: var(--green);
+}
+.user-role.guest {
+  background: color-mix(in srgb, var(--yellow) 20%, transparent);
+  color: var(--yellow);
+}
+.btn-signout {
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--fg2);
+  padding: 0.3rem 0.6rem;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  font-size: 0.75rem;
+}
+.btn-signout:hover {
+  border-color: var(--red);
+  color: var(--red);
+}

package/admin/app/worker.ts

@@ -0,0 +1,18 @@
+/**
+ * Cloudflare Workers entry point for the admin dashboard.
+ * Re-exports TanStack Start's server entry as a CF Worker fetch handler.
+ * Injects D1 binding into globalThis for server-side queries.
+ */
+import handler from '@tanstack/react-start/server-entry'
+
+export default {
+  async fetch(request: Request, env: any, ctx: any) {
+    // Expose D1 binding to server-side code via globalThis
+    if (env?.DB) {
+      ;(globalThis as any).__D1_DB = env.DB
+    }
+    // Signal that we're running on CF Workers
+    ;(globalThis as any).__CF_WORKERS = true
+    return handler.fetch(request)
+  },
+}