@indietabletop/appkit 3.6.0-1 → 3.6.0-3

package/lib/LoginPage/LoginPage.stories.tsx

@@ -1,107 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { http, HttpResponse } from "msw";
-import { fn } from "storybook/test";
-import { IndieTabletopClient } from "../client.ts";
-import { sleep } from "../sleep.ts";
-import { LoginPage } from "./LoginPage.tsx";
-
-const userA = {
-  id: "a",
-  email: "a@example.com",
-  isVerified: true,
-};
-
-const userB = {
-  id: "b",
-  email: "b@example.com",
-  isVerified: true,
-};
-
-const meta = {
-  title: "Pages/Login Page",
-  component: LoginPage,
-  tags: ["autodocs"],
-  args: {
-    client: new IndieTabletopClient({ apiOrigin: "" }),
-    onSuccess: fn(),
-    onLogout: fn(),
-    localUser: null,
-  },
-  parameters: {
-    msw: {
-      handlers: {
-        getCurrentUser: http.get("/v1/users/me", async () => {
-          await sleep(2000);
-
-          return HttpResponse.json(userA);
-        }),
-
-        createNewSession: http.post("/v1/sessions", async () => {
-          await sleep(2000);
-
-          return HttpResponse.json({
-            currentUser: userA,
-            sessionInfo: {
-              createdTs: 123,
-              expiresTs: 123,
-            },
-          });
-        }),
-      },
-    },
-  },
-} satisfies Meta<typeof LoginPage>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-// There is no local user and server response reports user not authenticated.
-// This is the majority case.
-export const Default: Story = {
-  parameters: {
-    msw: {
-      handlers: {
-        getCurrentUser: http.get("/v1/users/me", async () => {
-          await sleep(2000);
-
-          return HttpResponse.text("Not authenticated", { status: 401 });
-        }),
-      },
-    },
-  },
-};
-
-// User is logged in via a server cookie. They can proceed to app.
-export const AlreadyLoggedIn: Story = {
-  args: {
-    localUser: userA,
-  },
-};
-
-// App has local data that doesn't match server-data. User has to choose
-// how to proceed.
-
-// TODO Style UserMismatch and add handler.
-export const UserMismatch: Story = {
-  args: {
-    localUser: userB,
-  },
-};
-
-// TODO: Implement Not Found story (user was probably deleted)
-export const UserNotFound: Story = {
-  args: {
-    localUser: null,
-  },
-};
-
-// TODO: Implement no connection story
-export const NoConnection: Story = {};
-
-// TODO: Implement fallback failure (all other cases)
-export const FallbackFailure: Story = {
-  args: {
-    localUser: userB,
-  },
-};

package/lib/LoginPage/LoginPage.tsx

