@m5kdev/web-ui 0.1.0

package/src/modules/auth/components/ClaimAccountRoute.tsx

@@ -0,0 +1,242 @@
+import { Alert, Button, Card, CardBody, CardHeader, Input } from "@heroui/react";
+import { useSession } from "@m5kdev/frontend/modules/auth/hooks/useSession";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useEffect, useMemo, useState } from "react";
+import { useLocation, useNavigate } from "react-router";
+import { toast } from "sonner";
+import { GoogleIcon } from "#icons/GoogleIcon";
+import { LinkedInIcon } from "#icons/LinkedInIcon";
+import { MicrosoftIcon } from "#icons/MicrosoftIcon";
+import type { UseBackendTRPC } from "#types";
+
+export function ClaimAccountRoute({ useTRPC }: { useTRPC?: UseBackendTRPC }) {
+  const { data: session, registerSession } = useSession();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const queryClient = useQueryClient();
+  const [email, setEmail] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [busy, setBusy] = useState<"none" | "email" | "password" | "link">("none");
+
+  const trpc = useTRPC?.();
+
+  const linkedProvider = useMemo(() => {
+    const params = new URLSearchParams(location.search);
+    return params.get("linked");
+  }, [location.search]);
+
+  const claimStatusQuery = useQuery({
+    queryKey: ["auth", "claim-status", session?.user?.id ?? null],
+    enabled: !!trpc && !!session?.user,
+    queryFn: async () => {
+      if (!trpc) return null;
+      return queryClient.fetchQuery(trpc.auth.getMyAccountClaimStatus.queryOptions());
+    },
+  });
+
+  const setEmailMutation = useMutation(
+    trpc
+      ? trpc.auth.setMyAccountClaimEmail.mutationOptions()
+      : {
+          mutationFn: async () => ({ status: false }),
+        }
+  );
+
+  const acceptClaimMutation = useMutation(
+    trpc
+      ? trpc.auth.acceptMyAccountClaim.mutationOptions()
+      : {
+          mutationFn: async () => ({ status: false }),
+        }
+  );
+
+  useEffect(() => {
+    if (session?.user?.email) {
+      setEmail(session.user.email);
+    }
+  }, [session?.user?.email]);
+
+  useEffect(() => {
+    if (!linkedProvider || !trpc) return;
+    acceptClaimMutation
+      .mutateAsync(undefined)
+      .then(() => {
+        toast.success("Account provider linked");
+        queryClient.invalidateQueries({ queryKey: trpc.auth.getMyAccountClaimStatus.queryKey() });
+      })
+      .catch((error) => {
+        toast.error(error.message);
+      })
+      .finally(() => {
+        navigate("/claim-account", { replace: true });
+      });
+  }, [acceptClaimMutation, linkedProvider, navigate, queryClient, trpc]);
+
+  if (!trpc) {
+    return (
+      <Alert
+        color="warning"
+        variant="faded"
+        title="Claim flow is unavailable because backend TRPC is not configured."
+      />
+    );
+  }
+
+  if (!session?.user) {
+    return (
+      <Alert
+        color="warning"
+        variant="faded"
+        title="You need to sign in with your magic link before claiming this account."
+      />
+    );
+  }
+
+  const claim = claimStatusQuery.data;
+  const hasClaimEmail = Boolean(claim?.claimedEmail);
+
+  const onSetEmail = async () => {
+    setBusy("email");
+    try {
+      await setEmailMutation.mutateAsync({ email });
+      registerSession(() => undefined);
+      await queryClient.invalidateQueries({
+        queryKey: trpc.auth.getMyAccountClaimStatus.queryKey(),
+      });
+      toast.success("Email updated");
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "Unable to set email");
+    } finally {
+      setBusy("none");
+    }
+  };
+
+  const onSetPassword = async () => {
+    setBusy("password");
+    try {
+      const response = await fetch(`${import.meta.env.VITE_SERVER_URL}/api/auth/set-password`, {
+        method: "POST",
+        credentials: "include",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          newPassword,
+        }),
+      });
+      const payload = await response.json().catch(() => ({}));
+      if (!response.ok) {
+        throw new Error(payload?.message ?? "Unable to set password");
+      }
+      await acceptClaimMutation.mutateAsync(undefined);
+      await queryClient.invalidateQueries({
+        queryKey: trpc.auth.getMyAccountClaimStatus.queryKey(),
+      });
+      toast.success("Password set. Account claimed.");
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "Unable to set password");
+    } finally {
+      setBusy("none");
+    }
+  };
+
+  const onLinkProvider = async (provider: "google" | "linkedin" | "microsoft") => {
+    setBusy("link");
+    try {
+      const response = await fetch(`${import.meta.env.VITE_SERVER_URL}/api/auth/link-social`, {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          provider,
+          callbackURL: `${window.location.origin}/claim-account?linked=${provider}`,
+        }),
+      });
+      const payload = await response.json().catch(() => ({}));
+      if (!response.ok || !payload?.url) {
+        throw new Error(payload?.message ?? "Unable to start provider linking");
+      }
+      window.location.href = payload.url;
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "Unable to link provider");
+      setBusy("none");
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-col gap-1">
+        <p className="text-xl font-semibold">Claim your account</p>
+        <p className="text-sm text-default-600">
+          You are signed in and can now set your permanent login methods.
+        </p>
+      </CardHeader>
+      <CardBody className="grid gap-6">
+        {claimStatusQuery.isLoading ? (
+          <Alert color="default" variant="faded" title="Loading claim status..." />
+        ) : !claim ? (
+          <Alert
+            color="warning"
+            variant="faded"
+            title="No pending account claim was found for your user."
+          />
+        ) : null}
+
+        <div className="grid gap-2">
+          <Input
+            type="email"
+            label="Email"
+            value={email}
+            onValueChange={setEmail}
+            description="Set your real email before linking providers and password."
+          />
+          <Button onPress={onSetEmail} isDisabled={!email || busy !== "none" || !claim}>
+            {busy === "email" ? "Saving..." : "Save Email"}
+          </Button>
+        </div>
+
+        <div className="grid gap-2">
+          <p className="text-sm font-medium">Link a provider</p>
+          <div className="grid gap-3 sm:grid-cols-3">
+            <Button
+              variant="bordered"
+              onPress={() => onLinkProvider("google")}
+              isDisabled={busy !== "none" || !hasClaimEmail || !claim}
+            >
+              <GoogleIcon className="h-4 w-4" /> Google
+            </Button>
+            <Button
+              variant="bordered"
+              onPress={() => onLinkProvider("linkedin")}
+              isDisabled={busy !== "none" || !hasClaimEmail || !claim}
+            >
+              <LinkedInIcon className="h-4 w-4" /> LinkedIn
+            </Button>
+            <Button
+              variant="bordered"
+              onPress={() => onLinkProvider("microsoft")}
+              isDisabled={busy !== "none" || !hasClaimEmail || !claim}
+            >
+              <MicrosoftIcon className="h-4 w-4" /> Microsoft
+            </Button>
+          </div>
+        </div>
+
+        <div className="grid gap-2">
+          <Input
+            type="password"
+            label="Set password"
+            value={newPassword}
+            onValueChange={setNewPassword}
+          />
+          <Button
+            onPress={onSetPassword}
+            isDisabled={!newPassword || busy !== "none" || !hasClaimEmail || !claim}
+          >
+            {busy === "password" ? "Saving..." : "Set Password and Claim"}
+          </Button>
+        </div>
+      </CardBody>
+    </Card>
+  );
+}

