@akinon/pz-theme 2.0.95-beta.1 → 2.0.95-rc.0

package/src/__tests__/reset-password-composed.test.tsx

@@ -1,385 +0,0 @@
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import React from 'react';
-
-import ResetPasswordBlock from '../blocks/reset-password-block';
-import { __resetAuthFlowBusForTests, getAuthFlowState } from '../auth/auth-flow-bus';
-import { Block } from '../theme-block';
-
-/**
- * The screen the password-reset MAIL lands on.
- *
- * `forgot-password` composes the request and then handed the shopper to a page
- * every brand hand-wrote — the same two inputs and the same four states,
- * drifting from the drawer the journey started in, and invisible to the editor.
- * These cases pin the four states, the one rule the form checks itself (the two
- * passwords matching), and the attribution of a commerce refusal that arrives
- * under the names commerce uses rather than the ones on screen.
- */
-
-const passwordReset = jest.fn();
-const unwrap = jest.fn();
-let resetState = { isLoading: false, isSuccess: false };
-let validation: {
-  data?: { validlink: boolean };
-  isLoading: boolean;
-  isError: boolean;
-} = { data: { validlink: true }, isLoading: false, isError: false };
-
-jest.mock('@akinon/next/data/client/account', () => ({
-  usePasswordResetMutation: () => [
-    (...args: unknown[]) => {
-      passwordReset(...args);
-
-      return { unwrap };
-    },
-    resetState
-  ],
-  useGetValidatePasswordResetTokenQuery: () => validation
-}));
-
-let params: Record<string, string | string[]> = { id: ['tok', 'abc123'] };
-let search = new URLSearchParams();
-
-jest.mock('next/navigation', () => ({
-  useParams: () => params,
-  useSearchParams: () => search,
-  usePathname: () => '/users/reset/tok/abc123'
-}));
-
-const block = (overrides: Partial<Block>): Block =>
-  ({
-    id: 'blk',
-    type: 'text',
-    label: 'Block',
-    value: '',
-    order: 0,
-    hidden: false,
-    properties: {},
-    styles: {},
-    ...overrides
-  }) as Block;
-
-const authField = (
-  order: number,
-  properties: Record<string, unknown>
-): Block =>
-  block({
-    id: `field-${order}`,
-    type: 'auth-field',
-    label: 'Field',
-    properties,
-    order
-  });
-
-/** The two boxes as a designer composes them: a preset one and a custom one. */
-const COMPOSED = [
-  authField(0, { fieldType: 'password', label: 'New password' }),
-  authField(1, {
-    fieldType: 'custom',
-    name: 'repeatPassword',
-    inputType: 'password',
-    label: 'New password again',
-    required: true
-  })
-];
-
-const renderBlock = (properties = {}, children?: Block[]) =>
-  render(
-    <ResetPasswordBlock
-      block={
-        block({
-          id: 'reset-1',
-          type: 'reset-password',
-          label: 'Reset Password',
-          properties,
-          blocks: children
-        }) as Block
-      }
-      placeholderId="placeholder-1"
-      sectionId="section-1"
-      currentBreakpoint="desktop"
-    />
-  );
-
-const fill = (container: HTMLElement, first: string, second: string) => {
-  fireEvent.change(container.querySelector('input[name="password"]')!, {
-    target: { value: first }
-  });
-  fireEvent.change(container.querySelector('input[name="repeatPassword"]')!, {
-    target: { value: second }
-  });
-};
-
-beforeEach(() => {
-  passwordReset.mockClear();
-  unwrap.mockReset();
-  unwrap.mockResolvedValue(undefined);
-  resetState = { isLoading: false, isSuccess: false };
-  validation = { data: { validlink: true }, isLoading: false, isError: false };
-  params = { id: ['tok', 'abc123'] };
-  search = new URLSearchParams();
-  __resetAuthFlowBusForTests();
-});
-
-describe('the link the mail carries', () => {
-  it('is read back out of the catch-all route segment, slashes and all', async () => {
-    const { container } = renderBlock();
-
-    fill(container, 'hunter2A!', 'hunter2A!');
-    fireEvent.submit(container.querySelector('form')!);
-
-    await waitFor(() => expect(passwordReset).toHaveBeenCalled());
-    // The token contains slashes, so the segments have to be put back together
-    // — a single segment would be a different token.
-    expect(passwordReset).toHaveBeenCalledWith({
-      password: 'hunter2A!',
-      repeatPassword: 'hunter2A!',
-      slug: 'tok/abc123'
-    });
-  });
-
-  it('can be read from the query instead, for a brand whose route differs', async () => {
-    params = {};
-    search = new URLSearchParams('code=xyz789');
-
-    const { container } = renderBlock({
-      tokenSource: 'query',
-      tokenQueryKey: 'code'
-    });
-
-    fill(container, 'hunter2A!', 'hunter2A!');
-    fireEvent.submit(container.querySelector('form')!);
-
-    await waitFor(() => expect(passwordReset).toHaveBeenCalled());
-    expect(passwordReset.mock.calls[0][0].slug).toBe('xyz789');
-  });
-
-  it('answers a spent link with the expired state, not with a form', () => {
-    validation = { data: { validlink: false }, isLoading: false, isError: false };
-
-    renderBlock({ expiredLabel: 'Bu bağlantının süresi doldu.' });
-
-    expect(screen.getByText('Bu bağlantının süresi doldu.')).toBeInTheDocument();
-    expect(document.querySelector('form')).toBeNull();
-  });
-
-  it('treats no link at all as the same dead end', () => {
-    params = {};
-
-    renderBlock({ expiredLabel: 'Bu bağlantının süresi doldu.' });
-
-    expect(screen.getByText('Bu bağlantının süresi doldu.')).toBeInTheDocument();
-  });
-
-  it('sends an expired link back to the step that can issue a new one', () => {
-    validation = { data: { validlink: false }, isLoading: false, isError: false };
-
-    renderBlock({
-      expiredStepTarget: 'auth:forgot',
-      backLabel: 'Yeni bağlantı iste'
-    });
-
-    fireEvent.click(screen.getByText('Yeni bağlantı iste'));
-
-    // A fresh mail is the only way forward, and the flow is what knows where
-    // that lives.
-    expect(getAuthFlowState('auth')?.active).toBe('forgot');
-  });
-
-  it('says nothing while the link is being checked, unless asked to', () => {
-    validation = { isLoading: true, isError: false };
-
-    const { container, unmount } = renderBlock();
-    // A sentence that appears and vanishes within a fraction of a second is
-    // worse than nothing.
-    expect(container.innerHTML).toBe('');
-
-    unmount();
-    renderBlock({ checkingLabel: 'Bağlantınız kontrol ediliyor…' });
-
-    expect(
-      screen.getByText('Bağlantınız kontrol ediliyor…')
-    ).toBeInTheDocument();
-  });
-});
-
-describe('the two boxes', () => {
-  it('refuses a mismatch before the request leaves', async () => {
-    const { container } = renderBlock({
-      mismatchMessage: 'İki şifre aynı değil.'
-    });
-
-    fill(container, 'hunter2A!', 'hunter3B!');
-    fireEvent.submit(container.querySelector('form')!);
-
-    expect(screen.getByText('İki şifre aynı değil.')).toBeInTheDocument();
-    expect(passwordReset).not.toHaveBeenCalled();
-    // Under the second box, which is the one that has to change.
-    expect(
-      container.querySelector('input[name="repeatPassword"]')
-    ).toHaveAttribute('aria-invalid', 'true');
-  });
-
-  it('tells a password manager this is a NEW password', () => {
-    const { container } = renderBlock();
-
-    // Both boxes: a manager offers to generate and save only for
-    // `new-password`, and this screen is exactly where it should.
-    expect(
-      container.querySelector('input[name="password"]')
-    ).toHaveAttribute('autocomplete', 'new-password');
-    expect(
-      container.querySelector('input[name="repeatPassword"]')
-    ).toHaveAttribute('autocomplete', 'new-password');
-  });
-
-  it('draws the children instead of its own rows once composed', () => {
-    const { container } = renderBlock({}, COMPOSED);
-
-    expect(
-      container.querySelector('[data-reset-password-composed]')
-    ).not.toBeNull();
-    expect(container.querySelectorAll('[data-reset-password-field]')).toHaveLength(
-      0
-    );
-    // One of each, not two: the fixed rows are what a composition replaces.
-    expect(container.querySelectorAll('input[name="password"]')).toHaveLength(1);
-    expect(
-      container.querySelectorAll('input[name="repeatPassword"]')
-    ).toHaveLength(1);
-  });
-
-  it('submits what a composed form collected', async () => {
-    const { container } = renderBlock({}, COMPOSED);
-
-    fill(container, 'hunter2A!', 'hunter2A!');
-    fireEvent.submit(container.querySelector('form')!);
-
-    await waitFor(() => expect(passwordReset).toHaveBeenCalled());
-    expect(passwordReset.mock.calls[0][0]).toMatchObject({
-      password: 'hunter2A!',
-      repeatPassword: 'hunter2A!'
-    });
-  });
-});
-
-describe('what commerce refuses', () => {
-  it('lands under the box it is about, despite the name it arrives under', async () => {
-    // The mutation posts `new_password1` / `new_password2`, so that is what a
-    // refusal names — and nothing on screen submits under those.
-    unwrap.mockRejectedValue({
-      data: { new_password1: ['This password is too common.'] }
-    });
-
-    const { container } = renderBlock();
-
-    fill(container, 'password', 'password');
-    fireEvent.submit(container.querySelector('form')!);
-
-    await waitFor(() =>
-      expect(
-        screen.getByText('This password is too common.')
-      ).toBeInTheDocument()
-    );
-
-    expect(container.querySelector('input[name="password"]')).toHaveAttribute(
-      'aria-invalid',
-      'true'
-    );
-  });
-
-  it('keeps a form-level refusal above the form', async () => {
-    unwrap.mockRejectedValue({
-      data: { non_field_errors: ['This link has already been used.'] }
-    });
-
-    const { container } = renderBlock();
-
-    fill(container, 'hunter2A!', 'hunter2A!');
-    fireEvent.submit(container.querySelector('form')!);
-
-    await waitFor(() =>
-      expect(
-        screen.getByText('This link has already been used.')
-      ).toBeInTheDocument()
-    );
-  });
-
-  it('falls back to the authored sentence when nothing legible came back', async () => {
-    unwrap.mockRejectedValue({ status: 500 });
-
-    const { container } = renderBlock({ errorLabel: 'Bir şeyler ters gitti.' });
-
-    fill(container, 'hunter2A!', 'hunter2A!');
-    fireEvent.submit(container.querySelector('form')!);
-
-    await waitFor(() =>
-      expect(screen.getByText('Bir şeyler ters gitti.')).toBeInTheDocument()
-    );
-  });
-});
-
-describe('once the password is changed', () => {
-  it('replaces the form, because the token is spent', () => {
-    resetState = { isLoading: false, isSuccess: true };
-
-    renderBlock({ successLabel: 'Şifreniz değiştirildi.' });
-
-    expect(screen.getByText('Şifreniz değiştirildi.')).toBeInTheDocument();
-    expect(document.querySelector('form')).toBeNull();
-  });
-
-  it('hands the journey to a step when the designer named one', async () => {
-    const { container } = renderBlock({ successStepTarget: 'auth:done' });
-
-    fill(container, 'hunter2A!', 'hunter2A!');
-    fireEvent.submit(container.querySelector('form')!);
-
-    await waitFor(() => expect(getAuthFlowState('auth')?.active).toBe('done'));
-  });
-});
-
-describe('in the canvas', () => {
-  const renderDesigner = (properties = {}) =>
-    render(
-      <ResetPasswordBlock
-        block={
-          block({
-            id: 'reset-1',
-            type: 'reset-password',
-            label: 'Reset Password',
-            properties
-          }) as Block
-        }
-        placeholderId="placeholder-1"
-        sectionId="section-1"
-        currentBreakpoint="desktop"
-        isDesigner
-      />
-    );
-
-  it('shows the state the designer asked to style', () => {
-    renderDesigner({ previewState: 'expired', expiredLabel: 'Süresi doldu.' });
-
-    expect(screen.getByText('Süresi doldu.')).toBeInTheDocument();
-  });
-
-  it('shows the form by default, whatever a real token would have said', () => {
-    validation = { data: { validlink: false }, isLoading: false, isError: false };
-
-    const { container } = renderDesigner();
-
-    // The designer has no token, so asking commerce about one would answer
-    // "expired" for every composition.
-    expect(container.querySelector('form')).not.toBeNull();
-  });
-
-  it('never spends a token', () => {
-    const { container } = renderDesigner();
-
-    fill(container, 'hunter2A!', 'hunter2A!');
-    fireEvent.submit(container.querySelector('form')!);
-
-    expect(passwordReset).not.toHaveBeenCalled();
-  });
-});

