- {submitting ? "Signing in..." : "Sign in"}
+ {submitting ? "Sending code..." : "Continue"}
diff --git a/apps/web/app/(dashboard)/settings/page.tsx b/apps/web/app/(dashboard)/settings/page.tsx
index 75ba55f8..72d23251 100644
--- a/apps/web/app/(dashboard)/settings/page.tsx
+++ b/apps/web/app/(dashboard)/settings/page.tsx
@@ -1,8 +1,8 @@
"use client";
-import { useEffect, useState } from "react";
-import { Settings, Users, Building2, Save, Crown, Shield, User, Plus, Trash2, LogOut } from "lucide-react";
-import type { MemberWithUser, MemberRole } from "@multica/types";
+import { useEffect, useState, useCallback } from "react";
+import { Settings, Users, Building2, Save, Crown, Shield, User, Plus, Trash2, LogOut, Key, Copy, Check } from "lucide-react";
+import type { MemberWithUser, MemberRole, PersonalAccessToken } from "@multica/types";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
@@ -24,6 +24,14 @@ import {
SelectContent,
SelectItem,
} from "@/components/ui/select";
+import {
+ Dialog,
+ DialogContent,
+ DialogHeader,
+ DialogTitle,
+ DialogDescription,
+ DialogFooter,
+} from "@/components/ui/dialog";
import { toast } from "sonner";
import { useAuthStore } from "@/features/auth";
import { useWorkspaceStore } from "@/features/workspace";
@@ -120,6 +128,61 @@ export default function SettingsPage() {
const [avatarUrl, setAvatarUrl] = useState(user?.avatar_url ?? "");
const [saving, setSaving] = useState(false);
const [profileSaving, setProfileSaving] = useState(false);
+ const [tokens, setTokens] = useState
([]);
+ const [tokenName, setTokenName] = useState("");
+ const [tokenExpiry, setTokenExpiry] = useState("90");
+ const [tokenCreating, setTokenCreating] = useState(false);
+ const [newToken, setNewToken] = useState(null);
+ const [tokenCopied, setTokenCopied] = useState(false);
+ const [tokenRevoking, setTokenRevoking] = useState(null);
+
+ const loadTokens = useCallback(async () => {
+ try {
+ const list = await api.listPersonalAccessTokens();
+ setTokens(list);
+ } catch {
+ // ignore — tokens section simply stays empty
+ }
+ }, []);
+
+ useEffect(() => { loadTokens(); }, [loadTokens]);
+
+ const handleCreateToken = async () => {
+ setTokenCreating(true);
+ try {
+ const expiresInDays = tokenExpiry === "never" ? undefined : Number(tokenExpiry);
+ const result = await api.createPersonalAccessToken({ name: tokenName, expires_in_days: expiresInDays });
+ setNewToken(result.token);
+ setTokenName("");
+ setTokenExpiry("90");
+ await loadTokens();
+ } catch (e) {
+ toast.error(e instanceof Error ? e.message : "Failed to create token");
+ } finally {
+ setTokenCreating(false);
+ }
+ };
+
+ const handleRevokeToken = async (id: string) => {
+ setTokenRevoking(id);
+ try {
+ await api.revokePersonalAccessToken(id);
+ await loadTokens();
+ toast.success("Token revoked");
+ } catch (e) {
+ toast.error(e instanceof Error ? e.message : "Failed to revoke token");
+ } finally {
+ setTokenRevoking(null);
+ }
+ };
+
+ const handleCopyToken = async () => {
+ if (!newToken) return;
+ await navigator.clipboard.writeText(newToken);
+ setTokenCopied(true);
+ setTimeout(() => setTokenCopied(false), 2000);
+ };
+
const [inviteEmail, setInviteEmail] = useState("");
const [inviteRole, setInviteRole] = useState("member");
const [inviteLoading, setInviteLoading] = useState(false);
@@ -325,6 +388,87 @@ export default function SettingsPage() {
+ {/* API Tokens */}
+