zudoku 0.0.0-reset-hash-value.ac516c6d → 0.0.0-z179c4f85

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

@@ -0,0 +1,477 @@
+import { useMutation } from "@tanstack/react-query";
+import React from "react";
+import { useForm } from "react-hook-form";
+import { Link, useNavigate, useSearchParams } from "react-router";
+import { ActionButton } from "zudoku/ui/ActionButton.js";
+import { Alert, AlertDescription, AlertTitle } from "zudoku/ui/Alert.js";
+import { Button, type ButtonProps } from "zudoku/ui/Button.js";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "zudoku/ui/Card.js";
+import { Input } from "zudoku/ui/Input.js";
+import { Separator } from "zudoku/ui/Separator.js";
+import {
+  Form,
+  FormControl,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} 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";
+import GoogleIcon from "./icons/Google.js";
+import MicrosoftIcon from "./icons/Microsoft.js";
+import XIcon from "./icons/X.js";
+
+export const AUTH_PROVIDER_NAMES: Record<AuthProviderId, string> = {
+  google: "Google",
+  github: "GitHub",
+  facebook: "Facebook",
+  twitter: "X",
+  x: "X",
+  microsoft: "Microsoft",
+  apple: "Apple",
+  yahoo: "Yahoo",
+};
+
+export type AuthProviderId = keyof typeof ProviderIcons;
+
+const ProviderIcons = {
+  google: GoogleIcon,
+  github: GithubIcon,
+  facebook: FacebookIcon,
+  twitter: XIcon,
+  x: XIcon,
+  apple: AppleIcon,
+  microsoft: MicrosoftIcon,
+  yahoo: React.Fragment,
+} as const;
+
+const isValidAuthProviderId = (
+  provider: string,
+): provider is AuthProviderId => {
+  return provider in ProviderIcons;
+};
+
+const isAuthProviderIdArray = (
+  providers: string[],
+): providers is AuthProviderId[] => {
+  return providers.every(isValidAuthProviderId);
+};
+
+const AuthProviderButton = ({
+  providerId,
+  onClick,
+  ...buttonProps
+}: { providerId: AuthProviderId; onClick?: () => void } & ButtonProps) => {
+  const IconRenderer = ProviderIcons[providerId];
+  return (
+    <Button
+      variant="outline"
+      className="gap-2"
+      onClick={onClick}
+      {...buttonProps}
+    >
+      <IconRenderer className="w-4 h-4 fill-foreground" />
+      {AUTH_PROVIDER_NAMES[providerId]}
+    </Button>
+  );
+};
+
+type FormFields = {
+  email: string;
+  password: string;
+};
+
+const EmailPasswordForm = ({
+  form,
+  onSubmit,
+  submitLabel,
+  isPending,
+}: {
+  form: ReturnType<typeof useForm<FormFields>>;
+  onSubmit: (data: FormFields) => void;
+  submitLabel: string;
+  isPending: boolean;
+}) => {
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="flex flex-col gap-2"
+      >
+        <FormItem>
+          <FormLabel>E-Mail</FormLabel>
+          <FormControl>
+            <Input placeholder="Email" {...form.register("email")} />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+        <FormItem>
+          <FormLabel>Password</FormLabel>
+          <FormControl>
+            <Input
+              placeholder="Password"
+              {...form.register("password")}
+              type="password"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+        <ActionButton type="submit" isPending={isPending}>
+          {submitLabel}
+        </ActionButton>
+      </form>
+    </Form>
+  );
+};
+
+export const ZudokuSignInUi = ({
+  providers,
+  onOAuthSignIn,
+  onUsernamePasswordSignIn,
+  enableUsernamePassword,
+}: {
+  providers: string[];
+  enableUsernamePassword: boolean;
+  onOAuthSignIn: (providerId: string) => Promise<void>;
+  onUsernamePasswordSignIn: (email: string, password: string) => Promise<void>;
+}) => {
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const redirectTo = searchParams.get("redirectTo");
+
+  const relativeRedirectTo = getRelativeRedirectUrl(redirectTo);
+
+  const invalidProviders = providers.filter(
+    (provider) => !isValidAuthProviderId(provider),
+  );
+
+  if (invalidProviders.length > 0) {
+    throw new Error(
+      `Unsupported auth provider: ${invalidProviders.join(", ")}`,
+    );
+  }
+
+  if (!isAuthProviderIdArray(providers)) {
+    throw new Error(`Unsupported auth provider: ${providers.join(", ")}`);
+  }
+
+  const signInUsernameMutation = useMutation({
+    mutationFn: async ({ email, password }: FormFields) => {
+      await onUsernamePasswordSignIn(email, password);
+    },
+    onSuccess: () => {
+      void navigate(relativeRedirectTo);
+    },
+  });
+  const signInByProviderMutation = useMutation({
+    mutationFn: async ({ providerId }: { providerId: string }) => {
+      await onOAuthSignIn(providerId);
+    },
+    onSuccess: () => {
+      void navigate(relativeRedirectTo);
+    },
+  });
+
+  const form = useForm<FormFields>({
+    defaultValues: {
+      email: "",
+      password: "",
+    },
+  });
+
+  const pending =
+    signInUsernameMutation.isPending || signInByProviderMutation.isPending;
+
+  const error = signInUsernameMutation.error ?? signInByProviderMutation.error;
+
+  return (
+    <AuthCard>
+      <CardHeader>
+        <CardTitle>Sign in</CardTitle>
+        <CardDescription>Sign in to your account to continue.</CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        {error && (
+          <Alert variant="destructive">
+            <AlertTitle>Error</AlertTitle>
+            <AlertDescription>{error?.message}</AlertDescription>
+          </Alert>
+        )}
+        {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>
+      </CardContent>
+    </AuthCard>
+  );
+};
+
+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");
+  }
+
+  const signUpUsernameMutation = useMutation({
+    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>({
+    defaultValues: {
+      email: "",
+      password: "",
+    },
+  });
+
+  const pending =
+    signUpUsernameMutation.isPending || signUpByProviderMutation.isPending;
+
+  const error = signUpUsernameMutation.error ?? signUpByProviderMutation.error;
+
+  return (
+    <AuthCard>
+      <CardHeader>
+        <CardTitle>Sign up</CardTitle>
+        <CardDescription>Sign up to your account to continue.</CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        {error && (
+          <Alert variant="destructive">
+            <AlertTitle>Error</AlertTitle>
+            <AlertDescription>{error?.message}</AlertDescription>
+          </Alert>
+        )}
+
+        {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>
+      </CardContent>
+    </AuthCard>
+  );
+};
+
+const AuthCard = createVariantComponent(Card, "max-w-md w-full mt-10 mx-auto");
+
+const ProviderButtons = ({
+  providers,
+  onClick,
+}: {
+  providers: AuthProviderId[];
+  onClick: (providerId: string) => void;
+}) => {
+  return (
+    <div
+      className={cn(
+        "grid grid-cols-2 gap-2",
+        providers.length % 2 === 0 ? "grid-cols-2" : "grid-cols-1",
+      )}
+    >
+      {providers.map((provider) => (
+        <AuthProviderButton
+          key={provider}
+          providerId={provider}
+          onClick={() => onClick(provider)}
+        />
+      ))}
+    </div>
+  );
+};
+
+const ProviderSeparator = ({ providers }: { providers: AuthProviderId[] }) => {
+  return (
+    providers.length > 0 && (
+      <Separator className="my-3 relative">
+        <span className="bg-card text-muted-foreground text-sm px-2 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+          or continue with
+        </span>
+      </Separator>
+    )
+  );
+};
+
+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/ui/icons/Apple.tsx

@@ -0,0 +1,10 @@
+import type { SVGProps } from "react";
+
+const AppleIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <title>{"Apple"}</title>
+    <path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701" />
+  </svg>
+);
+
+export default AppleIcon;

package/src/lib/authentication/ui/icons/Facebook.tsx

@@ -0,0 +1,15 @@
+import type { SVGProps } from "react";
+
+const FacebookIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    fill="#0866FF"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <title>{"Facebook"}</title>
+    <path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z" />
+  </svg>
+);
+
+export default FacebookIcon;

