feat(invites): team invite links — admin create/revoke, public accept (#42)

* feat(branding): white-label — public /branding, admin write, shell theming app_settings branding.* keys (product name, logo/favicon URLs, accent color, docs/support links). Public GET /branding so login and shell theme pre-auth; admin writes via PUT /settings. useBranding() applies document.title, accent CSS var and favicon; BrandWordmark replaces hardcoded wordmarks; admin Platform settings gain a Branding form. MCP containr_branding_get + settings_update. Generated with [Devin](https://devin.ai) Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com> * feat(invites): team invite links — admin create/revoke, public accept Admins mint single-use invite links (sha256-hashed token at rest, optional email binding, configurable TTL). Public endpoints let the accept page validate the link and register — working even while public signup is disabled. - migration + sqlc queries/model for user_invites - POST /admin/invites (returns one-time token+url), GET list, DELETE revoke - GET /auth/invites/:token public validation, POST /auth/accept-invite - CLI containr invites list|create|revoke; MCP invites tools - /auth/accept-invite page (expired/used/invalid states, bound-email lock) - Admin page Team invites section: create, copy link, revoke - OpenAPI + generated types + CLI guide Generated with [Devin](https://devin.ai) Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com> --------- Co-authored-by: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
2026-10-29 00:01:22 +00:00 · 2026-10-09 10:35:12 +02:00
1 parent b47ced0135
commit 50e39fe140
@@ -4,22 +4,27 @@ import { Link } from 'react-router-dom';
 import {
  CheckCircle2,
  Clock,
+  Copy,
  FolderKanban,
  Megaphone,
  Pencil,
  ShieldCheck,
  Trash2,
+  UserPlus,
  Users,
  XCircle,
 } from 'lucide-react';
 import {
  createBanner,
+  createInvite,
  deleteBanner,
  deleteProject,
  getAdminOverview,
  listAdminBanners,
  listAdminUsers,
+  listInvites,
  listProjects,
+  revokeInvite,
  setProjectApproval,
  setUserAdmin,
  updateBanner,
@@ -57,9 +62,21 @@ export function AdminPage() {
  const usersQuery = useQuery({ queryKey: ['admin-users'], queryFn: listAdminUsers, enabled: !isDemoMode });
  const projectsQuery = useQuery({ queryKey: ['admin-projects'], queryFn: () => listProjects({ limit: 100 }), enabled: !isDemoMode });
  const bannersQuery = useQuery({ queryKey: ['admin-banners'], queryFn: listAdminBanners, enabled: !isDemoMode });
+  const invitesQuery = useQuery({
+    queryKey: ['admin-invites'],
+    queryFn: listInvites,
+    enabled: !isDemoMode,
+    select: (list) =>
+      list.map((invite) => ({
+        ...invite,
+        expired: !invite.used_at && new Date(invite.expires_at).getTime() < Date.now(),
+      })),
+  });
  const [editingProject, setEditingProject] = useState<ProjectEntity | null>(null);
  const [editForm, setEditForm] = useState({ name: '', description: '' });
  const [bannerForm, setBannerForm] = useState({ title: '', body: '', level: 'info' as Banner['level'] });
+  const [inviteEmail, setInviteEmail] = useState('');
+  const [inviteLink, setInviteLink] = useState<string | null>(null);

  const invalidate = () => {
    queryClient.invalidateQueries({ queryKey: ['admin-overview'] });
@@ -67,9 +84,29 @@ export function AdminPage() {
    queryClient.invalidateQueries({ queryKey: ['admin-projects'] });
    queryClient.invalidateQueries({ queryKey: ['admin-banners'] });
    queryClient.invalidateQueries({ queryKey: ['active-banners'] });
+    queryClient.invalidateQueries({ queryKey: ['admin-invites'] });
    queryClient.invalidateQueries({ queryKey: ['projects'] });
  };

+  const inviteCreateMutation = useMutation({
+    mutationFn: () => createInvite({ email: inviteEmail.trim() || undefined }),
+    onSuccess: (result) => {
+      setInviteLink(`${window.location.origin}${result.url}`);
+      setInviteEmail('');
+      invalidate();
+    },
+    onError: (error) => showToast('error', 'Invite failed', error instanceof Error ? error.message : undefined),
+  });
+
+  const inviteRevokeMutation = useMutation({
+    mutationFn: (id: string) => revokeInvite(id),
+    onSuccess: () => {
+      showToast('success', 'Invite revoked');
+      invalidate();
+    },
+    onError: (error) => showToast('error', 'Revoke failed', error instanceof Error ? error.message : undefined),
+  });
+
  const bannerCreateMutation = useMutation({
    mutationFn: () =>
      createBanner({
@@ -167,6 +204,7 @@ export function AdminPage() {
  const users = usersQuery.data ?? [];
  const allProjects = projectsQuery.data ?? [];
  const banners = bannersQuery.data ?? [];
+  const invites = invitesQuery.data ?? [];

  return (
    <div className="mx-auto max-w-6xl px-5 py-8">
@@ -378,6 +416,97 @@ export function AdminPage() {
        </div>
      </section>

+      <section className="mt-8">
+        <div className="mb-3 flex items-center gap-2">
+          <UserPlus size={15} className="text-[var(--accent-primary)]" />
+          <h2 className="text-[15px] font-semibold text-[var(--text-primary)]">Team invites</h2>
+        </div>
+        <div className="overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--surface-card)]">
+          <div className="flex flex-wrap items-center gap-2 border-b border-[var(--border-subtle)] px-4 py-3">
+            <input
+              value={inviteEmail}
+              onChange={(e) => setInviteEmail(e.target.value)}
+              placeholder="Bind to email (optional)"
+              type="email"
+              className="h-9 min-w-64 flex-1 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] px-3 text-sm focus:border-[var(--accent-primary)]"
+            />
+            <button
+              type="button"
+              onClick={() => inviteCreateMutation.mutate()}
+              disabled={inviteCreateMutation.isPending}
+              className="rounded-[var(--radius-md)] bg-[var(--accent-primary)] px-4 py-2 text-[12px] font-semibold text-[var(--accent-on)] disabled:opacity-50"
+            >
+              {inviteCreateMutation.isPending ? 'Creating…' : 'Create invite link'}
+            </button>
+          </div>
+          {inviteLink ? (
+            <div className="flex items-center gap-2 border-b border-[var(--border-subtle)] bg-[var(--accent-primary-soft)] px-4 py-2.5">
+              <code className="min-w-0 flex-1 truncate text-[12px] text-[var(--accent-primary)]">{inviteLink}</code>
+              <button
+                type="button"
+                onClick={() => {
+                  navigator.clipboard?.writeText(inviteLink);
+                  showToast('success', 'Link copied');
+                }}
+                className="inline-flex items-center gap-1 rounded-[var(--radius-md)] border border-[var(--border-default)] px-2.5 py-1 text-[11px] font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
+              >
+                <Copy size={11} /> Copy
+              </button>
+              <button
+                type="button"
+                onClick={() => setInviteLink(null)}
+                className="text-[11px] text-[var(--text-tertiary)] hover:text-[var(--text-secondary)]"
+              >
+                Dismiss
+              </button>
+            </div>
+          ) : null}
+          {invites.map((invite) => {
+            const used = Boolean(invite.used_at);
+            const expired = !used && invite.expired;
+            return (
+              <div
+                key={invite.id}
+                className="flex items-center gap-4 border-b border-[var(--border-subtle)] px-4 py-3 last:border-b-0"
+              >
+                <div className="min-w-0 flex-1">
+                  <p className="truncate text-[13.5px] font-medium text-[var(--text-primary)]">
+                    {invite.email || 'Open invite'}
+                  </p>
+                  <p className="truncate text-[11.5px] text-[var(--text-tertiary)]">
+                    expires {new Date(invite.expires_at).toLocaleString()}
+                  </p>
+                </div>
+                <span
+                  className={`rounded-full px-2.5 py-0.5 text-[10.5px] font-semibold ${
+                    used
+                      ? 'bg-[var(--surface-muted)] text-[var(--text-tertiary)]'
+                      : expired
+                        ? 'bg-[var(--error-soft)] text-[var(--error)]'
+                        : 'bg-[var(--success-soft)] text-[var(--success)]'
+                  }`}
+                >
+                  {used ? 'used' : expired ? 'expired' : 'open'}
+                </span>
+                {!used ? (
+                  <button
+                    type="button"
+                    onClick={() => inviteRevokeMutation.mutate(invite.id)}
+                    disabled={inviteRevokeMutation.isPending}
+                    className="rounded-[var(--radius-md)] border border-[var(--error)] px-2.5 py-1.5 text-[12px] font-medium text-[var(--error)] hover:bg-[var(--error-soft)] disabled:opacity-50"
+                  >
+                    Revoke
+                  </button>
+                ) : null}
+              </div>
+            );
+          })}
+          {invites.length === 0 ? (
+            <p className="px-4 py-6 text-center text-[13px] text-[var(--text-tertiary)]">No invites yet.</p>
+          ) : null}
+        </div>
+      </section>
+
      <section className="mt-8 pb-10">
        <div className="mb-3 flex items-center gap-2">
          <Users size={15} className="text-[var(--accent-tertiary)]" />
@@ -11,6 +11,7 @@ import {
  signUpWithEmail,
  startGitHubSignIn,
 } from '@/lib/auth-client';
+import { acceptInvite, getInvite } from '@/lib/api-client';
 import { useAuthSession } from '@/lib/use-auth-session';

 function sanitizeRedirect(raw: string | null): string {
@@ -258,6 +259,139 @@ export function SignInPage() {
  );
 }

+export function AcceptInvitePage() {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const [searchParams] = useSearchParams();
+  const token = searchParams.get('token') ?? '';
+
+  const sessionQuery = useAuthSession();
+  const inviteQuery = useQuery({
+    queryKey: ['invite', token],
+    queryFn: () => getInvite(token),
+    enabled: token.length > 0,
+    retry: false,
+  });
+
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  if (sessionQuery.data) {
+    return <Navigate to="/projects" replace />;
+  }
+
+  const boundEmail = inviteQuery.data?.email ?? undefined;
+  const effectiveEmail = boundEmail ?? email;
+  const inviteValid = inviteQuery.data?.valid === true;
+
+  const submit = async (event: FormEvent) => {
+    event.preventDefault();
+    setError(null);
+    setIsSubmitting(true);
+    try {
+      await acceptInvite({ token, name: name.trim(), email: effectiveEmail.trim(), password });
+      // Establish the cookie session — the accept endpoint creates the
+      // account, sign-in creates the browser session.
+      await signInWithEmail(effectiveEmail.trim(), password);
+      await queryClient.invalidateQueries({ queryKey: ['auth-session'] });
+      navigate('/projects', { replace: true });
+    } catch (exception) {
+      setError(exception instanceof Error ? exception.message : 'Failed to accept invite');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  if (!token) {
+    return (
+      <AuthLayout>
+        <AuthCard title="Invalid invite" subtitle="This link is missing its invite token.">
+          <AuthErrorNotice message="Ask your administrator for a fresh invite link." />
+        </AuthCard>
+      </AuthLayout>
+    );
+  }
+
+  return (
+    <AuthLayout>
+      <AuthCard
+        title="Join the team"
+        subtitle={boundEmail ? `Invited as ${boundEmail}` : 'You have been invited — create your account.'}
+      >
+        {error ? <AuthErrorNotice message={error} /> : null}
+        {inviteQuery.isLoading ? <AuthInfoNotice message="Validating invite…" /> : null}
+        {inviteQuery.isError ? <AuthErrorNotice message="This invite link is not valid." /> : null}
+        {inviteQuery.data && !inviteValid ? (
+          <AuthErrorNotice message={inviteQuery.data.used ? 'This invite was already used.' : 'This invite has expired.'} />
+        ) : null}
+
+        {inviteValid ? (
+          <form className="space-y-3" onSubmit={submit}>
+            <label className="block text-xs font-medium uppercase tracking-wider text-[var(--text-muted)]">
+              Name
+              <input
+                type="text"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                required
+                className="mt-2 w-full rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] px-3 py-2.5 text-sm text-[var(--text-primary)] outline-none transition-colors focus:border-[var(--accent-primary)]"
+                placeholder="Your name"
+              />
+            </label>
+
+            <label className="block text-xs font-medium uppercase tracking-wider text-[var(--text-muted)]">
+              Email
+              <input
+                type="email"
+                value={boundEmail ?? email}
+                onChange={(e) => setEmail(e.target.value)}
+                disabled={Boolean(boundEmail)}
+                required
+                className="mt-2 w-full rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] px-3 py-2.5 text-sm text-[var(--text-primary)] outline-none transition-colors focus:border-[var(--accent-primary)] disabled:opacity-60"
+                placeholder="[email protected]"
+              />
+            </label>
+
+            <label className="block text-xs font-medium uppercase tracking-wider text-[var(--text-muted)]">
+              Password
+              <input
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                autoComplete="new-password"
+                minLength={8}
+                required
+                className="mt-2 w-full rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] px-3 py-2.5 text-sm text-[var(--text-primary)] outline-none transition-colors focus:border-[var(--accent-primary)]"
+                placeholder="At least 8 characters"
+              />
+            </label>
+
+            <button
+              type="submit"
+              disabled={isSubmitting}
+              className="mt-1 inline-flex h-10 w-full items-center justify-center gap-2 rounded-[var(--radius-md)] text-sm font-semibold text-[var(--accent-on)] shadow-lg transition-all disabled:cursor-not-allowed disabled:opacity-60"
+              style={{ background: 'var(--accent-primary)' }}
+            >
+              {isSubmitting ? <Loader2 size={15} className="animate-spin" /> : <User2 size={15} />}
+              Accept invite
+            </button>
+          </form>
+        ) : null}
+
+        <div className="mt-5 flex items-center justify-between text-xs text-[var(--text-secondary)]">
+          <span>Already have an account?</span>
+          <Link to="/auth/sign-in" className="inline-flex items-center gap-1 text-[var(--accent-primary)] hover:underline">
+            Sign in <ArrowRight size={12} />
+          </Link>
+        </div>
+      </AuthCard>
+    </AuthLayout>
+  );
+}
+
 export function SignUpPage() {
  const navigate = useNavigate();
  const queryClient = useQueryClient();