@m5kdev/web-ui 0.1.3 → 0.1.5

package/dist/src/modules/auth/components/AuthRouter.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+import type { UseBackendTRPC } from "#types";
+interface AuthRouterProps {
+    header: ReactNode;
+    providers?: string[];
+    useTRPC?: UseBackendTRPC;
+}
+export declare function AuthRouter({ header, providers, useTRPC }: AuthRouterProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/modules/auth/components/AuthRouter.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Route } from "react-router";
+import { AuthLayout } from "#modules/auth/components/AuthLayout";
+import { ClaimAccountRoute } from "#modules/auth/components/ClaimAccountRoute";
+import { ErrorAuthRoute } from "#modules/auth/components/ErrorAuthRoute";
+import { ForgotPasswordRoute } from "#modules/auth/components/ForgotPasswordRoute";
+import { LoginRoute } from "#modules/auth/components/LoginRoute";
+import { ResetPasswordRoute } from "#modules/auth/components/ResetPasswordRoute";
+import { SignupRoute } from "#modules/auth/components/SignupRoute";
+export function AuthRouter({ header, providers, useTRPC }) {
+    return (_jsxs(Route, { element: _jsx(AuthLayout, { header: header }), children: [_jsx(Route, { path: "/login", element: _jsx(LoginRoute, { providers: providers }) }), _jsx(Route, { path: "/signup", element: _jsx(SignupRoute, { providers: providers, useTRPC: useTRPC }) }), _jsx(Route, { path: "/forgot-password", element: _jsx(ForgotPasswordRoute, {}) }), _jsx(Route, { path: "/reset-password", element: _jsx(ResetPasswordRoute, {}) }), _jsx(Route, { path: "/claim-account", element: _jsx(ClaimAccountRoute, { useTRPC: useTRPC }) }), _jsx(Route, { path: "/error-auth", element: _jsx(ErrorAuthRoute, {}) })] }));
+}

package/dist/src/modules/auth/components/ClaimAccountRoute.d.ts

