@indietabletop/appkit 3.6.0-2 → 4.0.0-0

package/lib/account/JoinCard.stories.tsx

@@ -0,0 +1,264 @@
+import { Story } from "@storybook/addon-docs/blocks";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { http, HttpResponse } from "msw";
+import { fn } from "storybook/test";
+import { sleep } from "../sleep.ts";
+import type { CurrentUser, SessionInfo } from "../types.ts";
+import { JoinCard } from "./JoinCard.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: {
+      refreshTokens: {
+        failed: () => {
+          return http.post(
+            "http://mock.api/v1/sessions/access-tokens",
+            async () => {
+              await simulateNetwork();
+              return HttpResponse.text("Refresh token expired or missing", {
+                status: 401,
+              });
+            },
+          );
+        },
+      },
+
+      getCurrentUser: {
+        success: (currentUser: CurrentUser) => {
+          return http.get("http://mock.api/v1/users/me", async () => {
+            await simulateNetwork();
+            return HttpResponse.json(currentUser);
+          });
+        },
+
+        noConnection: () => {
+          return http.get("http://mock.api/v1/users/me", async () => {
+            return HttpResponse.error();
+          });
+        },
+
+        unknownFailure: () => {
+          return http.get("http://mock.api/v1/users/me", async () => {
+            await simulateNetwork();
+            return HttpResponse.text("Internal server error", { status: 500 });
+          });
+        },
+
+        /**
+         * Auth cookies no longer valid to make this request.
+         */
+        notAuthenticated: () => {
+          return http.get("http://mock.api/v1/users/me", async () => {
+            await simulateNetwork();
+            return HttpResponse.text("Not authenticated", { status: 401 });
+          });
+        },
+      },
+
+      join: {
+        success(currentUser: CurrentUser) {
+          return http.post("http://mock.api/v1/users", async () => {
+            await simulateNetwork();
+
+            return HttpResponse.json({
+              currentUser,
+              sessionInfo,
+              tokenId: "1",
+            });
+          });
+        },
+
+        emailTaken() {
+          return http.post("http://mock.api/v1/users", async () => {
+            await simulateNetwork();
+
+            return HttpResponse.text("Duplicate unique key", { status: 409 });
+          });
+        },
+
+        unknownFailure() {
+          return http.post("http://mock.api/v1/users", async () => {
+            await simulateNetwork();
+            return HttpResponse.text("Internal server error", {
+              status: 500,
+            });
+          });
+        },
+      },
+      verify: {
+        success() {
+          return http.put(
+            "http://mock.api/v1/user-verification-tokens/:id",
+            async () => {
+              await simulateNetwork();
+              return HttpResponse.json({ message: "OK" });
+            },
+          );
+        },
+        notFoundOrExpired() {
+          return http.put(
+            "http://mock.api/v1/user-verification-tokens/:id",
+            async () => {
+              await simulateNetwork();
+              return HttpResponse.text("Not found", { status: 404 });
+            },
+          );
+        },
+        unknownFailure() {
+          return http.put(
+            "http://mock.api/v1/user-verification-tokens/:id",
+            async () => {
+              await simulateNetwork();
+              return HttpResponse.text("Internal server error", {
+                status: 500,
+              });
+            },
+          );
+        },
+      },
+    },
+  };
+}
+
+const { data, handlers } = createMocks({ responseSpeed: 700 });
+
+const meta = {
+  title: "Account/Join Card",
+  component: JoinCard,
+  tags: ["autodocs"],
+  args: {
+    defaultValues: {},
+    onLogout: fn(),
+  },
+  parameters: {
+    msw: {
+      handlers: {
+        refresh: handlers.refreshTokens.failed(),
+        currentUser: handlers.getCurrentUser.notAuthenticated(),
+        join: handlers.join.success(data.john),
+        verify: handlers.verify.success(),
+      },
+    },
+  },
+} satisfies Meta<typeof JoinCard>;
+
+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 is associated
+ * with an existing user.
+ */
+export const EmailTakenOnJoin: Story = {
+  parameters: {
+    msw: {
+      handlers: {
+        join: handlers.join.emailTaken(),
+      },
+    },
+  },
+};
+
+/**
+ * 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 UnknownFailureOnJoin: Story = {
+  parameters: {
+    msw: {
+      handlers: {
+        join: handlers.join.unknownFailure(),
+      },
+    },
+  },
+};
+
+/**
+ * In this case, the verify step fails because the token has expired,
+ * or is incorrect.
+ */
+export const NotFoundOrExpiredOnVerify: Story = {
+  parameters: {
+    msw: {
+      handlers: {
+        verify: handlers.verify.notFoundOrExpired(),
+      },
+    },
+  },
+};
+
+/**
+ * In this case, the verify step fails for a reason that doesn't have any
+ * special handling in this location. E.g. network error, server error, etc.
+ */
+export const UnknownFailureOnVerify: Story = {
+  parameters: {
+    msw: {
+      handlers: {
+        verify: handlers.verify.unknownFailure(),
+      },
+    },
+  },
+};
+
+/**
+ * The proactive user-session check returns a user account.
+ *
+ * The user can continue to use the app, or log out.
+ */
+export const AlreadyLoggedIn: Story = {
+  parameters: {
+    msw: {
+      handlers: {
+        currentUser: handlers.getCurrentUser.success(data.john),
+      },
+    },
+  },
+};
+
+/**
+ * The proactive user session check has failed due to connection issues.
+ */
+export const NoConnection: Story = {
+  parameters: {
+    msw: {
+      handlers: {
+        currentUser: handlers.getCurrentUser.noConnection(),
+      },
+    },
+  },
+};
+
+/**
+ * The proactive user session check has failed due to an error that doesn't
+ * carry any special meaning.
+ */
+export const UnknownFailure: Story = {
+  parameters: {
+    msw: {
+      handlers: {
+        currentUser: handlers.getCurrentUser.unknownFailure(),
+      },
+    },
+  },
+};

