@indietabletop/appkit 6.1.6 → 7.0.0-0

package/lib/account/PasswordResetCard.stories.tsx

@@ -1,242 +0,0 @@
-import { http, HttpResponse } from "msw";
-import preview from "../../.storybook/preview.tsx";
-import { sleep } from "../sleep.ts";
-import type { CurrentUser, SessionInfo } from "../types.ts";
-import { PasswordResetCard } from "./PasswordResetCard.tsx";
-
-function createMocks(options?: { responseSpeed?: number }) {
-  const simulateNetwork = () => sleep(options?.responseSpeed ?? 2000);
-
-  const john: CurrentUser = {
-    id: "john",
-    email: "john@example.com",
-    isVerified: true,
-  };
-
-  const sessionInfo: SessionInfo = {
-    createdTs: 123,
-    expiresTs: 123,
-  };
-
-  return {
-    data: { john },
-    handlers: {
-      requestPasswordReset: {
-        success: () => {
-          return http.post(
-            "http://mock.api/v1/password-reset-tokens",
-            async () => {
-              await simulateNetwork();
-              return HttpResponse.json({ message: "OK", tokenId: "1" });
-            },
-          );
-        },
-        userNotFound: () => {
-          return http.post(
-            "http://mock.api/v1/password-reset-tokens",
-            async () => {
-              await simulateNetwork();
-              return HttpResponse.text("User not found", { status: 404 });
-            },
-          );
-        },
-        unknownFailure: () => {
-          return http.post(
-            "http://mock.api/v1/password-reset-tokens",
-            async () => {
-              await simulateNetwork();
-              return HttpResponse.text("Internal server error", {
-                status: 500,
-              });
-            },
-          );
-        },
-      },
-
-      checkPasswordResetCode: {
-        success() {
-          return http.get(
-            "http://mock.api/v1/password-reset-tokens/:id",
-            async () => {
-              await simulateNetwork();
-              return HttpResponse.json({ message: "OK" });
-            },
-          );
-        },
-        notFoundOrExpired() {
-          return http.get(
-            "http://mock.api/v1/password-reset-tokens/:id",
-            async () => {
-              await simulateNetwork();
-              return HttpResponse.text("Not found", { status: 404 });
-            },
-          );
-        },
-        unknownFailure() {
-          return http.get(
-            "http://mock.api/v1/password-reset-tokens/:id",
-            async () => {
-              await simulateNetwork();
-              return HttpResponse.text("Internal server error", {
-                status: 500,
-              });
-            },
-          );
-        },
-      },
-
-      setNewPassword: {
-        success() {
-          return http.put(
-            "http://mock.api/v1/password-reset-tokens/:id",
-            async () => {
-              await simulateNetwork();
-              return HttpResponse.json({ message: "OK" });
-            },
-          );
-        },
-        notFoundOrExpired() {
-          return http.put(
-            "http://mock.api/v1/password-reset-tokens/:id",
-            async () => {
-              await simulateNetwork();
-              return HttpResponse.text("Not found", { status: 404 });
-            },
-          );
-        },
-        unknownFailure() {
-          return http.put(
-            "http://mock.api/v1/password-reset-tokens/:id",
-            async () => {
-              await simulateNetwork();
-              return HttpResponse.text("Internal server error", {
-                status: 500,
-              });
-            },
-          );
-        },
-      },
-
-      createNewSession: {
-        success: (currentUser: CurrentUser) => {
-          return http.post("http://mock.api/v1/sessions", async () => {
-            await simulateNetwork();
-            return HttpResponse.json({ currentUser, sessionInfo });
-          });
-        },
-      },
-    },
-  };
-}
-
-const { data, handlers } = createMocks({ responseSpeed: 700 });
-
-const meta = preview.meta({
-  title: "Account/Password Reset Page",
-  component: PasswordResetCard,
-  tags: ["autodocs"],
-  args: {},
-  parameters: {
-    msw: {
-      handlers: {
-        request: handlers.requestPasswordReset.success(),
-        check: handlers.checkPasswordResetCode.success(),
-        set: handlers.setNewPassword.success(),
-        login: handlers.createNewSession.success(data.john),
-      },
-    },
-  },
-});
-
-/**
- * The default case in which all steps of the flow succeed.
- */
-export const Success = meta.story({});
-
-/**
- * In this case, the initial step fails because the email address was not
- * found in our database.
- */
-export const UserNotFoundOnRequestCode = meta.story({
-  parameters: {
-    msw: {
-      handlers: {
-        request: handlers.requestPasswordReset.userNotFound(),
-      },
-    },
-  },
-});
-
-/**
- * In this case, the initial step fails for a reason that doesn't have any
- * special handling in this location. E.g. network error, server error, etc.
- */
-export const UnknownFailureOnRequestCode = meta.story({
-  parameters: {
-    msw: {
-      handlers: {
-        request: handlers.requestPasswordReset.unknownFailure(),
-      },
-    },
-  },
-});
-
-/**
- * In this case, the check code step fails because the token has expired,
- * or is incorrect.
- */
-export const NotFoundOrExpiredOnCheckCode = meta.story({
-  parameters: {
-    msw: {
-      handlers: {
-        check: handlers.checkPasswordResetCode.notFoundOrExpired(),
-      },
-    },
-  },
-});
-
-/**
- * In this case, the check step fails for a reason that doesn't have any
- * special handling in this location. E.g. network error, server error, etc.
- */
-export const UnknownFailureOnCheckCode = meta.story({
-  parameters: {
-    msw: {
-      handlers: {
-        check: handlers.checkPasswordResetCode.unknownFailure(),
-      },
-    },
-  },
-});
-
-/**
- * In this case, the final set password step fails because the token has
- * expired.
- *
- * Note that technically the token could also be incorrect/not found, but
- * because the user has gotten through the check step, that would require
- * some very strange set of circumstances.
- */
-export const NotFoundOrExpiredOnSetPassword = meta.story({
-  parameters: {
-    msw: {
-      handlers: {
-        set: handlers.setNewPassword.notFoundOrExpired(),
-      },
-    },
-  },
-});
-
-/**
- * In this case, the set password step fails for a reason that doesn't have any
- * special handling in this location. E.g. network error, server error, etc.
- */
-export const UnknownFailureOnSetPassword = meta.story({
-  parameters: {
-    msw: {
-      handlers: {
-        set: handlers.setNewPassword.unknownFailure(),
-      },
-    },
-  },
-});