@@ -0,0 +1,4 @@
+import type { UseBackendTRPC } from "#types";
+export declare function ClaimAccountRoute({ useTRPC }: {
+    useTRPC?: UseBackendTRPC;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/src/modules/auth/components/ClaimAccountRoute.js

@@ -0,0 +1,143 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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";
+export function ClaimAccountRoute({ useTRPC }) {
+    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");
+    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 (_jsx(Alert, { color: "warning", variant: "faded", title: "Claim flow is unavailable because backend TRPC is not configured." }));
+    }
+    if (!session?.user) {
+        return (_jsx(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) => {
+        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 (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-col gap-1", children: [_jsx("p", { className: "text-xl font-semibold", children: "Claim your account" }), _jsx("p", { className: "text-sm text-default-600", children: "You are signed in and can now set your permanent login methods." })] }), _jsxs(CardBody, { className: "grid gap-6", children: [claimStatusQuery.isLoading ? (_jsx(Alert, { color: "default", variant: "faded", title: "Loading claim status..." })) : !claim ? (_jsx(Alert, { color: "warning", variant: "faded", title: "No pending account claim was found for your user." })) : null, _jsxs("div", { className: "grid gap-2", children: [_jsx(Input, { type: "email", label: "Email", value: email, onValueChange: setEmail, description: "Set your real email before linking providers and password." }), _jsx(Button, { onPress: onSetEmail, isDisabled: !email || busy !== "none" || !claim, children: busy === "email" ? "Saving..." : "Save Email" })] }), _jsxs("div", { className: "grid gap-2", children: [_jsx("p", { className: "text-sm font-medium", children: "Link a provider" }), _jsxs("div", { className: "grid gap-3 sm:grid-cols-3", children: [_jsxs(Button, { variant: "bordered", onPress: () => onLinkProvider("google"), isDisabled: busy !== "none" || !hasClaimEmail || !claim, children: [_jsx(GoogleIcon, { className: "h-4 w-4" }), " Google"] }), _jsxs(Button, { variant: "bordered", onPress: () => onLinkProvider("linkedin"), isDisabled: busy !== "none" || !hasClaimEmail || !claim, children: [_jsx(LinkedInIcon, { className: "h-4 w-4" }), " LinkedIn"] }), _jsxs(Button, { variant: "bordered", onPress: () => onLinkProvider("microsoft"), isDisabled: busy !== "none" || !hasClaimEmail || !claim, children: [_jsx(MicrosoftIcon, { className: "h-4 w-4" }), " Microsoft"] })] })] }), _jsxs("div", { className: "grid gap-2", children: [_jsx(Input, { type: "password", label: "Set password", value: newPassword, onValueChange: setNewPassword }), _jsx(Button, { onPress: onSetPassword, isDisabled: !newPassword || busy !== "none" || !hasClaimEmail || !claim, children: busy === "password" ? "Saving..." : "Set Password and Claim" })] })] })] }));
+}

package/dist/src/modules/auth/components/ErrorAuthRoute.d.ts

@@ -0,0 +1 @@
+export declare function ErrorAuthRoute(): import("react/jsx-runtime").JSX.Element;

package/dist/src/modules/auth/components/ErrorAuthRoute.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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] || ErrorEnum.default;
+    const { title, description, buttons, signupLabel } = errorData;
+    return (_jsx("div", { className: "flex flex-col gap-6", children: _jsxs(Card, { children: [_jsxs(CardHeader, { className: "text-center flex flex-col gap-2 items-center", children: [_jsx(AlertCircle, { className: "w-10 h-10 text-red-500" }), _jsx("p", { className: "text-xl font-semibold", children: title }), _jsx("p", { className: "text-sm text-default-600", children: description })] }), _jsx(CardBody, { className: "flex flex-col gap-4", children: _jsxs("div", { className: "flex flex-col gap-2", children: [buttons.includes("login") && (_jsx(Button, { as: Link, to: "/login", variant: "bordered", children: t("web-ui:auth.error.backToLogin") })), buttons.includes("signup") && (_jsx(Button, { as: Link, to: "/signup", variant: "bordered", children: signupLabel || t("web-ui:auth.error.backToSignup") }))] }) })] }) }));
+}

package/dist/src/modules/auth/components/ForgotPasswordForm.d.ts

@@ -0,0 +1 @@
+export declare function ForgotPasswordForm(): import("react/jsx-runtime").JSX.Element;

package/dist/src/modules/auth/components/ForgotPasswordForm.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Input } from "@heroui/react";
+import { authClient } from "@m5kdev/frontend/modules/auth/auth.lib";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+export function ForgotPasswordForm() {
+    const { t } = useTranslation();
+    const { register, handleSubmit, formState: { errors }, } = useForm();
+    const [isBusy, setIsBusy] = useState(false);
+    const onSubmit = (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 (_jsxs("form", { onSubmit: handleSubmit(onSubmit), className: "grid gap-6", children: [_jsxs("div", { className: "grid gap-2", children: [_jsx(Input, { labelPlacement: "outside", label: t("web-ui:auth.login.email"), type: "email", placeholder: t("web-ui:auth.login.placeholder.email"), variant: "bordered", isRequired: true, ...register("email", { required: true }) }), errors.email && (_jsx("span", { className: "text-red-500 text-xs", children: t("web-ui:auth.signup.emailRequired") }))] }), _jsx(Button, { type: "submit", className: "w-full", color: "primary", isDisabled: isBusy, children: t("web-ui:auth.forgotPassword.button") })] }));
+}

package/dist/src/modules/auth/components/ForgotPasswordRoute.d.ts

@@ -0,0 +1 @@
+export declare function ForgotPasswordRoute(): import("react/jsx-runtime").JSX.Element;

package/dist/src/modules/auth/components/ForgotPasswordRoute.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs(Card, { children: [_jsxs(CardHeader, { className: "text-center flex flex-col gap-1", children: [_jsx("p", { className: "text-xl font-semibold", children: t("web-ui:auth.forgotPassword.title") }), _jsx("p", { className: "text-sm text-default-600", children: t("web-ui:auth.forgotPassword.description") })] }), _jsx(CardBody, { children: _jsx(ForgotPasswordForm, {}) })] }), _jsxs("div", { className: "text-center text-xs text-muted-foreground", children: [t("web-ui:auth.forgotPassword.rememberPassword"), " ", _jsx(Link, { to: "/login", className: "underline underline-offset-4 hover:text-primary", children: t("web-ui:auth.login.button") })] })] }));
+}

package/dist/src/modules/auth/components/InviteFriends.d.ts

