@mehdad67/apitogo 0.1.24

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

@@ -0,0 +1,620 @@
+import { ActionButton } from "@lukoweb/apitogo/ui/ActionButton.js";
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@lukoweb/apitogo/ui/Alert.js";
+import { Button, type ButtonProps } from "@lukoweb/apitogo/ui/Button.js";
+import {
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@lukoweb/apitogo/ui/Card.js";
+import { Input } from "@lukoweb/apitogo/ui/Input.js";
+import { Separator } from "@lukoweb/apitogo/ui/Separator.js";
+import { useMutation } from "@tanstack/react-query";
+import React from "react";
+import { useForm } from "react-hook-form";
+import { Link, useNavigate, useSearchParams } from "react-router";
+import {
+  Form,
+  FormControl,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "../../ui/Form.js";
+import { cn } from "../../util/cn.js";
+import { getRelativeRedirectUrl } from "../utils/relativeRedirectUrl.js";
+import { AuthCard } from "./AuthCard.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,
+  enableEmailLink,
+}: {
+  providers: string[];
+  enableUsernamePassword: boolean;
+  enableEmailLink?: 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: ({ email, password }: FormFields) =>
+      onUsernamePasswordSignIn(email, password),
+    onSuccess: () => {
+      void navigate(relativeRedirectTo);
+    },
+  });
+  const signInByProviderMutation = useMutation({
+    mutationFn: ({ providerId }: { providerId: string }) =>
+      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;
+
+  const hasEmailMethod = enableUsernamePassword || enableEmailLink;
+
+  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>
+          </>
+        )}
+        {hasEmailMethod && providers.length > 0 && (
+          <ProviderSeparator providers={providers} />
+        )}
+        {providers.length > 0 && (
+          <ProviderButtons
+            providers={providers}
+            onClick={(providerId) =>
+              signInByProviderMutation.mutate({ providerId })
+            }
+          />
+        )}
+        <div className="flex flex-col gap-1">
+          {enableEmailLink && (
+            <Link
+              to={
+                redirectTo
+                  ? `/signin/email-link?redirectTo=${encodeURIComponent(redirectTo)}`
+                  : "/signin/email-link"
+              }
+              className="text-sm text-muted-foreground"
+            >
+              Sign in with email link
+            </Link>
+          )}
+          <Link to="/signup" className="text-sm text-muted-foreground">
+            Don't have an account? Sign up.
+          </Link>
+        </div>
+      </CardContent>
+    </AuthCard>
+  );
+};
+
+export const ZudokuSignUpUi = ({
+  providers,
+  enableUsernamePassword,
+  enableEmailLink,
+  onOAuthSignUp,
+  onUsernamePasswordSignUp,
+}: {
+  providers: string[];
+  enableUsernamePassword: boolean;
+  enableEmailLink?: 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 = getRelativeRedirectUrl(redirectTo);
+
+  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;
+
+  const hasEmailMethod = enableUsernamePassword || enableEmailLink;
+
+  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}
+          />
+        )}
+        {hasEmailMethod && providers.length > 0 && (
+          <ProviderSeparator providers={providers} />
+        )}
+        {providers.length > 0 && (
+          <ProviderButtons
+            providers={providers}
+            onClick={(providerId) =>
+              signUpByProviderMutation.mutate({ providerId })
+            }
+          />
+        )}
+        <div className="flex flex-col gap-1">
+          {enableEmailLink && (
+            <Link
+              to={
+                redirectTo
+                  ? `/signin/email-link?redirectTo=${encodeURIComponent(redirectTo)}`
+                  : "/signin/email-link"
+              }
+              className="text-sm text-muted-foreground"
+            >
+              Sign in with email link
+            </Link>
+          )}
+          <Link to="/signin" className="text-sm text-muted-foreground">
+            Already have an account? Sign in.
+          </Link>
+        </div>
+      </CardContent>
+    </AuthCard>
+  );
+};
+
+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>
+  );
+};
+
+export const ZudokuPasswordUpdateUi = ({
+  onPasswordUpdate,
+}: {
+  onPasswordUpdate: (password: string) => Promise<void>;
+}) => {
+  const [isSubmitted, setIsSubmitted] = React.useState(false);
+
+  const passwordUpdateMutation = useMutation({
+    mutationFn: async ({ password }: { password: string }) => {
+      await onPasswordUpdate(password);
+    },
+    onSuccess: () => {
+      setIsSubmitted(true);
+    },
+  });
+
+  const form = useForm<{ password: string; confirmPassword: string }>({
+    defaultValues: {
+      password: "",
+      confirmPassword: "",
+    },
+  });
+
+  const error = passwordUpdateMutation.error;
+
+  const onSubmit = (data: { password: string; confirmPassword: string }) => {
+    if (data.password !== data.confirmPassword) {
+      form.setError("confirmPassword", {
+        message: "Passwords do not match",
+      });
+      return;
+    }
+    passwordUpdateMutation.mutate({ password: data.password });
+  };
+
+  return (
+    <AuthCard>
+      <CardHeader>
+        <CardTitle>Set new password</CardTitle>
+        <CardDescription>
+          {isSubmitted
+            ? "Your password has been updated successfully."
+            : "Enter your new password below."}
+        </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>Password updated</AlertTitle>
+              <AlertDescription>
+                Your password has been successfully updated. You can now sign in
+                with your new password.
+              </AlertDescription>
+            </Alert>
+            <Link to="/signin">
+              <Button variant="outline" className="w-full">
+                Sign in
+              </Button>
+            </Link>
+          </div>
+        ) : (
+          <Form {...form}>
+            <form
+              onSubmit={form.handleSubmit(onSubmit)}
+              className="flex flex-col gap-2"
+            >
+              <FormItem>
+                <FormLabel>New password</FormLabel>
+                <FormControl>
+                  <Input
+                    type="password"
+                    placeholder="Enter new password"
+                    {...form.register("password")}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+              <FormItem>
+                <FormLabel>Confirm password</FormLabel>
+                <FormControl>
+                  <Input
+                    type="password"
+                    placeholder="Confirm new password"
+                    {...form.register("confirmPassword")}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+              <ActionButton
+                type="submit"
+                isPending={passwordUpdateMutation.isPending}
+              >
+                Update password
+              </ActionButton>
+            </form>
+          </Form>
+        )}
+      </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;