package/src/lib/authentication/ui/icons/Github.tsx

@@ -0,0 +1,16 @@
+import type { SVGProps } from "react";
+
+const GithubIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <title>{"GitHub"}</title>
+    <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+  </svg>
+);
+
+export default GithubIcon;

package/src/lib/authentication/ui/icons/Google.tsx

@@ -0,0 +1,16 @@
+import type { SVGProps } from "react";
+
+const GoogleIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <title>{"Google"}</title>
+    <path d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z" />
+  </svg>
+);
+
+export default GoogleIcon;

package/src/lib/authentication/ui/icons/Microsoft.tsx

@@ -0,0 +1,12 @@
+import type { SVGProps } from "react";
+
+const MicrosoftIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path fill="#f25022" d="M1 1h9v9H1z" />
+    <path fill="#00a4ef" d="M1 11h9v9H1z" />
+    <path fill="#7fba00" d="M11 1h9v9h-9z" />
+    <path fill="#ffb900" d="M11 11h9v9h-9z" />
+  </svg>
+);
+
+export default MicrosoftIcon;

package/src/lib/authentication/ui/icons/X.tsx

@@ -0,0 +1,10 @@
+import type { SVGProps } from "react";
+
+const XIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <title>{"X"}</title>
+    <path d="M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z" />
+  </svg>
+);
+
+export default XIcon;

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/components/Autocomplete.tsx

