@m5kdev/web-ui 0.1.4 → 0.2.0

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

@@ -1,242 +0,0 @@
-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

@@ -1,121 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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

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