@owlmeans/web-auth-email 0.0.0-stage → 0.1.19

package/src/append.ts

@@ -0,0 +1,65 @@
+import { createElement, type FC } from 'react'
+import type { BasicConfig, BasicContext } from '@owlmeans/context'
+import type { ClientConfig, ClientContext } from '@owlmeans/client-context'
+import { authPluginHelper } from '@owlmeans/client-auth/manager/plugins'
+import { ensureLoginService } from '@owlmeans/client-auth/login'
+import { EMAIL_LOGIN_SERVICE } from '@owlmeans/auth-email'
+import { LocalizedEmailLoginScreen } from './components/screen.js'
+import { makeEmailLoginPlugin } from './plugin.js'
+import { appendEmailLoginClient } from './service.js'
+import { emailOfferStep } from './step.js'
+import type {
+  EmailLoginAppendOptions, EmailLoginClientService, EmailLoginScreenComponent, EmailLoginScreenProps,
+  EmailLoginScreenSetup,
+} from './types.js'
+import './i18n.js'
+
+/** The default screen, dressed with the application's setup; a host's own props still win. */
+const screenOf = (setup?: EmailLoginScreenSetup): EmailLoginScreenComponent => {
+  if (setup == null || Object.keys(setup).length < 1) {
+    return LocalizedEmailLoginScreen
+  }
+  const Configured: FC<EmailLoginScreenProps> = props =>
+    createElement(LocalizedEmailLoginScreen, { ...setup, ...props })
+
+  return Configured
+}
+
+/**
+ * Wire e-mail sign-in into a web app — the whole of it beyond binding the protocol tree (`bindAll`)
+ * and `emailAuthEntrypoints(protocols)` in the application's entrypoint list:
+ *
+ * - the client service `EMAIL_LOGIN_SERVICE` over `protocols`;
+ * - the `email` authentication plugin — "Continue with email" on the chooser, its card at
+ *   `/authentication/login/email` (`opts.screen` dresses it, `opts.method` the button);
+ * - the post-sign-in "set a password" step, below marketing consent (`opts.offer !== false`);
+ * - the `auth-email` strings and `login.method.email` in eight languages.
+ *
+ * Explicit by design: importing this package registers no plugin.
+ */
+export const appendEmailLogin = <C extends ClientConfig, T extends ClientContext<C>>(
+  context: T, opts: EmailLoginAppendOptions,
+): T => {
+  appendEmailLoginClient(context, opts.protocols, { screen: screenOf(opts.screen) })
+  authPluginHelper.registerAuthPlugin(makeEmailLoginPlugin(opts.method))
+
+  if (opts.offer !== false) {
+    const client = context.service<EmailLoginClientService>(EMAIL_LOGIN_SERVICE)
+    ensureLoginService(context).registerStep(emailOfferStep(client, opts.protocols.offer.alias))
+  }
+
+  return context
+}
+
+/**
+ * Replace the screen the e-mail route renders — a whole new card built on `useEmailLogin()`, for an
+ * application whose sign-in looks nothing like the chooser. Call it after `appendEmailLogin`.
+ */
+export const registerEmailLoginScreen = <C extends BasicConfig>(
+  context: BasicContext<C>, screen: EmailLoginScreenComponent,
+): void => {
+  if (!context.hasService(EMAIL_LOGIN_SERVICE)) {
+    throw new SyntaxError('auth-email: call appendEmailLogin before registerEmailLoginScreen')
+  }
+  context.service<EmailLoginClientService>(EMAIL_LOGIN_SERVICE).registerScreen(screen)
+}

package/src/components/connected.tsx

