@kelpie/ui 0.1.0

package/src/pages/admin/WorkspaceSettingsPage.tsx

@@ -0,0 +1,274 @@
+import type { Workspace } from '@kelpie/schemas'
+import { useState } from 'react'
+import type { FormEvent, ReactNode } from 'react'
+import { useNavigate } from 'react-router'
+
+import { useSession } from '../../api/resources/session.ts'
+import {
+  useDeleteWorkspace,
+  useUpdateWorkspace,
+  useWorkspace,
+} from '../../api/resources/workspace.ts'
+import { PageHeader } from '../../components/PageHeader.tsx'
+import { ErrorPanel, LoadingPanel } from '../../components/QueryState.tsx'
+
+/**
+ * Workspace settings, and the one screen that can end a workspace.
+ *
+ * Ported from the mockup's Workspace page. Two differences, both because there
+ * is an API behind it now: the slug is editable and can collide, and the danger
+ * zone deletes for real, so it asks the reader to type the slug rather than
+ * clicking one button.
+ *
+ * The form saves explicitly instead of per keystroke. Every field here is
+ * workspace-wide, and the slug appears in URLs, so committing on each character
+ * would be a stream of half-typed addresses.
+ */
+
+/**
+ * The timezones the mockup offered, plus whatever this workspace already holds.
+ *
+ * A full IANA list belongs in a combo box, which is its own piece of work. An
+ * unlisted value must still survive a save, so it joins the list rather than
+ * being silently rewritten to the first option.
+ */
+const COMMON_TIMEZONES = [
+  'Australia/Sydney',
+  'Australia/Melbourne',
+  'America/Los_Angeles',
+  'America/New_York',
+  'Europe/London',
+  'UTC',
+] as const
+
+export function WorkspaceSettingsPage(): React.JSX.Element {
+  const { workspace, isLoading, error } = useWorkspace()
+
+  if (error !== null) {
+    return <ErrorPanel error={error} />
+  }
+
+  if (isLoading || workspace === undefined) {
+    return <LoadingPanel />
+  }
+
+  // Keyed on the id so the form state is rebuilt if the session moves to another
+  // workspace while this page is mounted.
+  return <WorkspaceSettingsForm key={workspace.id} workspace={workspace} />
+}
+
+function WorkspaceSettingsForm({
+  workspace,
+}: {
+  readonly workspace: Workspace
+}): React.JSX.Element {
+  const { session } = useSession()
+  const update = useUpdateWorkspace()
+  const [name, setName] = useState(workspace.name)
+  const [slug, setSlug] = useState(workspace.slug)
+  const [timezone, setTimezone] = useState(workspace.timezone)
+  const [tagline, setTagline] = useState(workspace.tagline ?? '')
+  const [oneLiner, setOneLiner] = useState(workspace.oneLiner ?? '')
+  const [saved, setSaved] = useState(false)
+
+  const canEdit = session?.role === 'owner' || session?.role === 'admin'
+  const timezones = COMMON_TIMEZONES.includes(timezone as (typeof COMMON_TIMEZONES)[number])
+    ? [...COMMON_TIMEZONES]
+    : [timezone, ...COMMON_TIMEZONES]
+
+  function save(event: FormEvent): void {
+    event.preventDefault()
+    setSaved(false)
+
+    update
+      .runAsync({
+        name: name.trim(),
+        slug: slug.trim(),
+        timezone,
+        // Empty is not blank text, it is no tagline. `null` clears the column;
+        // an empty string would store one and hand agents an empty identity.
+        tagline: tagline.trim().length === 0 ? null : tagline.trim(),
+        oneLiner: oneLiner.trim().length === 0 ? null : oneLiner.trim(),
+      })
+      .then(() => {
+        setSaved(true)
+      })
+      .catch(() => undefined)
+  }
+
+  return (
+    <div className="animate-slide-in mx-auto max-w-4xl space-y-8">
+      <PageHeader
+        title="Workspace"
+        description="Name, address, timezone, and how the company introduces itself to an agent."
+      />
+
+      <form onSubmit={save} className="space-y-4">
+        <Field label="Workspace name">
+          <input
+            value={name}
+            onChange={(event) => {
+              setName(event.target.value)
+            }}
+            required
+            disabled={!canEdit}
+            className="w-full max-w-md rounded-md border border-border bg-surface-raised px-3 py-2 text-[13px] outline-none focus:border-accent focus:ring-2 focus:ring-accent/20 disabled:opacity-60"
+          />
+        </Field>
+
+        <Field label="Slug" hint="Lowercase letters, digits, and hyphens. It appears in URLs.">
+          <input
+            value={slug}
+            onChange={(event) => {
+              setSlug(event.target.value)
+            }}
+            required
+            disabled={!canEdit}
+            className="w-full max-w-md rounded-md border border-border bg-surface-raised px-3 py-2 font-mono text-[13px] outline-none focus:border-accent focus:ring-2 focus:ring-accent/20 disabled:opacity-60"
+          />
+        </Field>
+
+        <Field label="Tagline" hint="The short identity an agent loads first.">
+          <input
+            value={tagline}
+            onChange={(event) => {
+              setTagline(event.target.value)
+            }}
+            placeholder="CRM and company brain for agent-native startups"
+            disabled={!canEdit}
+            className="w-full max-w-xl rounded-md border border-border bg-surface-raised px-3 py-2 text-[13px] outline-none focus:border-accent focus:ring-2 focus:ring-accent/20 disabled:opacity-60"
+          />
+        </Field>
+
+        <Field label="One-liner" hint="What the company does, in a sentence.">
+          <textarea
+            value={oneLiner}
+            onChange={(event) => {
+              setOneLiner(event.target.value)
+            }}
+            rows={2}
+            disabled={!canEdit}
+            className="w-full max-w-xl rounded-md border border-border bg-surface-raised px-3 py-2 text-[13px] outline-none focus:border-accent focus:ring-2 focus:ring-accent/20 disabled:opacity-60"
+          />
+        </Field>
+
+        <Field label="Timezone">
+          <select
+            value={timezone}
+            onChange={(event) => {
+              setTimezone(event.target.value)
+            }}
+            disabled={!canEdit}
+            className="w-full max-w-md rounded-md border border-border bg-surface-raised px-3 py-2 text-[13px] outline-none focus:border-accent disabled:opacity-60"
+          >
+            {timezones.map((zone) => (
+              <option key={zone} value={zone}>
+                {zone}
+              </option>
+            ))}
+          </select>
+        </Field>
+
+        {update.error !== null && (
+          <div className="max-w-xl">
+            <ErrorPanel error={update.error} />
+          </div>
+        )}
+
+        {canEdit ? (
+          <button
+            type="submit"
+            disabled={update.isPending}
+            className="rounded-md bg-accent px-3.5 py-2 text-[12px] font-semibold text-accent-fg transition hover:bg-accent-hover disabled:opacity-50"
+          >
+            {update.isPending ? 'Saving…' : saved ? 'Saved' : 'Save changes'}
+          </button>
+        ) : (
+          <p className="text-[12px] text-ink-muted">
+            Workspace settings are changed by an admin or the owner.
+          </p>
+        )}
+      </form>
+
+      {session?.role === 'owner' && <DangerZone slug={workspace.slug} />}
+    </div>
+  )
+}
+
+/**
+ * Deleting the workspace, behind the workspace's own name.
+ *
+ * Owner only, both here and in the API. The typed slug is what the request
+ * carries, so this is the same guard on both sides rather than a browser-side
+ * flourish over an endpoint that would have deleted anyway.
+ */
+function DangerZone({ slug }: { readonly slug: string }): React.JSX.Element {
+  const navigate = useNavigate()
+  const remove = useDeleteWorkspace()
+  const [confirmation, setConfirmation] = useState('')
+
+  function submit(event: FormEvent): void {
+    event.preventDefault()
+
+    remove
+      .runAsync({ slug: confirmation.trim() })
+      // Nothing left to render here: the workspace this page describes is gone,
+      // and the account is back to having none.
+      .then(() => navigate('/onboarding/workspace', { replace: true }))
+      .catch(() => undefined)
+  }
+
+  return (
+    <section className="rounded-lg border border-danger/30 bg-danger-soft p-4">
+      <h2 className="text-[13px] font-semibold text-danger">Danger zone</h2>
+      <p className="mt-1 max-w-xl text-[12px] text-ink-muted">
+        Deleting this workspace removes every CRM record, the handbook, forms, invitations, and API
+        keys it owns. Everyone loses access. This cannot be undone.
+      </p>
+      <form onSubmit={submit} className="mt-3 flex flex-wrap items-end gap-2">
+        <label className="block">
+          <span className="mb-1.5 block text-[12px] font-medium text-ink">
+            Type <span className="font-mono">{slug}</span> to confirm
+          </span>
+          <input
+            value={confirmation}
+            onChange={(event) => {
+              setConfirmation(event.target.value)
+            }}
+            className="w-56 rounded-md border border-border bg-surface-raised px-3 py-1.5 font-mono text-[12px] outline-none focus:border-danger"
+          />
+        </label>
+        <button
+          type="submit"
+          disabled={confirmation.trim() !== slug || remove.isPending}
+          className="rounded-md border border-danger bg-surface-raised px-3 py-1.5 text-[12px] font-medium text-danger transition hover:bg-danger hover:text-danger-fg disabled:opacity-40 disabled:hover:bg-surface-raised disabled:hover:text-danger"
+        >
+          {remove.isPending ? 'Deleting…' : 'Delete workspace'}
+        </button>
+      </form>
+      {remove.error !== null && (
+        <div className="mt-3 max-w-xl">
+          <ErrorPanel error={remove.error} />
+        </div>
+      )}
+    </section>
+  )
+}
+
+function Field({
+  label,
+  hint,
+  children,
+}: {
+  readonly label: string
+  readonly hint?: string
+  readonly children: ReactNode
+}): React.JSX.Element {
+  return (
+    <label className="block">
+      <span className="mb-1.5 block text-[12px] font-medium text-ink">{label}</span>
+      {children}
+      {hint !== undefined && <span className="mt-1 block text-[11px] text-ink-faint">{hint}</span>}
+    </label>
+  )
+}

