@lukoweb/apitogo 0.1.0 → 0.1.2

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

@@ -1,125 +1,129 @@
-import { useMutation } from "@tanstack/react-query";
-import { useEffect, useRef, useState } from "react";
-import { useNavigate, useSearchParams } from "react-router";
-import { Spinner } from "@lukoweb/apitogo/components";
-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 { EMAIL_LINK_STORAGE_KEY } from "../constants.js";
-import { getRelativeRedirectUrl } from "../utils/relativeRedirectUrl.js";
-import { AuthCard } from "./AuthCard.js";
-
-export const EmailLinkCallbackUi = ({
-  onCompleteSignIn,
-  isEmailLinkUrl,
-}: {
-  onCompleteSignIn: (email: string) => Promise<void>;
-  isEmailLinkUrl: (url: string) => boolean;
-}) => {
-  const navigate = useNavigate();
-  const [searchParams] = useSearchParams();
-  const redirectTo = searchParams.get("redirectTo");
-  const relativeRedirectTo = getRelativeRedirectUrl(redirectTo);
-
-  const [emailInput, setEmailInput] = useState("");
-
-  const signInMutation = useMutation({
-    mutationFn: (email: string) => onCompleteSignIn(email),
-    onSuccess: () => {
-      localStorage.removeItem(EMAIL_LINK_STORAGE_KEY);
-      void navigate(relativeRedirectTo, { replace: true });
-    },
-  });
-
-  const [storedEmail] = useState(() =>
-    localStorage.getItem(EMAIL_LINK_STORAGE_KEY),
-  );
-
-  const isValidLink = isEmailLinkUrl(window.location.href);
-
-  const hasTriggered = useRef(false);
-  useEffect(() => {
-    if (isValidLink && storedEmail && !hasTriggered.current) {
-      hasTriggered.current = true;
-      signInMutation.mutate(storedEmail);
-    }
-  }, [isValidLink, storedEmail, signInMutation.mutate]);
-
-  if (!isValidLink) {
-    return (
-      <AuthCard>
-        <CardHeader className="text-center">
-          <CardTitle>Invalid sign-in link</CardTitle>
-          <CardDescription>
-            This sign-in link is invalid or has expired. Please request a new
-            one.
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="flex justify-center">
-          <a href="/signin/email-link" className="text-sm text-primary">
-            Request a new sign-in link
-          </a>
-        </CardContent>
-      </AuthCard>
-    );
-  }
-
-  if (signInMutation.isPending || (storedEmail && signInMutation.isIdle)) {
-    return (
-      <AuthCard>
-        <CardHeader className="text-center">
-          <CardTitle>Signing you in...</CardTitle>
-          <CardDescription>
-            Please wait while we complete your sign-in.
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="flex items-center justify-center">
-          <Spinner />
-        </CardContent>
-      </AuthCard>
-    );
-  }
-
-  return (
-    <AuthCard>
-      <CardHeader>
-        <CardTitle>Confirm your email</CardTitle>
-        <CardDescription>
-          Please enter the email address you used to request the sign-in link.
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="flex flex-col gap-4">
-        {signInMutation.error && (
-          <Alert variant="destructive">
-            <AlertTitle>Error</AlertTitle>
-            <AlertDescription>{signInMutation.error.message}</AlertDescription>
-          </Alert>
-        )}
-        <form
-          onSubmit={(e) => {
-            e.preventDefault();
-            signInMutation.mutate(emailInput);
-          }}
-          className="flex flex-col gap-2"
-        >
-          <Input
-            placeholder="you@example.com"
-            type="email"
-            value={emailInput}
-            onChange={(e) => setEmailInput(e.target.value)}
-            required
-          />
-          <ActionButton type="submit" isPending={signInMutation.isPending}>
-            Complete sign-in
-          </ActionButton>
-        </form>
-      </CardContent>
-    </AuthCard>
-  );
-};
+import { Spinner } from "@lukoweb/apitogo/components";
+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 { useEffect, useRef, useState } from "react";
+import { useNavigate, useSearchParams } from "react-router";
+import { EMAIL_LINK_STORAGE_KEY } from "../constants.js";
+import { getRelativeRedirectUrl } from "../utils/relativeRedirectUrl.js";
+import { AuthCard } from "./AuthCard.js";
+
+export const EmailLinkCallbackUi = ({
+  onCompleteSignIn,
+  isEmailLinkUrl,
+}: {
+  onCompleteSignIn: (email: string) => Promise<void>;
+  isEmailLinkUrl: (url: string) => boolean;
+}) => {
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const redirectTo = searchParams.get("redirectTo");
+  const relativeRedirectTo = getRelativeRedirectUrl(redirectTo);
+
+  const [emailInput, setEmailInput] = useState("");
+
+  const signInMutation = useMutation({
+    mutationFn: (email: string) => onCompleteSignIn(email),
+    onSuccess: () => {
+      localStorage.removeItem(EMAIL_LINK_STORAGE_KEY);
+      void navigate(relativeRedirectTo, { replace: true });
+    },
+  });
+
+  const [storedEmail] = useState(() =>
+    localStorage.getItem(EMAIL_LINK_STORAGE_KEY),
+  );
+
+  const isValidLink = isEmailLinkUrl(window.location.href);
+
+  const hasTriggered = useRef(false);
+  useEffect(() => {
+    if (isValidLink && storedEmail && !hasTriggered.current) {
+      hasTriggered.current = true;
+      signInMutation.mutate(storedEmail);
+    }
+  }, [isValidLink, storedEmail, signInMutation.mutate]);
+
+  if (!isValidLink) {
+    return (
+      <AuthCard>
+        <CardHeader className="text-center">
+          <CardTitle>Invalid sign-in link</CardTitle>
+          <CardDescription>
+            This sign-in link is invalid or has expired. Please request a new
+            one.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="flex justify-center">
+          <a href="/signin/email-link" className="text-sm text-primary">
+            Request a new sign-in link
+          </a>
+        </CardContent>
+      </AuthCard>
+    );
+  }
+
+  if (signInMutation.isPending || (storedEmail && signInMutation.isIdle)) {
+    return (
+      <AuthCard>
+        <CardHeader className="text-center">
+          <CardTitle>Signing you in...</CardTitle>
+          <CardDescription>
+            Please wait while we complete your sign-in.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="flex items-center justify-center">
+          <Spinner />
+        </CardContent>
+      </AuthCard>
+    );
+  }
+
+  return (
+    <AuthCard>
+      <CardHeader>
+        <CardTitle>Confirm your email</CardTitle>
+        <CardDescription>
+          Please enter the email address you used to request the sign-in link.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        {signInMutation.error && (
+          <Alert variant="destructive">
+            <AlertTitle>Error</AlertTitle>
+            <AlertDescription>{signInMutation.error.message}</AlertDescription>
+          </Alert>
+        )}
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            signInMutation.mutate(emailInput);
+          }}
+          className="flex flex-col gap-2"
+        >
+          <Input
+            placeholder="you@example.com"
+            type="email"
+            value={emailInput}
+            onChange={(e) => setEmailInput(e.target.value)}
+            required
+          />
+          <ActionButton type="submit" isPending={signInMutation.isPending}>
+            Complete sign-in
+          </ActionButton>
+        </form>
+      </CardContent>
+    </AuthCard>
+  );
+};

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