@@ -0,0 +1,36 @@
+import type { FC } from 'react'
+import { useLanguage } from '@owlmeans/client-i18n'
+import { usePassword } from '../hooks/use-password.js'
+import { useEmailAuthTranslate } from '../hooks/use-translate.js'
+import { PasswordPanel } from './panel.js'
+import type { ConnectedPasswordPanelProps } from './types.js'
+
+/**
+ * The password panel wired to the password routes of the current context — the whole feature in
+ * one element, and the only piece of it that talks to a server.
+ */
+export const ConnectedPasswordPanel: FC<ConnectedPasswordPanelProps> = ({
+  aliases, translate, title, description, className,
+}) => {
+  const own = useEmailAuthTranslate()
+  const [lng] = useLanguage()
+  const model = usePassword(aliases, { locale: lng })
+
+  return <PasswordPanel
+    status={model.status}
+    loading={model.loading}
+    busy={model.busy}
+    pending={model.pending}
+    refusal={model.refusal}
+    done={model.done}
+    onSendPin={model.sendPin}
+    onConfirm={model.confirm}
+    onCancel={model.cancel}
+    onReload={model.reload}
+    translate={translate ?? own}
+    locale={lng}
+    title={title}
+    description={description}
+    className={className}
+  />
+}

package/src/components/credit.tsx

@@ -0,0 +1,30 @@
+import type { FC } from 'react'
+import { useContext } from '@owlmeans/client'
+import { resolveCredit } from '@owlmeans/client-auth/login'
+import type { CommonConfig } from '@owlmeans/config'
+import { cn } from '../@/lib/utils.js'
+import { OWLMEANS_URL } from '../consts.js'
+import type { EmailLoginCreditProps } from './types.js'
+
+/** The chooser card's bottom line, composed from the same configuration (`login.credit`, `brand`). */
+export const EmailLoginCredit: FC<EmailLoginCreditProps> = ({ t, className }) => {
+  const ctx = useContext()
+  const cfg = ctx.cfg as CommonConfig
+  const credit = resolveCredit(cfg.security?.auth?.login?.credit, cfg.brand, ctx.cfg.service)
+  if (!credit.poweredBy && credit.line == null) {
+    return null
+  }
+
+  return <p data-email-login-credit className={cn('text-center text-xs text-muted-foreground', className)}>
+    {credit.poweredBy && <a
+      href={OWLMEANS_URL}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="underline-offset-4 hover:text-foreground hover:underline"
+    >
+      {t('login.powered', 'Powered by OwlMeans')}
+    </a>}
+    {credit.poweredBy && credit.line != null && <span aria-hidden="true"> · </span>}
+    {credit.line != null && <span>{credit.line}</span>}
+  </p>
+}

package/src/components/fields.tsx

