@lukoweb/apitogo 0.1.1 → 0.1.3

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

@@ -1,96 +1,100 @@
-import { useMutation } from "@tanstack/react-query";
-import { useForm } from "react-hook-form";
-import { Link, useNavigate, useSearchParams } from "react-router";
-import { ActionButton } from "@lukoweb/apitogo/ui/ActionButton.js";
-import { Alert, AlertDescription, AlertTitle } from "@lukoweb/apitogo/ui/Alert.js";
-import {
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@lukoweb/apitogo/ui/Card.js";
-import { Input } from "@lukoweb/apitogo/ui/Input.js";
-import {
-  Form,
-  FormControl,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "../../ui/Form.js";
-import { AuthCard } from "./AuthCard.js";
-
-type EmailLinkFormFields = {
-  email: string;
-};
-
-export const EmailLinkSignInUi = ({
-  onSubmit,
-}: {
-  onSubmit: (email: string, redirectTo?: string) => Promise<void>;
-}) => {
-  const navigate = useNavigate();
-  const [searchParams] = useSearchParams();
-  const redirectTo = searchParams.get("redirectTo");
-
-  const mutation = useMutation({
-    mutationFn: ({ email }: EmailLinkFormFields) =>
-      onSubmit(email, redirectTo ?? undefined),
-    onSuccess: () => {
-      void navigate(
-        redirectTo
-          ? `/signin/email-link-sent?redirectTo=${encodeURIComponent(redirectTo)}`
-          : "/signin/email-link-sent",
-      );
-    },
-  });
-
-  const form = useForm<EmailLinkFormFields>({
-    defaultValues: { email: "" },
-  });
-
-  return (
-    <AuthCard>
-      <CardHeader>
-        <CardTitle>Sign in with email link</CardTitle>
-        <CardDescription>
-          Enter your email and we'll send you a link to sign in.
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="flex flex-col gap-4">
-        {mutation.error && (
-          <Alert variant="destructive">
-            <AlertTitle>Error</AlertTitle>
-            <AlertDescription>{mutation.error.message}</AlertDescription>
-          </Alert>
-        )}
-        <Form {...form}>
-          <form
-            onSubmit={form.handleSubmit((data) =>
-              mutation.mutate({ email: data.email }),
-            )}
-            className="flex flex-col gap-2"
-          >
-            <FormItem>
-              <FormLabel>E-Mail</FormLabel>
-              <FormControl>
-                <Input
-                  placeholder="you@example.com"
-                  type="email"
-                  required
-                  {...form.register("email", { required: true })}
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-            <ActionButton type="submit" isPending={mutation.isPending}>
-              Send sign-in link
-            </ActionButton>
-          </form>
-        </Form>
-        <Link to="/signin" className="text-sm text-muted-foreground">
-          Back to sign in
-        </Link>
-      </CardContent>
-    </AuthCard>
-  );
-};
+import { ActionButton } from "@lukoweb/apitogo/ui/ActionButton.js";
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@lukoweb/apitogo/ui/Alert.js";
+import {
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@lukoweb/apitogo/ui/Card.js";
+import { Input } from "@lukoweb/apitogo/ui/Input.js";
+import { useMutation } from "@tanstack/react-query";
+import { useForm } from "react-hook-form";
+import { Link, useNavigate, useSearchParams } from "react-router";
+import {
+  Form,
+  FormControl,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "../../ui/Form.js";
+import { AuthCard } from "./AuthCard.js";
+
+type EmailLinkFormFields = {
+  email: string;
+};
+
+export const EmailLinkSignInUi = ({
+  onSubmit,
+}: {
+  onSubmit: (email: string, redirectTo?: string) => Promise<void>;
+}) => {
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const redirectTo = searchParams.get("redirectTo");
+
+  const mutation = useMutation({
+    mutationFn: ({ email }: EmailLinkFormFields) =>
+      onSubmit(email, redirectTo ?? undefined),
+    onSuccess: () => {
+      void navigate(
+        redirectTo
+          ? `/signin/email-link-sent?redirectTo=${encodeURIComponent(redirectTo)}`
+          : "/signin/email-link-sent",
+      );
+    },
+  });
+
+  const form = useForm<EmailLinkFormFields>({
+    defaultValues: { email: "" },
+  });
+
+  return (
+    <AuthCard>
+      <CardHeader>
+        <CardTitle>Sign in with email link</CardTitle>
+        <CardDescription>
+          Enter your email and we'll send you a link to sign in.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        {mutation.error && (
+          <Alert variant="destructive">
+            <AlertTitle>Error</AlertTitle>
+            <AlertDescription>{mutation.error.message}</AlertDescription>
+          </Alert>
+        )}
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit((data) =>
+              mutation.mutate({ email: data.email }),
+            )}
+            className="flex flex-col gap-2"
+          >
+            <FormItem>
+              <FormLabel>E-Mail</FormLabel>
+              <FormControl>
+                <Input
+                  placeholder="you@example.com"
+                  type="email"
+                  required
+                  {...form.register("email", { required: true })}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+            <ActionButton type="submit" isPending={mutation.isPending}>
+              Send sign-in link
+            </ActionButton>
+          </form>
+        </Form>
+        <Link to="/signin" className="text-sm text-muted-foreground">
+          Back to sign in
+        </Link>
+      </CardContent>
+    </AuthCard>
+  );
+};

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

@@ -1,124 +1,128 @@
-import { useMutation, useQuery } from "@tanstack/react-query";
-import { CheckIcon, MailCheck, RefreshCw } from "lucide-react";
-import { Navigate, useSearchParams } from "react-router";
-import { ActionButton } from "@lukoweb/apitogo/ui/ActionButton.js";
-import { Alert, AlertDescription, AlertTitle } from "@lukoweb/apitogo/ui/Alert.js";
-import { Button } from "@lukoweb/apitogo/ui/Button.js";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@lukoweb/apitogo/ui/Card.js";
-import createVariantComponent from "../../util/createVariantComponent.js";
-import { getRelativeRedirectUrl } from "../utils/relativeRedirectUrl.js";
-
-export const EmailVerificationUi = ({
-  onResendVerification,
-  onCheckVerification,
-}: {
-  onResendVerification: () => Promise<void>;
-  onCheckVerification: () => Promise<boolean>;
-}) => {
-  const [searchParams] = useSearchParams();
-  const redirectTo = searchParams.get("redirectTo");
-  const relativeRedirectTo = getRelativeRedirectUrl(redirectTo);
-
-  const resendMutation = useMutation({
-    mutationFn: () => onResendVerification(),
-  });
-
-  const checkVerificationMutation = useQuery({
-    queryKey: ["check-verification"],
-    queryFn: () => onCheckVerification(),
-  });
-
-  const error = resendMutation.error ?? checkVerificationMutation.error ?? null;
-
-  return (
-    <AuthCard>
-      {checkVerificationMutation.data === true && (
-        <Navigate to={relativeRedirectTo} />
-      )}
-      <CardHeader className="text-center">
-        <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary/10">
-          <MailCheck className="h-8 w-8 text-primary" />
-        </div>
-        <CardTitle>Verify your email</CardTitle>
-        <CardDescription>We've sent a verification link</CardDescription>
-      </CardHeader>
-      <CardContent className="flex flex-col gap-4">
-        {error && (
-          <Alert variant="destructive">
-            <AlertTitle>Error</AlertTitle>
-            <AlertDescription>{error?.message}</AlertDescription>
-          </Alert>
-        )}
-
-        {resendMutation.isSuccess && (
-          <Alert>
-            <AlertTitle>Email sent</AlertTitle>
-            <AlertDescription>
-              A new verification email has been sent. Please check your inbox.
-            </AlertDescription>
-          </Alert>
-        )}
-
-        {checkVerificationMutation.isSuccess &&
-          !checkVerificationMutation.data && (
-            <Alert>
-              <AlertDescription>
-                {checkVerificationMutation.isFetching
-                  ? "Checking verification..."
-                  : "Your email hasn't been verified yet. Please check your inbox and click the verification link."}
-              </AlertDescription>
-            </Alert>
-          )}
-
-        <div className="space-y-4">
-          <ActionButton
-            onClick={() => void checkVerificationMutation.refetch()}
-            isPending={checkVerificationMutation.isFetching}
-            className="w-full"
-          >
-            <div className="flex items-center gap-2">
-              <CheckIcon className="h-4 w-4" /> Continue
-            </div>
-          </ActionButton>
-
-          <div className="relative">
-            <div className="absolute inset-0 flex items-center">
-              <span className="w-full border-t" />
-            </div>
-            <div className="relative flex justify-center text-sm">
-              <span className="bg-card px-2 text-muted-foreground">
-                Didn't receive the email?
-              </span>
-            </div>
-          </div>
-
-          <Button
-            variant="outline"
-            onClick={() => void resendMutation.mutate()}
-            disabled={resendMutation.isPending}
-            className="w-full gap-2"
-          >
-            {resendMutation.isPending ? (
-              <RefreshCw className="h-4 w-4 animate-spin" />
-            ) : (
-              <RefreshCw className="h-4 w-4" />
-            )}
-            Resend verification email
-          </Button>
-        </div>
-
-        <p className="text-center text-xs text-muted-foreground">
-          Make sure to check your spam folder if you don't see the email.
-        </p>
-      </CardContent>
-    </AuthCard>
-  );
-};
-
-const AuthCard = createVariantComponent(Card, "max-w-md w-full mt-10 mx-auto");
+import { ActionButton } from "@lukoweb/apitogo/ui/ActionButton.js";
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@lukoweb/apitogo/ui/Alert.js";
+import { Button } from "@lukoweb/apitogo/ui/Button.js";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@lukoweb/apitogo/ui/Card.js";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { CheckIcon, MailCheck, RefreshCw } from "lucide-react";
+import { Navigate, useSearchParams } from "react-router";
+import createVariantComponent from "../../util/createVariantComponent.js";
+import { getRelativeRedirectUrl } from "../utils/relativeRedirectUrl.js";
+
+export const EmailVerificationUi = ({
+  onResendVerification,
+  onCheckVerification,
+}: {
+  onResendVerification: () => Promise<void>;
+  onCheckVerification: () => Promise<boolean>;
+}) => {
+  const [searchParams] = useSearchParams();
+  const redirectTo = searchParams.get("redirectTo");
+  const relativeRedirectTo = getRelativeRedirectUrl(redirectTo);
+
+  const resendMutation = useMutation({
+    mutationFn: () => onResendVerification(),
+  });
+
+  const checkVerificationMutation = useQuery({
+    queryKey: ["check-verification"],
+    queryFn: () => onCheckVerification(),
+  });
+
+  const error = resendMutation.error ?? checkVerificationMutation.error ?? null;
+
+  return (
+    <AuthCard>
+      {checkVerificationMutation.data === true && (
+        <Navigate to={relativeRedirectTo} />
+      )}
+      <CardHeader className="text-center">
+        <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary/10">
+          <MailCheck className="h-8 w-8 text-primary" />
+        </div>
+        <CardTitle>Verify your email</CardTitle>
+        <CardDescription>We've sent a verification link</CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        {error && (
+          <Alert variant="destructive">
+            <AlertTitle>Error</AlertTitle>
+            <AlertDescription>{error?.message}</AlertDescription>
+          </Alert>
+        )}
+
+        {resendMutation.isSuccess && (
+          <Alert>
+            <AlertTitle>Email sent</AlertTitle>
+            <AlertDescription>
+              A new verification email has been sent. Please check your inbox.
+            </AlertDescription>
+          </Alert>
+        )}
+
+        {checkVerificationMutation.isSuccess &&
+          !checkVerificationMutation.data && (
+            <Alert>
+              <AlertDescription>
+                {checkVerificationMutation.isFetching
+                  ? "Checking verification..."
+                  : "Your email hasn't been verified yet. Please check your inbox and click the verification link."}
+              </AlertDescription>
+            </Alert>
+          )}
+
+        <div className="space-y-4">
+          <ActionButton
+            onClick={() => void checkVerificationMutation.refetch()}
+            isPending={checkVerificationMutation.isFetching}
+            className="w-full"
+          >
+            <div className="flex items-center gap-2">
+              <CheckIcon className="h-4 w-4" /> Continue
+            </div>
+          </ActionButton>
+
+          <div className="relative">
+            <div className="absolute inset-0 flex items-center">
+              <span className="w-full border-t" />
+            </div>
+            <div className="relative flex justify-center text-sm">
+              <span className="bg-card px-2 text-muted-foreground">
+                Didn't receive the email?
+              </span>
+            </div>
+          </div>
+
+          <Button
+            variant="outline"
+            onClick={() => void resendMutation.mutate()}
+            disabled={resendMutation.isPending}
+            className="w-full gap-2"
+          >
+            {resendMutation.isPending ? (
+              <RefreshCw className="h-4 w-4 animate-spin" />
+            ) : (
+              <RefreshCw className="h-4 w-4" />
+            )}
+            Resend verification email
+          </Button>
+        </div>
+
+        <p className="text-center text-xs text-muted-foreground">
+          Make sure to check your spam folder if you don't see the email.
+        </p>
+      </CardContent>
+    </AuthCard>
+  );
+};
+
+const AuthCard = createVariantComponent(Card, "max-w-md w-full mt-10 mx-auto");