@m5kdev/web-ui 0.1.4 → 0.2.0

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

@@ -1,273 +0,0 @@
-import { Button, Card, CardBody, CardHeader, Chip, Input } from "@heroui/react";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { CheckCircle2, Link2Icon, Mail, Send, Ticket, Users, Zap } from "lucide-react";
-import { useMemo, useState } from "react";
-import { toast } from "sonner";
-import { z } from "zod";
-import { CopyButton } from "#components/CopyButton";
-import type { UseBackendTRPC } from "#types";
-
-export interface InviteFriendsProps {
-  useTRPC: UseBackendTRPC;
-}
-
-export function InviteFriends({ useTRPC }: InviteFriendsProps) {
-  const trpc = useTRPC();
-  const queryClient = useQueryClient();
-
-  const { data: waitlist = [] } = useQuery(trpc.auth.listWaitlist.queryOptions());
-  const { data: count = 0 } = useQuery(trpc.auth.getUserWaitlistCount.queryOptions());
-
-  const invitesAvailable = Math.max(0, 3 - count);
-
-  const inviteMutation = useMutation(
-    trpc.auth.inviteToWaitlist.mutationOptions({
-      onSuccess: (result) => {
-        queryClient.setQueryData(
-          trpc.auth.getUserWaitlistCount.queryKey(),
-          (old) => (old ?? 0) + 1
-        );
-        queryClient.setQueryData(trpc.auth.listWaitlist.queryKey(), (old) => [
-          ...(old ?? []),
-          result,
-        ]);
-        toast.success("Invitation sent successfully!");
-      },
-      onError: (error) => {
-        toast.error(error.message);
-      },
-    })
-  );
-
-  const createInvitationCodeMutation = useMutation(
-    trpc.auth.createInvitationCode.mutationOptions({
-      onSuccess: (result) => {
-        queryClient.setQueryData(
-          trpc.auth.getUserWaitlistCount.queryKey(),
-          (old) => (old ?? 0) + 1
-        );
-        queryClient.setQueryData(trpc.auth.listWaitlist.queryKey(), (old) => [
-          ...(old ?? []),
-          result,
-        ]);
-        toast.success("Code created successfully!");
-      },
-      onError: (error) => {
-        toast.error(error.message);
-      },
-    })
-  );
-
-  const [email, setEmail] = useState("");
-  const [name, setName] = useState("");
-  const isLoading = inviteMutation.isPending || createInvitationCodeMutation.isPending;
-
-  const isEmailValid = useMemo(() => {
-    return z.email().safeParse(email).success;
-  }, [email]);
-
-  const handleInvite = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!email) return;
-
-    inviteMutation.mutate({ email, name: name.length > 0 ? name : undefined });
-    setEmail("");
-    setName("");
-  };
-
-  const handleCreateCode = async () => {
-    createInvitationCodeMutation.mutate({ name: name.length > 0 ? name : undefined });
-    setEmail("");
-    setName("");
-  };
-
-  const getStatusColor = (status: string) => {
-    switch (status.toLowerCase()) {
-      case "accepted":
-      case "completed":
-        return "success";
-      case "invited":
-        return "warning";
-      case "waitlist":
-        return "default";
-      default:
-        return "default";
-    }
-  };
-
-  return (
-    <div className="max-w-3xl mx-auto p-6 space-y-8">
-      {/* Hero Section */}
-      <div className="text-center space-y-4">
-        <div className="inline-flex items-center justify-center p-4 bg-primary/10 rounded-full mb-2 ring-1 ring-primary/20">
-          <Ticket className="w-8 h-8 text-primary" />
-        </div>
-        <h1 className="text-3xl md:text-4xl font-bold tracking-tight">
-          Invite Friends & Skip the Waitlist
-        </h1>
-        <p className="text-lg text-default-600 max-w-lg mx-auto leading-relaxed">
-          Encourage your friends to join! Friends invited by you get{" "}
-          <span className="text-foreground font-medium">immediate access</span> and skip the
-          waitlist completely.
-        </p>
-        <div className="flex justify-center mt-4">
-          <Chip
-            color={invitesAvailable > 0 ? "warning" : "default"}
-            variant="flat"
-            size="lg"
-            startContent={
-              <Zap size={16} className={invitesAvailable > 0 ? "text-warning-600" : ""} />
-            }
-            className="font-medium"
-          >
-            {invitesAvailable} {invitesAvailable === 1 ? "Invite" : "Invites"} Remaining
-          </Chip>
-        </div>
-      </div>
-
-      <div className="grid gap-6">
-        {/* Invite Form */}
-        <Card className="shadow-sm border border-default-200">
-          <CardHeader className="flex flex-col items-start gap-1 px-6 pt-6 pb-2">
-            <h3 className="text-xl font-semibold">Send an Invitation via Email</h3>
-            <p className="text-small text-default-600">
-              They'll receive a unique code to join instantly.
-            </p>
-          </CardHeader>
-          <CardBody className="px-6 pb-6">
-            <form onSubmit={handleInvite} className="flex flex-col gap-4">
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <Input
-                  label="Friend's Name (Optional)"
-                  placeholder="e.g. Alex"
-                  value={name}
-                  onValueChange={setName}
-                  variant="bordered"
-                  labelPlacement="outside"
-                />
-                <Input
-                  type="email"
-                  label="Email Address (Required for sending)"
-                  placeholder="friend@example.com"
-                  value={email}
-                  onValueChange={setEmail}
-                  variant="bordered"
-                  labelPlacement="outside"
-                  startContent={
-                    <Mail
-                      className="text-default-400 pointer-events-none flex-shrink-0"
-                      size={16}
-                    />
-                  }
-                />
-              </div>
-              <div className="flex justify-end pt-2 gap-2">
-                <Button
-                  color="primary"
-                  variant="bordered"
-                  type="button"
-                  isLoading={isLoading}
-                  isDisabled={invitesAvailable <= 0}
-                  onPress={handleCreateCode}
-                  className="font-medium"
-                  endContent={!isLoading && <Link2Icon size={16} />}
-                >
-                  Create Invitation Link
-                </Button>
-                <Button
-                  color="primary"
-                  type="submit"
-                  isLoading={isLoading}
-                  isDisabled={invitesAvailable <= 0 || !isEmailValid}
-                  className="font-medium"
-                  endContent={!isLoading && <Send size={16} />}
-                >
-                  Send Invitation
-                </Button>
-              </div>
-            </form>
-          </CardBody>
-        </Card>
-
-        {/* Created Invitations Section */}
-        <div className="space-y-4">
-          <div className="flex items-center justify-between">
-            <h3 className="text-xl font-semibold">Created Invitations</h3>
-          </div>
-
-          {waitlist.length > 0 ? (
-            <div className="flex flex-col gap-3">
-              {waitlist.map((item) => (
-                <div
-                  key={item.id}
-                  className="flex items-center justify-between p-4 border border-default-200 rounded-lg bg-content1"
-                >
-                  <div className="flex flex-row gap-3">
-                    <div>
-                      <span className="text-sm font-medium">
-                        {item.email || item.name || "Open Invitation Link"}
-                      </span>
-                    </div>
-                    <Chip
-                      size="sm"
-                      color={getStatusColor(item.status)}
-                      variant="flat"
-                      className="capitalize"
-                    >
-                      {item.status.toLowerCase()}
-                    </Chip>
-                  </div>
-
-                  <div className="flex items-center gap-3">
-                    {item.code && (
-                      <CopyButton
-                        variant="flat"
-                        color="success"
-                        size="sm"
-                        text={`${import.meta.env.VITE_APP_URL}/signup?code=${item.code}`}
-                        isIconOnly
-                      />
-                    )}
-                  </div>
-                </div>
-              ))}
-            </div>
-          ) : (
-            <div className="text-center py-8 text-default-600 border border-dashed border-default-200 rounded-lg">
-              No invitations created yet.
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* Benefits Grid */}
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 py-4">
-        <div className="flex flex-col items-center text-center p-6 rounded-2xl bg-content1 border border-default-100 shadow-sm">
-          <div className="p-3 bg-warning/10 text-warning rounded-full mb-4">
-            <Zap className="w-6 h-6" />
-          </div>
-          <h3 className="font-semibold mb-2">Instant Access</h3>
-          <p className="text-sm text-default-600">
-            Friends you invite skip the waitlist completely and get in right away.
-          </p>
-        </div>
-        <div className="flex flex-col items-center text-center p-6 rounded-2xl bg-content1 border border-default-100 shadow-sm">
-          <div className="p-3 bg-primary/10 text-primary rounded-full mb-4">
-            <Users className="w-6 h-6" />
-          </div>
-          <h3 className="font-semibold mb-2">Grow Your Network</h3>
-          <p className="text-sm text-default-600">Build your circle within the app from day one.</p>
-        </div>
-        <div className="flex flex-col items-center text-center p-6 rounded-2xl bg-content1 border border-default-100 shadow-sm">
-          <div className="p-3 bg-success/10 text-success rounded-full mb-4">
-            <CheckCircle2 className="w-6 h-6" />
-          </div>
-          <h3 className="font-semibold mb-2">Verified Status</h3>
-          <p className="text-sm text-default-600">
-            Invited members get a verified badge on their profile.
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,22 +0,0 @@
-import { Badge, type BadgeProps } from "@heroui/react";
-import { useTranslation } from "react-i18next";
-
-export function LastUsedBadge({
-  lastMethod,
-  method,
-  children,
-  ...props
-}: BadgeProps & { lastMethod?: string | null; method?: string | null }) {
-  const { t } = useTranslation();
-  if (lastMethod !== method) return children;
-  return (
-    <Badge
-      {...props}
-      content={t("web-ui:auth.login.lastUsed")}
-      color="warning"
-      className="px-2 !right-[10%]"
-    >
-      {children}
-    </Badge>
-  );
-}

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

@@ -1,104 +0,0 @@
-import { Button, Input } from "@heroui/react";
-import { authClient } from "@m5kdev/frontend/modules/auth/auth.lib";
-import { useSession } from "@m5kdev/frontend/modules/auth/hooks/useSession";
-import { type SubmitHandler, useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
-import { Link, useNavigate } from "react-router";
-import { toast } from "sonner";
-import { AuthProviders } from "./AuthProviders";
-import { LastUsedBadge } from "./LastUsedBadge";
-
-type Inputs = {
-  email: string;
-  password: string;
-};
-
-export function LoginForm({ providers }: { providers?: string[] }) {
-  const lastMethod = authClient.getLastUsedLoginMethod();
-  const { register, handleSubmit } = useForm<Inputs>();
-  const { registerSession } = useSession();
-  const navigate = useNavigate();
-  const { t } = useTranslation();
-
-  const onSubmit: SubmitHandler<Inputs> = (data) => {
-    console.log(data);
-    authClient.signIn
-      .email({
-        email: data.email,
-        password: data.password,
-      })
-      .then((res) => {
-        console.log(res);
-        if (res.data?.user) {
-          registerSession(() => {
-            navigate("/");
-          });
-        } else if (res.error) {
-          toast.error(t("web-ui:auth.errors.authentication"), {
-            description: res.error.message,
-          });
-        }
-      })
-      .catch((error) => {
-        toast.error(t("web-ui:auth.errors.server"), {
-          description: error.message,
-        });
-      });
-  };
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <div className="grid gap-6">
-        <AuthProviders providers={providers} lastMethod={lastMethod} />
-
-        <div className="grid gap-6">
-          <div className="grid gap-2">
-            <LastUsedBadge lastMethod={lastMethod} method="email">
-              <label htmlFor="email" className="text-sm font-medium">
-                {t("web-ui:auth.login.email")}
-              </label>
-            </LastUsedBadge>
-            <Input
-              type="email"
-              placeholder={t("web-ui:auth.login.placeholder.email")}
-              variant="bordered"
-              isRequired
-              {...register("email", { required: true })}
-            />
-          </div>
-
-          <div className="grid gap-2">
-            <div className="flex items-center">
-              <label htmlFor="password" className="text-sm font-medium">
-                {t("web-ui:auth.login.password")}
-              </label>
-              <Link
-                to="/forgot-password"
-                className="ml-auto text-sm underline-offset-4 hover:underline"
-              >
-                {t("web-ui:auth.login.forgotPassword")}
-              </Link>
-            </div>
-            <Input
-              placeholder={t("web-ui:auth.login.password")}
-              type="password"
-              variant="bordered"
-              isRequired
-              {...register("password", { required: true })}
-            />
-          </div>
-          <Button type="submit" className="w-full" color="primary">
-            {t("web-ui:auth.login.button")}
-          </Button>
-        </div>
-
-        <div className="text-center text-sm">
-          {t("web-ui:auth.login.noAccount")}{" "}
-          <Link to="/signup" className="underline underline-offset-4">
-            {t("web-ui:auth.login.signUp")}
-          </Link>
-        </div>
-      </div>
-    </form>
-  );
-}

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

@@ -1,31 +0,0 @@
-import { Card, CardBody, CardHeader } from "@heroui/react";
-import { useTranslation } from "react-i18next";
-import { Link } from "react-router";
-import { LoginForm } from "./LoginForm";
-
-export function LoginRoute({ providers }: { providers?: string[] }) {
-  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.login.welcome")}</p>
-          <p className="text-sm text-default-600">
-            {providers
-              ? t("web-ui:auth.login.descriptionWithProviders")
-              : t("web-ui:auth.login.description")}
-          </p>
-        </CardHeader>
-        <CardBody>
-          <LoginForm providers={providers} />
-        </CardBody>
-      </Card>
-      <div className="text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-primary  ">
-        {t("web-ui:common.byClickingContinue")}{" "}
-        <Link to="/terms-of-service">{t("web-ui:common.termsOfService")}</Link>{" "}
-        {t("web-ui:common.and")}{" "}
-        <Link to="/privacy-policy">{t("web-ui:common.privacyPolicy")}</Link>.
-      </div>
-    </div>
-  );
-}

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

@@ -1,21 +0,0 @@
-import { Spinner } from "@heroui/react";
-import { authClient } from "@m5kdev/frontend/modules/auth/auth.lib";
-import { useEffect } from "react";
-import { useNavigate } from "react-router";
-
-export default function Logout() {
-  const navigate = useNavigate();
-
-  // biome-ignore lint/correctness/useExhaustiveDependencies(authClient): authClient is a singleton
-  // biome-ignore lint/correctness/useExhaustiveDependencies(navigate): navigate is a global hook
-  useEffect(() => {
-    authClient.signOut();
-    navigate("/login");
-  }, []);
-
-  return (
-    <div className="flex-1 justify-center align-center">
-      <Spinner />
-    </div>
-  );
-}

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

@@ -1,161 +0,0 @@
-import { Card, CardBody, CardHeader, Spinner } from "@heroui/react";
-import { authClient } from "@m5kdev/frontend/modules/auth/auth.lib";
-import { useSession } from "@m5kdev/frontend/modules/auth/hooks/useSession";
-import { useEffect, useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { useLocation, useNavigate, useSearchParams } from "react-router";
-import { toast } from "sonner";
-
-type Phase = "idle" | "accepting" | "success" | "error";
-
-export type OrganizationAcceptInvitationRouteProps = {
-  authReturnKey?: string;
-  loginPath?: string;
-  defaultRedirectPath?: string;
-  managerRedirectPath?: string;
-  managerRoles?: string[];
-  onInvalidateScopedQueries?: () => void | Promise<void>;
-};
-
-export function OrganizationAcceptInvitationRoute({
-  authReturnKey = "org-auth-return",
-  loginPath = "/login",
-  defaultRedirectPath = "/",
-  managerRedirectPath = "/organization/members",
-  managerRoles = ["admin", "owner"],
-  onInvalidateScopedQueries,
-}: OrganizationAcceptInvitationRouteProps) {
-  const { t } = useTranslation();
-  const [searchParams] = useSearchParams();
-  const { data: session, registerSession } = useSession();
-  const navigate = useNavigate();
-  const location = useLocation();
-  const invitationId = searchParams.get("id");
-  const [phase, setPhase] = useState<Phase>("idle");
-  const [errorMessage, setErrorMessage] = useState<string | null>(null);
-  const managerRoleSet = useMemo(() => new Set(managerRoles), [managerRoles]);
-
-  useEffect(() => {
-    if (!invitationId) {
-      setPhase("error");
-      setErrorMessage(t("web-ui:organization.invitation.errorMissing"));
-      return;
-    }
-
-    if (!session) {
-      sessionStorage.setItem(authReturnKey, `${location.pathname}${location.search}`);
-      navigate(loginPath, { replace: true });
-    }
-  }, [
-    authReturnKey,
-    invitationId,
-    location.pathname,
-    location.search,
-    loginPath,
-    navigate,
-    session,
-    t,
-  ]);
-
-  useEffect(() => {
-    if (!session || !invitationId || phase !== "idle") {
-      return;
-    }
-
-    let isMounted = true;
-
-    const run = async () => {
-      try {
-        setPhase("accepting");
-        const { data, error } = await authClient.organization.acceptInvitation({ invitationId });
-        if (error) {
-          throw new Error(error.message ?? t("web-ui:organization.invitation.acceptFailed"));
-        }
-
-        const organizationId =
-          (data as { invitation?: { organizationId?: string } | null } | null)?.invitation
-            ?.organizationId ?? null;
-        const invitationRole =
-          (data as { invitation?: { role?: string } | null } | null)?.invitation?.role ?? "member";
-
-        if (organizationId) {
-          const result = await authClient.organization.setActive({ organizationId });
-          if (result.error) {
-            throw new Error(
-              result.error.message ?? t("web-ui:organization.invitation.activateFailed")
-            );
-          }
-        }
-
-        registerSession(() => {
-          void onInvalidateScopedQueries?.();
-        });
-
-        if (isMounted) {
-          setPhase("success");
-          toast.success(t("web-ui:organization.invitation.accepted"));
-          navigate(managerRoleSet.has(invitationRole) ? managerRedirectPath : defaultRedirectPath, {
-            replace: true,
-          });
-        }
-      } catch (error) {
-        if (isMounted) {
-          setPhase("error");
-          setErrorMessage(
-            error instanceof Error
-              ? error.message
-              : t("web-ui:organization.invitation.acceptFailed")
-          );
-        }
-      }
-    };
-
-    void run();
-
-    return () => {
-      isMounted = false;
-    };
-  }, [
-    defaultRedirectPath,
-    invitationId,
-    managerRedirectPath,
-    managerRoleSet,
-    navigate,
-    onInvalidateScopedQueries,
-    phase,
-    registerSession,
-    session,
-    t,
-  ]);
-
-  if (phase === "error") {
-    return (
-      <div className="min-h-screen flex items-center justify-center p-6">
-        <Card className="w-full max-w-lg">
-          <CardHeader className="text-lg font-semibold">
-            {t("web-ui:organization.invitation.error")}
-          </CardHeader>
-          <CardBody>{errorMessage ?? t("web-ui:organization.invitation.unableAccept")}</CardBody>
-        </Card>
-      </div>
-    );
-  }
-
-  return (
-    <div className="min-h-screen flex items-center justify-center p-6">
-      <Card className="w-full max-w-lg">
-        <CardHeader className="text-lg font-semibold">
-          {t("web-ui:organization.invitation.accepting")}
-        </CardHeader>
-        <CardBody className="flex items-center gap-3">
-          <Spinner size="sm" />
-          <span>
-            {phase === "success"
-              ? t("web-ui:organization.invitation.redirecting")
-              : t("web-ui:organization.invitation.pleaseWait")}
-          </span>
-        </CardBody>
-      </Card>
-    </div>
-  );
-}