@owlmeans/web-panel 0.1.18-rc.9 → 0.1.18

package/src/components/login/credit.tsx

@@ -0,0 +1,33 @@
+import type { FC } from 'react'
+import { cn } from '../../@/lib/utils.js'
+import { OWLMEANS_URL } from './consts.js'
+import type { LoginCreditProps } from './types.js'
+
+/**
+ * The line at the bottom of a sign-in screen.
+ *
+ * Two halves, and each may stand alone: the platform credit, and who the application belongs to.
+ * A generated application shows both — "Powered by OwlMeans" beside its own product and
+ * organization — and an application whose owner has paid to drop the credit shows only the second.
+ * Rendering nothing at all is also correct, for an app that is neither.
+ */
+export const LoginCredit: FC<LoginCreditProps> = ({ model, translate, className }) => {
+  if (!model.poweredBy && model.line == null) {
+    return null
+  }
+
+  return <p
+    data-login-credit
+    className={cn('text-center text-xs text-muted-foreground', className)}
+  >
+    {model.poweredBy && <a
+      data-login-powered
+      href={OWLMEANS_URL} target="_blank" rel="noopener noreferrer"
+      className="underline-offset-4 hover:text-foreground hover:underline"
+    >
+      {translate('login.credit.powered', 'Powered by OwlMeans')}
+    </a>}
+    {model.poweredBy && model.line != null && <span aria-hidden="true"> · </span>}
+    {model.line != null && <span>{model.line}</span>}
+  </p>
+}

package/src/components/login/i18n/be.json

@@ -0,0 +1,10 @@
+{
+  "login": {
+    "provider": {
+      "title": "Уваход у {{product}}",
+      "top": "Гэтую праграму размяшчае {{operator}} ад імя {{product}}. Для ўваходу выкарыстоўваецца {{provider}}.",
+      "inline": "Уваход забяспечвае {{provider}} ад імя {{product}}.",
+      "more": "Падрабязней"
+    }
+  }
+}

package/src/components/login/i18n/de.json

@@ -0,0 +1,10 @@
+{
+  "login": {
+    "provider": {
+      "title": "Bei {{product}} anmelden",
+      "top": "Diese App wird von {{operator}} im Auftrag von {{product}} gehostet. Sie melden sich mit {{provider}} an.",
+      "inline": "Die Anmeldung stellt {{provider}} im Auftrag von {{product}} bereit.",
+      "more": "Weitere Informationen"
+    }
+  }
+}

package/src/components/login/i18n/en.json

@@ -0,0 +1,10 @@
+{
+  "login": {
+    "provider": {
+      "title": "Sign in to {{product}}",
+      "top": "This app is hosted by {{operator}} on behalf of {{product}}. You sign in with {{provider}}.",
+      "inline": "Sign-in is provided by {{provider}} on behalf of {{product}}.",
+      "more": "More information"
+    }
+  }
+}

package/src/components/login/i18n/es.json

@@ -0,0 +1,10 @@
+{
+  "login": {
+    "provider": {
+      "title": "Iniciar sesión en {{product}}",
+      "top": "Esta aplicación está alojada por {{operator}} en nombre de {{product}}. Inicias sesión con {{provider}}.",
+      "inline": "El inicio de sesión lo proporciona {{provider}} en nombre de {{product}}.",
+      "more": "Más información"
+    }
+  }
+}

package/src/components/login/i18n/fr.json

@@ -0,0 +1,10 @@
+{
+  "login": {
+    "provider": {
+      "title": "Connexion à {{product}}",
+      "top": "Cette application est hébergée par {{operator}} pour le compte de {{product}}. Vous vous connectez avec {{provider}}.",
+      "inline": "La connexion est assurée par {{provider}} pour le compte de {{product}}.",
+      "more": "En savoir plus"
+    }
+  }
+}

package/src/components/login/i18n/pl.json

