@indietabletop/appkit 3.6.0-2 → 3.6.0-3

package/lib/account/PasswordResetPage.stories.tsx

@@ -0,0 +1,250 @@
+import { Story } from "@storybook/addon-docs/blocks";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { http, HttpResponse } from "msw";
+import { sleep } from "../sleep.ts";
+import type { CurrentUser, SessionInfo } from "../types.ts";
+import { PasswordResetCard } from "./PasswordResetPage.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 });
+
+/**
+ * Allows the user to reset their password.
+ */
+const 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),
+      },
+    },
+  },
+} satisfies Meta<typeof PasswordResetCard>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/**
+ * The default case in which all steps of the flow succeed.
+ */
+export const Success: Story = {};
+
+/**
+ * In this case, the initial step fails because the email address was not
+ * found in our database.
+ */
+export const UserNotFoundOnRequestCode: 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: 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: 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: 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: 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: Story = {
+  parameters: {
+    msw: {
+      handlers: {
+        set: handlers.setNewPassword.unknownFailure(),
+      },
+    },
+  },
+};

package/lib/account/PasswordResetPage.tsx

@@ -0,0 +1,291 @@
+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 function PasswordResetCard(props: {
+  /**
+   * 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;
+}) {
+  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

@@ -0,0 +1,61 @@
+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 type { CurrentUser } from "../types.ts";
+import { accountPicker } from "./style.css.ts";
+import type { EventHandler, EventHandlerWithReload } from "./types.ts";
+
+export function UserMismatchView(props: {
+  serverUser: CurrentUser;
+  localUser: CurrentUser;
+  onClearLocalContent: EventHandler;
+  onServerLogout: EventHandlerWithReload;
+  reload: () => void;
+}) {
+  const { localUser, serverUser, onClearLocalContent, onServerLogout, reload } =
+    props;
+
+  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={() => onClearLocalContent()}
+        >
+          <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={() => onServerLogout({ reload })}
+        >
+          <div {...cx(accountPicker.buttonLabel)}>{localUser.email}</div>
+          <div>You will be asked to log in again.</div>
+        </Button>
+      </div>
+    </Letterhead>
+  );
+}