@@ -0,0 +1,112 @@
+import type { FC } from 'react'
+import { Eye, EyeOff, Loader2 } from 'lucide-react'
+import { Button } from '../@/components/ui/button.js'
+import { Input } from '../@/components/ui/input.js'
+import { cn } from '../@/lib/utils.js'
+import { RECAPTCHA_PRIVACY_URL, RECAPTCHA_TERMS_URL } from '../consts.js'
+import { emailRefusalHelper } from '../refusal.js'
+import { textUtils } from '../utils/text.js'
+import type {
+  CaptchaNoticeProps, PasswordInputProps, PinInputProps, RefusalAlertProps, SubmitButtonProps,
+} from './types.js'
+
+/**
+ * A password field with its show/hide toggle inside the box. The toggle is a real button with an
+ * accessible name that says what it will do, and a 44px target.
+ */
+export const PasswordInput: FC<PasswordInputProps> = ({
+  reveal, onReveal, showLabel, hideLabel, toggleProps, className, ...props
+}) => (
+  <div className="relative">
+    <Input
+      {...props}
+      type={reveal ? 'text' : 'password'}
+      autoCapitalize="none"
+      autoCorrect="off"
+      spellCheck={false}
+      className={cn('h-11 pr-12 text-base', className)}
+    />
+    <Button
+      type="button"
+      variant="ghost"
+      {...toggleProps}
+      aria-label={reveal ? hideLabel : showLabel}
+      aria-pressed={reveal}
+      title={reveal ? hideLabel : showLabel}
+      className="absolute inset-y-0 right-0 h-11 w-11 rounded-l-none text-muted-foreground hover:text-foreground"
+      onClick={() => onReveal(!reveal)}
+    >
+      {reveal ? <EyeOff aria-hidden /> : <Eye aria-hidden />}
+    </Button>
+  </div>
+)
+
+/** The PIN field: numeric keypad on a phone, the mailed code offered by the keyboard's autofill. */
+export const PinInput: FC<PinInputProps> = ({ length, className, ...props }) => (
+  <Input
+    {...props}
+    type="text"
+    inputMode="numeric"
+    autoComplete="one-time-code"
+    pattern="[0-9]*"
+    maxLength={length}
+    className={cn('h-12 text-center font-mono text-2xl tracking-[0.4em]', className)}
+  />
+)
+
+/**
+ * The step's primary action. Never the HTML `disabled` attribute: a disabled button swallows the
+ * press and tells nobody anything, so a blocked or busy action carries `aria-disabled` and its
+ * handler explains (or ignores the second press).
+ */
+export const SubmitButton: FC<SubmitButtonProps> = ({ busy, blocked = false, className, children, ...props }) => (
+  <Button
+    type="submit"
+    {...props}
+    aria-disabled={busy || blocked || undefined}
+    aria-busy={busy || undefined}
+    data-blocked={blocked ? 'true' : undefined}
+    className={cn('h-11 w-full gap-2 text-base', (busy || blocked) && 'opacity-60', className)}
+  >
+    {busy && <Loader2 className="animate-spin" aria-hidden />}
+    {children}
+  </Button>
+)
+
+/** A refusal in the reader's language, announced as it appears. */
+export const RefusalAlert: FC<RefusalAlertProps> = ({ refusal, t, locale, marker, className }) => refusal == null
+  ? null
+  : <p
+    role="alert"
+    {...{ [marker]: '' }}
+    data-refusal={refusal.kind}
+    className={cn('text-center text-sm text-destructive', className)}
+  >
+    {emailRefusalHelper.messageOf(refusal, t, locale)}
+  </p>
+
+/**
+ * Google's notice. The loader hides the reCAPTCHA badge, and a page that hides it has to say this
+ * itself, with both links.
+ */
+export const CaptchaNotice: FC<CaptchaNoticeProps> = ({ t, className }) => {
+  const parts = textUtils.parts(
+    t('captcha.notice', 'This site is protected by reCAPTCHA and the Google {{privacy}} and {{terms}} apply.'),
+    {
+      privacy: { text: t('captcha.privacy', 'Privacy Policy'), href: RECAPTCHA_PRIVACY_URL },
+      terms: { text: t('captcha.terms', 'Terms of Service'), href: RECAPTCHA_TERMS_URL },
+    },
+  )
+
+  return <p data-email-login-captcha className={cn('text-center text-xs text-muted-foreground', className)}>
+    {parts.map((part, index) => part.href != null
+      ? <a
+        key={index}
+        href={part.href}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="underline underline-offset-2 hover:text-foreground"
+      >{part.text}</a>
+      : <span key={index}>{part.text}</span>)}
+  </p>
+}

package/src/components/index.ts

@@ -0,0 +1,8 @@
+export * from './screen.js'
+export * from './route.js'
+export * from './offer.js'
+export * from './panel.js'
+export * from './connected.js'
+export * from './fields.js'
+export * from './credit.js'
+export type * from './types.js'

package/src/components/offer.tsx