@@ -0,0 +1,5 @@
+import type { UseBackendTRPC } from "#types";
+export interface InviteFriendsProps {
+    useTRPC: UseBackendTRPC;
+}
+export declare function InviteFriends({ useTRPC }: InviteFriendsProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/modules/auth/components/InviteFriends.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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";
+export function InviteFriends({ useTRPC }) {
+    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) => {
+        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) => {
+        switch (status.toLowerCase()) {
+            case "accepted":
+            case "completed":
+                return "success";
+            case "invited":
+                return "warning";
+            case "waitlist":
+                return "default";
+            default:
+                return "default";
+        }
+    };
+    return (_jsxs("div", { className: "max-w-3xl mx-auto p-6 space-y-8", children: [_jsxs("div", { className: "text-center space-y-4", children: [_jsx("div", { className: "inline-flex items-center justify-center p-4 bg-primary/10 rounded-full mb-2 ring-1 ring-primary/20", children: _jsx(Ticket, { className: "w-8 h-8 text-primary" }) }), _jsx("h1", { className: "text-3xl md:text-4xl font-bold tracking-tight", children: "Invite Friends & Skip the Waitlist" }), _jsxs("p", { className: "text-lg text-default-600 max-w-lg mx-auto leading-relaxed", children: ["Encourage your friends to join! Friends invited by you get", " ", _jsx("span", { className: "text-foreground font-medium", children: "immediate access" }), " and skip the waitlist completely."] }), _jsx("div", { className: "flex justify-center mt-4", children: _jsxs(Chip, { color: invitesAvailable > 0 ? "warning" : "default", variant: "flat", size: "lg", startContent: _jsx(Zap, { size: 16, className: invitesAvailable > 0 ? "text-warning-600" : "" }), className: "font-medium", children: [invitesAvailable, " ", invitesAvailable === 1 ? "Invite" : "Invites", " Remaining"] }) })] }), _jsxs("div", { className: "grid gap-6", children: [_jsxs(Card, { className: "shadow-sm border border-default-200", children: [_jsxs(CardHeader, { className: "flex flex-col items-start gap-1 px-6 pt-6 pb-2", children: [_jsx("h3", { className: "text-xl font-semibold", children: "Send an Invitation via Email" }), _jsx("p", { className: "text-small text-default-600", children: "They'll receive a unique code to join instantly." })] }), _jsx(CardBody, { className: "px-6 pb-6", children: _jsxs("form", { onSubmit: handleInvite, className: "flex flex-col gap-4", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsx(Input, { label: "Friend's Name (Optional)", placeholder: "e.g. Alex", value: name, onValueChange: setName, variant: "bordered", labelPlacement: "outside" }), _jsx(Input, { type: "email", label: "Email Address (Required for sending)", placeholder: "friend@example.com", value: email, onValueChange: setEmail, variant: "bordered", labelPlacement: "outside", startContent: _jsx(Mail, { className: "text-default-400 pointer-events-none flex-shrink-0", size: 16 }) })] }), _jsxs("div", { className: "flex justify-end pt-2 gap-2", children: [_jsx(Button, { color: "primary", variant: "bordered", type: "button", isLoading: isLoading, isDisabled: invitesAvailable <= 0, onPress: handleCreateCode, className: "font-medium", endContent: !isLoading && _jsx(Link2Icon, { size: 16 }), children: "Create Invitation Link" }), _jsx(Button, { color: "primary", type: "submit", isLoading: isLoading, isDisabled: invitesAvailable <= 0 || !isEmailValid, className: "font-medium", endContent: !isLoading && _jsx(Send, { size: 16 }), children: "Send Invitation" })] })] }) })] }), _jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "flex items-center justify-between", children: _jsx("h3", { className: "text-xl font-semibold", children: "Created Invitations" }) }), waitlist.length > 0 ? (_jsx("div", { className: "flex flex-col gap-3", children: waitlist.map((item) => (_jsxs("div", { className: "flex items-center justify-between p-4 border border-default-200 rounded-lg bg-content1", children: [_jsxs("div", { className: "flex flex-row gap-3", children: [_jsx("div", { children: _jsx("span", { className: "text-sm font-medium", children: item.email || item.name || "Open Invitation Link" }) }), _jsx(Chip, { size: "sm", color: getStatusColor(item.status), variant: "flat", className: "capitalize", children: item.status.toLowerCase() })] }), _jsx("div", { className: "flex items-center gap-3", children: item.code && (_jsx(CopyButton, { variant: "flat", color: "success", size: "sm", text: `${import.meta.env.VITE_APP_URL}/signup?code=${item.code}`, isIconOnly: true })) })] }, item.id))) })) : (_jsx("div", { className: "text-center py-8 text-default-600 border border-dashed border-default-200 rounded-lg", children: "No invitations created yet." }))] })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4 py-4", children: [_jsxs("div", { className: "flex flex-col items-center text-center p-6 rounded-2xl bg-content1 border border-default-100 shadow-sm", children: [_jsx("div", { className: "p-3 bg-warning/10 text-warning rounded-full mb-4", children: _jsx(Zap, { className: "w-6 h-6" }) }), _jsx("h3", { className: "font-semibold mb-2", children: "Instant Access" }), _jsx("p", { className: "text-sm text-default-600", children: "Friends you invite skip the waitlist completely and get in right away." })] }), _jsxs("div", { className: "flex flex-col items-center text-center p-6 rounded-2xl bg-content1 border border-default-100 shadow-sm", children: [_jsx("div", { className: "p-3 bg-primary/10 text-primary rounded-full mb-4", children: _jsx(Users, { className: "w-6 h-6" }) }), _jsx("h3", { className: "font-semibold mb-2", children: "Grow Your Network" }), _jsx("p", { className: "text-sm text-default-600", children: "Build your circle within the app from day one." })] }), _jsxs("div", { className: "flex flex-col items-center text-center p-6 rounded-2xl bg-content1 border border-default-100 shadow-sm", children: [_jsx("div", { className: "p-3 bg-success/10 text-success rounded-full mb-4", children: _jsx(CheckCircle2, { className: "w-6 h-6" }) }), _jsx("h3", { className: "font-semibold mb-2", children: "Verified Status" }), _jsx("p", { className: "text-sm text-default-600", children: "Invited members get a verified badge on their profile." })] })] })] }));
+}