package/lib/account/PasswordResetCard.tsx

@@ -1,296 +0,0 @@
-import { Form, useStoreState } from "@ariakit/react";
-import { type Dispatch, type SetStateAction, useState } from "react";
-import { Link } from "wouter";
-import { useAppConfig, useClient } from "../AppConfig/AppConfig.tsx";
-import { cx } from "../class-names.ts";
-import { interactiveText } from "../common.css.ts";
-import { getSubmitFailureMessage } from "../failureMessages.ts";
-import {
-  Letterhead,
-  LetterheadHeading,
-  LetterheadParagraph,
-  LetterheadSubmitButton,
-} from "../Letterhead/index.tsx";
-import { button } from "../Letterhead/style.css.ts";
-import {
-  LetterheadFormActions,
-  LetterheadHeader,
-  LetterheadSubmitError,
-  LetterheadTextField,
-} from "../LetterheadForm/index.tsx";
-import { useForm } from "../use-form.ts";
-import { validEmail, validPassword } from "../validations.ts";
-import type { DefaultFormValues } from "./types.ts";
-
-type SetStep = Dispatch<SetStateAction<ResetPasswordStep>>;
-
-function RequestPasswordResetStep(props: {
-  defaultValues?: DefaultFormValues;
-  setStep: SetStep;
-}) {
-  const { defaultValues } = props;
-  const { client, placeholders, hrefs } = useAppConfig();
-
-  const { form, submitName } = useForm({
-    defaultValues: {
-      email: defaultValues?.email ?? "",
-    },
-    validate: {
-      email: validEmail,
-    },
-
-    async onSubmit({ values }) {
-      const op = await client.requestPasswordReset(values);
-
-      return op.mapFailure((failure) => {
-        return getSubmitFailureMessage(failure, {
-          404: "🤔 Couldn't find a user with this email address.",
-        });
-      });
-    },
-
-    onSuccess(response, { values }) {
-      props.setStep({
-        type: "SUBMIT_CODE",
-        tokenId: response.tokenId,
-        email: values.email,
-      });
-    },
-  });
-
-  const emailValue = useStoreState(form, (s) => s.values.email);
-
-  return (
-    <Letterhead>
-      <LetterheadHeader>
-        <LetterheadHeading>Password reset</LetterheadHeading>
-        <LetterheadParagraph>
-          Enter your Indie Tabletop Club account email to begin password reset.
-          We will send you a one-time code to verify your access.
-        </LetterheadParagraph>
-      </LetterheadHeader>
-
-      <Form store={form} resetOnSubmit={false}>
-        <LetterheadTextField
-          name={form.names.email}
-          label="Email"
-          type="email"
-          placeholder={placeholders.email}
-          required
-        />
-
-        <LetterheadFormActions>
-          <LetterheadSubmitError name={submitName} />
-          <LetterheadSubmitButton>Continue</LetterheadSubmitButton>
-
-          <LetterheadParagraph align="start">
-            {"Remembered your password? "}
-            <Link
-              href={hrefs.login()}
-              className={interactiveText}
-              state={{ emailValue }}
-            >
-              Log in
-            </Link>
-            {"."}
-          </LetterheadParagraph>
-        </LetterheadFormActions>
-      </Form>
-    </Letterhead>
-  );
-}
-
-function SubmitCodeStep(props: {
-  tokenId: string;
-  email: string;
-  setStep: SetStep;
-}) {
-  const client = useClient();
-  const { form, submitName } = useForm({
-    defaultValues: {
-      code: "",
-    },
-
-    async onSubmit({ values }) {
-      const op = await client.checkPasswordResetCode({
-        ...values,
-        tokenId: props.tokenId,
-      });
-
-      return op.mapFailure((failure) => {
-        return getSubmitFailureMessage(failure, {
-          404: "🚫 This code is incorrect or expired. Please try again.",
-        });
-      });
-    },
-
-    onSuccess(_, { values }) {
-      props.setStep({
-        type: "SET_NEW_PASSWORD",
-        tokenId: props.tokenId,
-        code: values.code,
-        email: props.email,
-      });
-    },
-  });
-
-  return (
-    <Letterhead>
-      <LetterheadHeader>
-        <LetterheadHeading>Submit code</LetterheadHeading>
-        <LetterheadParagraph>
-          We've sent a one-time code to the email address you have provided.
-          Please, enter the code in the field below to continue.
-        </LetterheadParagraph>
-      </LetterheadHeader>
-
-      <Form store={form} resetOnSubmit={false}>
-        <LetterheadTextField
-          name={form.names.code}
-          label="Code"
-          placeholder="E.g. 123123"
-          autoComplete="one-time-code"
-          required
-        />
-
-        <LetterheadFormActions>
-          <LetterheadSubmitError name={submitName} />
-          <LetterheadSubmitButton>Verify code</LetterheadSubmitButton>
-        </LetterheadFormActions>
-      </Form>
-    </Letterhead>
-  );
-}
-
-function SetNewPasswordStep(props: {
-  tokenId: string;
-  code: string;
-  email: string;
-  setStep: SetStep;
-}) {
-  const client = useClient();
-
-  const { form, submitName } = useForm({
-    defaultValues: { password: "" },
-    validate: { password: validPassword },
-    async onSubmit({ values }) {
-      const res = await client.setNewPassword({
-        tokenId: props.tokenId,
-        code: props.code,
-        password: values.password,
-      });
-
-      if (res.isFailure) {
-        return res.mapFailure((failure) => {
-          return getSubmitFailureMessage(failure, {
-            404: "⏱️ One-time code has expired. Please restart the password reset process.",
-          });
-        });
-      }
-
-      // Login attempt with new credentials. Must be performed in onSubmit so
-      // that errors are correctly propagated.
-      const loginOp = await client.login({
-        email: props.email,
-        password: values.password,
-      });
-
-      return loginOp.mapFailure(getSubmitFailureMessage);
-    },
-    onSuccess() {
-      props.setStep({ type: "SUCCESS" });
-    },
-  });
-
-  return (
-    <Letterhead>
-      <LetterheadHeader>
-        <LetterheadHeading>Choose New Password</LetterheadHeading>
-        <LetterheadParagraph>
-          Please choose a new password. Make it at least 8 characters long.
-        </LetterheadParagraph>
-      </LetterheadHeader>
-
-      <Form store={form} resetOnSubmit={false}>
-        <LetterheadTextField
-          name={form.names.password}
-          label="New Password"
-          type="password"
-          placeholder="Enter a new password"
-          required
-        />
-
-        <LetterheadFormActions>
-          <LetterheadSubmitError name={submitName} />
-          <LetterheadSubmitButton>Save & Login</LetterheadSubmitButton>
-        </LetterheadFormActions>
-      </Form>
-    </Letterhead>
-  );
-}
-
-function SuccessStep() {
-  const { hrefs } = useAppConfig();
-
-  return (
-    <Letterhead>
-      <LetterheadHeader>
-        <LetterheadHeading>Success!</LetterheadHeading>
-        <LetterheadParagraph>
-          Your password has been successfully reset and you've been
-          automatically logged in. Yay!
-        </LetterheadParagraph>
-      </LetterheadHeader>
-
-      <LetterheadFormActions>
-        <Link href={hrefs.dashboard()} {...cx(button())}>
-          Go to dashboard
-        </Link>
-      </LetterheadFormActions>
-    </Letterhead>
-  );
-}
-
-type ResetPasswordStep =
-  | { type: "REQUEST_PASSWORD_RESET" }
-  | { type: "SUBMIT_CODE"; tokenId: string; email: string }
-  | { type: "SET_NEW_PASSWORD"; tokenId: string; code: string; email: string }
-  | { type: "SUCCESS" };
-
-export type PasswordResetCardProps = {
-  /**
-   * Default values for the initial request password reset step.
-   *
-   * You might want to provide a value for history state or query param, so that
-   * if a user jumps between login and password reset, their email address
-   * is maintained between the two locations.
-   */
-  defaultValues?: DefaultFormValues;
-};
-
-/**
- * Allows the user to reset their password.
- */
-export function PasswordResetCard(props: PasswordResetCardProps) {
-  const [step, setStep] = useState<ResetPasswordStep>({
-    type: "REQUEST_PASSWORD_RESET",
-  });
-
-  switch (step.type) {
-    case "REQUEST_PASSWORD_RESET": {
-      return <RequestPasswordResetStep {...props} setStep={setStep} />;
-    }
-
-    case "SUBMIT_CODE": {
-      return <SubmitCodeStep {...step} setStep={setStep} />;
-    }
-
-    case "SET_NEW_PASSWORD": {
-      return <SetNewPasswordStep {...step} setStep={setStep} />;
-    }
-
-    case "SUCCESS": {
-      return <SuccessStep />;
-    }
-  }
-}