package/src/modules/auth/components/ErrorAuthRoute.tsx

@@ -0,0 +1,121 @@
+import { Button, Card, CardBody, CardHeader } from "@heroui/react";
+import { AlertCircle } from "lucide-react";
+import { useQueryState } from "nuqs";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router";
+
+export function ErrorAuthRoute() {
+  const { t } = useTranslation();
+  const [error] = useQueryState("error");
+
+  const ErrorEnum = {
+    invalid_callback_request: {
+      title: "Invalid callback request",
+      description: "The callback request is invalid. Please try again.",
+      buttons: ["login", "signup"],
+      signupLabel: null,
+    },
+    state_not_found: {
+      title: "State not found",
+      description: "The state was not found. Please try again.",
+      buttons: ["login", "signup"],
+      signupLabel: null,
+    },
+    account_already_linked_to_different_user: {
+      title: "Account already linked to different user",
+      description: "The account is already linked to a different user. Please try again.",
+      buttons: ["signup"],
+      signupLabel: null,
+    },
+    "email_doesn't_match": {
+      title: "Email doesn't match",
+      description: "The email doesn't match. Please try again.",
+      buttons: ["login", "signup"],
+      signupLabel: null,
+    },
+    email_not_found: {
+      title: "Email not found",
+      description: "The email was not found. Please try again.",
+      buttons: ["login", "signup"],
+      signupLabel: null,
+    },
+    no_callback_url: {
+      title: "No callback URL",
+      description: "The callback URL is not set. Please try again.",
+      buttons: ["login", "signup"],
+      signupLabel: null,
+    },
+    no_code: {
+      title: "No code",
+      description: "The code is not set. Please try again.",
+      buttons: ["login", "signup"],
+      signupLabel: null,
+    },
+    oauth_provider_not_found: {
+      title: "OAuth provider not found",
+      description: "The OAuth provider was not found. Please try again.",
+      buttons: ["login", "signup"],
+      signupLabel: null,
+    },
+    unable_to_link_account: {
+      title: "Unable to link account",
+      description: "The account could not be linked. Please try again.",
+      buttons: ["login", "signup"],
+      signupLabel: null,
+    },
+    unable_to_get_user_info: {
+      title: "Unable to get user info",
+      description: "The user info could not be retrieved. Please try again.",
+      buttons: ["login", "signup"],
+      signupLabel: null,
+    },
+    state_mismatch: {
+      title: "State mismatch",
+      description: "The state mismatch. Please try again.",
+      buttons: ["login", "signup"],
+      signupLabel: null,
+    },
+    signup_disabled: {
+      title: "Signup disabled",
+      description:
+        "The signup is disabled while we are in beta. Please join the waitlist to be notified when we launch.",
+      buttons: ["signup"],
+      signupLabel: "Join the waitlist",
+    },
+    default: {
+      title: "Authentication Failed",
+      description: "We encountered an issue with your authentication request",
+      buttons: ["login", "signup"],
+      signupLabel: null,
+    },
+  };
+
+  const errorData = ErrorEnum[error as keyof typeof ErrorEnum] || ErrorEnum.default;
+  const { title, description, buttons, signupLabel } = errorData;
+
+  return (
+    <div className="flex flex-col gap-6">
+      <Card>
+        <CardHeader className="text-center flex flex-col gap-2 items-center">
+          <AlertCircle className="w-10 h-10 text-red-500" />
+          <p className="text-xl font-semibold">{title}</p>
+          <p className="text-sm text-default-600">{description}</p>
+        </CardHeader>
+        <CardBody className="flex flex-col gap-4">
+          <div className="flex flex-col gap-2">
+            {buttons.includes("login") && (
+              <Button as={Link} to="/login" variant="bordered">
+                {t("web-ui:auth.error.backToLogin")}
+              </Button>
+            )}
+            {buttons.includes("signup") && (
+              <Button as={Link} to="/signup" variant="bordered">
+                {signupLabel || t("web-ui:auth.error.backToSignup")}
+              </Button>
+            )}
+          </div>
+        </CardBody>
+      </Card>
+    </div>
+  );
+}