package/dist/src/modules/auth/components/LastUsedBadge.d.ts

@@ -0,0 +1,5 @@
+import { type BadgeProps } from "@heroui/react";
+export declare function LastUsedBadge({ lastMethod, method, children, ...props }: BadgeProps & {
+    lastMethod?: string | null;
+    method?: string | null;
+}): string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;

package/dist/src/modules/auth/components/LastUsedBadge.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Badge } from "@heroui/react";
+import { useTranslation } from "react-i18next";
+export function LastUsedBadge({ lastMethod, method, children, ...props }) {
+    const { t } = useTranslation();
+    if (lastMethod !== method)
+        return children;
+    return (_jsx(Badge, { ...props, content: t("web-ui:auth.login.lastUsed"), color: "warning", className: "px-2 !right-[10%]", children: children }));
+}

package/dist/src/modules/auth/components/LoginForm.d.ts

@@ -0,0 +1,3 @@
+export declare function LoginForm({ providers }: {
+    providers?: string[];
+}): import("react/jsx-runtime").JSX.Element;

package/dist/src/modules/auth/components/LoginForm.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { 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";
+export function LoginForm({ providers }) {
+    const lastMethod = authClient.getLastUsedLoginMethod();
+    const { register, handleSubmit } = useForm();
+    const { registerSession } = useSession();
+    const navigate = useNavigate();
+    const { t } = useTranslation();
+    const onSubmit = (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 (_jsx("form", { onSubmit: handleSubmit(onSubmit), children: _jsxs("div", { className: "grid gap-6", children: [_jsx(AuthProviders, { providers: providers, lastMethod: lastMethod }), _jsxs("div", { className: "grid gap-6", children: [_jsxs("div", { className: "grid gap-2", children: [_jsx(LastUsedBadge, { lastMethod: lastMethod, method: "email", children: _jsx("label", { htmlFor: "email", className: "text-sm font-medium", children: t("web-ui:auth.login.email") }) }), _jsx(Input, { type: "email", placeholder: t("web-ui:auth.login.placeholder.email"), variant: "bordered", isRequired: true, ...register("email", { required: true }) })] }), _jsxs("div", { className: "grid gap-2", children: [_jsxs("div", { className: "flex items-center", children: [_jsx("label", { htmlFor: "password", className: "text-sm font-medium", children: t("web-ui:auth.login.password") }), _jsx(Link, { to: "/forgot-password", className: "ml-auto text-sm underline-offset-4 hover:underline", children: t("web-ui:auth.login.forgotPassword") })] }), _jsx(Input, { placeholder: t("web-ui:auth.login.password"), type: "password", variant: "bordered", isRequired: true, ...register("password", { required: true }) })] }), _jsx(Button, { type: "submit", className: "w-full", color: "primary", children: t("web-ui:auth.login.button") })] }), _jsxs("div", { className: "text-center text-sm", children: [t("web-ui:auth.login.noAccount"), " ", _jsx(Link, { to: "/signup", className: "underline underline-offset-4", children: t("web-ui:auth.login.signUp") })] })] }) }));
+}

package/dist/src/modules/auth/components/LoginRoute.d.ts

@@ -0,0 +1,3 @@
+export declare function LoginRoute({ providers }: {
+    providers?: string[];
+}): import("react/jsx-runtime").JSX.Element;

package/dist/src/modules/auth/components/LoginRoute.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 }) {
+    const { t } = useTranslation();
+    return (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs(Card, { children: [_jsxs(CardHeader, { className: "text-center flex flex-col gap-1", children: [_jsx("p", { className: "text-xl font-semibold", children: t("web-ui:auth.login.welcome") }), _jsx("p", { className: "text-sm text-default-600", children: providers
+                                    ? t("web-ui:auth.login.descriptionWithProviders")
+                                    : t("web-ui:auth.login.description") })] }), _jsx(CardBody, { children: _jsx(LoginForm, { providers: providers }) })] }), _jsxs("div", { className: "text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-primary  ", children: [t("web-ui:common.byClickingContinue"), " ", _jsx(Link, { to: "/terms-of-service", children: t("web-ui:common.termsOfService") }), " ", t("web-ui:common.and"), " ", _jsx(Link, { to: "/privacy-policy", children: t("web-ui:common.privacyPolicy") }), "."] })] }));
+}