@@ -1,204 +0,0 @@
-import { Form } from "@ariakit/react";
-import { Button } from "@ariakit/react/button";
-
-import { useCallback, useEffect, useState } from "react";
-import { Link, useLocation } from "wouter";
-import { Pending, type Failure, type Success } from "../async-op.js";
-import { IndieTabletopClient } from "../client.ts";
-import { interactiveText } from "../common.css.ts";
-import { getSubmitFailureMessage } from "../failureMessages.ts";
-import { LoadingPage } from "../InfoPage/index.tsx";
-import {
-  Letterhead,
-  LetterheadHeading,
-  LetterheadParagraph,
-  LetterheadSubmitButton,
-} from "../Letterhead/index.tsx";
-import {
-  LetterheadSubmitError,
-  LetterheadTextField,
-} from "../LetterheadForm/index.tsx";
-import { Title } from "../Title/index.tsx";
-import type { CurrentUser, FailurePayload } from "../types.ts";
-import { useForm } from "../use-form.ts";
-import { validEmail } from "../validations.ts";
-import * as css from "./style.css.ts";
-
-type EventHandler = () => Promise<void> | void;
-
-function LoginForm(props: {
-  client: IndieTabletopClient;
-  onSuccess: EventHandler;
-}) {
-  const { client, onSuccess } = props;
-
-  const [_, navigate] = useLocation();
-  const { form, submitName } = useForm({
-    defaultValues: { email: "", 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. Please try again.",
-          404: "Could not find a user with this email.",
-        });
-      });
-    },
-
-    async onSuccess() {
-      await onSuccess();
-      navigate("~/");
-    },
-  });
-
-  return (
-    <Form store={form} resetOnSubmit={false}>
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          gap: "1.125rem",
-        }}
-      >
-        <LetterheadTextField
-          name={form.names.email}
-          placeholder="james.workshop@example.com"
-          label="Email"
-          type="email"
-          required
-        />
-        <LetterheadTextField
-          name={form.names.password}
-          label="Password"
-          placeholder="Your password"
-          type="password"
-          required
-        />
-      </div>
-      <div
-        style={{
-          marginBlockStart: "2rem",
-          display: "flex",
-          flexDirection: "column",
-          gap: "1.125rem",
-        }}
-      >
-        <LetterheadSubmitError name={submitName} />
-        <LetterheadSubmitButton>Log in</LetterheadSubmitButton>
-      </div>
-    </Form>
-  );
-}
-
-function useCurrentUserResult(client: IndieTabletopClient) {
-  const getCurrentUser = useCallback(() => client.getCurrentUser(), [client]);
-  const [result, setResult] = useState<
-    Success<CurrentUser> | Failure<FailurePayload> | Pending
-  >(new Pending());
-
-  useEffect(() => {
-    getCurrentUser().then((result) => setResult(result));
-  }, [getCurrentUser]);
-
-  return result;
-}
-
-export function LoginPage(props: {
-  client: IndieTabletopClient;
-  localUser: CurrentUser | null;
-  onSuccess: EventHandler;
-  onLogout: EventHandler;
-}) {
-  const { client, localUser, onLogout } = props;
-  const currentUserResult = useCurrentUserResult(client);
-
-  return (
-    <div className={css.page}>
-      <Title>Login</Title>
-
-      {currentUserResult.unpack(
-        (serverUser) => {
-          if (localUser && localUser.id !== serverUser.id) {
-            return (
-              <Letterhead>
-                <header className={css.header}>
-                  <LetterheadHeading>User mismatch</LetterheadHeading>
-
-                  <LetterheadParagraph>
-                    You are logged into Indie Tabletop Club as{" "}
-                    {serverUser.email}, but the account currently logged in on
-                    this device is {localUser.email}.
-                  </LetterheadParagraph>
-
-                  <LetterheadParagraph>
-                    Please pick which user account to continue with to prevent
-                    syncing issues.
-                  </LetterheadParagraph>
-
-                  <div>
-                    <Button type="button">
-                      <div>Continue as {serverUser.email}</div>
-                      <div>Local data will be deleted.</div>
-                    </Button>
-
-                    <Button type="button">
-                      <div>Continue as {localUser.email}</div>
-                      <div>You will be asked for your credentials again.</div>
-                    </Button>
-                  </div>
-                </header>
-              </Letterhead>
-            );
-          }
-
-          return (
-            <Letterhead>
-              <header className={css.header}>
-                <LetterheadHeading>Logged in</LetterheadHeading>
-                <LetterheadParagraph>
-                  You are already logged into Indie Tabletop Club as{" "}
-                  {serverUser.email}.
-                </LetterheadParagraph>
-
-                <LetterheadParagraph>
-                  <Link className={interactiveText} href="~/">
-                    Continue
-                  </Link>
-                  {` as current user, or `}
-                  <Button className={interactiveText} onClick={onLogout}>
-                    log out
-                  </Button>
-                  .
-                </LetterheadParagraph>
-              </header>
-            </Letterhead>
-          );
-        },
-        (failure) => {
-          if (failure.type === "API_ERROR" && failure.code === 401) {
-            return (
-              <Letterhead>
-                <header className={css.header}>
-                  <LetterheadHeading>Log in</LetterheadHeading>
-                  <LetterheadParagraph>
-                    Log into your Indie Tabletop Club account to access creator
-                    features.
-                  </LetterheadParagraph>
-                </header>
-
-                <LoginForm {...props} />
-              </Letterhead>
-            );
-          }
-
-          return null;
-        },
-        () => (
-          <LoadingPage />
-        ),
-      )}
-    </div>
-  );
-}

package/lib/LoginPage/style.css.ts

@@ -1,17 +0,0 @@
-import { MinWidth } from "@indietabletop/appkit";
-import { style } from "@vanilla-extract/css";
-
-export const page = style({
-  backgroundColor: "white",
-
-  "@media": {
-    [MinWidth.SMALL]: {
-      backgroundColor: "transparent",
-      padding: "clamp(1rem, 5vw, 5rem)",
-    },
-  },
-});
-
-export const header = style({
-  marginBlockEnd: "3rem",
-});