@indietabletop/appkit 6.1.6 → 7.0.0-0

package/lib/account/CurrentUserFetcher.tsx

@@ -1,118 +0,0 @@
-import { useState, type ReactNode } from "react";
-import { ModalDialog } from "../ModalDialog/index.tsx";
-import { useCurrentUser } from "../store/index.tsx";
-import { AccountIssueView } from "./AccountIssueView.tsx";
-import { LoginView } from "./LoginView.tsx";
-import { useFetchCurrentUser } from "./useFetchCurrentUser.tsx";
-import { UserMismatchView } from "./UserMismatchView.tsx";
-import { VerifyAccountView } from "./VerifyPage.tsx";
-
-type CurrentUserFetcherProps = {
-  children: ReactNode;
-};
-
-/**
- * Fetches fresh current user data if a local user exists in the app store.
- *
- * This component uses the Indie Tabletop Client under the hood, so if new
- * data is successfully fetched, the onCurrentUser callback will be invoked,
- * and it is up to the configuration of the client to store the data.
- *
- * Importantly, this component also handles the various user account issues
- * that we could run into: expired session, user mismatch and account deletion.
- *
- * All other errors are ignored. This allows users to use the app in offline
- * mode, and doesn't interrupt their session if some unexpected error happens,
- * which they cannot do anything about anyways.
- */
-export function CurrentUserFetcher(props: CurrentUserFetcherProps) {
-  const { children } = props;
-  const localUser = useCurrentUser();
-  const [isOpen, setOpen] = useState(true);
-
-  const { result, reload } = useFetchCurrentUser({
-    // We only want to fetch the current user if they exist in the store, i.e.
-    // they have logged into the app previously.
-    performFetch: !!localUser,
-
-    // If we are performing a fetch, we want to make sure that it is up to date
-    // every time the user focuses the window.
-    revalidateOnFocus: true,
-  });
-
-  if (result.isFailure && result.failure.type === "API_ERROR") {
-    // The user's session has expired. They should be prompted to
-    // re-authenticate, as any syncing attemps will fail.
-    if (result.failure.code === 401) {
-      return (
-        <>
-          <ModalDialog size="large" open>
-            <LoginView
-              currentUser={localUser}
-              onLogin={() => reload()}
-              description={undefined}
-              reload={reload}
-            />
-          </ModalDialog>
-          {children}
-        </>
-      );
-    }
-
-    if (result.failure.code === 404) {
-      // The user account is not found. The user might have been deleted.
-      // The user should be notified and instructed to log out, as many
-      // interactions acrosss the app will be broken.
-      return (
-        <>
-          <ModalDialog size="large" open>
-            <AccountIssueView reload={reload} />
-          </ModalDialog>
-
-          {children}
-        </>
-      );
-    }
-  }
-
-  if (localUser && result.isSuccess) {
-    const serverUser = result.value;
-
-    // The cookie (server) user and the user in local storage are a different
-    // user. The current user needs to decide which account to use.
-    if (serverUser.id !== localUser.id) {
-      return (
-        <>
-          <ModalDialog size="large" open>
-            <UserMismatchView
-              serverUser={result.value}
-              localUser={localUser}
-              reload={reload}
-            />
-          </ModalDialog>
-
-          {children}
-        </>
-      );
-    }
-
-    if (!serverUser.isVerified) {
-      return (
-        <>
-          <ModalDialog size="large" open={isOpen}>
-            <VerifyAccountView
-              currentUser={serverUser}
-              onClose={() => setOpen(false)}
-              reload={reload}
-            />
-          </ModalDialog>
-
-          {children}
-        </>
-      );
-    }
-  }
-
-  // In all other cases we simply render the children
-  return <>{children}</>;
-}

package/lib/account/FailureFallbackView.tsx