package/dist/src/modules/auth/components/LogoutRoute.d.ts

@@ -0,0 +1 @@
+export default function Logout(): import("react/jsx-runtime").JSX.Element;

package/dist/src/modules/auth/components/LogoutRoute.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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 (_jsx("div", { className: "flex-1 justify-center align-center", children: _jsx(Spinner, {}) }));
+}

package/dist/src/modules/auth/components/OrganizationAcceptInvitationRoute.d.ts

@@ -0,0 +1,9 @@
+export type OrganizationAcceptInvitationRouteProps = {
+    authReturnKey?: string;
+    loginPath?: string;
+    defaultRedirectPath?: string;
+    managerRedirectPath?: string;
+    managerRoles?: string[];
+    onInvalidateScopedQueries?: () => void | Promise<void>;
+};
+export declare function OrganizationAcceptInvitationRoute({ authReturnKey, loginPath, defaultRedirectPath, managerRedirectPath, managerRoles, onInvalidateScopedQueries, }: OrganizationAcceptInvitationRouteProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/modules/auth/components/OrganizationAcceptInvitationRoute.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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";
+export function OrganizationAcceptInvitationRoute({ authReturnKey = "org-auth-return", loginPath = "/login", defaultRedirectPath = "/", managerRedirectPath = "/organization/members", managerRoles = ["admin", "owner"], onInvalidateScopedQueries, }) {
+    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("idle");
+    const [errorMessage, setErrorMessage] = useState(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?.invitation
+                    ?.organizationId ?? null;
+                const invitationRole = data?.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 (_jsx("div", { className: "min-h-screen flex items-center justify-center p-6", children: _jsxs(Card, { className: "w-full max-w-lg", children: [_jsx(CardHeader, { className: "text-lg font-semibold", children: t("web-ui:organization.invitation.error") }), _jsx(CardBody, { children: errorMessage ?? t("web-ui:organization.invitation.unableAccept") })] }) }));
+    }
+    return (_jsx("div", { className: "min-h-screen flex items-center justify-center p-6", children: _jsxs(Card, { className: "w-full max-w-lg", children: [_jsx(CardHeader, { className: "text-lg font-semibold", children: t("web-ui:organization.invitation.accepting") }), _jsxs(CardBody, { className: "flex items-center gap-3", children: [_jsx(Spinner, { size: "sm" }), _jsx("span", { children: phase === "success"
+                                ? t("web-ui:organization.invitation.redirecting")
+                                : t("web-ui:organization.invitation.pleaseWait") })] })] }) }));
+}