package/src/modules/auth/components/ForgotPasswordForm.tsx

@@ -0,0 +1,58 @@
+import { Button, Input } from "@heroui/react";
+import { authClient } from "@m5kdev/frontend/modules/auth/auth.lib";
+import { useState } from "react";
+import { type SubmitHandler, useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+
+type Inputs = {
+  email: string;
+};
+
+export function ForgotPasswordForm() {
+  const { t } = useTranslation();
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<Inputs>();
+
+  const [isBusy, setIsBusy] = useState(false);
+
+  const onSubmit: SubmitHandler<Inputs> = (data) => {
+    setIsBusy(true);
+    authClient
+      .requestPasswordReset({
+        email: data.email,
+        redirectTo: "/reset-password",
+      })
+      .then(() => {
+        toast.success(t("web-ui:auth.forgotPassword.success"));
+      })
+      .catch(() => {
+        toast.error(t("web-ui:auth.forgotPassword.error"));
+      });
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="grid gap-6">
+      <div className="grid gap-2">
+        <Input
+          labelPlacement="outside"
+          label={t("web-ui:auth.login.email")}
+          type="email"
+          placeholder={t("web-ui:auth.login.placeholder.email")}
+          variant="bordered"
+          isRequired
+          {...register("email", { required: true })}
+        />
+        {errors.email && (
+          <span className="text-red-500 text-xs">{t("web-ui:auth.signup.emailRequired")}</span>
+        )}
+      </div>
+      <Button type="submit" className="w-full" color="primary" isDisabled={isBusy}>
+        {t("web-ui:auth.forgotPassword.button")}
+      </Button>
+    </form>
+  );
+}

package/src/modules/auth/components/ForgotPasswordRoute.tsx

@@ -0,0 +1,27 @@
+import { Card, CardBody, CardHeader } from "@heroui/react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router";
+import { ForgotPasswordForm } from "#modules/auth/components/ForgotPasswordForm";
+
+export function ForgotPasswordRoute() {
+  const { t } = useTranslation();
+  return (
+    <div className="flex flex-col gap-6">
+      <Card>
+        <CardHeader className="text-center flex flex-col gap-1">
+          <p className="text-xl font-semibold">{t("web-ui:auth.forgotPassword.title")}</p>
+          <p className="text-sm text-default-600">{t("web-ui:auth.forgotPassword.description")}</p>
+        </CardHeader>
+        <CardBody>
+          <ForgotPasswordForm />
+        </CardBody>
+      </Card>
+      <div className="text-center text-xs text-muted-foreground">
+        {t("web-ui:auth.forgotPassword.rememberPassword")}{" "}
+        <Link to="/login" className="underline underline-offset-4 hover:text-primary">
+          {t("web-ui:auth.login.button")}
+        </Link>
+      </div>
+    </div>
+  );
+}