zudoku 0.66.2 → 0.66.4

package/src/lib/authentication/ui/ZudokuAuthUi.tsx

@@ -23,6 +23,7 @@ import {
 } from "../../ui/Form.js";
 import { cn } from "../../util/cn.js";
 import createVariantComponent from "../../util/createVariantComponent.js";
+import { getRelativeRedirectUrl } from "../utils/relativeRedirectUrl.js";
 import AppleIcon from "./icons/Apple.js";
 import FacebookIcon from "./icons/Facebook.js";
 import GithubIcon from "./icons/Github.js";
@@ -137,8 +138,10 @@ export const ZudokuSignInUi = ({
   providers,
   onOAuthSignIn,
   onUsernamePasswordSignIn,
+  enableUsernamePassword,
 }: {
   providers: string[];
+  enableUsernamePassword: boolean;
   onOAuthSignIn: (providerId: string) => Promise<void>;
   onUsernamePasswordSignIn: (email: string, password: string) => Promise<void>;
 }) => {
@@ -146,6 +149,8 @@ export const ZudokuSignInUi = ({
   const [searchParams] = useSearchParams();
   const redirectTo = searchParams.get("redirectTo");
 
+  const relativeRedirectTo = getRelativeRedirectUrl(redirectTo);
+
   const invalidProviders = providers.filter(
     (provider) => !isValidAuthProviderId(provider),
   );
@@ -165,7 +170,7 @@ export const ZudokuSignInUi = ({
       await onUsernamePasswordSignIn(email, password);
     },
     onSuccess: () => {
-      void navigate(redirectTo ?? "/");
+      void navigate(relativeRedirectTo);
     },
   });
   const signInByProviderMutation = useMutation({
@@ -173,7 +178,7 @@ export const ZudokuSignInUi = ({
       await onOAuthSignIn(providerId);
     },
     onSuccess: () => {
-      void navigate(redirectTo ?? "/");
+      void navigate(relativeRedirectTo);
     },
   });
 
@@ -202,24 +207,38 @@ export const ZudokuSignInUi = ({
             <AlertDescription>{error?.message}</AlertDescription>
           </Alert>
         )}
-        <EmailPasswordForm
-          form={form}
-          onSubmit={(data) =>
-            void signInUsernameMutation.mutate({
-              email: data.email,
-              password: data.password,
-            })
-          }
-          submitLabel="Sign in"
-          isPending={pending}
-        />
-        <ProviderSeparator providers={providers} />
-        <ProviderButtons
-          providers={providers}
-          onClick={(providerId) =>
-            signInByProviderMutation.mutate({ providerId })
-          }
-        />
+        {enableUsernamePassword && (
+          <>
+            <EmailPasswordForm
+              form={form}
+              onSubmit={(data) =>
+                void signInUsernameMutation.mutate({
+                  email: data.email,
+                  password: data.password,
+                })
+              }
+              submitLabel="Sign in"
+              isPending={pending}
+            />
+            <Link
+              to="/reset-password"
+              className="text-sm text-muted-foreground text-right -mt-2"
+            >
+              Forgot password?
+            </Link>
+          </>
+        )}
+        {enableUsernamePassword && providers.length > 0 && (
+          <ProviderSeparator providers={providers} />
+        )}
+        {providers.length > 0 && (
+          <ProviderButtons
+            providers={providers}
+            onClick={(providerId) =>
+              signInByProviderMutation.mutate({ providerId })
+            }
+          />
+        )}
         <Link to="/signup" className="text-sm text-muted-foreground">
           Don't have an account? Sign up.
         </Link>
@@ -230,13 +249,21 @@ export const ZudokuSignInUi = ({
 
 export const ZudokuSignUpUi = ({
   providers,
+  enableUsernamePassword,
   onOAuthSignUp,
   onUsernamePasswordSignUp,
 }: {
   providers: string[];
+  enableUsernamePassword: boolean;
   onOAuthSignUp: (providerId: string) => Promise<void>;
   onUsernamePasswordSignUp: (email: string, password: string) => Promise<void>;
 }) => {
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const redirectTo = searchParams.get("redirectTo");
+
+  const relativeRedirectTo = redirectTo?.replace(window.location.origin, "");
+
   if (!isAuthProviderIdArray(providers)) {
     throw new Error("Invalid auth provider IDs");
   }
@@ -245,12 +272,18 @@ export const ZudokuSignUpUi = ({
     mutationFn: async ({ email, password }: FormFields) => {
       await onUsernamePasswordSignUp(email, password);
     },
+    onSuccess: () => {
+      void navigate(relativeRedirectTo ?? "/");
+    },
   });
 
   const signUpByProviderMutation = useMutation({
     mutationFn: async ({ providerId }: { providerId: string }) => {
       await onOAuthSignUp(providerId);
     },
+    onSuccess: () => {
+      void navigate(relativeRedirectTo ?? "/");
+    },
   });
 
   const form = useForm<FormFields>({
@@ -279,24 +312,30 @@ export const ZudokuSignUpUi = ({
           </Alert>
         )}
 
-        <EmailPasswordForm
-          form={form}
-          onSubmit={(data) =>
-            void signUpUsernameMutation.mutate({
-              email: data.email,
-              password: data.password,
-            })
-          }
-          submitLabel="Sign up"
-          isPending={pending}
-        />
-        <ProviderSeparator providers={providers} />
-        <ProviderButtons
-          providers={providers}
-          onClick={(providerId) =>
-            signUpByProviderMutation.mutate({ providerId })
-          }
-        />
+        {enableUsernamePassword && (
+          <EmailPasswordForm
+            form={form}
+            onSubmit={(data) =>
+              void signUpUsernameMutation.mutate({
+                email: data.email,
+                password: data.password,
+              })
+            }
+            submitLabel="Sign up"
+            isPending={pending}
+          />
+        )}
+        {enableUsernamePassword && providers.length > 0 && (
+          <ProviderSeparator providers={providers} />
+        )}
+        {providers.length > 0 && (
+          <ProviderButtons
+            providers={providers}
+            onClick={(providerId) =>
+              signUpByProviderMutation.mutate({ providerId })
+            }
+          />
+        )}
         <Link to="/signin" className="text-sm text-muted-foreground">
           Already have an account? Sign in.
         </Link>
@@ -343,3 +382,96 @@ const ProviderSeparator = ({ providers }: { providers: AuthProviderId[] }) => {
     )
   );
 };
+
+export const ZudokuPasswordResetUi = ({
+  onPasswordReset,
+}: {
+  onPasswordReset: (email: string) => Promise<void>;
+}) => {
+  const [isSubmitted, setIsSubmitted] = React.useState(false);
+
+  const passwordResetMutation = useMutation({
+    mutationFn: async ({ email }: { email: string }) => {
+      await onPasswordReset(email);
+    },
+    onSuccess: () => {
+      setIsSubmitted(true);
+    },
+  });
+
+  const form = useForm<{ email: string }>({
+    defaultValues: {
+      email: "",
+    },
+  });
+
+  const error = passwordResetMutation.error;
+
+  return (
+    <AuthCard>
+      <CardHeader>
+        <CardTitle>Reset password</CardTitle>
+        <CardDescription>
+          {isSubmitted
+            ? "Check your email for a password reset link."
+            : "Enter your email address and we'll send you a link to reset your password."}
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        {error && (
+          <Alert variant="destructive">
+            <AlertTitle>Error</AlertTitle>
+            <AlertDescription>{error?.message}</AlertDescription>
+          </Alert>
+        )}
+        {isSubmitted ? (
+          <div className="flex flex-col gap-4">
+            <Alert>
+              <AlertTitle>Email sent</AlertTitle>
+              <AlertDescription>
+                If an account exists with that email address, you will receive a
+                password reset link shortly.
+              </AlertDescription>
+            </Alert>
+            <Link to="/signin">
+              <Button variant="outline" className="w-full">
+                Back to sign in
+              </Button>
+            </Link>
+          </div>
+        ) : (
+          <>
+            <Form {...form}>
+              <form
+                onSubmit={form.handleSubmit((data) =>
+                  passwordResetMutation.mutate({ email: data.email }),
+                )}
+                className="flex flex-col gap-2"
+              >
+                <FormItem>
+                  <FormLabel>Email</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder="you@example.com"
+                      {...form.register("email")}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+                <ActionButton
+                  type="submit"
+                  isPending={passwordResetMutation.isPending}
+                >
+                  Reset password
+                </ActionButton>
+              </form>
+            </Form>
+            <Link to="/signin" className="text-sm text-muted-foreground">
+              Sign in
+            </Link>
+          </>
+        )}
+      </CardContent>
+    </AuthCard>
+  );
+};

package/src/lib/authentication/utils/relativeRedirectUrl.ts

@@ -0,0 +1,12 @@
+import { joinUrl } from "../../util/joinUrl.js";
+
+export const getRelativeRedirectUrl = (redirectTo?: string | null) => {
+  if (!redirectTo) {
+    return "/";
+  }
+
+  return redirectTo.replace(
+    joinUrl(window.location.origin, import.meta.env.BASE_URL),
+    "",
+  );
+};

package/src/lib/errors/ErrorMessage.tsx

@@ -0,0 +1,38 @@
+import { Alert, AlertDescription, AlertTitle } from "zudoku/ui/Alert.js";
+import { SyntaxHighlight } from "zudoku/ui/SyntaxHighlight.js";
+import { DeveloperHint } from "../components/DeveloperHint.js";
+import { ZudokuError } from "../util/invariant.js";
+
+export function ErrorMessage({ error }: { error: unknown }) {
+  const message =
+    error instanceof Error ? error.message : "Something went wrong";
+
+  const showDeveloperHints = process.env.NODE_ENV === "development";
+
+  const hint = error instanceof ZudokuError ? error.developerHint : undefined;
+  const title =
+    error instanceof ZudokuError ? error.title : "Something went wrong";
+  const stack = error instanceof Error ? error.stack : undefined;
+  const cause = error instanceof Error ? error.cause : undefined;
+
+  const stringError = cause instanceof Error ? String(cause.stack) : stack;
+
+  return (
+    <>
+      <Alert variant="destructive">
+        <AlertTitle>{title}</AlertTitle>
+        <AlertDescription>{message}</AlertDescription>
+      </Alert>
+      {showDeveloperHints && hint && (
+        <DeveloperHint className="mb-4">{hint}</DeveloperHint>
+      )}
+      {showDeveloperHints && stringError && (
+        <SyntaxHighlight
+          className="max-h-[400px] [&>pre]:p-4"
+          language="js"
+          code={stringError}
+        />
+      )}
+    </>
+  );
+}

package/src/lib/oas/graphql/index.ts

@@ -473,7 +473,9 @@ const OperationItem = builder
                     name,
                     ...(typeof value === "string" ? { value } : value),
                   }))
-                : [],
+                : content.example !== undefined
+                  ? [{ name: "", value: content.example }]
+                  : [],
               encoding: Object.entries(content.encoding ?? {}).map(
                 ([name, value]) => ({ name, ...value }),
               ),
@@ -490,7 +492,7 @@ const OperationItem = builder
               statusCode,
               description: response.description,
               content: Object.entries(response.content ?? {}).map(
-                ([mediaType, { schema, examples }]) => ({
+                ([mediaType, { schema, examples, example }]) => ({
                   mediaType,
                   schema,
                   examples: examples
@@ -498,7 +500,9 @@ const OperationItem = builder
                         name,
                         ...(typeof value === "string" ? { value } : value),
                       }))
-                    : [],
+                    : example !== undefined
+                      ? [{ name: "", value: example }]
+                      : [],
                 }),
               ),
               headers: response.headers,