package/src/pages/auth/AuthForm.tsx

@@ -0,0 +1,118 @@
+/**
+ * The controls the signed-out pages share.
+ *
+ * Seven forms across sign-in, signup, the two reset pages, and onboarding wrote
+ * the same label, input, and button markup. One copy of it here means a change
+ * to how a field looks is one edit rather than seven, and a page reads as what
+ * it asks for rather than as a wall of class names.
+ */
+
+/**
+ * Exported for the one control `TextField` cannot express: the invite row pairs
+ * an address with a role on a single line, so neither gets its own label.
+ */
+export const AUTH_INPUT_CLASS =
+  'w-full rounded-md border border-border bg-surface px-3 py-2 text-[13px] outline-none focus:border-accent focus:ring-2 focus:ring-accent/20'
+
+export interface TextFieldProps {
+  readonly label: string
+  readonly type?: 'text' | 'email' | 'password'
+  readonly value: string
+  readonly onChange: (value: string) => void
+  /** What a password manager should offer here. Always worth setting on a credential. */
+  readonly autoComplete?: string
+  readonly placeholder?: string
+  readonly hint?: string
+  readonly required?: boolean
+  /** A slug or a token: characters the reader has to be able to tell apart. */
+  readonly mono?: boolean
+}
+
+export function TextField({
+  label,
+  type = 'text',
+  value,
+  onChange,
+  autoComplete,
+  placeholder,
+  hint,
+  required = false,
+  mono = false,
+}: TextFieldProps): React.JSX.Element {
+  return (
+    <label className="block">
+      <span className="mb-1.5 block text-[12px] font-medium text-ink">{label}</span>
+      <input
+        type={type}
+        value={value}
+        onChange={(event) => {
+          onChange(event.target.value)
+        }}
+        autoComplete={autoComplete}
+        placeholder={placeholder}
+        required={required}
+        className={mono ? `${AUTH_INPUT_CLASS} font-mono` : AUTH_INPUT_CLASS}
+      />
+      {hint !== undefined && <span className="mt-1 block text-[11px] text-ink-faint">{hint}</span>}
+    </label>
+  )
+}
+
+export interface SubmitButtonProps {
+  readonly label: string
+  /** Shown while the request is in flight, so the button says what is happening. */
+  readonly pendingLabel: string
+  readonly isPending: boolean
+}
+
+const PRIMARY_CLASS =
+  'w-full rounded-md bg-accent px-3.5 py-2 text-[12px] font-semibold text-accent-fg transition hover:bg-accent-hover disabled:opacity-50'
+
+export function SubmitButton({
+  label,
+  pendingLabel,
+  isPending,
+}: SubmitButtonProps): React.JSX.Element {
+  return (
+    <button type="submit" disabled={isPending} className={PRIMARY_CLASS}>
+      {isPending ? pendingLabel : label}
+    </button>
+  )
+}
+
+/** The same button where there is no form to submit, only somewhere to go next. */
+export function PrimaryButton({
+  label,
+  onClick,
+}: {
+  readonly label: string
+  readonly onClick: () => void
+}): React.JSX.Element {
+  return (
+    <button type="button" onClick={onClick} className={PRIMARY_CLASS}>
+      {label}
+    </button>
+  )
+}
+
+/** The same button as a plain action: skipping a step, or finishing one. */
+export function SecondaryButton({
+  label,
+  onClick,
+  disabled = false,
+}: {
+  readonly label: string
+  readonly onClick: () => void
+  readonly disabled?: boolean
+}): React.JSX.Element {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      className="w-full rounded-md border border-border bg-surface px-3.5 py-2 text-[12px] font-medium text-ink-muted transition hover:bg-surface-raised disabled:opacity-50"
+    >
+      {label}
+    </button>
+  )
+}

