@indietabletop/appkit 5.0.0 → 5.1.0

package/lib/account/JoinCard.tsx

@@ -1,6 +1,6 @@
 import { Form, useStoreState } from "@ariakit/react";
 import { type Dispatch, type SetStateAction, useState } from "react";
-import { Link } from "wouter";
+import { Link, useLocation } from "wouter";
 import { useAppConfig, useClient } from "../AppConfig/AppConfig.tsx";
 import { cx } from "../class-names.ts";
 import { interactiveText } from "../common.css.ts";
@@ -28,13 +28,16 @@ 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>>;
 
-function InitialStep(props: {
+type InitialStepProps = {
   setStep: SetStep;
   defaultValues?: DefaultFormValues;
-}) {
+};
+
+function InitialStep(props: InitialStepProps) {
   const { client, placeholders, hrefs } = useAppConfig();
   const { defaultValues, setStep } = props;
 
@@ -152,13 +155,22 @@ function InitialStep(props: {
   );
 }
 
-function SubmitCodeStep(props: {
+type SubmitCodeStepProps = {
   tokenId: string;
   setStep: SetStep;
   email: string;
-}) {
+};
+
+function SubmitCodeStep(props: SubmitCodeStepProps) {
   const { tokenId, email, setStep } = props;
+  const [_, navigate] = useLocation();
   const client = useClient();
+  const redirectPath = useRedirectPath();
+
+  // Use redirect path if found in search params, otherwise go the success step.
+  const onSuccess = redirectPath
+    ? () => navigate(redirectPath)
+    : () => setStep({ type: "SUCCESS" });
 
   const { form, submitName } = useForm({
     defaultValues: {
@@ -173,9 +185,7 @@ function SubmitCodeStep(props: {
         });
       });
     },
-    onSuccess() {
-      setStep({ type: "SUCCESS" });
-    },
+    onSuccess,
   });
 
   return (
@@ -229,7 +239,11 @@ type JoinStep =
   | { type: "SUBMIT_CODE"; tokenId: string; email: string }
   | { type: "SUCCESS" };
 
-function JoinFlow(props: { defaultValues?: DefaultFormValues }) {
+type JoinFlowProps = {
+  defaultValues?: DefaultFormValues;
+};
+
+function JoinFlow(props: JoinFlowProps) {
   const [step, setStep] = useState<JoinStep>({ type: "INITIAL" });
 
   switch (step.type) {
@@ -253,6 +267,12 @@ export type JoinCardProps = {
 
 /**
  * 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();

package/lib/account/LoginCard.tsx

@@ -33,14 +33,21 @@ export type LoginCardProps = {
   /**
    * Called when the login action succeeds.
    *
-   * Typically you want to redirect the user at this point, and possibly
-   * run additional side-effects.
+   * 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;
+  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();

package/lib/account/LoginView.tsx

@@ -1,6 +1,6 @@
 import { Button, Form, useStoreState } from "@ariakit/react";
 import type { ReactNode } from "react";
-import { Link } from "wouter";
+import { Link, useLocation } from "wouter";
 import { useAppConfig } from "../AppConfig/AppConfig.tsx";
 import { interactiveText } from "../common.css.ts";
 import { getSubmitFailureMessage } from "../failureMessages.ts";
@@ -22,10 +22,11 @@ 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;
+  onLogin?: AuthEventHandler;
   currentUser: CurrentUser | null;
   description: ReactNode;
   reload: () => void;
@@ -33,8 +34,11 @@ export function LoginView(props: {
   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: "" },
@@ -50,7 +54,15 @@ export function LoginView(props: {
       });
     },
     onSuccess() {
-      onLogin();
+      if (onLogin) {
+        onLogin();
+      }
+
+      // If a custom onLogin handler is not provided, will automatically
+      // navigate to the appropriate redirect path.
+      else {
+        navigate(redirectPath);
+      }
     },
   });
 

package/lib/account/useRedirectPath.ts

@@ -0,0 +1,21 @@
+import { useSearchParams } from "wouter";
+
+function isValidRedirect(value: string | null | undefined): value is string {
+  return !!(value && /^[~/]/.test(value));
+}
+
+/**
+ * Gets redirect path from query params and validates it.
+ *
+ * Returns `null` if no path is found, or it is invalid.
+ */
+export function useRedirectPath() {
+  const [params] = useSearchParams();
+  const redirectTo = params.get("redirectTo");
+
+  if (isValidRedirect(redirectTo)) {
+    return redirectTo;
+  }
+
+  return null;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indietabletop/appkit",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "description": "A collection of modules used in apps built by Indie Tabletop Club",
   "private": false,
   "type": "module",