@mettlecast/domain-cli 0.2.0

package/src/templates/dashboard-pages/account/audit-log.tsx

@@ -0,0 +1,60 @@
+import { useEffect, useState } from 'react';
+import { useApi } from '@mettlecast/sdk';
+import { useProject } from '@mettlecast/dashboard-shell';
+import { TibFormError } from '@mettlecast/design-system';
+
+interface ActivityEvent {
+  id: string;
+  type: string;
+  actor: string;
+  summary: string;
+  createdAt: string;
+}
+
+export function AuditLogPage() {
+  const tib = useApi();
+  const { workspaceId } = useProject();
+  const [events, setEvents] = useState<ActivityEvent[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!workspaceId) return;
+    tib?.listActivity(workspaceId, { limit: 50 })
+      .then(res => setEvents((res as any)?.items ?? []))
+      .catch(err => setError(err instanceof Error ? err.message : 'Failed to load audit log'))
+      .finally(() => setLoading(false));
+  }, [tib, workspaceId]);
+
+  return (
+    <div className="p-6 max-w-3xl space-y-6">
+      <div>
+        <h1 className="text-2xl font-semibold tracking-tight">Audit log</h1>
+        <p className="text-sm text-muted-foreground mt-1">Recent activity in this workspace</p>
+      </div>
+      <TibFormError error={error} />
+      {loading ? (
+        <p className="text-sm text-muted-foreground">Loading…</p>
+      ) : events.length === 0 ? (
+        <p className="text-sm text-muted-foreground py-8 text-center">No activity yet</p>
+      ) : (
+        <ol className="space-y-3" aria-label="Audit log">
+          {events.map(ev => (
+            <li key={ev.id} className="flex gap-4 text-sm">
+              <time dateTime={ev.createdAt} className="w-36 shrink-0 text-xs text-muted-foreground pt-0.5">
+                {new Date(ev.createdAt).toLocaleString()}
+              </time>
+              <div>
+                <span className="font-medium">{ev.actor}</span>
+                {' '}
+                <span className="text-muted-foreground">{ev.summary}</span>
+              </div>
+            </li>
+          ))}
+        </ol>
+      )}
+    </div>
+  );
+}
+
+export default AuditLogPage;

package/src/templates/dashboard-pages/account/index.ts

@@ -0,0 +1,5 @@
+export { ProfilePage } from './profile';
+export { WorkspaceSettingsPage } from './workspace-settings';
+export { MembersPage } from './members';
+export { ApiKeysPage } from './api-keys';
+export { AuditLogPage } from './audit-log';

package/src/templates/dashboard-pages/account/members.tsx