@@ -1,36 +0,0 @@
-import { Button } from "@ariakit/react";
-import { cx } from "../class-names.ts";
-import { interactiveText } from "../common.css.ts";
-import {
-  Letterhead,
-  LetterheadHeading,
-  LetterheadParagraph,
-} from "../Letterhead/index.tsx";
-
-export function FailureFallbackView() {
-  return (
-    <Letterhead>
-      <LetterheadHeading>Something went wrong</LetterheadHeading>
-
-      <LetterheadParagraph>
-        {"This is probably an issue on our side. Sorry about that!"}
-      </LetterheadParagraph>
-
-      <LetterheadParagraph>
-        {"You can try "}
-        <Button
-          {...cx(interactiveText)}
-          onClick={() => window.location.reload()}
-        >
-          reloading the app
-        </Button>
-        {". "}
-        {"If the issue persists, please get in touch at "}
-        <a {...cx(interactiveText)} href="mailto:support@indietabletop.club">
-          support@indietabletop.club
-        </a>
-        {"."}
-      </LetterheadParagraph>
-    </Letterhead>
-  );
-}

package/lib/account/JoinCard.stories.tsx

@@ -1,257 +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 { 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 = preview.meta({
-  title: "Account/Join Card",
-  component: JoinCard,
-  tags: ["autodocs"],
-  args: {
-    defaultValues: {},
-  },
-  parameters: {
-    msw: {
-      handlers: {
-        refresh: handlers.refreshTokens.failed(),
-        currentUser: handlers.getCurrentUser.notAuthenticated(),
-        join: handlers.join.success(data.john),
-        verify: handlers.verify.success(),
-      },
-    },
-  },
-});
-
-/**
- * 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 is associated
- * with an existing user.
- */
-export const EmailTakenOnJoin = meta.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 = meta.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 = meta.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 = meta.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 = meta.story({
-  parameters: {
-    msw: {
-      handlers: {
-        currentUser: handlers.getCurrentUser.success(data.john),
-      },
-    },
-  },
-});
-
-/**
- * The proactive user session check has failed due to connection issues.
- */
-export const NoConnection = meta.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 = meta.story({
-  parameters: {
-    msw: {
-      handlers: {
-        currentUser: handlers.getCurrentUser.unknownFailure(),
-      },
-    },
-  },
-});

package/lib/account/JoinCard.tsx

@@ -1,301 +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 {
-  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 } from "./types.ts";
-import { useFetchCurrentUser } from "./useFetchCurrentUser.tsx";
-import { useRedirectPath } from "./useRedirectPath.ts";
-
-type SetStep = Dispatch<SetStateAction<JoinStep>>;
-
-type InitialStepProps = {
-  setStep: SetStep;
-  defaultValues?: DefaultFormValues;
-};
-
-function InitialStep(props: InitialStepProps) {
-  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>
-  );
-}
-
-type SubmitCodeStepProps = {
-  tokenId: string;
-  setStep: SetStep;
-  email: string;
-};
-
-function SubmitCodeStep(props: SubmitCodeStepProps) {
-  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();
-  const redirectPath = useRedirectPath();
-
-  return (
-    <Letterhead>
-      <LetterheadHeader>
-        <LetterheadHeading>Success!</LetterheadHeading>
-        <LetterheadParagraph>
-          Your Indie Tabletop Club account has been verified, yay!
-        </LetterheadParagraph>
-      </LetterheadHeader>
-
-      <Link href={redirectPath ?? hrefs.dashboard()} {...cx(button())}>
-        {redirectPath ? "Continue" : "Go to dashboard"}
-      </Link>
-    </Letterhead>
-  );
-}
-
-type JoinStep =
-  | { type: "INITIAL" }
-  | { type: "SUBMIT_CODE"; tokenId: string; email: string }
-  | { type: "SUCCESS" };
-
-type JoinFlowProps = {
-  defaultValues?: DefaultFormValues;
-};
-
-function JoinFlow(props: JoinFlowProps) {
-  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 = {
-  defaultValues?: DefaultFormValues;
-};
-
-/**
- * Allows the user to join Indie Tabletop Club.
- *
- * Will automatically use the `redirectTo` query param value as the redirect
- * location once the user creates and verifies their account.
- *
- * Otherwise a success screen will be shown and the user will be directed to
- * the dashboard.
- */
-export function JoinCard(props: JoinCardProps) {
-  const { result, latestAttemptTs, reload } = useFetchCurrentUser();
-
-  return result.unpack(
-    (currentUser) => {
-      return <AlreadyLoggedInView 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 />;
-    },
-  );
-}