handoff-app 2.0.0-2 → 2.0.0-3

package/src/app/pages/account/index.tsx

@@ -0,0 +1,153 @@
+import { AccountLayout } from '../../components/Auth/AccountLayout';
+import { authApiUrl, readApiError } from '../../components/Auth/api';
+import { Alert, AlertDescription } from '../../components/ui/alert';
+import { Badge } from '../../components/ui/badge';
+import { Button } from '../../components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../components/ui/card';
+import { Input } from '../../components/ui/input';
+import { Label } from '../../components/ui/label';
+import { useSession } from 'next-auth/react';
+import { useEffect, useState } from 'react';
+
+interface AccountUser {
+  id: string;
+  email: string;
+  name?: string | null;
+  avatarUrl?: string | null;
+  image?: string | null;
+  role: 'admin' | 'member';
+  status?: 'invited' | 'active' | 'deactivated';
+}
+
+export default function AccountPage() {
+  if (process.env.HANDOFF_RUNTIME_MODE !== 'registry') {
+    return <AccountLayout title="Profile">{null}</AccountLayout>;
+  }
+
+  return <RegistryAccountPage />;
+}
+
+function RegistryAccountPage() {
+  const { data: session } = useSession();
+  const [user, setUser] = useState<AccountUser | null>(null);
+  const [name, setName] = useState('');
+  const [avatarUrl, setAvatarUrl] = useState('');
+  const [gravatarUrl, setGravatarUrl] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [message, setMessage] = useState<{ text: string; error?: boolean } | null>(null);
+
+  useEffect(() => {
+    if (!session?.user) return;
+    void fetch(authApiUrl('/api/account'), { credentials: 'include', cache: 'no-store' })
+      .then(async (response) => {
+        if (!response.ok) throw new Error(await readApiError(response, 'Could not load your account.'));
+        const body = (await response.json()) as AccountUser | { user: AccountUser; gravatarUrl?: string };
+        const account = 'user' in body ? body.user : body;
+        setUser(account);
+        setName(account.name ?? '');
+        setAvatarUrl(account.avatarUrl ?? account.image ?? '');
+        if ('gravatarUrl' in body && body.gravatarUrl) setGravatarUrl(body.gravatarUrl);
+      })
+      .catch((error: Error) => setMessage({ text: error.message, error: true }))
+      .finally(() => setLoading(false));
+  }, [session]);
+
+  const save = async () => {
+    setSaving(true);
+    setMessage(null);
+    try {
+      const response = await fetch(authApiUrl('/api/account'), {
+        method: 'PUT',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name: name.trim(), avatarUrl: avatarUrl.trim() }),
+      });
+      if (!response.ok) {
+        setMessage({ text: await readApiError(response, 'Could not save your profile.'), error: true });
+        return;
+      }
+      setMessage({ text: 'Profile saved.' });
+    } catch {
+      setMessage({ text: 'Could not connect to the registry.', error: true });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const initials = (name || user?.email || 'U')
+    .split(/\s+/)
+    .map((part) => part[0])
+    .join('')
+    .slice(0, 2)
+    .toUpperCase();
+
+  return (
+    <AccountLayout title="Profile">
+      <Card>
+        <CardHeader>
+          <CardTitle>Profile</CardTitle>
+          <CardDescription>Manage how your account appears in this registry.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-5">
+          {message ? (
+            <Alert variant={message.error ? 'destructive' : 'green'}>
+              <AlertDescription>{message.text}</AlertDescription>
+            </Alert>
+          ) : null}
+          {loading ? (
+            <p className="text-sm text-muted-foreground">Loading profile…</p>
+          ) : user ? (
+            <>
+              <div className="flex items-center gap-4">
+                {avatarUrl ? (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img src={avatarUrl} alt="" className="h-16 w-16 rounded-full border object-cover" />
+                ) : (
+                  <div className="flex h-16 w-16 items-center justify-center rounded-full bg-muted text-lg font-semibold">{initials}</div>
+                )}
+                <div>
+                  <p className="font-medium">{name || user.email}</p>
+                  <Badge variant={user.status === 'deactivated' ? 'destructive' : 'secondary'} className="mt-1">
+                    {user.role}
+                  </Badge>
+                </div>
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="account-email">Email</Label>
+                <Input id="account-email" value={user.email} disabled />
+                <p className="text-xs text-muted-foreground">Email addresses cannot be changed.</p>
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="account-name">Display name</Label>
+                <Input id="account-name" value={name} onChange={(event) => setName(event.target.value)} maxLength={100} />
+              </div>
+              <div className="space-y-2">
+                <div className="flex items-center justify-between gap-2">
+                  <Label htmlFor="account-avatar">Avatar URL</Label>
+                  {gravatarUrl ? (
+                    <Button type="button" variant="ghost" size="sm" onClick={() => setAvatarUrl(gravatarUrl)}>
+                      Use Gravatar
+                    </Button>
+                  ) : null}
+                </div>
+                <Input
+                  id="account-avatar"
+                  type="url"
+                  placeholder="https://example.com/avatar.png"
+                  value={avatarUrl}
+                  onChange={(event) => setAvatarUrl(event.target.value)}
+                  maxLength={500}
+                />
+                <p className="text-xs text-muted-foreground">Use an HTTPS image URL, click Use Gravatar, or leave this empty to show your initials.</p>
+              </div>
+              <Button onClick={() => void save()} disabled={saving}>
+                {saving ? 'Saving…' : 'Save changes'}
+              </Button>
+            </>
+          ) : null}
+        </CardContent>
+      </Card>
+    </AccountLayout>
+  );
+}