package/src/auth/auth-captcha.tsx

@@ -1,125 +0,0 @@
-'use client';
-
-import React from 'react';
-import { useCaptcha } from '@akinon/next/hooks';
-
-/**
- * The security check commerce escalates to after too many attempts.
- *
- * Nothing in the composable auth set could answer it before: the provider
- * reports the escalation as `{ type: 'captcha' }`, the forms sent no
- * `captchaValidated`, and the challenge reached the shopper as the literal
- * `[{"type":"captcha"}]` in the error slot. A brand whose commerce is
- * abuse-protected therefore could not use composed login or sign-up at all —
- * every submit after the threshold was a dead end.
- *
- * What this adds is the SEAM, not a second captcha implementation: the widget,
- * the site key and the validation round trip all stay in `useCaptcha` from
- * `@akinon/next`, which is the same hook the brands' own hand-written views
- * use. What lives here is where the widget is DRAWN — a composition places a
- * Captcha block, a childless form draws it above its submit — and how a form
- * reaches the two things it needs at submit time.
- *
- * Mounted only when the form's `showCaptcha` is on, and that is deliberate:
- * `useCaptcha` fetches the site key on mount, and a storefront whose commerce
- * never escalates should not pay a request per auth form for a challenge it
- * will never be shown.
- */
-
-export interface AuthCaptchaApi {
-  /** The widget itself; renders nothing until the challenge is revealed. */
-  View: React.ComponentType<{ className?: string }>;
-  /** Whether the challenge is on screen. */
-  isVisible: boolean;
-  /** Whether the shopper has solved it. */
-  validated: boolean;
-  /**
-   * Reveal the challenge, or validate a solved one. Resolves true only when
-   * commerce accepted the answer — which is the moment a submit may be retried.
-   */
-  validate: () => Promise<boolean>;
-}
-
-const AuthCaptchaContext = React.createContext<AuthCaptchaApi | null>(null);
-
-/** The api for a Captcha block, or null when no form is offering one. */
-export const useAuthCaptcha = (): AuthCaptchaApi | null =>
-  React.useContext(AuthCaptchaContext);
-
-interface AuthCaptchaHostProps {
-  /**
-   * Called whenever the api changes, so the form can read `validated` and
-   * `validate` at submit time without re-rendering itself on every captcha
-   * state change.
-   */
-  onApi: (api: AuthCaptchaApi) => void;
-  children: React.ReactNode;
-}
-
-/**
- * Wraps a form's contents while `showCaptcha` is on: hands the api down to any
- * Captcha block inside, and up to the form through `onApi`.
- */
-export const AuthCaptchaHost = ({ onApi, children }: AuthCaptchaHostProps) => {
-  const { CaptchaView, validated, isVisible, validate } = useCaptcha();
-
-  const api = React.useMemo<AuthCaptchaApi>(
-    () => ({ View: CaptchaView, validated, isVisible, validate }),
-    // `validate` is re-created every render by the hook, so it is deliberately
-    // NOT a dependency: including it would rebuild the api — and re-run the
-    // effect below — on every keystroke in the form.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [CaptchaView, validated, isVisible]
-  );
-
-  const apiRef = React.useRef(api);
-  apiRef.current = { ...api, validate };
-
-  React.useEffect(() => {
-    onApi(apiRef.current);
-  }, [api, onApi]);
-
-  return (
-    <AuthCaptchaContext.Provider value={api}>
-      {children}
-    </AuthCaptchaContext.Provider>
-  );
-};
-
-/**
- * The widget, drawn by the FORM rather than by a block.
- *
- * The fallback for a composition that has not placed a Captcha block, and the
- * only way a childless form can show one at all — the same relationship the
- * built-in error line has with a Form Error block. Renders nothing until
- * commerce escalates.
- */
-export const AuthCaptchaSlot = () => {
-  const captcha = useAuthCaptcha();
-
-  if (!captcha) return null;
-
-  return (
-    <div data-auth-captcha="">
-      <captcha.View />
-    </div>
-  );
-};
-
-/**
- * Whether the composition placed a Captcha block itself.
- *
- * Same question, and the same shape of answer, as `containsAuthErrorBlock`: a
- * form that finds one draws nothing of its own, so the challenge appears where
- * the designer put it rather than twice.
- */
-export const containsCaptchaBlock = (
-  blocks: { type?: string; blocks?: unknown[] }[] | undefined
-): boolean =>
-  (blocks || []).some(
-    (block) =>
-      block?.type === 'captcha' ||
-      containsCaptchaBlock(
-        block?.blocks as { type?: string; blocks?: unknown[] }[] | undefined
-      )
-  );