@@ -0,0 +1,10 @@
+{
+  "login": {
+    "provider": {
+      "title": "Zaloguj się do {{product}}",
+      "top": "Ta aplikacja jest hostowana przez {{operator}} w imieniu {{product}}. Logujesz się przez {{provider}}.",
+      "inline": "Logowanie zapewnia {{provider}} w imieniu {{product}}.",
+      "more": "Więcej informacji"
+    }
+  }
+}

package/src/components/login/i18n/ru.json

@@ -0,0 +1,10 @@
+{
+  "login": {
+    "provider": {
+      "title": "Вход в {{product}}",
+      "top": "Это приложение размещает {{operator}} от имени {{product}}. Для входа используется {{provider}}.",
+      "inline": "Вход обеспечивает {{provider}} от имени {{product}}.",
+      "more": "Подробнее"
+    }
+  }
+}

package/src/components/login/i18n/uk.json

@@ -0,0 +1,10 @@
+{
+  "login": {
+    "provider": {
+      "title": "Вхід до {{product}}",
+      "top": "Цей застосунок розміщує {{operator}} від імені {{product}}. Для входу використовується {{provider}}.",
+      "inline": "Вхід забезпечує {{provider}} від імені {{product}}.",
+      "more": "Докладніше"
+    }
+  }
+}

package/src/components/login/i18n.ts

@@ -0,0 +1,29 @@
+import { i18nHelper } from '@owlmeans/i18n'
+
+import en from './i18n/en.json' with { type: 'json' }
+import pl from './i18n/pl.json' with { type: 'json' }
+import ru from './i18n/ru.json' with { type: 'json' }
+import be from './i18n/be.json' with { type: 'json' }
+import uk from './i18n/uk.json' with { type: 'json' }
+import es from './i18n/es.json' with { type: 'json' }
+import de from './i18n/de.json' with { type: 'json' }
+import fr from './i18n/fr.json' with { type: 'json' }
+import { AUTH_RESOURCE } from './consts.local.js'
+
+/**
+ * The provider disclosure's copy (`login.provider.*`), registered into the SAME `auth` library
+ * resource `@owlmeans/client-auth/login` fills with the rest of the sign-in screen.
+ *
+ * `_addI18n` pushes and the bundles are merged deeply by tier and priority, so this chunk lands
+ * beside `login.title`/`login.terms.*` rather than replacing the `login` subtree. It lives here, not
+ * in `client-auth`, because only this package renders the disclosure — and `client-auth` is pinned
+ * exactly by applications that must not be pulled into a release for it.
+ */
+i18nHelper.addI18nLib('en', AUTH_RESOURCE, en)
+i18nHelper.addI18nLib('pl', AUTH_RESOURCE, pl)
+i18nHelper.addI18nLib('ru', AUTH_RESOURCE, ru)
+i18nHelper.addI18nLib('be', AUTH_RESOURCE, be)
+i18nHelper.addI18nLib('uk', AUTH_RESOURCE, uk)
+i18nHelper.addI18nLib('es', AUTH_RESOURCE, es)
+i18nHelper.addI18nLib('de', AUTH_RESOURCE, de)
+i18nHelper.addI18nLib('fr', AUTH_RESOURCE, fr)

package/src/components/login/icons.tsx

@@ -0,0 +1,39 @@
+import type { FC } from 'react'
+import { KeyRound, LogIn, Mail, ShieldCheck, Wallet } from 'lucide-react'
+
+/**
+ * Google's mark, inline.
+ *
+ * Lucide carries no brand marks, and a remote image on a sign-in screen is a third-party request
+ * before consent. Four paths cost less than either.
+ */
+const GoogleMark: FC<{ className?: string }> = ({ className }) => (
+  <svg className={className} viewBox="0 0 48 48" aria-hidden="true" role="presentation">
+    <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z" />
+    <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z" />
+    <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z" />
+    <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z" />
+  </svg>
+)
+
+const ICONS: Record<string, FC<{ className?: string }>> = {
+  google: GoogleMark,
+  key: KeyRound,
+  shield: ShieldCheck,
+  wallet: Wallet,
+  mail: Mail,
+}
+
+/**
+ * A method's icon, resolved from a NAME.
+ *
+ * The registry carries names rather than components so that `@owlmeans/client-auth` and
+ * `@owlmeans/oidc` — neither of which may depend on an icon library — can describe a method
+ * completely. An unknown name renders the generic sign-in glyph rather than nothing, because a row
+ * of buttons where one has no icon reads as a rendering fault.
+ */
+export const LoginMethodIcon: FC<{ name?: string, className?: string }> = ({ name, className }) => {
+  const Icon = (name != null ? ICONS[name] : undefined) ?? LogIn
+
+  return <Icon className={className} />
+}

