@indietabletop/appkit 6.1.6 → 7.0.0-0

package/lib/account/LoadingView.tsx

@@ -1,14 +0,0 @@
-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>
-  );
-}

package/lib/account/LoginCard.stories.tsx

@@ -1,288 +0,0 @@
-import { http, HttpResponse } from "msw";
-import { fn } from "storybook/test";
-import preview from "../../.storybook/preview.tsx";
-import { sleep } from "../sleep.ts";
-import type { CurrentUser, SessionInfo } from "../types.ts";
-import { LoginCard } from "./LoginCard.tsx";
-
-function createMocks(options?: { responseSpeed?: number }) {
-  const simulateNetwork = () => sleep(options?.responseSpeed ?? 2000);
-
-  const john: CurrentUser = {
-    id: "john",
-    email: "john@example.com",
-    isVerified: true,
-  };
-
-  const mary: CurrentUser = {
-    id: "mary",
-    email: "mary@example.com",
-    isVerified: true,
-  };
-
-  const sessionInfo: SessionInfo = {
-    createdTs: 123,
-    expiresTs: 123,
-  };
-
-  return {
-    data: { john, mary },
-    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);
-          });
-        },
-
-        /**
-         * Cookie is valid, but user doesn't exist any more. This can happen
-         * after user deletion.
-         */
-        notFound: () => {
-          return http.get("http://mock.api/v1/users/me", async () => {
-            await simulateNetwork();
-            return HttpResponse.text("User not found", { status: 404 });
-          });
-        },
-
-        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 });
-          });
-        },
-      },
-
-      createNewSession: {
-        success: (currentUser: CurrentUser) => {
-          return http.post("http://mock.api/v1/sessions", async () => {
-            await simulateNetwork();
-            return HttpResponse.json({ currentUser, sessionInfo });
-          });
-        },
-
-        invalidCredentials: () => {
-          return http.post("http://mock.api/v1/sessions", async () => {
-            await simulateNetwork();
-            return HttpResponse.text("Credentials do not match", {
-              status: 401,
-            });
-          });
-        },
-
-        userNotFound: () => {
-          return http.post("http://mock.api/v1/sessions", async () => {
-            await simulateNetwork();
-            return HttpResponse.text("User not found", { status: 404 });
-          });
-        },
-
-        unknownFailure: () => {
-          return http.post("http://mock.api/v1/sessions", async () => {
-            await simulateNetwork();
-            return HttpResponse.text("Internal server error", { status: 500 });
-          });
-        },
-      },
-    },
-  };
-}
-
-const { data, handlers } = createMocks({ responseSpeed: 700 });
-
-const meta = preview.meta({
-  title: "Account/Login Card",
-  component: LoginCard,
-  tags: ["autodocs"],
-  args: {
-    description: "Log in to Indie Tabletop Club to enable backup & sync.",
-    defaultValues: {},
-    onLogin: fn(),
-  },
-  parameters: {
-    msw: {
-      handlers: {
-        refreshTokens: handlers.refreshTokens.failed(),
-      },
-    },
-  },
-});
-
-/**
- * The majority case where no user is stored locally, proactive user session
- * check returns 401, and subsequently correct credentials are provided.
- */
-export const Default = meta.story({
-  parameters: {
-    msw: {
-      handlers: {
-        getCurrentUser: handlers.getCurrentUser.notAuthenticated(),
-        createNewSession: handlers.createNewSession.success(data.john),
-      },
-    },
-  },
-});
-
-/**
- * Similar to the default case, but invalid credentials are provided to when
- * attempting to create a new session.
- */
-export const InvalidCredentialsOnSubmit = meta.story({
-  parameters: {
-    msw: {
-      handlers: {
-        getCurrentUser: handlers.getCurrentUser.notAuthenticated(),
-        createNewSession: handlers.createNewSession.invalidCredentials(),
-      },
-    },
-  },
-});
-
-/**
- * Similar to the default case, but when credentials are provided, an account
- * email is used that is not currently in the database.
- */
-export const UserNotFoundOnSubmit = meta.story({
-  parameters: {
-    msw: {
-      handlers: {
-        getCurrentUser: handlers.getCurrentUser.notAuthenticated(),
-        createNewSession: handlers.createNewSession.userNotFound(),
-      },
-    },
-  },
-});
-
-/**
- * Similar to the default case, but the session creation call returns an error
- * that doesn't have a specific meaning in the context of the login page.
- */
-export const UnknownFailureOnSubmit = meta.story({
-  parameters: {
-    msw: {
-      handlers: {
-        getCurrentUser: handlers.getCurrentUser.notAuthenticated(),
-        createNewSession: handlers.createNewSession.unknownFailure(),
-      },
-    },
-  },
-});
-
-/**
- * A case when user is stored locally, but their server session has expired.
- */
-export const ReauthenticateSession = meta.story({
-  parameters: {
-    msw: {
-      handlers: {
-        getCurrentUser: handlers.getCurrentUser.notAuthenticated(),
-        createNewSession: handlers.createNewSession.success(data.john),
-      },
-    },
-  },
-});
-
-/**
- * The user is already stored in the app, and proactive user-session check
- * returns the same user (based on ID).
- *
- * The user is directed to app without any further steps.
- */
-export const AlreadyLoggedIn = meta.story({
-  parameters: {
-    msw: {
-      handlers: {
-        getCurrentUser: handlers.getCurrentUser.success(data.john),
-      },
-    },
-  },
-});
-
-/**
- * A user is provided, and proactive user session check returns a different
- * user. This can happen when different users log into separate apps with
- * different credentials.
- */
-export const UserMismatch = meta.story({
-  parameters: {
-    msw: {
-      handlers: {
-        getCurrentUser: handlers.getCurrentUser.success(data.mary),
-      },
-    },
-  },
-});
-
-/**
- * During the proactive user session check, the user is reportd as not found.
- * This means that the tokens are still valid, but the user DB entity is gone.
- * This can happen if a user closed their account.
- */
-export const UserNotFound = meta.story({
-  parameters: {
-    msw: {
-      handlers: {
-        getCurrentUser: handlers.getCurrentUser.notFound(),
-      },
-    },
-  },
-});
-
-/**
- * The proactive user session check has failed due to connection issues.
- */
-export const NoConnection = meta.story({
-  parameters: {
-    msw: {
-      handlers: {
-        getCurrentUser: 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: {
-        getCurrentUser: handlers.getCurrentUser.unknownFailure(),
-      },
-    },
-  },
-});

package/lib/account/LoginCard.tsx

@@ -1,100 +0,0 @@
-import { type ReactNode } from "react";
-import { useCurrentUser } from "../store/index.tsx";
-import { AccountIssueView } from "./AccountIssueView.tsx";
-import { AlreadyLoggedInView } from "./AlreadyLoggedInView.tsx";
-import { FailureFallbackView } from "./FailureFallbackView.tsx";
-import { LoadingView } from "./LoadingView.tsx";
-import { LoginView } from "./LoginView.tsx";
-import { NoConnectionView } from "./NoConnectionView.tsx";
-import type { AuthEventHandler, DefaultFormValues } from "./types.ts";
-import { useFetchCurrentUser } from "./useFetchCurrentUser.tsx";
-import { UserMismatchView } from "./UserMismatchView.tsx";
-
-export type LoginCardProps = {
-  /**
-   * A description that will appear in the default login case (i.e. when an
-   * unauthenticated user is prompted to log in).
-   *
-   * This should reinforce to the user the benefits that they are going to
-   * get by signing in. Every app has slightly different capabilities, so this
-   * should be tailored for each individual app.
-   */
-  description: ReactNode;
-
-  /**
-   * Default values for the login form.
-   *
-   * You might want to provide a value from history state or query param, so
-   * that if a user jumps between multiple pages with email field, the email
-   * address is maintained across these locations.
-   */
-  defaultValues?: DefaultFormValues;
-
-  /**
-   * Called when the login action succeeds.
-   *
-   * If no handler is provided, the component will will navigate to the
-   * dashboard (as determined by `appConfig.hrefs.dashboard()` return value),
-   * or a location provided in `redirectTo` query param if it is a valid
-   * local path.
-   */
-  onLogin?: AuthEventHandler;
-};
-
-/**
- * Allows the user to log into Indie Tabletop Club.
- *
- * Will automatically use the `redirectTo` query param value as the redirect
- * location after successful login.
- *
- * Otherwise, the user will be redirected to the app's dashboard.
- */
-export function LoginCard(props: LoginCardProps) {
-  const currentUser = useCurrentUser();
-  const { result, latestAttemptTs, reload } = useFetchCurrentUser();
-
-  return result.unpack(
-    (serverUser) => {
-      if (currentUser && currentUser.id !== serverUser.id) {
-        return (
-          <UserMismatchView
-            serverUser={serverUser}
-            localUser={currentUser}
-            reload={reload}
-          />
-        );
-      }
-
-      return <AlreadyLoggedInView currentUser={serverUser} reload={reload} />;
-    },
-
-    (failure) => {
-      if (failure.type === "API_ERROR") {
-        if (failure.code === 401) {
-          return (
-            <LoginView {...props} currentUser={currentUser} reload={reload} />
-          );
-        }
-
-        if (failure.code === 404) {
-          return <AccountIssueView reload={reload} />;
-        }
-      }
-
-      if (failure.type === "NETWORK_ERROR") {
-        return (
-          <NoConnectionView
-            latestAttemptTs={latestAttemptTs}
-            onRetry={() => reload()}
-          />
-        );
-      }
-
-      return <FailureFallbackView />;
-    },
-
-    () => {
-      return <LoadingView />;
-    },
-  );
-}

package/lib/account/LoginView.tsx

@@ -1,151 +0,0 @@
-import { Button, Form, useStoreState } from "@ariakit/react";
-import type { ReactNode } from "react";
-import { Link, useLocation } from "wouter";
-import { useAppConfig } from "../AppConfig/AppConfig.tsx";
-import { interactiveText } from "../common.css.ts";
-import { getSubmitFailureMessage } from "../failureMessages.ts";
-import {
-  Letterhead,
-  LetterheadHeading,
-  LetterheadParagraph,
-  LetterheadSubmitButton,
-} from "../Letterhead/index.tsx";
-import {
-  InputsStack,
-  LetterheadFormActions,
-  LetterheadHeader,
-  LetterheadSubmitError,
-  LetterheadTextField,
-} from "../LetterheadForm/index.tsx";
-import { useAppActions } from "../store/index.tsx";
-import type { CurrentUser } from "../types.ts";
-import { useForm } from "../use-form.ts";
-import { validEmail } from "../validations.ts";
-import type { AuthEventHandler, DefaultFormValues } from "./types.ts";
-import { useRedirectPath } from "./useRedirectPath.ts";
-
-export function LoginView(props: {
-  defaultValues?: DefaultFormValues;
-  onLogin?: AuthEventHandler;
-  currentUser: CurrentUser | null;
-  description: ReactNode;
-  reload: () => void;
-}) {
-  const { currentUser, defaultValues, description, onLogin, reload } = props;
-  const { placeholders, client, hrefs } = useAppConfig();
-  const { logout } = useAppActions();
-
-  const localUserPresent = !!currentUser?.email;
-  const defaultEmailValue = currentUser?.email ?? defaultValues?.email ?? "";
-  const redirectPath = useRedirectPath() ?? hrefs.dashboard();
-  const [_, navigate] = useLocation();
-
-  const { form, submitName } = useForm({
-    defaultValues: { email: defaultEmailValue, password: "" },
-    validate: { email: validEmail },
-    async onSubmit({ values }) {
-      const result = await client.login(values);
-
-      return result.mapFailure((failure) => {
-        return getSubmitFailureMessage(failure, {
-          401: "🔐 Username and password do not match.",
-          404: "🤔 Couldn't find a user with this email address.",
-        });
-      });
-    },
-    onSuccess() {
-      if (onLogin) {
-        onLogin();
-      }
-
-      // If a custom onLogin handler is not provided, will automatically
-      // navigate to the appropriate redirect path.
-      else {
-        navigate(redirectPath);
-      }
-    },
-  });
-
-  const emailValue = useStoreState(form, (state) => state.values.email);
-
-  return (
-    <Letterhead>
-      <LetterheadHeader>
-        <LetterheadHeading>Log in</LetterheadHeading>
-
-        {localUserPresent ? (
-          <>
-            <LetterheadParagraph>
-              Your session has expired. Please log into Indie Tabletop Club
-              again.
-            </LetterheadParagraph>
-
-            <LetterheadParagraph>
-              {"To use a different account, please "}
-              <Button
-                className={interactiveText}
-                onClick={async () => {
-                  await logout();
-                  reload();
-                }}
-              >
-                log out
-              </Button>
-              {" first."}
-            </LetterheadParagraph>
-          </>
-        ) : (
-          <LetterheadParagraph>
-            {description}
-            {" Do not have an account? "}
-            <Link
-              href={hrefs.join()}
-              className={interactiveText}
-              state={{ emailValue }}
-            >
-              Join now
-            </Link>
-            {"."}
-          </LetterheadParagraph>
-        )}
-      </LetterheadHeader>
-
-      <Form store={form} resetOnSubmit={false}>
-        <InputsStack>
-          <LetterheadTextField
-            name={form.names.email}
-            placeholder={placeholders.email}
-            label="Email"
-            type="email"
-            readOnly={localUserPresent}
-            required
-          />
-          <LetterheadTextField
-            name={form.names.password}
-            label="Password"
-            placeholder="Your password"
-            type="password"
-            required
-          />
-        </InputsStack>
-
-        <LetterheadFormActions>
-          <LetterheadSubmitError name={submitName} />
-          <LetterheadSubmitButton>Log in</LetterheadSubmitButton>
-
-          <LetterheadParagraph align="start">
-            Forgot password?{" "}
-            <Link
-              href="/password"
-              className={interactiveText}
-              state={{ emailValue }}
-            >
-              Reset it
-            </Link>
-            {"."}
-          </LetterheadParagraph>
-        </LetterheadFormActions>
-      </Form>
-    </Letterhead>
-  );
-}

package/lib/account/NoConnectionView.tsx

@@ -1,34 +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 NoConnectionView(props: {
-  latestAttemptTs: number;
-  onRetry: () => void;
-}) {
-  const { latestAttemptTs, onRetry } = props;
-
-  return (
-    <Letterhead>
-      <LetterheadHeading>No connection</LetterheadHeading>
-
-      <LetterheadParagraph>
-        {"There seems to be an issue reaching to our servers. "}
-        {"Are you connected to the internet? Last attempt at "}
-        {new Date(latestAttemptTs).toLocaleTimeString()}
-        {"."}
-      </LetterheadParagraph>
-
-      <LetterheadParagraph>
-        <Button {...cx(interactiveText)} onClick={() => onRetry()}>
-          Try again
-        </Button>
-      </LetterheadParagraph>
-    </Letterhead>
-  );
-}