package/src/auth/auth-destination.ts

@@ -1,168 +0,0 @@
-/**
- * Where a shopper goes after signing in — and where an already signed-in one
- * is sent when they land on a login screen.
- *
- * One resolver for both, because they are the same question asked twice: "what
- * was this shopper trying to reach?" The composable forms used to answer it
- * with a compiled-in `/`, which is the answer least often right — a shopper
- * who was sent to sign in from the basket, or who opened the header's drawer
- * two clicks into a product page, is not asking to be taken to the homepage.
- *
- * Three modes, because the right answer depends on WHERE the form is:
- *
- *  - `stay` is what a drawer wants. There is nothing to navigate to: the
- *    shopper is already on the page they care about, and the sign-in was a
- *    detour. The host closes the modal and refreshes; no push at all.
- *  - `return` is what a login PAGE wants: the storefront put the intended
- *    destination in the url, and this reads it back.
- *  - `fixed` is the historical behaviour and stays the default, so no
- *    published composition changes where it lands.
- */
-
-export const AUTH_AFTER_SIGN_IN_MODES = ['fixed', 'return', 'stay'] as const;
-
-export type AuthAfterSignIn = (typeof AUTH_AFTER_SIGN_IN_MODES)[number];
-
-/**
- * The query keys a pz storefront carries the destination in.
- *
- * `callbackUrl` is next-auth's own convention and what the brands' own login
- * views read; `next` is what the OAuth middleware writes when it hands a
- * shopper back (`middlewares/oauth-login.ts`). Both are read, first one wins,
- * so a composed form behaves like the hand-written view it replaces.
- */
-export const AUTH_RETURN_PARAMS = ['callbackUrl', 'next'] as const;
-
-/**
- * Whether a destination is somewhere on THIS storefront.
- *
- * The whole point of reading a destination out of the url is that anyone can
- * write one — a mail, an ad, a link on another site. `?callbackUrl=https://…`
- * would turn every composed login form into an open redirect: the shopper
- * signs in on the brand's own domain and is handed to a page that is not it.
- * Nothing here is ever navigated to unless it is a path on this origin.
- *
- * `//evil.example` is the case worth naming: it starts with a slash, and a
- * browser reads it as protocol-relative — a different host.
- */
-export const isSafeInternalPath = (value?: string | null): boolean => {
-  if (typeof value !== 'string') return false;
-
-  const path = value.trim();
-
-  if (!path.startsWith('/')) return false;
-  if (path.startsWith('//') || path.startsWith('/\\')) return false;
-  // A control character in a url is either an encoding accident or an attempt
-  // to smuggle one past a check like this.
-  // eslint-disable-next-line no-control-regex
-  if (/[\u0000-\u001f\u007f]/.test(path)) return false;
-
-  return true;
-};
-
-/** The path itself, or the fallback when it is not ours to navigate to. */
-export const safeInternalPath = (
-  value: string | null | undefined,
-  fallback: string
-): string => (isSafeInternalPath(value) ? (value as string).trim() : fallback);
-
-/**
- * The destination the url is asking for, if any.
- *
- * Reads a plain `URLSearchParams` (what `useSearchParams` hands back) so the
- * resolver stays testable without a router.
- */
-export const readReturnPath = (
-  search: { get(name: string): string | null } | null | undefined
-): string | null => {
-  if (!search) return null;
-
-  for (const param of AUTH_RETURN_PARAMS) {
-    const value = search.get(param);
-    if (isSafeInternalPath(value)) return (value as string).trim();
-  }
-
-  return null;
-};
-
-export interface AuthDestinationInput {
-  mode: AuthAfterSignIn;
-  /** The form's authored destination — the `fixed` answer, and the fallback. */
-  authored: string;
-  search?: { get(name: string): string | null } | null;
-  /**
-   * Whether the form is inside a modal. A sign-in there is a DETOUR from the
-   * page the shopper is on, so a destination that says nothing — the shipped
-   * `/`, or the page they are already on — is read as "nowhere to go" rather
-   * than as a navigation.
-   *
-   * Decided on the VALUE and not on the mode's default, deliberately: the
-   * editor writes every select's default into the block it inserts
-   * (`getDefaultBlockProperties`), so a host-aware DEFAULT would be dead for
-   * every newly authored drawer — it would only ever apply to compositions
-   * that predate the property. An authored `/account` still navigates.
-   */
-  inModal?: boolean;
-  /** The page the shopper is on, so "go where you already are" can be seen. */
-  pathname?: string | null;
-}
-
-/**
- * Where to go, or `null` for "do not navigate at all" — which is a real answer
- * rather than a missing one, and the one a drawer needs.
- */
-export const resolveAuthDestination = ({
-  mode,
-  authored,
-  search,
-  inModal = false,
-  pathname
-}: AuthDestinationInput): string | null => {
-  if (mode === 'stay') return null;
-
-  const fallback = safeInternalPath(authored, '/');
-  const resolved = mode === 'return' ? readReturnPath(search) ?? fallback : fallback;
-
-  // Inside a modal, a destination that names nowhere in particular is nowhere
-  // to go — see `inModal`.
-  if (inModal && (resolved === '/' || resolved === pathname)) return null;
-
-  return resolved;
-};
-
-/**
- * The same question for a shopper who is ALREADY signed in and has landed on a
- * login screen. The url still knows what they were trying to reach, so it is
- * honoured first; `authored` is where a brand sends them otherwise (their
- * account, normally).
- *
- * Never `null`: a signed-in shopper looking at a login form is a dead end, so
- * there is always somewhere better to be.
- */
-export const resolveSignedInDestination = (
-  authored: string,
-  search?: { get(name: string): string | null } | null
-): string => readReturnPath(search) ?? safeInternalPath(authored, '/account');
-
-/**
- * The path a trigger records so the form can bring the shopper back.
- *
- * Appended by the control that NAVIGATES to a login page — the account button,
- * a "sign in" link — because that control is the only thing that knows where
- * the shopper was standing. Without it the login page has nothing to return
- * to, which is why `return` mode used to be unbuildable: pz's own route guard
- * redirects to the auth page with no parameter at all.
- */
-export const withReturnPath = (href: string, currentPath?: string): string => {
-  if (!isSafeInternalPath(href) || !isSafeInternalPath(currentPath)) return href;
-
-  // Never twice, and never over an answer the author wrote themselves.
-  const [path, query = ''] = href.split('?');
-  const params = new URLSearchParams(query);
-
-  if (AUTH_RETURN_PARAMS.some((param) => params.get(param))) return href;
-
-  params.set(AUTH_RETURN_PARAMS[0], (currentPath as string).trim());
-
-  return `${path}?${params.toString()}`;
-};