package/src/components/login/index.ts

@@ -0,0 +1,11 @@
+import './i18n.js'
+
+export * from './screen.js'
+export * from './terms.js'
+export type * from './types.js'
+export * from './credit.js'
+export * from './provider.js'
+export * from './consts.js'
+export * from './icons.js'
+export * from './append.js'
+export * from './notify.js'

package/src/components/login/notify.ts

@@ -0,0 +1,48 @@
+import { LIB_NAMESPACE, i18nHelper } from '@owlmeans/i18n'
+import { i18nInstanceHelper } from '@owlmeans/client-i18n/utils'
+import type { ClientConfig } from '@owlmeans/client-context'
+import { toast } from 'sonner'
+import { LoginOutcome, type LoginNotifier } from '@owlmeans/client-auth/login'
+import { AUTH_RESOURCE, POPUP_BLOCKED_FALLBACK } from './consts.local.js'
+
+/**
+ * Translate an `auth`-library key with no mounted component to read it through.
+ *
+ * The toast this feeds fires from `registerNotifier`, which is not a render — there is no
+ * `useI18nLib('auth')` around to have already pulled the bundle into this app's i18next instance.
+ * `initI18nResource` is the same one-shot loader that hook calls internally: whichever of the two
+ * runs first merges the bundle into the SAME instance `getI18nInstance` returns (one per app,
+ * memoized), and the other later gets `null` back and no-ops with the bundle already there.
+ */
+const translateAuth = (cfg: ClientConfig, key: string, fallback: string): string => {
+  const i18n = i18nInstanceHelper.getI18nInstance(cfg)
+  const resources = i18nHelper.initI18nResource(i18n.language, AUTH_RESOURCE, LIB_NAMESPACE)
+  resources?.forEach(
+    resource => i18n.addResourceBundle(
+      i18n.language, LIB_NAMESPACE, { [AUTH_RESOURCE]: resource.data }, true, true
+    )
+  )
+
+  return i18n.t(`${AUTH_RESOURCE}.${key}`, { ns: LIB_NAMESPACE, defaultValue: fallback })
+}
+
+/**
+ * Tell the user a login/logout attempt was silently blocked, when nothing else on screen will.
+ *
+ * The sign-in SCREEN already renders `loginAttemptError` inline (`LoginScreen`'s `attemptError`),
+ * but a header "Log in"/"Log out" control has no screen at all — `useLogin`/`useLogout` fire the
+ * facade and forget the result. This is the one place that outcome reaches a person for that
+ * control, and it is registered on the login service itself (see `appendLoginScreen`) so an
+ * application gets it merely by calling the function it already calls, not by writing new code.
+ *
+ * Reacts to `Blocked` only: every other outcome either did something (`Handled`, `Redirected`),
+ * is reported elsewhere (`Orphaned`, inside the surrogate window), or has nowhere useful to point a
+ * toast at (`Gesture`, `Failed`, `Passed`) — a toast that fires on every click would train a user to
+ * dismiss it rather than read it.
+ */
+export const notifyPopupBlocked = (cfg: ClientConfig): LoginNotifier => outcome => {
+  if (outcome !== LoginOutcome.Blocked) {
+    return
+  }
+  toast.warning(translateAuth(cfg, 'login.error.blocked', POPUP_BLOCKED_FALLBACK))
+}

package/src/components/login/provider.tsx