@@ -0,0 +1,107 @@
+import { useEffect, useState } from 'react';
+import { useApi } from '@mettlecast/sdk';
+import { useProject } from '@mettlecast/dashboard-shell';
+import { TibFormError, TibSubmitButton } from '@mettlecast/design-system';
+
+interface Member {
+  userId: string;
+  email: string;
+  name?: string;
+  role: string;
+}
+
+export function MembersPage() {
+  const tib = useApi();
+  const { workspaceId } = useProject();
+  const [members, setMembers] = useState<Member[]>([]);
+  const [inviteEmail, setInviteEmail] = useState('');
+  const [inviteRole, setInviteRole] = useState('member');
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [inviting, setInviting] = useState(false);
+
+  useEffect(() => {
+    if (!workspaceId) return;
+    tib?.listMembers(workspaceId)
+      .then(res => setMembers((res as any)?.items ?? []))
+      .catch(err => setError(err instanceof Error ? err.message : 'Failed to load members'))
+      .finally(() => setLoading(false));
+  }, [tib, workspaceId]);
+
+  async function handleInvite(e: React.FormEvent) {
+    e.preventDefault();
+    if (!workspaceId) return;
+    setInviting(true);
+    setError(null);
+    try {
+      await tib?.inviteMember(workspaceId, { email: inviteEmail, role: inviteRole });
+      setInviteEmail('');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Invite failed');
+    } finally {
+      setInviting(false);
+    }
+  }
+
+  return (
+    <div className="p-6 max-w-3xl space-y-8">
+      <div>
+        <h1 className="text-2xl font-semibold tracking-tight">Members</h1>
+        <p className="text-sm text-muted-foreground mt-1">Manage workspace members and roles</p>
+      </div>
+
+      <form onSubmit={handleInvite} className="flex gap-2 items-end">
+        <div className="flex-1">
+          <label htmlFor="inviteEmail" className="text-sm font-medium">Email</label>
+          <input id="inviteEmail" type="email" value={inviteEmail} onChange={e => setInviteEmail(e.target.value)}
+            className="mt-1 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            placeholder="colleague@company.com" required />
+        </div>
+        <div>
+          <label htmlFor="inviteRole" className="text-sm font-medium">Role</label>
+          <select id="inviteRole" value={inviteRole} onChange={e => setInviteRole(e.target.value)}
+            className="mt-1 rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
+            <option value="member">Member</option>
+            <option value="admin">Admin</option>
+            <option value="viewer">Viewer</option>
+          </select>
+        </div>
+        <TibSubmitButton loading={inviting}>Invite</TibSubmitButton>
+      </form>
+      <TibFormError error={error} />
+
+      {loading ? (
+        <p className="text-sm text-muted-foreground">Loading…</p>
+      ) : (
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="border-b border-border">
+              <th className="text-left py-2 font-medium text-muted-foreground">Member</th>
+              <th className="text-left py-2 font-medium text-muted-foreground">Role</th>
+              <th className="py-2" />
+            </tr>
+          </thead>
+          <tbody>
+            {members.map(m => (
+              <tr key={m.userId} className="border-b border-border/50">
+                <td className="py-3">
+                  <div className="font-medium">{m.name ?? m.email}</div>
+                  {m.name && <div className="text-xs text-muted-foreground">{m.email}</div>}
+                </td>
+                <td className="py-3 capitalize">{m.role}</td>
+                <td className="py-3 text-right">
+                  <button type="button" onClick={() => workspaceId && tib?.removeMember(workspaceId, m.userId)}
+                    className="text-xs text-destructive hover:underline underline-offset-4">
+                    Remove
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </div>
+  );
+}
+
+export default MembersPage;

package/src/templates/dashboard-pages/account/profile.tsx

@@ -0,0 +1,53 @@
+import { useState } from 'react';
+import { useApi } from '@mettlecast/sdk';
+import { TibFormField, TibFormError, TibSubmitButton } from '@mettlecast/design-system';
+
+export function ProfilePage() {
+  const tib = useApi();
+  const [name, setName] = useState('');
+  const [email] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [saved, setSaved] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+    setSaved(false);
+    try {
+      await (tib as any)?.workspace?.update({ name });
+      setSaved(true);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Save failed');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="p-6 max-w-2xl space-y-8">
+      <div>
+        <h1 className="text-2xl font-semibold tracking-tight">Profile</h1>
+        <p className="text-sm text-muted-foreground mt-1">Manage your personal information</p>
+      </div>
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <h2 className="text-lg font-semibold">Personal details</h2>
+        <TibFormField name="name" label="Full name">
+          <input id="name" type="text" value={name} onChange={e => setName(e.target.value)}
+            className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            autoComplete="name" />
+        </TibFormField>
+        <TibFormField name="email" label="Email">
+          <input id="email" type="email" value={email} readOnly
+            className="w-full rounded-md border border-input bg-muted px-3 py-2 text-sm text-muted-foreground cursor-not-allowed" />
+        </TibFormField>
+        {saved && <p className="text-sm text-green-600" role="status">Changes saved</p>}
+        <TibFormError error={error} />
+        <TibSubmitButton loading={loading}>Save changes</TibSubmitButton>
+      </form>
+    </div>
+  );
+}
+
+export default ProfilePage;

package/src/templates/dashboard-pages/account/workspace-settings.tsx

@@ -0,0 +1,64 @@
+import { useState } from 'react';
+import { useApi } from '@mettlecast/sdk';
+import { useProject } from '@mettlecast/dashboard-shell';
+import { TibFormField, TibFormError, TibSubmitButton } from '@mettlecast/design-system';
+
+export function WorkspaceSettingsPage() {
+  const tib = useApi();
+  const { workspaceId } = useProject();
+  const [name, setName] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [saved, setSaved] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+    setSaved(false);
+    try {
+      await (tib as any)?.workspace?.update({ workspaceId, name });
+      setSaved(true);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Save failed');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="p-6 max-w-2xl space-y-8">
+      <div>
+        <h1 className="text-2xl font-semibold tracking-tight">Workspace settings</h1>
+        <p className="text-sm text-muted-foreground mt-1">Manage workspace configuration</p>
+      </div>
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <h2 className="text-lg font-semibold">General</h2>
+        <TibFormField name="name" label="Workspace name">
+          <input id="name" type="text" value={name} onChange={e => setName(e.target.value)}
+            className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            autoComplete="organization" />
+        </TibFormField>
+        <TibFormField name="workspaceId" label="Workspace ID">
+          <input id="workspaceId" type="text" value={workspaceId ?? ''} readOnly
+            className="w-full rounded-md border border-input bg-muted px-3 py-2 text-sm text-muted-foreground font-mono cursor-not-allowed" />
+        </TibFormField>
+        {saved && <p className="text-sm text-green-600" role="status">Changes saved</p>}
+        <TibFormError error={error} />
+        <TibSubmitButton loading={loading}>Save changes</TibSubmitButton>
+      </form>
+
+      <div className="space-y-4 border-t border-border pt-8">
+        <h2 className="text-lg font-semibold text-destructive">Danger zone</h2>
+        <p className="text-sm text-muted-foreground">These actions are irreversible.</p>
+        <button type="button"
+          className="rounded-md border border-destructive px-4 py-2 text-sm font-medium text-destructive hover:bg-destructive hover:text-destructive-foreground transition-colors"
+          onClick={() => window.confirm('Are you sure? This cannot be undone.') && (tib as any)?.workspace?.delete({ workspaceId })}>
+          Delete workspace
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default WorkspaceSettingsPage;

package/src/templates/dashboard-pages/auth/accept-invitation.tsx

@@ -0,0 +1,62 @@
+import { useState } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useApi } from '@mettlecast/sdk';
+import { TibFormField, TibFormError, TibSubmitButton } from '@mettlecast/design-system';
+
+export function AcceptInvitationPage() {
+  const tib = useApi();
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const token = searchParams.get('token') ?? '';
+  const email = searchParams.get('email') ?? '';
+  const [name, setName] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+    try {
+      await (tib as any)?.auth?.acceptInvite({ token, name, password });
+      navigate('/login');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to accept invitation');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background p-4">
+      <div className="w-full max-w-md space-y-6">
+        <div>
+          <h1 className="text-2xl font-semibold tracking-tight">Accept invitation</h1>
+          <p className="text-sm text-muted-foreground mt-1">You've been invited to join the workspace</p>
+        </div>
+        <form onSubmit={handleSubmit} className="space-y-4" noValidate>
+          {email && (
+            <div className="rounded-md bg-muted px-3 py-2 text-sm">
+              Signing up as <strong>{email}</strong>
+            </div>
+          )}
+          <TibFormField name="name" label="Full name">
+            <input id="name" type="text" value={name} onChange={e => setName(e.target.value)}
+              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              required autoComplete="name" autoFocus />
+          </TibFormField>
+          <TibFormField name="password" label="Create password">
+            <input id="password" type="password" value={password} onChange={e => setPassword(e.target.value)}
+              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              required autoComplete="new-password" minLength={8} />
+          </TibFormField>
+          <TibFormError error={error} />
+          <TibSubmitButton loading={loading} className="w-full">Join workspace</TibSubmitButton>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export default AcceptInvitationPage;

package/src/templates/dashboard-pages/auth/choose-org.tsx

@@ -0,0 +1,66 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useApi } from '@mettlecast/sdk';
+import { TibFormError } from '@mettlecast/design-system';
+
+interface OrgItem {
+  orgId: string;
+  name: string;
+  role: string;
+}
+
+export function ChooseOrgPage() {
+  const tib = useApi();
+  const navigate = useNavigate();
+  const [orgs, setOrgs] = useState<OrgItem[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const res = await (tib as any)?.org?.listWorkspaces({});
+        setOrgs((res?.items ?? []) as OrgItem[]);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to load organisations');
+      } finally {
+        setLoading(false);
+      }
+    })();
+  }, [tib]);
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background p-4">
+      <div className="w-full max-w-md space-y-6">
+        <div>
+          <h1 className="text-2xl font-semibold tracking-tight">Choose organisation</h1>
+          <p className="text-sm text-muted-foreground mt-1">Select the workspace to continue</p>
+        </div>
+        <TibFormError error={error} />
+        {loading ? (
+          <p className="text-sm text-muted-foreground">Loading…</p>
+        ) : (
+          <ul className="space-y-2" role="list">
+            {orgs.map(org => (
+              <li key={org.orgId}>
+                <button
+                  type="button"
+                  onClick={() => navigate(`/t/${org.orgId}`)}
+                  className="w-full text-left rounded-md border border-border px-4 py-3 text-sm hover:bg-accent hover:text-accent-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                >
+                  <div className="font-medium">{org.name}</div>
+                  <div className="text-xs text-muted-foreground capitalize">{org.role}</div>
+                </button>
+              </li>
+            ))}
+            {orgs.length === 0 && (
+              <li className="text-sm text-muted-foreground text-center py-4">No organisations found</li>
+            )}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default ChooseOrgPage;

package/src/templates/dashboard-pages/auth/forgot-password.tsx

@@ -0,0 +1,69 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { useApi } from '@mettlecast/sdk';
+import { TibFormField, TibFormError, TibSubmitButton } from '@mettlecast/design-system';
+
+export function ForgotPasswordPage() {
+  const tib = useApi();
+  const [email, setEmail] = useState('');
+  const [sent, setSent] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+    try {
+      await (tib as any)?.auth?.forgotPassword({ email });
+      setSent(true);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to send reset email');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  if (sent) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-background p-4">
+        <div className="w-full max-w-md space-y-4 text-center">
+          <h1 className="text-2xl font-semibold tracking-tight">Check your email</h1>
+          <p className="text-sm text-muted-foreground">
+            We sent a password reset link to <strong>{email}</strong>
+          </p>
+          <Link to="/login" className="text-sm text-primary hover:underline underline-offset-4">
+            Back to sign in
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background p-4">
+      <div className="w-full max-w-md space-y-6">
+        <div>
+          <h1 className="text-2xl font-semibold tracking-tight">Reset password</h1>
+          <p className="text-sm text-muted-foreground mt-1">Enter your email to receive a reset link</p>
+        </div>
+        <form onSubmit={handleSubmit} className="space-y-4" noValidate>
+          <TibFormField name="email" label="Email">
+            <input id="email" type="email" value={email} onChange={e => setEmail(e.target.value)}
+              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              required autoComplete="email" autoFocus />
+          </TibFormField>
+          <TibFormError error={error} />
+          <TibSubmitButton loading={loading} className="w-full">Send reset link</TibSubmitButton>
+        </form>
+        <p className="text-center">
+          <Link to="/login" className="text-sm text-muted-foreground hover:text-foreground">
+            ← Back to sign in
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default ForgotPasswordPage;

package/src/templates/dashboard-pages/auth/index.ts

@@ -0,0 +1,10 @@
+export { LoginPage } from './login';
+export { SignupPage } from './signup';
+export { VerifyEmailPage } from './verify-email';
+export { ForgotPasswordPage } from './forgot-password';
+export { ResetPasswordPage } from './reset-password';
+export { MfaSetupPage } from './mfa-setup';
+export { MfaVerifyPage } from './mfa-verify';
+export { AcceptInvitationPage } from './accept-invitation';
+export { ChooseOrgPage } from './choose-org';
+export { SignOutPage } from './sign-out';

package/src/templates/dashboard-pages/auth/login.tsx

@@ -0,0 +1,75 @@
+import { useState } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import { signIn } from '@mettlecast/dashboard-shell';
+import { TibFormField, TibFormError, TibSubmitButton } from '@mettlecast/design-system';
+
+export function LoginPage() {
+  const navigate = useNavigate();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+    try {
+      await signIn(email, password);
+      navigate('/');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Sign in failed');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background p-4">
+      <div className="w-full max-w-md space-y-6">
+        <div>
+          <h1 className="text-2xl font-semibold tracking-tight">Sign in</h1>
+          <p className="text-sm text-muted-foreground mt-1">Enter your credentials to continue</p>
+        </div>
+        <form onSubmit={handleSubmit} className="space-y-4" noValidate>
+          <TibFormField name="email" label="Email">
+            <input
+              id="email"
+              type="email"
+              value={email}
+              onChange={e => setEmail(e.target.value)}
+              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              required
+              autoComplete="email"
+              autoFocus
+            />
+          </TibFormField>
+          <TibFormField name="password" label="Password">
+            <input
+              id="password"
+              type="password"
+              value={password}
+              onChange={e => setPassword(e.target.value)}
+              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              required
+              autoComplete="current-password"
+            />
+          </TibFormField>
+          <div className="text-right">
+            <Link to="/forgot-password" className="text-sm text-primary hover:underline underline-offset-4">
+              Forgot password?
+            </Link>
+          </div>
+          <TibFormError error={error} />
+          <TibSubmitButton loading={loading} className="w-full">Sign in</TibSubmitButton>
+        </form>
+        <p className="text-center text-sm text-muted-foreground">
+          No account?{' '}
+          <Link to="/signup" className="text-primary hover:underline underline-offset-4">Create one</Link>
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default LoginPage;

package/src/templates/dashboard-pages/auth/mfa-setup.tsx

@@ -0,0 +1,56 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useApi } from '@mettlecast/sdk';
+import { TibFormField, TibFormError, TibSubmitButton } from '@mettlecast/design-system';
+
+export function MfaSetupPage() {
+  const tib = useApi();
+  const navigate = useNavigate();
+  const [code, setCode] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const totpUri = (tib as any)?.auth?.getTotpUri?.() ?? '';
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+    try {
+      await (tib as any)?.auth?.verifyTotpSetup({ code });
+      navigate('/');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'MFA setup failed');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background p-4">
+      <div className="w-full max-w-md space-y-6">
+        <div>
+          <h1 className="text-2xl font-semibold tracking-tight">Set up two-factor authentication</h1>
+          <p className="text-sm text-muted-foreground mt-1">Scan the QR code with your authenticator app</p>
+        </div>
+        {totpUri && (
+          <div className="flex justify-center">
+            <img src={`https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=${encodeURIComponent(totpUri)}`}
+              alt="TOTP QR code" className="rounded-md border border-border" width={180} height={180} />
+          </div>
+        )}
+        <form onSubmit={handleSubmit} className="space-y-4" noValidate>
+          <TibFormField name="code" label="6-digit code">
+            <input id="code" type="text" inputMode="numeric" pattern="[0-9]{6}" value={code}
+              onChange={e => setCode(e.target.value.replace(/\D/g, '').slice(0, 6))}
+              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm tracking-widest text-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              required autoComplete="one-time-code" autoFocus maxLength={6} />
+          </TibFormField>
+          <TibFormError error={error} />
+          <TibSubmitButton loading={loading} className="w-full">Enable MFA</TibSubmitButton>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export default MfaSetupPage;