package/src/pages/auth/AuthLayout.tsx

@@ -0,0 +1,74 @@
+import type { ReactNode } from 'react'
+import { Link } from 'react-router'
+
+/**
+ * The centred card every signed-out page sits in: sign in, signup, the two
+ * password-reset pages, and the three onboarding steps.
+ *
+ * `step` is what makes it an onboarding page. Onboarding is a sequence somebody
+ * is part-way through, and a card that does not say where they are in it turns
+ * three screens into three unrelated forms.
+ */
+
+/** Onboarding, per `onboarding.md`: workspace, invites, handbook. */
+const ONBOARDING_STEPS = [1, 2, 3] as const
+
+export type OnboardingStep = (typeof ONBOARDING_STEPS)[number]
+
+export interface AuthLayoutProps {
+  readonly title: string
+  readonly description?: string
+  /** Which onboarding step this is. Draws the progress bar and widens the card. */
+  readonly step?: OnboardingStep
+  readonly children: ReactNode
+  /** Links below the form: the way back, or the other way in. */
+  readonly footer?: ReactNode
+}
+
+export function AuthLayout({
+  title,
+  description,
+  step,
+  children,
+  footer,
+}: AuthLayoutProps): React.JSX.Element {
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center bg-surface px-4 py-12">
+      <Link to="/login" className="mb-8 text-[20px] font-semibold tracking-tight text-ink">
+        Kelpie
+      </Link>
+      <div
+        className={`w-full animate-fade-in rounded-md border border-border p-6 ${
+          step === undefined ? 'max-w-sm' : 'max-w-md'
+        }`}
+      >
+        {step !== undefined && <StepProgress step={step} />}
+        <h1 className="text-[18px] font-semibold tracking-tight text-ink">{title}</h1>
+        {description !== undefined && (
+          <p className="mt-1 text-[13px] text-ink-muted">{description}</p>
+        )}
+        {children}
+        {footer !== undefined && <div className="mt-4 text-center text-[12px]">{footer}</div>}
+      </div>
+    </div>
+  )
+}
+
+function StepProgress({ step }: { readonly step: OnboardingStep }): React.JSX.Element {
+  return (
+    <>
+      <div className="mb-4 flex items-center gap-2">
+        {ONBOARDING_STEPS.map((each) => (
+          <div
+            key={each}
+            aria-hidden
+            className={`h-1.5 flex-1 rounded-full ${each <= step ? 'bg-accent' : 'bg-border'}`}
+          />
+        ))}
+      </div>
+      <p className="mb-1 text-[11px] font-medium tracking-wide text-ink-faint uppercase">
+        Step {step} of {ONBOARDING_STEPS.length}
+      </p>
+    </>
+  )
+}