@@ -11,12 +11,14 @@ import { Popover, PopoverContent } from "zudoku/ui/Popover.js";
 import { cn } from "../util/cn.js";
 
 type AutocompleteProps = {
-  value: string;
+  value?: string | number | readonly string[] | undefined;
   options: readonly string[];
   onChange: (e: string) => void;
+  onSelect?: (e: string) => void;
   className?: string;
   placeholder?: string;
   onEnterPress?: (e: KeyboardEvent<HTMLInputElement>) => void;
+  onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
   ref?: Ref<HTMLInputElement>;
   shouldFilter?: boolean;
 };
@@ -28,7 +30,9 @@ const AutocompletePopover = ({
   className,
   placeholder = "Value",
   onEnterPress,
+  onKeyDown,
   ref,
+  onSelect,
 }: AutocompleteProps) => {
   const [open, setOpen] = useState(false);
   const [dontClose, setDontClose] = useState(false);
@@ -48,7 +52,7 @@ const AutocompletePopover = ({
               ref.current = el;
             }
           }}
-          value={value}
+          value={value ? String(value) : undefined}
           placeholder={placeholder}
           className={cn("h-9 bg-transparent", className)}
           onFocus={() => setOpen(true)}
@@ -59,6 +63,10 @@ const AutocompletePopover = ({
             setOpen(false);
           }}
           onKeyDown={(e) => {
+            onKeyDown?.(e);
+
+            if (e.defaultPrevented) return;
+
             if (e.key === "Enter") {
               setOpen(false);
               inputRef.current?.blur();
@@ -91,6 +99,7 @@ const AutocompletePopover = ({
               key={enumValue}
               value={enumValue}
               onSelect={(selected) => {
+                onSelect?.(selected);
                 onChange(selected);
                 setOpen(false);
               }}

package/src/lib/components/Layout.tsx

@@ -1,5 +1,6 @@
 import { type ReactNode, Suspense, useEffect } from "react";
 import { Outlet } from "react-router";
+import { TooltipProvider } from "zudoku/ui/Tooltip.js";
 import { cn } from "../util/cn.js";
 import { useScrollToAnchor } from "../util/useScrollToAnchor.js";
 import { useScrollToTop } from "../util/useScrollToTop.js";
@@ -28,7 +29,7 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
   }, [authentication]);
 
   return (
-    <>
+    <TooltipProvider>
       <Slot.Target name="layout-before-head" />
       <Header />
       <Slot.Target name="layout-after-head" />
@@ -45,6 +46,6 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
         </Suspense>
       </div>
       <Footer />
-    </>
+    </TooltipProvider>
   );
 };