@kelpie/ui 0.11.0 → 0.13.0

package/src/pages/RaiseDetail.tsx

@@ -11,6 +11,7 @@ import {
   useConvertPipelineRecord,
 } from '../api/resources/conversions.ts'
 import { useMembers } from '../api/resources/members.ts'
+import { useModuleEnabled } from '../api/resources/moduleSettings.ts'
 import { usePeople } from '../api/resources/people.ts'
 import { usePipelineStages } from '../api/resources/pipelineStages.ts'
 import { useRecordPlanItems } from '../api/resources/planItems.ts'
@@ -27,6 +28,7 @@ import { CustomFieldsPanel } from '../components/CustomFieldsPanel.tsx'
 import { useHasCustomFields } from '../components/useHasCustomFields.ts'
 import { InlineEdit } from '../components/InlineEdit.tsx'
 import { ListsPanel } from '../components/ListsPanel.tsx'
+import { LinkedEventsPanel } from '../components/LinkedEventsPanel.tsx'
 import { NotesPanel } from '../components/NotesPanel.tsx'
 import { PlanAttention } from '../components/PlanAttention.tsx'
 import { PlanPanel } from '../components/PlanPanel.tsx'
@@ -69,6 +71,7 @@ export function RaiseDetail(): React.JSX.Element {
   const deleteRaise = useDeleteRaise()
   const moduleTabs = inSlotOrder(useRecordTabs('raise'))
   const hasCustomFields = useHasCustomFields('raise')
+  const eventsEnabled = useModuleEnabled('events')
   const [activeTab, setActiveTab] = useState('overview')
   const [showConvert, setShowConvert] = useState(false)
 
@@ -92,6 +95,7 @@ export function RaiseDetail(): React.JSX.Element {
     { id: 'notes', label: 'Notes' },
     { id: 'decisions', label: 'Decisions' },
     { id: 'lists', label: 'Lists' },
+    ...(eventsEnabled ? [{ id: 'events', label: 'Events' }] : []),
     ...moduleTabs.map((tab) => ({ id: tab.id, label: tab.label })),
   ]
   const active = tabs.some((tab) => tab.id === activeTab) ? activeTab : 'overview'
@@ -162,6 +166,7 @@ export function RaiseDetail(): React.JSX.Element {
             {active === 'notes' && <NotesPanel targetType="raise" targetId={record.id} />}
             {active === 'decisions' && <DecisionsPanel targetType="raise" targetId={record.id} />}
             {active === 'lists' && <ListsPanel targetType="raise" targetId={record.id} />}
+            {active === 'events' && <LinkedEventsPanel targetType="raise" targetId={record.id} />}
             {moduleTab?.render({ objectType: 'raise', recordId: record.id })}
           </RecordTabs>
         </div>

package/src/pages/RoleDetail.tsx

@@ -7,6 +7,7 @@ import { Link, useNavigate, useParams } from 'react-router'
 import { usePatch } from '../api/resource.ts'
 import type { PatchResult } from '../api/resource.ts'
 import { useCandidates, useCreateCandidate, useDeleteCandidate } from '../api/resources/candidates.ts'
+import { useModuleEnabled } from '../api/resources/moduleSettings.ts'
 import { useCreateNote, useDeleteNote, useUpdateNote } from '../api/resources/notes.ts'
 import { useCreatePerson, usePeople } from '../api/resources/people.ts'
 import { useDeleteRole, useRole, useUpdateRole } from '../api/resources/roles.ts'
@@ -15,6 +16,7 @@ import { Chip } from '../components/Chip.tsx'
 import { DeleteRecord } from '../components/DeleteRecord.tsx'
 import { EntitySearch } from '../components/EntitySearch.tsx'
 import { InlineEdit } from '../components/InlineEdit.tsx'
+import { LinkedEventsPanel } from '../components/LinkedEventsPanel.tsx'
 import { Paginator } from '../components/Paginator.tsx'
 import { ErrorPanel, LoadingPanel, NotFoundPanel } from '../components/QueryState.tsx'
 import { SectionHeader } from '../components/SectionHeader.tsx'
@@ -46,6 +48,7 @@ export function RoleDetail(): React.JSX.Element {
   const navigate = useNavigate()
   const { record, isLoading, isNotFound, error } = useRole(id)
   const deleteRole = useDeleteRole()
+  const eventsEnabled = useModuleEnabled('events')
 
   if (isNotFound) {
     return <NotFoundPanel label="Role" backTo="/hiring" />
@@ -89,6 +92,11 @@ export function RoleDetail(): React.JSX.Element {
       </div>
 
       <RoleCandidates role={record} />
+      {eventsEnabled && (
+        <div className="mt-8">
+          <LinkedEventsPanel targetType="role" targetId={record.id} />
+        </div>
+      )}
     </div>
   )
 }

package/src/pages/SearchPage.tsx

@@ -24,6 +24,7 @@ const COLLECTIONS: Readonly<Record<SearchCollection, { label: string; path: (id:
   opportunity: { label: 'Opportunities', path: (id) => `/opportunities/${id}` },
   raise: { label: 'Fundraising', path: (id) => `/fundraising/${id}` },
   partnership: { label: 'Partnerships', path: (id) => `/partnerships/${id}` },
+  event: { label: 'Events', path: (id) => `/events/${id}` },
   // Decisions have no detail page of their own, in the mockup or here. The global
   // list is where one is read.
   decision: { label: 'Decisions', path: () => '/decisions' },
@@ -39,7 +40,7 @@ export function SearchPage(): React.JSX.Element {
       <div className="animate-fade-in py-16 text-center">
         <p className="text-[15px] font-medium text-ink">Search Kelpie</p>
         <p className="mt-1 text-[13px] text-ink-muted">
-          Find people, companies, deals, raises, decisions, and handbook pages.
+          Find people, companies, deals, events, raises, decisions, and handbook pages.
         </p>
       </div>
     )

package/src/pages/account/PreferencesPage.tsx

@@ -8,9 +8,9 @@ import {
   useTheme,
   useUpdateAccountPreferences,
 } from '../../api/resources/account.ts'
-import { EntitySearch } from '../../components/EntitySearch.tsx'
 import { PageHeader } from '../../components/PageHeader.tsx'
 import { ErrorPanel, LoadingPanel } from '../../components/QueryState.tsx'
+import { TimezoneSearch } from '../../components/TimezoneSearch.tsx'
 import { Field } from './Field.tsx'
 
 /**
@@ -27,31 +27,6 @@ const THEME_LABELS: Readonly<Record<ThemePreference, string>> = {
   dark: 'Dark',
 }
 
-/**
- * Every zone this runtime's ICU knows, matching what the server's
- * `timezoneSchema` will accept. Falls back to the zones the mockup offered if
- * `Intl.supportedValuesOf` is missing, for a browser old enough to lack it.
- *
- * `UTC` is prepended because `supportedValuesOf` omits it in some engines even
- * though ECMA-402 guarantees `Intl.DateTimeFormat` accepts it as a zone name.
- * Without this, a very common choice would be searchable only by accident of
- * already being the stored value.
- */
-const ALL_TIMEZONES: readonly string[] = (() => {
-  try {
-    return ['UTC', ...Intl.supportedValuesOf('timeZone')]
-  } catch {
-    return [
-      'UTC',
-      'Australia/Sydney',
-      'Australia/Melbourne',
-      'America/Los_Angeles',
-      'America/New_York',
-      'Europe/London',
-    ]
-  }
-})()
-
 export function PreferencesPage(): React.JSX.Element {
   const { preferences, isLoading, error } = useAccountPreferences()
 
@@ -79,8 +54,6 @@ function PreferencesForm({
   const [productUpdates, setProductUpdates] = useState(preferences.productUpdates)
   const [saved, setSaved] = useState(false)
 
-  const zones = ALL_TIMEZONES.includes(timezone) ? ALL_TIMEZONES : [timezone, ...ALL_TIMEZONES]
-
   function save(event: FormEvent): void {
     event.preventDefault()
     setSaved(false)
@@ -135,15 +108,7 @@ function PreferencesForm({
             label="Timezone"
             hint="Stored on your account. Dates across Kelpie use this zone."
           >
-            <EntitySearch
-              options={zones.map((zone) => ({ id: zone, label: zone }))}
-              value={timezone}
-              onChange={setTimezone}
-              placeholder="Search time zones…"
-              limit={20}
-              required
-              size="md"
-            />
+            <TimezoneSearch value={timezone} onChange={setTimezone} required size="md" />
           </Field>
         </div>
 

package/src/pages/account/SecurityPage.tsx

@@ -88,7 +88,8 @@ function ChangePasswordForm(): React.JSX.Element {
     <form onSubmit={submit} className="space-y-3">
       <h2 className="text-[14px] font-semibold text-ink">Change password</h2>
       <p className="max-w-md text-[12px] text-ink-muted">
-        Changing your password signs you out everywhere except this browser.
+        Changing your password signs you out everywhere except this browser. If you have never set
+        one, use <span className="font-medium text-ink">Forgot password</span> on the sign-in page.
       </p>
 
       <label className="block max-w-md">
@@ -216,6 +217,10 @@ function SessionRow({
       <td className="px-4 py-3">
         <div className="font-medium break-all text-ink">{session.device ?? 'Unknown device'}</div>
         {session.current && <span className="text-[11px] font-medium text-success">This device</span>}
+        {/* Null for a password sign-in, which is the ordinary case and needs no label. */}
+        {session.signedInVia !== null && (
+          <div className="text-[11px] text-ink-faint">via {session.signedInVia}</div>
+        )}
       </td>
       {/* Always unknown today: the service records the User-Agent and nothing
           derives a location from the request. The column stays because the field

package/src/pages/admin/DataPage.tsx

@@ -1014,17 +1014,17 @@ function messageOf(error: Error | null | undefined): string | null {
 /**
  * One button that fills the workspace with a small demo fixture.
  *
- * The endpoint refuses on a workspace that already has data, so the button
- * never doubles the seed and the "already has data" answer surfaces here as
- * a plain error line.
+ * The first click opens a warning. Confirm is what POSTs. Existing records
+ * stay; a sample email or domain that is already present fails the install.
  */
 function SampleDataSection(): ReactNode {
   const { session } = useSession()
   const workspaceId = session?.workspaceId ?? null
   const install = useInstallSampleData()
   const [counts, setCounts] = useState<SampleDataCounts | null>(null)
+  const [confirming, setConfirming] = useState(false)
 
-  function onInstall(): void {
+  function onConfirm(): void {
     if (workspaceId === null) {
       return
     }
@@ -1033,6 +1033,7 @@ function SampleDataSection(): ReactNode {
       .runAsync({ workspaceId })
       .then((result) => {
         setCounts(result)
+        setConfirming(false)
       })
       .catch(() => undefined)
   }
@@ -1044,32 +1045,73 @@ function SampleDataSection(): ReactNode {
       <div>
         <h2 className="text-[15px] font-semibold text-ink">Install sample data</h2>
         <p className="mt-1 text-[13px] text-ink-muted">
-          A small set of companies, people, and deals so a fresh workspace has something
-          to look at. Refuses if this workspace already has CRM data.
+          A small set of companies, people, deals, and events so a workspace has something to look
+          at. Existing records stay. This page asks before it writes.
         </p>
       </div>
-      <button
-        type="button"
-        onClick={onInstall}
-        disabled={install.isPending || workspaceId === null || counts !== null}
-        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"
-      >
-        {counts !== null
-          ? 'Installed'
-          : install.isPending
-            ? 'Installing…'
-            : 'Install sample data'}
-      </button>
+      {counts !== null ? (
+        <button
+          type="button"
+          disabled
+          className="rounded-md bg-accent px-3.5 py-2 text-[12px] font-semibold text-accent-fg opacity-50"
+        >
+          Installed
+        </button>
+      ) : confirming ? (
+        <div className="rounded-md border border-warning bg-warning-soft p-3 text-[13px] text-ink">
+          <p>
+            This adds sample companies, people, and other CRM records. Existing records are not
+            removed. If sample emails or domains are already present, the install fails.
+          </p>
+          {failure === null ? null : (
+            <p role="alert" className="mt-2 text-[12px] font-medium text-danger">
+              {failure}
+            </p>
+          )}
+          <div className="mt-2 flex justify-end gap-2">
+            <button
+              type="button"
+              onClick={() => {
+                setConfirming(false)
+              }}
+              disabled={install.isPending}
+              className="rounded-md border border-border px-3 py-1 text-[12px] hover:bg-surface"
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              onClick={onConfirm}
+              disabled={install.isPending || workspaceId === null}
+              className="rounded-md bg-accent px-3 py-1 text-[12px] font-semibold text-accent-fg hover:bg-accent-hover disabled:opacity-50"
+            >
+              {install.isPending ? 'Installing…' : 'Install sample data'}
+            </button>
+          </div>
+        </div>
+      ) : (
+        <button
+          type="button"
+          onClick={() => {
+            setConfirming(true)
+          }}
+          disabled={workspaceId === null}
+          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"
+        >
+          Install sample data
+        </button>
+      )}
       {counts !== null ? (
         <p className="text-[12px] text-ink-muted">
           Added {counts.companies} companies, {counts.people} people, {counts.positions}{' '}
           positions, {counts.deals} deals, {counts.opportunities} opportunities,{' '}
           {counts.raises} raises, {counts.partnerships} partnerships, {counts.enquiries}{' '}
-          enquiries, {counts.roles} roles, {counts.candidates} candidates,{' '}
-          {counts.planItems} plan items, and {counts.notes} notes.
+          enquiries, {counts.roles} roles, {counts.candidates} candidates, {counts.events}{' '}
+          events, {counts.attendances} attendances, {counts.planItems} plan items, and{' '}
+          {counts.notes} notes.
         </p>
       ) : null}
-      {failure === null ? null : (
+      {confirming || failure === null ? null : (
         <p role="alert" className="text-[12px] font-medium text-danger">
           {failure}
         </p>

package/src/pages/admin/FieldsPage.tsx

@@ -52,7 +52,7 @@ export function FieldsPage(): React.JSX.Element {
     <div className="animate-slide-in mx-auto max-w-4xl space-y-6">
       <PageHeader
         title="Custom fields"
-        description="Add workspace-defined fields to the six main record types. Values on records go through the same API the UI uses."
+        description="Add workspace-defined fields to People, Companies, pipeline records, and Events. Values on records go through the same API the UI uses."
       />
       {isAdmin ? <FieldsAdmin /> : <MemberNotice />}
     </div>

package/src/pages/admin/ModulesPage.tsx

@@ -23,6 +23,7 @@ const MODULE_LABELS: Readonly<Record<string, string>> = {
   opportunities: 'Opportunities',
   partnerships: 'Partnerships',
   raises: 'Fundraising',
+  events: 'Events',
   hiring: 'Hiring',
   handbook: 'Handbook',
   forms: 'Forms',

package/src/pages/admin/WorkspaceSettingsPage.tsx

@@ -18,6 +18,7 @@ import { EntitySearch } from '../../components/EntitySearch.tsx'
 import type { SearchOption } from '../../components/EntitySearch.tsx'
 import { PageHeader } from '../../components/PageHeader.tsx'
 import { ErrorPanel, LoadingPanel } from '../../components/QueryState.tsx'
+import { TimezoneSearch } from '../../components/TimezoneSearch.tsx'
 
 /**
  * Workspace settings, and the one screen that can end a workspace.
@@ -32,22 +33,6 @@ import { ErrorPanel, LoadingPanel } from '../../components/QueryState.tsx'
  * 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()
 
@@ -77,9 +62,6 @@ function WorkspaceSettingsForm({
   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()
@@ -130,20 +112,15 @@ function WorkspaceSettingsForm({
         </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>
+          <div className="max-w-md">
+            <TimezoneSearch
+              value={timezone}
+              onChange={setTimezone}
+              required
+              disabled={!canEdit}
+              size="md"
+            />
+          </div>
         </Field>
 
         {update.error !== null && (

package/src/pages/auth/AuthForm.tsx

@@ -116,3 +116,41 @@ export function SecondaryButton({
     </button>
   )
 }
+
+/**
+ * A labelled rule, for a module separating its own buttons from the password
+ * form above them. Core never renders one itself; see `AuthMethods`.
+ */
+export function AuthDivider({ label = 'or' }: { readonly label?: string }): React.JSX.Element {
+  return (
+    <div className="flex items-center gap-3 py-1">
+      <span className="h-px flex-1 bg-border" />
+      <span className="text-[11px] text-ink-faint">{label}</span>
+      <span className="h-px flex-1 bg-border" />
+    </div>
+  )
+}
+
+/**
+ * The secondary button as a link.
+ *
+ * A plain anchor, not a router link: a sign-in method leaves the app for its
+ * provider, and the destination is a server route the SPA router knows nothing
+ * about.
+ */
+export function AuthLinkButton({
+  label,
+  href,
+}: {
+  readonly label: string
+  readonly href: string
+}): React.JSX.Element {
+  return (
+    <a
+      href={href}
+      className="block w-full rounded-md border border-border bg-surface px-3.5 py-2 text-center text-[12px] font-medium text-ink-muted transition hover:bg-surface-raised"
+    >
+      {label}
+    </a>
+  )
+}

package/src/pages/auth/AuthLayout.tsx

@@ -1,17 +1,20 @@
 import type { ReactNode } from 'react'
 import { Link } from 'react-router'
 
+import { RegionSwitcher } from './RegionSwitcher.tsx'
+
 /**
  * The centred card every signed-out page sits in: sign in, signup, the two
- * password-reset pages, and the three onboarding steps.
+ * password-reset pages, and the five 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.
+ * five screens into five unrelated forms. The region switcher stays off
+ * those steps: a session already exists on this origin.
  */
 
-/** Onboarding, per `onboarding.md`: workspace, invites, handbook. */
-const ONBOARDING_STEPS = [1, 2, 3] as const
+/** Onboarding, per `onboarding.md`: workspace, organisation, modules, invites, handbook. */
+const ONBOARDING_STEPS = [1, 2, 3, 4, 5] as const
 
 export type OnboardingStep = (typeof ONBOARDING_STEPS)[number]
 
@@ -50,6 +53,7 @@ export function AuthLayout({
         {children}
         {footer !== undefined && <div className="mt-4 text-center text-[12px]">{footer}</div>}
       </div>
+      {step === undefined && <RegionSwitcher />}
     </div>
   )
 }

package/src/pages/auth/AuthMethods.tsx

@@ -0,0 +1,29 @@
+import { Fragment } from 'react'
+
+import { useAuthMethods } from '../../registry/context.ts'
+import type { AuthMethodContext } from '../../registry/contributions.ts'
+
+/**
+ * The `auth.methods` slot, rendered by the signed-out pages beside their form.
+ *
+ * Nothing is drawn around the contributions: no divider, no "or" rule. Whether
+ * a module has anything to show is decided at run time (a sign-in module with
+ * no provider configured renders nothing), so core framing would leave a
+ * heading over an empty space. A module that draws buttons draws its own
+ * divider with `AuthDivider`.
+ */
+export function AuthMethods({ intent, next }: AuthMethodContext): React.JSX.Element | null {
+  const methods = useAuthMethods()
+
+  if (methods.length === 0) {
+    return null
+  }
+
+  return (
+    <div className="mt-4 space-y-2">
+      {methods.map((method) => (
+        <Fragment key={method.id}>{method.render({ intent, next })}</Fragment>
+      ))}
+    </div>
+  )
+}

package/src/pages/auth/RegionSwitcher.tsx

@@ -0,0 +1,56 @@
+import type { ChangeEvent } from 'react'
+
+import { usePublicConfig } from '../../api/resources/publicConfig.ts'
+import { regionHref } from './regionHref.ts'
+
+/**
+ * A region picker for signed-out pages.
+ *
+ * Hidden unless public config lists two or more origins. Selecting another
+ * region leaves this origin: the session cookie is host-scoped, so the
+ * browser has to load the other host's login page. Path, query, and hash
+ * stay, so `/login?next=` and invite tokens survive the hop.
+ */
+
+export function RegionSwitcher(): React.JSX.Element | null {
+  const { config } = usePublicConfig()
+  const regions = config?.regions ?? []
+
+  if (regions.length < 2) {
+    return null
+  }
+
+  const current = regions.find((region) => region.origin === window.location.origin)
+
+  function change(event: ChangeEvent<HTMLSelectElement>): void {
+    const selected = regions.find((region) => region.id === event.target.value)
+
+    if (selected === undefined || selected.origin === window.location.origin) {
+      return
+    }
+
+    window.location.assign(regionHref(selected.origin, window.location))
+  }
+
+  return (
+    <label className="mt-6 block w-full max-w-sm">
+      <span className="mb-1.5 block text-[12px] font-medium text-ink">Region</span>
+      <select
+        className="w-full rounded-md border border-border bg-transparent px-2 py-1 text-[13px] outline-none focus:border-accent"
+        value={current?.id ?? ''}
+        onChange={change}
+      >
+        {current === undefined && (
+          <option value="" disabled>
+            Select a region
+          </option>
+        )}
+        {regions.map((region) => (
+          <option key={region.id} value={region.id}>
+            {region.label}
+          </option>
+        ))}
+      </select>
+    </label>
+  )
+}

package/src/pages/auth/SignInPage.tsx

@@ -2,10 +2,13 @@ import { useState } from 'react'
 import type { FormEvent } from 'react'
 import { Link, useNavigate, useSearchParams } from 'react-router'
 
+import { usePublicConfig } from '../../api/resources/publicConfig.ts'
 import { useLogIn } from '../../api/resources/session.ts'
 import { ErrorPanel } from '../../components/QueryState.tsx'
 import { SubmitButton, TextField } from './AuthForm.tsx'
 import { AuthLayout } from './AuthLayout.tsx'
+import { AuthMethods } from './AuthMethods.tsx'
+import { safeNext } from './nextPath.ts'
 
 /**
  * Sign in, against `POST /v1/auth/login`.
@@ -15,18 +18,11 @@ import { AuthLayout } from './AuthLayout.tsx'
  * People with the invitation still unaccepted.
  */
 
-/**
- * Only a path within this app. An absolute URL in `?next=` would turn the
- * sign-in form into an open redirect.
- */
-function safeNext(value: string | null): string {
-  return value !== null && value.startsWith('/') && !value.startsWith('//') ? value : '/dashboard'
-}
-
 export function SignInPage(): React.JSX.Element {
   const navigate = useNavigate()
   const [searchParameters] = useSearchParams()
   const logIn = useLogIn()
+  const { config } = usePublicConfig()
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
 
@@ -49,12 +45,14 @@ export function SignInPage(): React.JSX.Element {
           <Link to="/forgot-password" className="font-medium text-accent hover:underline">
             Forgot password?
           </Link>
-          <span className="text-ink-muted">
-            No account?{' '}
-            <Link to="/signup" className="font-medium text-accent hover:underline">
-              Sign up
-            </Link>
-          </span>
+          {config?.signupsEnabled !== false && (
+            <span className="text-ink-muted">
+              No account?{' '}
+              <Link to="/signup" className="font-medium text-accent hover:underline">
+                Sign up
+              </Link>
+            </span>
+          )}
         </div>
       }
     >
@@ -78,6 +76,7 @@ export function SignInPage(): React.JSX.Element {
         {logIn.error !== null && <ErrorPanel error={logIn.error} />}
         <SubmitButton label="Sign in" pendingLabel="Signing in…" isPending={logIn.isPending} />
       </form>
+      <AuthMethods intent="login" next={next} />
     </AuthLayout>
   )
 }