@@ -0,0 +1,57 @@
+import type { FC } from 'react'
+import { ShieldCheck } from 'lucide-react'
+import { cn } from '../../@/lib/utils.js'
+import { loginProviderHelper } from '@owlmeans/client-panel/auth'
+import type { LoginProviderNoteProps } from './types.js'
+
+/**
+ * Who signs the person in, and on whose behalf.
+ *
+ * A sign-in page that a third party runs for an application has to say so wherever the
+ * application's own name appears: the relationship in a sentence, and a "More information" link.
+ * Without it the page is a stranger's form wearing someone else's name — which is precisely what a
+ * browser's impersonation heuristics look for.
+ *
+ * `top` is a full-width strip the screen renders as its FIRST child, above the card (the platform's
+ * own hosts); `inline` is one line inside the card, under the methods (an owner's own domain).
+ * A `role="note"` block, never `header`/`nav`: it is a disclosure, not page chrome, and a screen
+ * that grew a landmark here would be read as a second banner.
+ *
+ * The names are put in after translation (`loginProviderHelper.fill`), so word order stays the
+ * translator's and nothing but plain text ever reaches the markup.
+ */
+export const LoginProviderNote: FC<LoginProviderNoteProps> = ({ model, translate, className }) => {
+  const top = model.placement === 'top'
+  const sentence = top
+    ? translate('login.provider.top', 'This app is hosted by {{operator}} on behalf of {{product}}. You sign in with {{provider}}.')
+    : translate('login.provider.inline', 'Sign-in is provided by {{provider}} on behalf of {{product}}.')
+
+  return <div
+    role="note"
+    data-login-provider
+    data-placement={model.placement}
+    // The strip's full width is inline for the same reason the screen's height is: it is the part
+    // of the layout a stale `@source` scan must never be able to drop.
+    style={top ? { width: '100%', boxSizing: 'border-box' } : undefined}
+    className={cn(
+      'flex items-start justify-center gap-2 text-center text-xs text-muted-foreground',
+      top && 'border-b bg-muted px-4 py-2',
+      className
+    )}
+  >
+    <ShieldCheck aria-hidden="true" className="size-4 shrink-0" />
+    <span>
+      {loginProviderHelper.fill(sentence, model)}
+      {model.info != null && <>
+        {' '}
+        <a
+          data-login-provider-info
+          href={model.info} target="_blank" rel="noopener noreferrer"
+          className="underline underline-offset-2 hover:text-foreground"
+        >
+          {translate('login.provider.more', 'More information')}
+        </a>
+      </>}
+    </span>
+  </div>
+}

package/src/components/login/screen.tsx