package/lib/account/UserMismatchView.tsx

@@ -1,62 +0,0 @@
-import { Button } from "@ariakit/react";
-import { cx } from "../class-names.ts";
-import {
-  Letterhead,
-  LetterheadHeading,
-  LetterheadParagraph,
-} from "../Letterhead/index.tsx";
-import { LetterheadHeader } from "../LetterheadForm/index.tsx";
-import { useAppActions } from "../store/index.tsx";
-import type { CurrentUser } from "../types.ts";
-import { accountPicker } from "./style.css.ts";
-
-export function UserMismatchView(props: {
-  serverUser: CurrentUser;
-  localUser: CurrentUser;
-  reload: () => void;
-}) {
-  const { localUser, serverUser, reload } = props;
-  const { clientLogout, serverLogout } = useAppActions();
-
-  return (
-    <Letterhead>
-      <LetterheadHeader>
-        <LetterheadHeading>User mismatch</LetterheadHeading>
-
-        <LetterheadParagraph>
-          You are logged into Indie Tabletop Club as <em>{serverUser.email}</em>
-          , but locally stored data belong to <em>{localUser.email}</em>.
-        </LetterheadParagraph>
-
-        <LetterheadParagraph>
-          Which account do you want to use?
-        </LetterheadParagraph>
-      </LetterheadHeader>
-
-      <div {...cx(accountPicker.container)}>
-        <Button
-          {...cx(accountPicker.button)}
-          type="button"
-          onClick={async () => await clientLogout({ serverUser })}
-        >
-          <div {...cx(accountPicker.buttonLabel)}>{serverUser.email}</div>
-          <div>Local data will be deleted.</div>
-        </Button>
-
-        <div {...cx(accountPicker.divider)} />
-
-        <Button
-          {...cx(accountPicker.button)}
-          type="button"
-          onClick={async () => {
-            await serverLogout();
-            reload();
-          }}
-        >
-          <div {...cx(accountPicker.buttonLabel)}>{localUser.email}</div>
-          <div>You will be asked to log in again.</div>
-        </Button>
-      </div>
-    </Letterhead>
-  );
-}