@@ -0,0 +1,197 @@
+import { useEffect, useId, useMemo, useRef, useState, type FormEvent } from 'react'
+import type { RoutedComponent } from '@owlmeans/client'
+import { useContext } from '@owlmeans/client'
+import { useLanguage } from '@owlmeans/client-i18n'
+import { useContinueLogin } from '@owlmeans/client-auth/login'
+import {
+  EMAIL_LOGIN_SERVICE, EMAIL_PASSWORD_MAX_LENGTH, EMAIL_PASSWORD_MIN_LENGTH,
+} from '@owlmeans/auth-email'
+import { logger } from '@owlmeans/log'
+import { Button } from '../@/components/ui/button.js'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../@/components/ui/card.js'
+import { Label } from '../@/components/ui/label.js'
+import { EMAIL_OFFER_LOGIN_STEP } from '../consts.js'
+import { useEmailAuthTranslate } from '../hooks/use-translate.js'
+import { passwordPanelHelper } from '../password.js'
+import { emailRefusalHelper } from '../refusal.js'
+import { emailStorageHelper } from '../storage.js'
+import { textUtils } from '../utils/text.js'
+import { signedInAccount } from '../utils/account.js'
+import type { EmailRefusal } from '../refusal/types.js'
+import type { EmailLoginClientService } from '../types.js'
+import { PasswordInput, RefusalAlert, SubmitButton } from './fields.js'
+
+const log = logger('auth-email')
+
+/**
+ * The post-sign-in offer: "Set a password for faster sign-in", right after a PIN sign-in of a
+ * person who has none and never declined one. The fresh sign-in's one-use ticket confirms it — no
+ * second PIN. "Not now" declines (the step is not offered again); both answers forget the ticket
+ * and move the sign-in on to the next step or the landing.
+ */
+export const PasswordOfferScreen: RoutedComponent = () => {
+  const t = useEmailAuthTranslate()
+  const [locale] = useLanguage()
+  const ctx = useContext()
+  const continueLogin = useContinueLogin()
+  const id = useId()
+
+  const client = ctx.service<EmailLoginClientService>(EMAIL_LOGIN_SERVICE)
+  const ticket = useMemo(() => emailStorageHelper.offer(signedInAccount(ctx)), [ctx])
+
+  const [password, setPassword] = useState('')
+  const [repeat, setRepeat] = useState('')
+  const [reveal, setReveal] = useState(false)
+  const [busy, setBusy] = useState<'save' | 'skip' | null>(null)
+  const [refusal, setRefusal] = useState<EmailRefusal | null>(null)
+  const advanced = useRef(false)
+
+  const advance = async (): Promise<void> => {
+    if (advanced.current) {
+      return
+    }
+    advanced.current = true
+    emailStorageHelper.dropOffer()
+    await continueLogin({ after: EMAIL_OFFER_LOGIN_STEP })
+  }
+
+  // Nothing to offer on this visit (a reload after the answer, an expired ticket): move on.
+  useEffect(() => {
+    if (ticket == null) {
+      void advance()
+    }
+  }, [ticket])
+
+  const save = async (event?: FormEvent): Promise<void> => {
+    event?.preventDefault()
+    if (busy != null || ticket == null) {
+      return
+    }
+    const block = passwordPanelHelper.passwordBlock(password, repeat)
+    if (block != null) {
+      setRefusal(block)
+      return
+    }
+    setBusy('save')
+    setRefusal(null)
+    try {
+      await client.setPassword({ password, offer: ticket, device: emailStorageHelper.deviceId() })
+      await advance()
+    } catch (error) {
+      const next = emailRefusalHelper.refusalOf(error, 'offer')
+      log.debug('Password offer refused', { kind: next.kind })
+      if (next.kind === 'offer-expired') {
+        emailStorageHelper.dropOffer()
+      }
+      setRefusal(next)
+      setBusy(null)
+    }
+  }
+
+  const skip = async (): Promise<void> => {
+    if (busy != null) {
+      return
+    }
+    setBusy('skip')
+    try {
+      await client.declinePassword()
+    } catch (error) {
+      // Declining is a courtesy to the next sign-in; failing it must not hold this one up.
+      log.debug('Password offer decline failed', { kind: emailRefusalHelper.refusalOf(error, 'offer').kind })
+    }
+    await advance()
+  }
+
+  const mismatch = refusal?.kind === 'mismatch'
+
+  return <div
+    data-email-offer-screen
+    style={{ minHeight: '100dvh' }}
+    className="flex w-full items-center justify-center p-4"
+  >
+    <Card
+      data-email-offer
+      data-state={ticket == null ? 'leaving' : busy ?? 'ready'}
+      className="w-full max-w-sm"
+    >
+      <CardHeader className="items-center gap-2 text-center">
+        <CardTitle className="text-xl">{t('offer.title', 'Set a password for faster sign-in')}</CardTitle>
+        <CardDescription>
+          {t('offer.description', 'Next time, sign in with your email and password instead of waiting for a code.')}
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form noValidate onSubmit={event => void save(event)} className="flex flex-col gap-4">
+          <div className="flex flex-col gap-2 text-left">
+            <Label htmlFor={`${id}-password`}>{t('offer.password-label', 'New password')}</Label>
+            <PasswordInput
+              id={`${id}-password`}
+              name="new-password"
+              data-email-offer-password
+              autoComplete="new-password"
+              autoFocus
+              maxLength={EMAIL_PASSWORD_MAX_LENGTH}
+              value={password}
+              readOnly={busy != null}
+              aria-invalid={refusal?.kind === 'weak' || refusal?.kind === 'password-empty' || undefined}
+              aria-describedby={`${id}-hint`}
+              reveal={reveal}
+              onReveal={setReveal}
+              showLabel={t('login.show-password', 'Show password')}
+              hideLabel={t('login.hide-password', 'Hide password')}
+              toggleProps={{ 'data-email-offer-toggle': '' }}
+              onChange={event => { setPassword(event.target.value); setRefusal(null) }}
+            />
+            <p id={`${id}-hint`} className="text-xs text-muted-foreground">
+              {textUtils.fill(t('offer.hint', '{{min}} to {{max}} characters.'), {
+                min: EMAIL_PASSWORD_MIN_LENGTH, max: EMAIL_PASSWORD_MAX_LENGTH,
+              })}
+            </p>
+          </div>
+          <div className="flex flex-col gap-2 text-left">
+            <Label htmlFor={`${id}-repeat`}>{t('offer.repeat-label', 'Repeat the password')}</Label>
+            <PasswordInput
+              id={`${id}-repeat`}
+              name="repeat-password"
+              data-email-offer-repeat
+              autoComplete="new-password"
+              maxLength={EMAIL_PASSWORD_MAX_LENGTH}
+              value={repeat}
+              readOnly={busy != null}
+              aria-invalid={mismatch || undefined}
+              reveal={reveal}
+              onReveal={setReveal}
+              showLabel={t('login.show-password', 'Show password')}
+              hideLabel={t('login.hide-password', 'Hide password')}
+              onChange={event => { setRepeat(event.target.value); setRefusal(null) }}
+            />
+          </div>
+
+          <RefusalAlert refusal={refusal} t={t} locale={locale} marker="data-email-offer-error" />
+
+          <SubmitButton
+            data-email-offer-save
+            busy={busy === 'save'}
+            blocked={ticket == null || passwordPanelHelper.passwordBlock(password, repeat) != null}
+          >
+            {busy === 'save' ? t('offer.saving', 'Saving…') : t('offer.save', 'Save password')}
+          </SubmitButton>
+          <Button
+            type="button"
+            variant="outline"
+            data-email-offer-skip
+            aria-disabled={busy != null || undefined}
+            aria-busy={busy === 'skip' || undefined}
+            className="h-11 w-full text-base"
+            onClick={() => void skip()}
+          >
+            {t('offer.skip', 'Not now')}
+          </Button>
+          <p className="text-center text-xs text-muted-foreground">
+            {t('offer.later', 'You can always set a password later in your account settings.')}
+          </p>
+        </form>
+      </CardContent>
+    </Card>
+  </div>
+}