@@ -0,0 +1,178 @@
+import { isValidElement, type FC } from 'react'
+import { Loader2 } from 'lucide-react'
+import { Button } from '../../@/components/ui/button.js'
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '../../@/components/ui/card.js'
+import { cn } from '../../@/lib/utils.js'
+import { useI18nLib, useLanguage } from '@owlmeans/client-i18n'
+import { loginProviderHelper, useLoginMethods } from '@owlmeans/client-panel/auth'
+import { type LoginMethod, type LoginScreenProps, loginResumeHelper } from '@owlmeans/client-auth/login'
+import { LoginMethodIcon } from './icons.js'
+import { LoginPrivacyNotice, LoginTerms } from './terms.js'
+import { LoginCredit } from './credit.js'
+import { LoginProviderNote } from './provider.js'
+import { VARIANT } from './consts.local.js'
+import './i18n.js'
+
+/**
+ * The sign-in screen: which identity provider, confirmed against which documents.
+ *
+ * It never starts anything by itself. Every flow leaves from a click — which is the requirement,
+ * and also what makes framed sign-in work at all, because the window a framed application has to
+ * open can only be opened inside a user gesture.
+ *
+ * Pure with respect to i18n: `translate` is a prop. {@link LocalizedLoginScreen} is the wrapper
+ * that binds it to the app's own resources, so an application mounted without an i18n provider can
+ * still render this one with a resolver of its own.
+ */
+export const LoginScreen: FC<LoginScreenProps> = props => {
+  const t = props.translate ?? ((_key: string, defaultValue: string) => defaultValue)
+  const model = useLoginMethods({
+    ...(props.config != null ? { config: props.config } : {}),
+    ...(props.terms !== undefined ? { terms: props.terms } : {}),
+    ...(props.methods != null ? { methods: props.methods } : {}),
+  })
+
+  const Logo = props.Logo
+  const attemptError = model.busy == null ? loginResumeHelper.loginAttemptError(model.outcome) : null
+
+  const provider = model.provider
+  const title = props.title ?? (provider != null
+    ? loginProviderHelper.fill(t('login.provider.title', 'Sign in to {{product}}'), provider)
+    : t('login.title', 'Sign in'))
+
+  const card = <Card className={cn('w-full max-w-sm', props.containerClassName)}>
+    <CardHeader className="items-center gap-2 text-center">
+      {Logo != null && <div className="flex justify-center pb-2">
+        {isValidElement(Logo) ? Logo : typeof Logo === 'function'
+          ? <Logo className="h-10 w-auto" /> : Logo}
+      </div>}
+      <CardTitle className="text-xl">{title}</CardTitle>
+      <CardDescription>
+        {props.subtitle ?? t('login.subtitle', 'Choose how you would like to continue.')}
+      </CardDescription>
+    </CardHeader>
+
+    <CardContent className="flex flex-col gap-4">
+      {model.methods.length < 1
+        ? <p role="status" className="text-sm text-muted-foreground text-center">
+          {t('login.empty', 'No sign-in method is configured for this application.')}
+        </p>
+        : <div className="flex flex-col gap-2">
+          {model.methods.map((method: LoginMethod) => <Button
+            key={method.id}
+            type="button"
+            data-login-method={method.id}
+            variant={VARIANT[method.emphasis ?? 'secondary'] ?? 'outline'}
+            // `aria-disabled`, never `disabled`. A disabled button swallows the click, so a user
+            // who has not confirmed the terms would press it and be told nothing at all — the
+            // screen would simply seem broken. Blocking happens in the handler, which then says
+            // why.
+            aria-disabled={model.blocked || undefined}
+            data-blocked={model.blocked ? 'true' : undefined}
+            // `cursor-pointer` explicitly: the package's private shadcn button stays compatible
+            // with the older primitive style too. Stating it here keeps the sign-in control
+            // visibly actionable independently of a consumer's shadcn setup.
+            className={cn(
+              'w-full justify-center gap-2 cursor-pointer',
+              model.blocked && 'opacity-60'
+            )}
+            autoFocus={method.id === model.primary?.id}
+            onClick={() => model.select(method)}
+          >
+            {model.busy === method.id
+              ? <Loader2 className="size-4 animate-spin" />
+              : <LoginMethodIcon name={method.icon} className="size-4" />}
+            {method.label ?? t(`login.method.${method.i18nKey ?? method.id}`, method.id)}
+          </Button>)}
+        </div>}
+
+      {/* On the owner's own domain the disclosure is one line under the methods — the place a
+          person looks just before choosing one. */}
+      {provider?.placement === 'inline' && <LoginProviderNote model={provider} translate={t} />}
+
+      {/* Terms mode: the checkbox lives on a post-login step instead (`termsDeferred`) — this
+          screen shows the privacy disclosure alone and blocks nothing on it. */}
+      {model.terms.required && (model.terms.deferred
+        ? <LoginPrivacyNotice model={model.terms} translate={t} locale={props.locale} />
+        : <LoginTerms model={model.terms} translate={t} locale={props.locale} />)}
+
+      {/*
+        A thrown message first, because it names the actual fault; otherwise whatever the
+        finished outcome means for someone still looking at this screen. An attempt that ends
+        without moving the document MUST say so — silence here reads as a dead button.
+      */}
+      {(model.error ?? attemptError) != null
+        && <p role="alert" data-login-error className="text-sm text-destructive text-center">
+          {model.error ?? t(attemptError as string, 'Sign-in did not complete. Please try again.')}
+        </p>}
+    </CardContent>
+
+    <div className="px-6">
+      {props.footer ?? <LoginCredit model={model.credit} translate={t} />}
+    </div>
+  </Card>
+
+  // The viewport height is set INLINE, and deliberately.
+  //
+  // A percentage minimum (`min-h-full`) resolves against a parent that has a height, and this
+  // screen is rendered straight out of the dispatcher into whatever the app has around it — which
+  // almost never carries one, so the box collapsed to its content and the card sat at the top of
+  // an empty page. The fix is a viewport unit; the reason it is not a utility class is that this
+  // package's classes reach a consuming app's stylesheet only through a `@source` scan of its
+  // `src`, and a class NEW to that stylesheet is the one thing the scan can be stale about. Every
+  // other utility here already exists in any app that renders anything; a missing `min-h-dvh`
+  // rule, by contrast, is invisible — the screen looks nearly right and is silently uncentred.
+  //
+  // `props.style` still wins, because a class-based override no longer can.
+  //
+  // The platform's own hosts put the provider disclosure in a strip across the top of the page —
+  // the FIRST child of the screen — and centre the card in a stage that takes the rest of the
+  // height. Every layout-bearing property of that variant is inline too, for the same reason.
+  if (provider?.placement === 'top') {
+    return <div
+      data-login-screen
+      style={{
+        minHeight: '100dvh', display: 'flex', flexDirection: 'column', alignItems: 'stretch',
+        justifyContent: 'flex-start', padding: 0, ...props.style,
+      }}
+      className={cn('w-full', props.className)}
+    >
+      <LoginProviderNote model={provider} translate={t} />
+      <div
+        data-login-stage
+        style={{
+          display: 'flex', flex: '1 1 auto', alignItems: 'center', justifyContent: 'center',
+          width: '100%', padding: '1rem', boxSizing: 'border-box',
+        }}
+      >
+        {card}
+      </div>
+    </div>
+  }
+
+  return <div
+    data-login-screen
+    style={{ minHeight: '100dvh', ...props.style }}
+    className={cn('flex w-full items-center justify-center p-4', props.className)}
+  >
+    {card}
+  </div>
+}
+
+/**
+ * {@link LoginScreen} bound to the application's own translations.
+ *
+ * The split exists because the house rule is that a reusable component takes `translate` as a prop
+ * and never reaches for a context — but the ordinary case is an app that has one, and making every
+ * app write the resolver would guarantee some of them ship English.
+ */
+export const LocalizedLoginScreen: FC<LoginScreenProps> = props => {
+  const t = useI18nLib('auth')
+  const [lng] = useLanguage()
+
+  return <LoginScreen
+    {...props}
+    translate={props.translate ?? ((key, defaultValue) => t(key, { defaultValue }))}
+    locale={props.locale ?? lng}
+  />
+}

