@m5kdev/web-ui 0.1.2 → 0.1.4

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

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from "@heroui/react";
+import { authClient } from "@m5kdev/frontend/modules/auth/auth.lib";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import { GoogleIcon } from "#icons/GoogleIcon";
+import { LinkedInIcon } from "#icons/LinkedInIcon";
+import { MicrosoftIcon } from "#icons/MicrosoftIcon";
+import { LastUsedBadge } from "./LastUsedBadge";
+export function AuthProviders({ providers, lastMethod, code, requestSignUp = false, }) {
+    const { t } = useTranslation();
+    if (!providers || providers.length === 0)
+        return null;
+    const additionalData = code ? { waitlistInvitationCode: code } : {};
+    const handleSignIn = (result) => {
+        if (result.error) {
+            toast.error(t("web-ui:auth.errors.invitationCodeInvalid"));
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-col gap-4", children: [providers.includes("google") && (_jsx(LastUsedBadge, { lastMethod: lastMethod, method: "google", children: _jsxs(Button, { type: "button", variant: "bordered", className: "w-full gap-2", onPress: () => {
+                                authClient.signIn
+                                    .social({
+                                    provider: "google",
+                                    requestSignUp,
+                                    additionalData,
+                                })
+                                    .then(handleSignIn);
+                            }, children: [_jsx(GoogleIcon, { className: "h-5 w-5" }), t("web-ui:auth.login.google")] }) })), providers.includes("linkedin") && (_jsx(LastUsedBadge, { lastMethod: lastMethod, method: "linkedin", children: _jsxs(Button, { type: "button", variant: "bordered", className: "w-full", onPress: () => {
+                                authClient.signIn
+                                    .social({
+                                    provider: "linkedin",
+                                    requestSignUp,
+                                    additionalData,
+                                })
+                                    .then(handleSignIn);
+                            }, children: [_jsx(LinkedInIcon, { className: "h-5 w-5" }), t("web-ui:auth.login.linkedin")] }) })), providers.includes("microsoft") && (_jsx(LastUsedBadge, { lastMethod: lastMethod, method: "microsoft", children: _jsxs(Button, { type: "button", variant: "bordered", className: "w-full", onPress: () => {
+                                authClient.signIn
+                                    .social({
+                                    provider: "microsoft",
+                                    requestSignUp,
+                                    additionalData,
+                                })
+                                    .then(handleSignIn);
+                            }, children: [_jsx(MicrosoftIcon, { className: "h-5 w-5" }), t("web-ui:auth.login.microsoft")] }) }))] }), _jsx("div", { className: "relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border", children: _jsx("span", { className: "relative z-10 bg-background px-2 text-muted-foreground", children: t("web-ui:auth.login.orContinueWith") }) })] }));
+}

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

@@ -0,0 +1,10 @@
+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 {};
+//# sourceMappingURL=AuthRouter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AuthRouter.d.ts","sourceRoot":"","sources":["../../../../../src/modules/auth/components/AuthRouter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAE7C,UAAU,eAAe;IACvB,MAAM,EAAE,SAAS,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B;AAED,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,eAAe,2CAWzE"}

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,5 @@
+import type { UseBackendTRPC } from "#types";
+export declare function ClaimAccountRoute({ useTRPC }: {
+    useTRPC?: UseBackendTRPC;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ClaimAccountRoute.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ClaimAccountRoute.d.ts","sourceRoot":"","sources":["../../../../../src/modules/auth/components/ClaimAccountRoute.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAE7C,wBAAgB,iBAAiB,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,CAAC,EAAE,cAAc,CAAA;CAAE,2CAsO1E"}

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,2 @@
+export declare function ErrorAuthRoute(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ErrorAuthRoute.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorAuthRoute.d.ts","sourceRoot":"","sources":["../../../../../src/modules/auth/components/ErrorAuthRoute.tsx"],"names":[],"mappings":"AAMA,wBAAgB,cAAc,4CAkH7B"}

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,2 @@
+export declare function ForgotPasswordForm(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ForgotPasswordForm.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ForgotPasswordForm.d.ts","sourceRoot":"","sources":["../../../../../src/modules/auth/components/ForgotPasswordForm.tsx"],"names":[],"mappings":"AAWA,wBAAgB,kBAAkB,4CA8CjC"}

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,2 @@
+export declare function ForgotPasswordRoute(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ForgotPasswordRoute.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ForgotPasswordRoute.d.ts","sourceRoot":"","sources":["../../../../../src/modules/auth/components/ForgotPasswordRoute.tsx"],"names":[],"mappings":"AAKA,wBAAgB,mBAAmB,4CAqBlC"}

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,6 @@
+import type { UseBackendTRPC } from "#types";
+export interface InviteFriendsProps {
+    useTRPC: UseBackendTRPC;
+}
+export declare function InviteFriends({ useTRPC }: InviteFriendsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=InviteFriends.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InviteFriends.d.ts","sourceRoot":"","sources":["../../../../../src/modules/auth/components/InviteFriends.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAE7C,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,cAAc,CAAC;CACzB;AAED,wBAAgB,aAAa,CAAC,EAAE,OAAO,EAAE,EAAE,kBAAkB,2CAmQ5D"}

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,6 @@
+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;
+//# sourceMappingURL=LastUsedBadge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LastUsedBadge.d.ts","sourceRoot":"","sources":["../../../../../src/modules/auth/components/LastUsedBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AAGvD,wBAAgB,aAAa,CAAC,EAC5B,UAAU,EACV,MAAM,EACN,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,UAAU,GAAG;IAAE,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,2WAarE"}

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,4 @@
+export declare function LoginForm({ providers }: {
+    providers?: string[];
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LoginForm.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LoginForm.d.ts","sourceRoot":"","sources":["../../../../../src/modules/auth/components/LoginForm.tsx"],"names":[],"mappings":"AAeA,wBAAgB,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,EAAE,CAAA;CAAE,2CAwFhE"}

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,4 @@
+export declare function LoginRoute({ providers }: {
+    providers?: string[];
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LoginRoute.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LoginRoute.d.ts","sourceRoot":"","sources":["../../../../../src/modules/auth/components/LoginRoute.tsx"],"names":[],"mappings":"AAKA,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,EAAE,CAAA;CAAE,2CAyBjE"}

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,2 @@
+export default function Logout(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LogoutRoute.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LogoutRoute.d.ts","sourceRoot":"","sources":["../../../../../src/modules/auth/components/LogoutRoute.tsx"],"names":[],"mappings":"AAKA,MAAM,CAAC,OAAO,UAAU,MAAM,4CAe7B"}

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, {}) }));
+}