package/src/pages/auth/ForgotPasswordPage.tsx

@@ -0,0 +1,80 @@
+import { useState } from 'react'
+import type { FormEvent } from 'react'
+import { Link } from 'react-router'
+
+import { resetUrlTemplate, useRequestPasswordReset } from '../../api/resources/session.ts'
+import { ErrorPanel } from '../../components/QueryState.tsx'
+import { SubmitButton, TextField } from './AuthForm.tsx'
+import { AuthLayout } from './AuthLayout.tsx'
+
+/**
+ * Asking for a reset link, against `POST /v1/auth/password-reset`.
+ *
+ * The endpoint answers `202` whether or not the address is registered, and this
+ * page has to answer the same way. Saying "no account with that address" would
+ * make the form an account-existence oracle, which is the whole reason the
+ * service refuses to tell.
+ *
+ * So the confirmation is conditional: *if* an account exists. It is not a
+ * hedge, it is the only thing the browser actually knows.
+ */
+export function ForgotPasswordPage(): React.JSX.Element {
+  const request = useRequestPasswordReset()
+  const [email, setEmail] = useState('')
+  const [sentTo, setSentTo] = useState<string | null>(null)
+
+  function submit(event: FormEvent): void {
+    event.preventDefault()
+
+    const address = email.trim()
+
+    request
+      .runAsync({ email: address, resetUrlTemplate: resetUrlTemplate(window.location.origin) })
+      .then(() => {
+        setSentTo(address)
+      })
+      .catch(() => undefined)
+  }
+
+  const backToSignIn = (
+    <Link to="/login" className="font-medium text-accent hover:underline">
+      Back to sign in
+    </Link>
+  )
+
+  if (sentTo !== null) {
+    return (
+      <AuthLayout title="Check your email" footer={backToSignIn}>
+        <p className="mt-4 text-[13px] text-ink-muted">
+          If an account exists for <span className="font-medium text-ink">{sentTo}</span>, a reset
+          link is on its way. The link expires, so use it soon.
+        </p>
+      </AuthLayout>
+    )
+  }
+
+  return (
+    <AuthLayout
+      title="Reset password"
+      description="Enter your email and we will send you a link."
+      footer={backToSignIn}
+    >
+      <form onSubmit={submit} className="mt-5 space-y-3">
+        <TextField
+          label="Email"
+          type="email"
+          value={email}
+          onChange={setEmail}
+          autoComplete="email"
+          required
+        />
+        {request.error !== null && <ErrorPanel error={request.error} />}
+        <SubmitButton
+          label="Send reset link"
+          pendingLabel="Sending…"
+          isPending={request.isPending}
+        />
+      </form>
+    </AuthLayout>
+  )
+}