package/src/components/login/terms.tsx

@@ -0,0 +1,75 @@
+import type { FC, ReactNode } from 'react'
+import { cn } from '../../@/lib/utils.js'
+import { type TermsSentencePart, loginTermsHelper } from '@owlmeans/client-auth/login'
+import type { LoginPrivacyNoticeProps, LoginTermsProps } from './types.js'
+
+const renderParts = (parts: TermsSentencePart[]): ReactNode =>
+  parts.map((part, index) => part.href != null
+    ? <a key={index} href={part.href} target="_blank" rel="noreferrer noopener"
+      data-login-document={part.documentKey}
+      className="underline underline-offset-2 hover:text-foreground">{part.text}</a>
+    : <span key={index}>{part.text}</span>)
+
+/**
+ * The privacy disclosure alone — `notices` (privacy, plus cookies per its own rule), never
+ * consented to and never nested inside a checkbox's `<label>`.
+ *
+ * Split out of {@link LoginTerms} so a sign-in screen whose Terms confirmation has moved to a
+ * post-login step (`termsDeferred`, `@owlmeans/client-auth/login`) can still show this line on its
+ * own — the disclosure does not move just because the confirmation did.
+ */
+export const LoginPrivacyNotice: FC<LoginPrivacyNoticeProps> = ({ model, translate, locale, className }) => {
+  const resolveLabel = loginTermsHelper.termsLabelResolver(translate, locale)
+
+  return <p data-login-privacy className={cn('text-xs text-muted-foreground', className)}>
+    {renderParts(loginTermsHelper.termsSentence(translate('login.terms.notice', 'How we handle your personal data: {{notices}}.'), model, locale, resolveLabel))}
+  </p>
+}
+
+/**
+ * The sign-in screen's terms confirmation: one consented checkbox for `documents` (terms, plus
+ * billing/product/custom when configured), and a SEPARATE, non-consented disclosure line for
+ * `notices` (privacy, plus cookies per its own rule) — never nested inside the checkbox's label,
+ * because nothing is being agreed to there.
+ */
+export const LoginTerms: FC<LoginTermsProps> = ({ model, translate, locale, className }) => {
+  const resolveLabel = loginTermsHelper.termsLabelResolver(translate, locale)
+
+  // Centred, like every other row in the card. The checkbox stays at the start of the sentence
+  // rather than above it, so `justify-center` centres the pair and `text-center` centres the
+  // wrapped lines within it.
+  return <div className={cn('flex flex-col items-center gap-1.5 text-center', className)}>
+    {/*
+      The ONLY place `data-login-terms` appears — an e2e suite in the consuming product treats it
+      as a strict (exactly-one-match) locator, so it must never be duplicated onto a second control.
+    */}
+    <label className="flex items-start justify-center gap-2 text-sm text-muted-foreground cursor-pointer">
+      {/*
+        A NATIVE checkbox, deliberately. `web-panel` ships no `checkbox` primitive, and requiring
+        every consumer to vendor one plus its Radix peer to render a sign-in screen would be a
+        breaking change for every application already on this package. A native control is also the
+        most accessible thing available here.
+      */}
+      <input
+        type="checkbox" data-login-terms
+        className="mt-0.5 size-4 shrink-0 accent-primary"
+        checked={model.accepted}
+        aria-invalid={model.attempted && !model.accepted}
+        onChange={event => model.accept(event.target.checked)}
+      />
+      <span>
+        {renderParts(loginTermsHelper.termsSentence(translate('login.terms.accept', 'I have read and agree to the {{documents}}.'), model, locale, resolveLabel))}
+      </span>
+    </label>
+
+    {model.revisedAt != null && <p data-login-revised className="text-xs text-muted-foreground">
+      {translate('login.terms.revised', 'Last updated: {{date}}').split('{{date}}').join(model.revisedAt)}
+    </p>}
+
+    <LoginPrivacyNotice model={model} translate={translate} locale={locale} />
+
+    {model.attempted && !model.accepted && <p role="alert" className="text-sm text-destructive">
+      {renderParts(loginTermsHelper.termsSentence(translate('login.terms.required', 'Please confirm the {{documents}} to continue.'), model, locale, resolveLabel))}
+    </p>}
+  </div>
+}

package/src/components/login/types.ts

@@ -0,0 +1,30 @@
+import type { LoginScreenProps } from '@owlmeans/client-auth/login'
+import type { ComponentType, ReactNode } from 'react'
+import type { LoginCreditModel, LoginProviderModel, LoginTermsModel } from '@owlmeans/client-panel/auth'
+
+export interface LoginScreenSetup extends Omit<LoginScreenProps, 'translate'> {
+  /** The one thing an application is expected to supply. */
+  Logo?: ComponentType<{ className?: string }> | ReactNode
+}
+
+export interface LoginCreditProps {
+  model: LoginCreditModel
+  translate: (key: string, defaultValue: string) => string
+  className?: string
+}
+
+export interface LoginTermsProps {
+  model: LoginTermsModel
+  translate: (key: string, defaultValue: string) => string
+  /** The current language, for `Intl.ListFormat`, document labels and explicit translated hrefs. */
+  locale?: string
+  className?: string
+}
+
+export type LoginPrivacyNoticeProps = LoginTermsProps
+
+export interface LoginProviderNoteProps {
+  model: LoginProviderModel
+  translate: (key: string, defaultValue: string) => string
+  className?: string
+}