@lukoweb/apitogo 0.1.0

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

@@ -0,0 +1,101 @@
+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>
+  );
+};

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

@@ -0,0 +1,96 @@
+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>
+  );
+};

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

@@ -0,0 +1,124 @@
+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");