package/src/pages/auth/JoinPage.tsx

@@ -0,0 +1,85 @@
+import { Link, Navigate, useNavigate, useSearchParams } from 'react-router'
+
+import { useAcceptInvite, useSession } from '../../api/resources/session.ts'
+import { ErrorPanel, LoadingPanel } from '../../components/QueryState.tsx'
+import { AuthLayout } from './AuthLayout.tsx'
+
+/**
+ * Where an invitation email lands: `/join?token=…`.
+ *
+ * Accepting needs a signed-in account, because the invitation adds *somebody* to
+ * the workspace and the token does not say who. An invitee who is signed out is
+ * sent to sign in with the token kept in the URL they come back to.
+ *
+ * Accepting is not automatic on load. It is a write that changes which workspace
+ * the session is in, so it waits for the person to press the button.
+ */
+export function JoinPage(): React.JSX.Element {
+  const navigate = useNavigate()
+  const [searchParameters] = useSearchParams()
+  const token = searchParameters.get('token') ?? ''
+  const { isLoading, isSignedOut, error } = useSession()
+  const accept = useAcceptInvite()
+
+  if (token.length === 0) {
+    return (
+      <AuthLayout title="This link is incomplete" description="It carries no invitation token.">
+        <p className="mt-4 text-[13px] text-ink-muted">
+          Ask whoever invited you to send it again from the workspace's Team page.
+        </p>
+      </AuthLayout>
+    )
+  }
+
+  // The token rides along so signing in comes back here rather than to the CRM.
+  const signInHere = `/login?next=${encodeURIComponent(`/join?token=${token}`)}`
+
+  if (isSignedOut) {
+    return <Navigate to={signInHere} replace />
+  }
+
+  if (error !== null) {
+    return (
+      <AuthLayout title="Join a workspace">
+        <div className="mt-4">
+          <ErrorPanel error={error} />
+        </div>
+      </AuthLayout>
+    )
+  }
+
+  if (isLoading) {
+    return <LoadingPanel />
+  }
+
+  return (
+    <AuthLayout
+      title="Join a workspace"
+      description="You have been invited. Accepting adds this account to it."
+    >
+      <div className="mt-5 space-y-3">
+        {accept.error !== null && <ErrorPanel error={accept.error} />}
+        <button
+          type="button"
+          disabled={accept.isPending}
+          onClick={() => {
+            accept
+              .runAsync({ token })
+              .then(() => navigate('/dashboard', { replace: true }))
+              .catch(() => undefined)
+          }}
+          className="w-full rounded-md bg-accent px-3.5 py-2 text-[12px] font-semibold text-accent-fg transition hover:bg-accent-hover disabled:opacity-50"
+        >
+          {accept.isPending ? 'Joining…' : 'Accept invitation'}
+        </button>
+        <p className="text-[11px] text-ink-faint">
+          Signed in as the wrong account?{' '}
+          <Link to={signInHere} className="text-accent">
+            Sign in as somebody else
+          </Link>
+          .
+        </p>
+      </div>
+    </AuthLayout>
+  )
+}