@m5kdev/web-ui 0.1.0

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

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

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

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

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

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

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