package/lib/account/JoinCard.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 {
+  InputsStack,
+  LetterheadCheckboxField,
+  LetterheadFormActions,
+  LetterheadHeader,
+  LetterheadSubmitError,
+  LetterheadTextField,
+} from "../LetterheadForm/index.tsx";
+import { useForm } from "../use-form.ts";
+import { validEmail, validPassword } from "../validations.ts";
+import { AlreadyLoggedInView } from "./AlreadyLoggedInView.tsx";
+import { FailureFallbackView } from "./FailureFallbackView.tsx";
+import { LoadingView } from "./LoadingView.tsx";
+import { NoConnectionView } from "./NoConnectionView.tsx";
+import type { DefaultFormValues, EventHandlerWithReload } from "./types.ts";
+import { useCurrentUserResult } from "./useCurrentUserResult.tsx";
+
+type SetStep = Dispatch<SetStateAction<JoinStep>>;
+
+function InitialStep(props: {
+  setStep: SetStep;
+  defaultValues?: DefaultFormValues;
+}) {
+  const { client, placeholders, hrefs } = useAppConfig();
+  const { defaultValues, setStep } = props;
+
+  const { form, submitName } = useForm({
+    defaultValues: {
+      email: defaultValues?.email ?? "",
+      password: "",
+      acceptedTos: false,
+      subscribedToNewsletter: false,
+    },
+    validate: {
+      email: validEmail,
+      password: validPassword,
+    },
+    async onSubmit({ values }) {
+      const op = await client.join(values);
+
+      return op.mapFailure((failure) => {
+        return getSubmitFailureMessage(failure, {
+          409: "🙀 This email address is already in use. Please choose a different one, or log in.",
+        });
+      });
+    },
+    onSuccess(response, form) {
+      setStep({
+        type: "SUBMIT_CODE",
+        tokenId: response.tokenId,
+        email: form.values.email,
+      });
+    },
+  });
+
+  const emailValue = useStoreState(form, (s) => s.values.email);
+
+  return (
+    <Letterhead>
+      <LetterheadHeader>
+        <LetterheadHeading>Join Indie Tabletop Club</LetterheadHeading>
+        <LetterheadParagraph>
+          Enter your email and choose a strong password. We will send you a
+          one-time code to verify your account.
+        </LetterheadParagraph>
+      </LetterheadHeader>
+
+      <Form store={form} resetOnSubmit={false}>
+        <InputsStack>
+          <LetterheadTextField
+            name={form.names.email}
+            label="Email"
+            type="email"
+            placeholder={placeholders.email}
+            autoComplete="username"
+            required
+          />
+
+          <LetterheadTextField
+            name={form.names.password}
+            label="Password"
+            type="password"
+            placeholder="Choose a strong password"
+            hint="Must be at least 8 characters"
+            autoComplete="new-password"
+            required
+          />
+
+          <LetterheadCheckboxField
+            name={form.names.subscribedToNewsletter}
+            label={
+              <>
+                Subscribe to <em>The Changelog</em>, an at-most-once-a-month
+                newsletter about updates and new releases. You can unsubscribe
+                any time with one click.
+              </>
+            }
+          />
+
+          <LetterheadCheckboxField
+            name={form.names.acceptedTos}
+            required
+            label={
+              <>
+                I accept the{" "}
+                <a
+                  target="_blank"
+                  rel="noreferrer noopener"
+                  href={hrefs.terms({ content: "join" })}
+                  className={interactiveText}
+                >
+                  Terms of Service
+                </a>
+                .
+              </>
+            }
+          />
+        </InputsStack>
+
+        <LetterheadFormActions>
+          <LetterheadSubmitError name={submitName} />
+          <LetterheadSubmitButton>Join</LetterheadSubmitButton>
+
+          <LetterheadParagraph align="start">
+            {"Have an existing account? "}
+            <Link
+              {...cx(interactiveText)}
+              href={hrefs.login()}
+              state={{ emailValue }}
+            >
+              Log in
+            </Link>
+            {"."}
+          </LetterheadParagraph>
+        </LetterheadFormActions>
+      </Form>
+    </Letterhead>
+  );
+}
+
+function SubmitCodeStep(props: {
+  tokenId: string;
+  setStep: SetStep;
+  email: string;
+}) {
+  const { tokenId, email, setStep } = props;
+  const client = useClient();
+
+  const { form, submitName } = useForm({
+    defaultValues: {
+      code: "",
+    },
+    async onSubmit({ values }) {
+      const op = await client.verifyUser({ ...values, tokenId });
+
+      return op.mapFailure((failure) => {
+        return getSubmitFailureMessage(failure, {
+          404: "🚫 This code is incorrect or expired. Please try again.",
+        });
+      });
+    },
+    onSuccess() {
+      setStep({ type: "SUCCESS" });
+    },
+  });
+
+  return (
+    <Form store={form} resetOnSubmit={false}>
+      <Letterhead>
+        <LetterheadHeader>
+          <LetterheadHeading>Verify account</LetterheadHeading>
+          <LetterheadParagraph>
+            We've sent a one-time code to <em>{email}</em>. Please, enter the
+            code in the field below to verify your account.
+          </LetterheadParagraph>
+        </LetterheadHeader>
+
+        <LetterheadTextField
+          name={form.names.code}
+          label="Code"
+          placeholder="E.g. 123123"
+          autoComplete="one-time-code"
+          required
+        />
+
+        <LetterheadFormActions>
+          <LetterheadSubmitError name={submitName} />
+          <LetterheadSubmitButton>Verify</LetterheadSubmitButton>
+        </LetterheadFormActions>
+      </Letterhead>
+    </Form>
+  );
+}
+
+function SuccessStep() {
+  const { hrefs } = useAppConfig();
+  return (
+    <Letterhead>
+      <LetterheadHeader>
+        <LetterheadHeading>Success!</LetterheadHeading>
+        <LetterheadParagraph>
+          Your Indie Tabletop Club account has been verified, yay!
+        </LetterheadParagraph>
+      </LetterheadHeader>
+
+      <Link href={hrefs.dashboard()} {...cx(button())}>
+        Go to dashboard
+      </Link>
+    </Letterhead>
+  );
+}
+
+type JoinStep =
+  | { type: "INITIAL" }
+  | { type: "SUBMIT_CODE"; tokenId: string; email: string }
+  | { type: "SUCCESS" };
+
+function JoinFlow(props: { defaultValues?: DefaultFormValues }) {
+  const [step, setStep] = useState<JoinStep>({ type: "INITIAL" });
+
+  switch (step.type) {
+    case "INITIAL": {
+      return <InitialStep {...props} setStep={setStep} />;
+    }
+
+    case "SUBMIT_CODE": {
+      return <SubmitCodeStep {...step} setStep={setStep} />;
+    }
+
+    case "SUCCESS": {
+      return <SuccessStep />;
+    }
+  }
+}
+
+export type JoinCardProps = {
+  onLogout: EventHandlerWithReload;
+  defaultValues?: DefaultFormValues;
+};
+
+/**
+ * Allows the user to join Indie Tabletop Club.
+ */
+export function JoinCard(props: JoinCardProps) {
+  const { result, latestAttemptTs, reload } = useCurrentUserResult();
+
+  return result.unpack(
+    (currentUser) => {
+      return (
+        <AlreadyLoggedInView
+          {...props}
+          currentUser={currentUser}
+          reload={reload}
+        />
+      );
+    },
+    (failure) => {
+      if (failure.type === "API_ERROR" && failure.code === 401) {
+        return <JoinFlow {...props} />;
+      }
+
+      if (failure.type === "NETWORK_ERROR") {
+        return (
+          <NoConnectionView
+            latestAttemptTs={latestAttemptTs}
+            onRetry={() => reload()}
+          />
+        );
+      }
+
+      return <FailureFallbackView />;
+    },
+    () => {
+      return <LoadingView />;
+    },
+  );
+}

package/lib/account/LoadingView.tsx

@@ -0,0 +1,14 @@
+import { cx } from "../class-names.ts";
+import { Letterhead } from "../Letterhead/index.tsx";
+import { LoadingIndicator } from "../LoadingIndicator.tsx";
+import { loadingView } from "./style.css.ts";
+
+export function LoadingView() {
+  return (
+    <Letterhead>
+      <div {...cx(loadingView.container)}>
+        <LoadingIndicator />
+      </div>
+    </Letterhead>
+  );
+}