@@ -1,101 +1,105 @@
-import { useMutation } from "@tanstack/react-query";
-import { Mail, RefreshCw } from "lucide-react";
-import { useState } from "react";
-import { Link, Navigate } from "react-router";
-import { Alert, AlertDescription, AlertTitle } from "@lukoweb/apitogo/ui/Alert.js";
-import { Button } from "@lukoweb/apitogo/ui/Button.js";
-import {
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@lukoweb/apitogo/ui/Card.js";
-import { cn } from "../../util/cn.js";
-import { EMAIL_LINK_STORAGE_KEY } from "../constants.js";
-import { AuthCard } from "./AuthCard.js";
-
-export const EmailLinkSentUi = ({
-  onResendEmailLink,
-}: {
-  onResendEmailLink: () => Promise<void>;
-}) => {
-  const [email] = useState(() => localStorage.getItem(EMAIL_LINK_STORAGE_KEY));
-
-  const resendMutation = useMutation({
-    mutationFn: () => onResendEmailLink(),
-  });
-
-  if (!email) {
-    return <Navigate to="/signin/email-link" replace />;
-  }
-
-  return (
-    <AuthCard>
-      <CardHeader className="text-center">
-        <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary/10">
-          <Mail className="h-8 w-8 text-primary" />
-        </div>
-        <CardTitle>Check your email</CardTitle>
-        <CardDescription>
-          We've sent a sign-in link to <strong>{email}</strong>.
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="flex flex-col gap-4">
-        {resendMutation.error && (
-          <Alert variant="destructive">
-            <AlertTitle>Error</AlertTitle>
-            <AlertDescription>{resendMutation.error.message}</AlertDescription>
-          </Alert>
-        )}
-
-        {resendMutation.isSuccess && (
-          <Alert>
-            <AlertTitle>Email sent</AlertTitle>
-            <AlertDescription>
-              A new sign-in link has been sent. Please check your inbox.
-            </AlertDescription>
-          </Alert>
-        )}
-
-        <div className="space-y-4">
-          <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"
-          >
-            <RefreshCw
-              className={cn(
-                "h-4 w-4",
-                resendMutation.isPending && "animate-spin",
-              )}
-            />
-            Resend sign-in link
-          </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>
-
-        <Link
-          to="/signin"
-          className="text-sm text-muted-foreground text-center"
-        >
-          Back to sign in
-        </Link>
-      </CardContent>
-    </AuthCard>
-  );
-};
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@lukoweb/apitogo/ui/Alert.js";
+import { Button } from "@lukoweb/apitogo/ui/Button.js";
+import {
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@lukoweb/apitogo/ui/Card.js";
+import { useMutation } from "@tanstack/react-query";
+import { Mail, RefreshCw } from "lucide-react";
+import { useState } from "react";
+import { Link, Navigate } from "react-router";
+import { cn } from "../../util/cn.js";
+import { EMAIL_LINK_STORAGE_KEY } from "../constants.js";
+import { AuthCard } from "./AuthCard.js";
+
+export const EmailLinkSentUi = ({
+  onResendEmailLink,
+}: {
+  onResendEmailLink: () => Promise<void>;
+}) => {
+  const [email] = useState(() => localStorage.getItem(EMAIL_LINK_STORAGE_KEY));
+
+  const resendMutation = useMutation({
+    mutationFn: () => onResendEmailLink(),
+  });
+
+  if (!email) {
+    return <Navigate to="/signin/email-link" replace />;
+  }
+
+  return (
+    <AuthCard>
+      <CardHeader className="text-center">
+        <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary/10">
+          <Mail className="h-8 w-8 text-primary" />
+        </div>
+        <CardTitle>Check your email</CardTitle>
+        <CardDescription>
+          We've sent a sign-in link to <strong>{email}</strong>.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        {resendMutation.error && (
+          <Alert variant="destructive">
+            <AlertTitle>Error</AlertTitle>
+            <AlertDescription>{resendMutation.error.message}</AlertDescription>
+          </Alert>
+        )}
+
+        {resendMutation.isSuccess && (
+          <Alert>
+            <AlertTitle>Email sent</AlertTitle>
+            <AlertDescription>
+              A new sign-in link has been sent. Please check your inbox.
+            </AlertDescription>
+          </Alert>
+        )}
+
+        <div className="space-y-4">
+          <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"
+          >
+            <RefreshCw
+              className={cn(
+                "h-4 w-4",
+                resendMutation.isPending && "animate-spin",
+              )}
+            />
+            Resend sign-in link
+          </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>
+
+        <Link
+          to="/signin"
+          className="text-sm text-muted-foreground text-center"
+        >
+          Back to sign in
+        </Link>
+      </CardContent>
+    </AuthCard>
+  );
+};