package/src/app/pages/account/tokens.tsx

@@ -0,0 +1,230 @@
+import { AccountLayout } from '../../components/Auth/AccountLayout';
+import { authApiUrl, readApiError } from '../../components/Auth/api';
+import { Alert, AlertDescription, AlertTitle } from '../../components/ui/alert';
+import { Badge } from '../../components/ui/badge';
+import { Button } from '../../components/ui/button';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '../../components/ui/card';
+import { Input } from '../../components/ui/input';
+import { Label } from '../../components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../components/ui/select';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../components/ui/table';
+import { Check, Copy, KeyRound, Trash2 } from 'lucide-react';
+import { useSession } from 'next-auth/react';
+import { FormEvent, useCallback, useEffect, useState } from 'react';
+
+interface AccessToken {
+  id: string;
+  name: string;
+  prefix?: string;
+  scopes: string[];
+  createdAt: string;
+  expiresAt?: string | null;
+  lastUsedAt?: string | null;
+  revokedAt?: string | null;
+}
+
+const formatDate = (value?: string | null) => {
+  if (!value) return 'Never';
+  const date = new Date(value);
+  return Number.isNaN(date.valueOf()) ? value : date.toLocaleDateString();
+};
+
+export default function TokensPage() {
+  if (process.env.HANDOFF_RUNTIME_MODE !== 'registry') {
+    return <AccountLayout title="Access tokens">{null}</AccountLayout>;
+  }
+
+  return <RegistryTokensPage />;
+}
+
+function RegistryTokensPage() {
+  const { data: session } = useSession();
+  const role = (session?.user as { role?: string } | undefined)?.role;
+  const [tokens, setTokens] = useState<AccessToken[]>([]);
+  const [scope, setScope] = useState<'registry:read' | 'registry:write'>('registry:read');
+  const [createdToken, setCreatedToken] = useState<string | null>(null);
+  const [copied, setCopied] = useState(false);
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const load = useCallback(async () => {
+    const response = await fetch(authApiUrl('/api/account/tokens'), { credentials: 'include', cache: 'no-store' });
+    if (!response.ok) throw new Error(await readApiError(response, 'Could not load access tokens.'));
+    const body = (await response.json()) as AccessToken[] | { tokens: AccessToken[] };
+    setTokens(Array.isArray(body) ? body : body.tokens);
+  }, []);
+
+  useEffect(() => {
+    if (process.env.HANDOFF_RUNTIME_MODE === 'registry' && session?.user) {
+      void load().catch((reason: Error) => setError(reason.message));
+    }
+  }, [load, session]);
+
+  const create = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setPending(true);
+    setError(null);
+    setCreatedToken(null);
+    const data = new FormData(event.currentTarget);
+    try {
+      const response = await fetch(authApiUrl('/api/account/tokens'), {
+        method: 'POST',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name: String(data.get('name') ?? '').trim(), scopes: [scope] }),
+      });
+      if (!response.ok) {
+        setError(await readApiError(response, 'Could not create the access token.'));
+        return;
+      }
+      const body = (await response.json()) as { token?: string; accessToken?: string };
+      setCreatedToken(body.token ?? body.accessToken ?? null);
+      event.currentTarget.reset();
+      await load();
+    } catch {
+      setError('Could not connect to the registry.');
+    } finally {
+      setPending(false);
+    }
+  };
+
+  const revoke = async (token: AccessToken) => {
+    if (!window.confirm(`Revoke “${token.name}”? Applications using it will immediately lose access.`)) return;
+    setPending(true);
+    setError(null);
+    try {
+      const response = await fetch(authApiUrl(`/api/account/tokens/${encodeURIComponent(token.id)}`), {
+        method: 'DELETE',
+        credentials: 'include',
+      });
+      if (!response.ok) {
+        setError(await readApiError(response, 'Could not revoke the token.'));
+        return;
+      }
+      await load();
+    } finally {
+      setPending(false);
+    }
+  };
+
+  const copyToken = async () => {
+    if (!createdToken) return;
+    await navigator.clipboard.writeText(createdToken);
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <AccountLayout title="Access tokens">
+      <div className="space-y-6">
+        <Card>
+          <CardHeader>
+            <CardTitle>Create access token</CardTitle>
+            <CardDescription>Use tokens for CI or integrations that cannot complete the browser device login.</CardDescription>
+          </CardHeader>
+          <form onSubmit={create}>
+            <CardContent className="space-y-4">
+              {error ? (
+                <Alert variant="destructive">
+                  <AlertDescription>{error}</AlertDescription>
+                </Alert>
+              ) : null}
+              {createdToken ? (
+                <Alert variant="warning">
+                  <KeyRound />
+                  <AlertTitle>Copy this token now</AlertTitle>
+                  <AlertDescription>
+                    <p className="mb-3">For security, it will not be shown again.</p>
+                    <div className="flex gap-2">
+                      <Input className="font-mono text-xs" readOnly value={createdToken} />
+                      <Button type="button" size="icon" variant="outline" onClick={() => void copyToken()} aria-label="Copy token">
+                        {copied ? <Check /> : <Copy />}
+                      </Button>
+                    </div>
+                  </AlertDescription>
+                </Alert>
+              ) : null}
+              <div className="grid gap-4 sm:grid-cols-[2fr_1fr]">
+                <div className="space-y-2">
+                  <Label htmlFor="token-name">Name</Label>
+                  <Input id="token-name" name="name" required maxLength={100} placeholder="Production CI" />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="token-scope">Access</Label>
+                  <Select value={scope} onValueChange={(value) => setScope(value as typeof scope)}>
+                    <SelectTrigger id="token-scope">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="registry:read">Read only</SelectItem>
+                      {role === 'admin' ? <SelectItem value="registry:write">Read and write</SelectItem> : null}
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+              <p className="text-xs text-muted-foreground">Tokens expire after one year unless revoked earlier.</p>
+            </CardContent>
+            <CardFooter className="justify-end border-t px-6 py-4">
+              <Button type="submit" disabled={pending}>
+                Create
+              </Button>
+            </CardFooter>
+          </form>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Access tokens</CardTitle>
+            <CardDescription>Review and revoke credentials issued for your account.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Name</TableHead>
+                  <TableHead>Access</TableHead>
+                  <TableHead>Last used</TableHead>
+                  <TableHead>Expires</TableHead>
+                  <TableHead className="text-right">Action</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {tokens.length ? (
+                  tokens.map((token) => (
+                    <TableRow key={token.id}>
+                      <TableCell>
+                        <p className="font-medium">{token.name}</p>
+                        {token.prefix ? <p className="font-mono text-xs text-muted-foreground">{token.prefix}…</p> : null}
+                      </TableCell>
+                      <TableCell className="space-x-1">
+                        {token.scopes.map((item) => (
+                          <Badge key={item} variant="secondary">
+                            {item === 'registry:write' ? 'Read/write' : 'Read'}
+                          </Badge>
+                        ))}
+                        {token.revokedAt ? <Badge variant="destructive">Revoked</Badge> : null}
+                      </TableCell>
+                      <TableCell>{formatDate(token.lastUsedAt)}</TableCell>
+                      <TableCell>{formatDate(token.expiresAt)}</TableCell>
+                      <TableCell className="text-right">
+                        <Button size="sm" variant="ghost" disabled={pending || Boolean(token.revokedAt)} onClick={() => void revoke(token)}>
+                          <Trash2 /> Revoke
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  ))
+                ) : (
+                  <TableRow>
+                    <TableCell colSpan={5} className="py-8 text-center text-muted-foreground">
+                      No active access tokens.
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
+      </div>
+    </AccountLayout>
+  );
+}