@explita/cloud-auth-client 0.1.1 → 0.1.2

package/dist/components/settings.js

@@ -10,20 +10,28 @@ const auth_provider_1 = require("../contexts/auth-provider");
 const must_login_1 = require("./must-login");
 const toggle_2fa_1 = require("./toggle-2fa");
 const utils_1 = require("../lib/utils");
+const setting_1 = require("./icons/setting");
 function Settings({ open, onOpenChange, onToggle2FA }) {
     const { user } = (0, auth_provider_1.useAuth)();
     return (react_1.default.createElement(dialog_1.Dialog, { open: open, onOpenChange: (state) => {
             onOpenChange(state);
             (0, utils_1.unstuckPointerEvents)();
         } },
-        react_1.default.createElement(dialog_1.DialogContent, null, !user ? (react_1.default.createElement(must_login_1.MustLogin, { onOpenChange: (state) => {
+        react_1.default.createElement(dialog_1.DialogContent, { className: "ecpauth:p-0 ecpauth:overflow-hidden ecpauth:border-gray-200 ecpauth:dark:border-gray-800 ecpauth:shadow-2xl ecpauth:rounded-2xl ecpauth:max-w-xl" }, !user ? (react_1.default.createElement(must_login_1.MustLogin, { onOpenChange: (state) => {
                 onOpenChange(state);
                 (0, utils_1.unstuckPointerEvents)();
-            } })) : (react_1.default.createElement("div", { className: "ecpauth:relative" },
-            react_1.default.createElement(dialog_1.DialogHeader, { className: "ecpauth:border-b ecpauth:border-gray-200 ecpauth:dark:border-gray-800 ecpauth:pb-2" },
-                react_1.default.createElement(dialog_1.DialogTitle, { className: "ecpauth:flex ecpauth:items-center ecpauth:justify-between" },
-                    react_1.default.createElement("span", { className: "ecpauth:text-stone-800 ecpauth:dark:text-stone-50" }, "Account Settings")),
-                react_1.default.createElement(dialog_1.DialogDescription, { className: "ecpauth:sr-only" }, "Manage your account settings here.")),
-            react_1.default.createElement("div", { className: "ecpauth:flex-1 ecpauth:flex ecpauth:flex-col ecpauth:gap-6 ecpauth:my-5 ecpauth:p-0 ecpauth:!max-h-[calc(100vh-12rem)] ecpauth:overflow-y-auto" },
-                react_1.default.createElement(toggle_2fa_1.Toggle2FA, { onSubmit: onToggle2FA })))))));
+            } })) : (react_1.default.createElement("div", { className: "ecpauth:flex ecpauth:flex-col" },
+            react_1.default.createElement("div", { className: "ecpauth:relative ecpauth:px-6 ecpauth:pt-8 ecpauth:pb-6 ecpauth:border-b ecpauth:border-gray-100 ecpauth:dark:border-gray-800/50" },
+                react_1.default.createElement("div", { className: "ecpauth:relative ecpauth:z-10 ecpauth:flex ecpauth:items-center ecpauth:gap-4" },
+                    react_1.default.createElement("div", { className: "ecpauth:size-12 ecpauth:rounded-xl ecpauth:bg-blue-50 ecpauth:dark:bg-blue-900/20 ecpauth:text-blue-600 ecpauth:dark:text-blue-400 ecpauth:flex ecpauth:items-center ecpauth:justify-center ecpauth:shadow-sm ecpauth:border ecpauth:border-blue-100 ecpauth:dark:border-blue-800/50" },
+                        react_1.default.createElement(setting_1.SettingIcon, { size: 24 })),
+                    react_1.default.createElement(dialog_1.DialogHeader, { className: "ecpauth:space-y-0.5" },
+                        react_1.default.createElement(dialog_1.DialogTitle, { className: "ecpauth:text-xl ecpauth:font-bold ecpauth:text-gray-900 ecpauth:dark:text-white" }, "Account Settings"),
+                        react_1.default.createElement(dialog_1.DialogDescription, { className: "ecpauth:text-sm ecpauth:text-gray-500 ecpauth:dark:text-gray-400" }, "Manage your security preferences and account details.")))),
+            react_1.default.createElement("div", { className: "ecpauth:p-6 ecpauth:overflow-y-auto ecpauth:max-h-[70vh]" },
+                react_1.default.createElement("div", { className: "ecpauth:space-y-8" },
+                    react_1.default.createElement("section", null,
+                        react_1.default.createElement(toggle_2fa_1.Toggle2FA, { onSubmit: onToggle2FA })))),
+            react_1.default.createElement("div", { className: "ecpauth:px-6 ecpauth:py-4 ecpauth:bg-gray-50 ecpauth:dark:bg-gray-900/50 ecpauth:border-t ecpauth:border-gray-100 ecpauth:dark:border-gray-800/50 ecpauth:flex ecpauth:justify-end" },
+                react_1.default.createElement("button", { type: "button", onClick: () => onOpenChange(false), className: "ecpauth:px-4 ecpauth:py-2 ecpauth:text-sm ecpauth:font-semibold ecpauth:text-gray-600 ecpauth:dark:text-gray-400 ecpauth:hover:text-gray-900 ecpauth:dark:hover:text-white ecpauth:transition-colors" }, "Close Settings")))))));
 }

package/dist/components/signup-form.d.ts

@@ -3,9 +3,10 @@ import { CreateUser, FormResponse, User } from "../types";
 type Props = {
     className?: string;
     onSubmit: (data: CreateUser) => Promise<FormResponse<User>>;
-    groupId?: string | null;
-    metaData?: Record<string, string>;
+    groupId: string | number;
+    metadata?: Record<string, string>;
     acceptUsername?: boolean;
+    logo?: React.ReactNode;
 };
-export declare function Signup({ className, onSubmit, groupId, metaData, acceptUsername, ...props }: Props): React.JSX.Element;
+export declare function Signup({ className, onSubmit, groupId, metadata, acceptUsername, logo, ...props }: Props): React.JSX.Element;
 export {};

package/dist/components/signup-form.js

@@ -43,10 +43,22 @@ const input_1 = require("./ui/input");
 const label_1 = require("./ui/label");
 const message_1 = require("./message");
 const auth_provider_1 = require("../contexts/auth-provider");
-function Signup({ className, onSubmit, groupId, metaData, acceptUsername = true, ...props }) {
+function Signup({ className, onSubmit, groupId, metadata, acceptUsername = true, logo, ...props }) {
     const { computedRouteContext } = (0, auth_provider_1.useAuth)();
+    const [isPending, setIsPending] = react_1.default.useState(false);
+    const [state, setState] = react_1.default.useState({
+        message: "",
+        //@ts-ignore
+        status: "",
+        form: {},
+        errors: undefined,
+        authToken: "",
+    });
     const { loginUrl } = computedRouteContext;
-    const [state, handleSubmit, isPending] = (0, react_1.useActionState)(async function (prevState, formData) {
+    async function handleSubmit(e) {
+        e.preventDefault();
+        const formData = new FormData(e.currentTarget);
+        //@ts-ignore
         const form = {
             firstName: formData.get("firstName"),
             lastName: formData.get("lastName"),
@@ -55,24 +67,26 @@ function Signup({ className, onSubmit, groupId, metaData, acceptUsername = true,
             password: formData.get("password"),
             confirmPassword: formData.get("confirmPassword"),
             groupId,
-            metaData,
+            metadata,
         };
         if (typeof onSubmit !== "function") {
-            return {
+            setState({
                 message: "onSubmit function is not defined. Please pass onSubmit function to SignupForm component.",
                 status: "failure",
-                form,
+                //@ts-ignore
                 errors: undefined,
                 authToken: undefined,
-            };
+            });
         }
+        setIsPending(true);
         const result = await onSubmit({ ...form });
-        return {
+        setIsPending(false);
+        setState({
             ...result,
-            form: result.status !== "success" ? form : undefined,
+            //@ts-ignore
             authToken: result.status === "success" ? result.authToken : undefined,
-        };
-    }, undefined);
+        });
+    }
     (0, react_1.useEffect)(() => {
         let timer;
         if (state?.status === "success" && loginUrl) {
@@ -84,54 +98,52 @@ function Signup({ className, onSubmit, groupId, metaData, acceptUsername = true,
             clearTimeout(timer);
         };
     }, [state?.status, loginUrl]);
-    return (react_1.default.createElement("div", { className: (0, utils_1.cn)("ecpauth:flex ecpauth:flex-col ecpauth:gap-6 ecpauth:w-full ecpauth:max-w-sm", className), ...props },
-        react_1.default.createElement(card_1.Card, null,
-            react_1.default.createElement(card_1.CardHeader, null,
-                react_1.default.createElement(card_1.CardTitle, { className: "ecpauth:text-2xl" }, "Sign Up"),
-                react_1.default.createElement(card_1.CardDescription, null, "Provide your details to sign up from your account.")),
-            react_1.default.createElement(card_1.CardContent, null,
-                state?.status === "success" ? (react_1.default.createElement(message_1.Message, { message: state?.message, className: "ecpauth:mb-4 ecpauth:font-semibold ecpauth:text-lg", variant: "success" })) : (react_1.default.createElement(message_1.Message, { message: state?.message, className: "ecpauth:mb-4" })),
-                react_1.default.createElement("form", { action: handleSubmit },
-                    react_1.default.createElement("div", { className: "ecpauth:flex ecpauth:flex-col ecpauth:gap-6" },
-                        react_1.default.createElement("div", { className: "ecpauth:grid ecpauth:gap-2" },
-                            react_1.default.createElement(label_1.Label, { htmlFor: "firstName" }, "First Name"),
-                            react_1.default.createElement(input_1.Input, { id: "firstName", type: "text", placeholder: "First Name", name: "firstName", defaultValue: state?.form?.firstName }),
-                            react_1.default.createElement(message_1.Message, { message: state?.status === "validation-error"
-                                    ? state?.errors?.firstName
-                                    : "" })),
-                        react_1.default.createElement("div", { className: "ecpauth:grid ecpauth:gap-2" },
-                            react_1.default.createElement(label_1.Label, { htmlFor: "lastName" }, "Last Name"),
-                            react_1.default.createElement(input_1.Input, { id: "lastName", type: "text", placeholder: "Last Name", name: "lastName", defaultValue: state?.form?.lastName }),
-                            react_1.default.createElement(message_1.Message, { message: state?.status === "validation-error"
-                                    ? state?.errors?.lastName
-                                    : "" })),
-                        react_1.default.createElement("div", { className: "ecpauth:grid ecpauth:gap-2" },
-                            react_1.default.createElement(label_1.Label, { htmlFor: "email" }, "Email"),
-                            react_1.default.createElement(input_1.Input, { id: "email", type: "email", placeholder: "email@example.com", name: "email", defaultValue: state?.form?.email }),
-                            react_1.default.createElement(message_1.Message, { message: state?.status === "validation-error"
-                                    ? state?.errors?.email
-                                    : "" })),
-                        acceptUsername && (react_1.default.createElement("div", { className: "ecpauth:grid ecpauth:gap-2" },
-                            react_1.default.createElement(label_1.Label, { htmlFor: "username" }, "Username"),
-                            react_1.default.createElement(input_1.Input, { id: "username", type: "text", placeholder: "Username", name: "username", defaultValue: state?.form?.username }),
-                            react_1.default.createElement(message_1.Message, { message: state?.status === "validation-error"
-                                    ? state?.errors?.username
-                                    : "" }))),
-                        react_1.default.createElement("div", { className: "ecpauth:grid ecpauth:gap-2" },
-                            react_1.default.createElement(label_1.Label, { htmlFor: "password" }, "Password"),
-                            react_1.default.createElement(input_1.Input, { id: "password", type: "password", name: "password" }),
-                            react_1.default.createElement(message_1.Message, { message: state?.status === "validation-error"
-                                    ? state?.errors?.password
-                                    : "" })),
-                        react_1.default.createElement("div", { className: "ecpauth:grid ecpauth:gap-2" },
-                            react_1.default.createElement(label_1.Label, { htmlFor: "confirmPassword" }, "Confirm Password"),
-                            react_1.default.createElement(input_1.Input, { id: "confirmPassword", type: "password", name: "confirmPassword" }),
-                            react_1.default.createElement(message_1.Message, { message: state?.status === "validation-error"
-                                    ? state?.errors?.confirmPassword
-                                    : "" })),
-                        react_1.default.createElement(button_1.Button, { type: "submit", className: "ecpauth:w-full ecpauth:cursor-pointer", disabled: isPending }, isPending ? "Signing up..." : "Sign Up")),
-                    loginUrl && (react_1.default.createElement("div", { className: "ecpauth:mt-4 ecpauth:text-center ecpauth:text-sm" },
-                        "Already have an account?",
-                        " ",
-                        react_1.default.createElement("a", { href: loginUrl, className: "ecpauth:underline ecpauth:underline-offset-4" }, "Login"))))))));
+    return (react_1.default.createElement("div", { className: (0, utils_1.cn)("ecpauth:relative ecpauth:flex ecpauth:flex-col ecpauth:items-center ecpauth:justify-center ecpauth:w-full ecpauth:mx-auto ecpauth:px-4", className), ...props },
+        react_1.default.createElement(card_1.Card, { className: "ecpauth:relative ecpauth:w-full ecpauth:max-w-[550px] ecpauth:overflow-hidden ecpauth:shadow-none ecpauth:lg:shadow-xl ecpauth:border-none ecpauth:rounded-xl" },
+            react_1.default.createElement(card_1.CardHeader, { className: "ecpauth:space-y-4 ecpauth:text-center ecpauth:pb-2 ecpauth:pt-10" },
+                logo && (react_1.default.createElement("div", { className: "ecpauth:flex ecpauth:items-center ecpauth:justify-center ecpauth:space-x-2 ecpauth:text-xl ecpauth:font-bold ecpauth:text-gray-900 ecpauth:dark:text-white" }, logo)),
+                react_1.default.createElement("div", { className: "ecpauth:space-y-2" },
+                    react_1.default.createElement(card_1.CardTitle, { className: "ecpauth:text-2xl ecpauth:font-black ecpauth:tracking-tight ecpauth:text-gray-900 ecpauth:dark:text-white" }, "Create Account"),
+                    react_1.default.createElement(card_1.CardDescription, { className: "ecpauth:text-sm ecpauth:text-gray-500 ecpauth:dark:text-gray-400" }, "Provide your details to sign up for your account.")),
+                state?.status === "success" ? (react_1.default.createElement("div", { className: "ecpauth:mt-3" },
+                    react_1.default.createElement(message_1.Message, { message: state?.message, className: "ecpauth:font-medium ecpauth:text-sm ecpauth:p-3 ecpauth:rounded-lg ecpauth:bg-green-50 ecpauth:dark:bg-green-900/10 ecpauth:border ecpauth:border-green-100 ecpauth:dark:border-green-800/30 ecpauth:text-green-700 ecpauth:dark:text-green-400", variant: "success" }))) : state?.message ? (react_1.default.createElement("div", { className: "ecpauth:mt-3" },
+                    react_1.default.createElement(message_1.Message, { message: state?.message, className: "ecpauth:font-medium ecpauth:text-sm ecpauth:p-3 ecpauth:rounded-lg ecpauth:bg-red-50 ecpauth:dark:bg-red-900/10 ecpauth:border ecpauth:border-red-100 ecpauth:dark:border-red-800/30 ecpauth:text-red-700 ecpauth:dark:text-red-400" }))) : null),
+            react_1.default.createElement(card_1.CardContent, { className: "ecpauth:space-y-6 ecpauth:p-8 ecpauth:px-12" },
+                react_1.default.createElement("form", { onSubmit: handleSubmit, className: "ecpauth:space-y-6" },
+                    react_1.default.createElement("div", { className: "ecpauth:grid ecpauth:grid-cols-1 ecpauth:md:grid-cols-2 ecpauth:gap-4" },
+                        react_1.default.createElement("div", { className: "ecpauth:space-y-2" },
+                            react_1.default.createElement(label_1.Label, { htmlFor: "firstName", className: "ecpauth:text-sm ecpauth:font-medium ecpauth:text-gray-700 ecpauth:dark:text-gray-300" }, "First Name"),
+                            react_1.default.createElement(input_1.Input, { id: "firstName", type: "text", placeholder: "First Name", name: "firstName" }),
+                            state?.status === "validation-error" &&
+                                state?.errors?.firstName && (react_1.default.createElement("p", { className: "ecpauth:mt-1 ecpauth:text-[11px] ecpauth:text-red-500" }, state.errors.firstName))),
+                        react_1.default.createElement("div", { className: "ecpauth:space-y-2" },
+                            react_1.default.createElement(label_1.Label, { htmlFor: "lastName", className: "ecpauth:text-sm ecpauth:font-medium ecpauth:text-gray-700 ecpauth:dark:text-gray-300" }, "Last Name"),
+                            react_1.default.createElement(input_1.Input, { id: "lastName", type: "text", placeholder: "Last Name", name: "lastName" }),
+                            state?.status === "validation-error" &&
+                                state?.errors?.lastName && (react_1.default.createElement("p", { className: "ecpauth:mt-1 ecpauth:text-[11px] ecpauth:text-red-500" }, state.errors.lastName)))),
+                    react_1.default.createElement("div", { className: "ecpauth:space-y-2" },
+                        react_1.default.createElement(label_1.Label, { htmlFor: "email", className: "ecpauth:text-sm ecpauth:font-medium ecpauth:text-gray-700 ecpauth:dark:text-gray-300" }, "Email Address"),
+                        react_1.default.createElement(input_1.Input, { id: "email", type: "email", placeholder: "email@example.com", name: "email" }),
+                        state?.status === "validation-error" && state?.errors?.email && (react_1.default.createElement("p", { className: "ecpauth:mt-1 ecpauth:text-[11px] ecpauth:text-red-500" }, state.errors.email))),
+                    acceptUsername && (react_1.default.createElement("div", { className: "ecpauth:space-y-2" },
+                        react_1.default.createElement(label_1.Label, { htmlFor: "username", className: "ecpauth:text-sm ecpauth:font-medium ecpauth:text-gray-700 ecpauth:dark:text-gray-300" }, "Username"),
+                        react_1.default.createElement(input_1.Input, { id: "username", type: "text", placeholder: "Username", name: "username" }),
+                        state?.status === "validation-error" &&
+                            state?.errors?.username && (react_1.default.createElement("p", { className: "ecpauth:mt-1 ecpauth:text-[11px] ecpauth:text-red-500" }, state.errors.username)))),
+                    react_1.default.createElement("div", { className: "ecpauth:grid ecpauth:grid-cols-1 ecpauth:md:grid-cols-2 ecpauth:gap-4" },
+                        react_1.default.createElement("div", { className: "ecpauth:space-y-2" },
+                            react_1.default.createElement(label_1.Label, { htmlFor: "password", className: "ecpauth:text-sm ecpauth:font-medium ecpauth:text-gray-700 ecpauth:dark:text-gray-300" }, "Password"),
+                            react_1.default.createElement(input_1.Input, { id: "password", type: "password", name: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" }),
+                            state?.status === "validation-error" &&
+                                state?.errors?.password && (react_1.default.createElement("p", { className: "ecpauth:mt-1 ecpauth:text-[11px] ecpauth:text-red-500" }, state.errors.password))),
+                        react_1.default.createElement("div", { className: "ecpauth:space-y-2" },
+                            react_1.default.createElement(label_1.Label, { htmlFor: "confirmPassword", className: "ecpauth:text-sm ecpauth:font-medium ecpauth:text-gray-700 ecpauth:dark:text-gray-300" }, "Confirm Password"),
+                            react_1.default.createElement(input_1.Input, { id: "confirmPassword", type: "password", name: "confirmPassword", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" }),
+                            state?.status === "validation-error" &&
+                                state?.errors?.confirmPassword && (react_1.default.createElement("p", { className: "ecpauth:mt-1 ecpauth:text-[11px] ecpauth:text-red-500" }, state.errors.confirmPassword)))),
+                    react_1.default.createElement(button_1.Button, { type: "submit", className: "ecpauth:w-full ecpauth:h-11 ecpauth:bg-blue-600! ecpauth:hover:bg-blue-700! ecpauth:text-white! ecpauth:font-semibold ecpauth:text-base ecpauth:shadow-lg ecpauth:shadow-blue-600/20 ecpauth:rounded-lg ecpauth:transition-all ecpauth:active:scale-[0.98]", disabled: isPending }, isPending ? "Signing up..." : "Sign Up")),
+                loginUrl && (react_1.default.createElement("div", { className: "ecpauth:text-center ecpauth:text-sm ecpauth:text-gray-500 ecpauth:border-t ecpauth:border-gray-100 ecpauth:dark:border-gray-800 ecpauth:pt-6" },
+                    "Already have an account?",
+                    " ",
+                    react_1.default.createElement("a", { href: loginUrl, className: "ecpauth:font-semibold ecpauth:text-gray-900 ecpauth:hover:underline ecpauth:dark:text-white" }, "Login")))))));
 }

package/dist/components/toggle-2fa.js

@@ -41,41 +41,57 @@ const switch_1 = require("./ui/switch");
 const loader_1 = require("./loader");
 const message_1 = require("./message");
 const utils_1 = require("../lib/utils");
+const shield_1 = require("./icons/shield");
 function Toggle2FA({ onSubmit }) {
     const { user, revalidate } = (0, auth_provider_1.useAuth)();
+    const [isPending, setIsPending] = react_1.default.useState(false);
+    const [state, setState] = react_1.default.useState({
+        message: "",
+        //@ts-ignore
+        status: "",
+    });
     const [_, startTransition] = (0, react_1.useTransition)();
     const canUseOtp = (0, utils_1.isOtpAvailable)();
-    const [state, handleSubmit, isPending] = (0, react_1.useActionState)(async function () {
+    async function handleSubmit() {
         if (typeof onSubmit !== "function") {
-            return {
+            setState({
                 message: "Toggle 2FA function is not defined. Please pass onSubmit function to Settings component. If you are using UserCard component, please pass onToggle2FA function to it.",
                 status: "failure",
-            };
+            });
+            return;
         }
-        try {
-            const result = await onSubmit();
+        setIsPending(true);
+        const result = await onSubmit();
+        if (result.status !== "failure") {
             revalidate();
-            return result;
         }
-        catch (error) {
-            console.log(error);
-        }
-    }, undefined);
-    return (react_1.default.createElement("div", { className: "ecpauth:text-stone-800 ecpauth:dark:text-stone-50" },
+        setIsPending(false);
+        setState(result);
+    }
+    return (react_1.default.createElement("div", { className: "ecpauth:flex ecpauth:flex-col ecpauth:gap-6 ecpauth:text-gray-900 ecpauth:dark:text-white" },
         isPending && react_1.default.createElement(loader_1.Loader, null),
-        react_1.default.createElement("p", { className: "ecpauth:font-semibold ecpauth:text-lg ecpauth:mb-2" }, "Toggle Two Factor Authentication"),
-        state?.status === "success" ? (react_1.default.createElement(message_1.Message, { message: state?.message, className: "ecpauth:my-2 ecpauth:font-semibold ecpauth:text-base", variant: "success" })) : (react_1.default.createElement(message_1.Message, { message: state?.message, className: "ecpauth:my-2" })),
-        react_1.default.createElement("p", null,
-            "This action will enable or disable 2FA on your account. If enabled, you\u2019ll be asked for a code sent to ",
-            react_1.default.createElement("strong", null, user?.email),
-            " during login."),
-        react_1.default.createElement("div", { className: "ecpauth:flex ecpauth:items-center ecpauth:justify-between ecpauth:py-3 ecpauth:my-3 ecpauth:border-y ecpauth:border-gray-200 ecpauth:dark:border-gray-800" },
-            react_1.default.createElement("p", { className: "ecpauth:flex-1 ecpauth:mb-0" }, "You can enable or disable your Two Factor Authentication"),
-            react_1.default.createElement("div", { className: "ecpauth:w-40 ecpauth:flex ecpauth:justify-end ecpauth:pe-3" },
-                react_1.default.createElement(switch_1.Switch, { checked: !!user?.with2fa, onCheckedChange: () => startTransition(handleSubmit), disabled: !canUseOtp }))),
-        !canUseOtp && (react_1.default.createElement("p", { className: "ecpauth:text-red-500 ecpauth:my-2 ecpauth:text-sm" },
-            "2FA is not available. Please install",
-            " ",
-            react_1.default.createElement("code", null, "@explita/cloud-otp-client"),
-            " to enable it."))));
+        react_1.default.createElement("div", { className: "ecpauth:space-y-1.5" },
+            react_1.default.createElement("h3", { className: "ecpauth:text-base ecpauth:font-bold ecpauth:flex ecpauth:items-center ecpauth:gap-2" },
+                react_1.default.createElement(shield_1.ShieldIcon, { size: 18, className: "ecpauth:text-blue-600 ecpauth:dark:text-blue-400" }),
+                "Two-Factor Authentication"),
+            react_1.default.createElement("p", { className: "ecpauth:text-sm ecpauth:text-gray-500 ecpauth:dark:text-gray-400" }, "Add an extra layer of security to your account by requiring a verification code.")),
+        state?.status === "success" ? (react_1.default.createElement(message_1.Message, { message: state?.message, className: "ecpauth:font-medium ecpauth:text-sm ecpauth:p-3 ecpauth:rounded-lg ecpauth:bg-green-50 ecpauth:dark:bg-green-900/10 ecpauth:border ecpauth:border-green-100 ecpauth:dark:border-green-800/30 ecpauth:text-green-700 ecpauth:dark:text-green-400", variant: "success" })) : state?.message ? (react_1.default.createElement(message_1.Message, { message: state?.message, className: "ecpauth:font-medium ecpauth:text-sm ecpauth:p-3 ecpauth:rounded-lg ecpauth:bg-red-50 ecpauth:dark:bg-red-900/10 ecpauth:border ecpauth:border-red-100 ecpauth:dark:border-red-800/30 ecpauth:text-red-700 ecpauth:dark:text-red-400" })) : null,
+        react_1.default.createElement("div", { className: "ecpauth:group ecpauth:relative ecpauth:p-4 ecpauth:rounded-xl ecpauth:border ecpauth:border-gray-200 ecpauth:dark:border-gray-800 ecpauth:bg-gray-50/50 ecpauth:dark:bg-white/5 ecpauth:transition-all ecpauth:hover:border-blue-200 ecpauth:dark:hover:border-blue-900/30" },
+            react_1.default.createElement("div", { className: "ecpauth:flex ecpauth:items-start ecpauth:justify-between ecpauth:gap-4" },
+                react_1.default.createElement("div", { className: "ecpauth:space-y-1" },
+                    react_1.default.createElement("p", { className: "ecpauth:text-sm ecpauth:font-bold ecpauth:text-gray-900 ecpauth:dark:text-white" }, "Email Authentication"),
+                    react_1.default.createElement("p", { className: "ecpauth:text-xs ecpauth:leading-relaxed ecpauth:text-gray-500 ecpauth:dark:text-gray-400" },
+                        "A verification code will be sent to",
+                        " ",
+                        react_1.default.createElement("span", { className: "ecpauth:font-semibold ecpauth:text-gray-700 ecpauth:dark:text-gray-200" }, user?.email),
+                        " ",
+                        "whenever you sign in.")),
+                react_1.default.createElement("div", { className: "ecpauth:pt-1" },
+                    react_1.default.createElement(switch_1.Switch, { checked: !!user?.with2fa, onCheckedChange: () => startTransition(handleSubmit), disabled: !canUseOtp, className: "ecpauth:data-[state=checked]:bg-blue-600" }))),
+            !canUseOtp && (react_1.default.createElement("div", { className: "ecpauth:mt-3 ecpauth:pt-3 ecpauth:border-t ecpauth:border-gray-200/50 ecpauth:dark:border-gray-800/50" },
+                react_1.default.createElement("p", { className: "ecpauth:text-[11px] ecpauth:text-red-500 ecpauth:flex ecpauth:items-center ecpauth:gap-1.5 ecpauth:font-medium" },
+                    react_1.default.createElement("span", { className: "ecpauth:size-1.5 ecpauth:bg-red-500 ecpauth:rounded-full ecpauth:animate-pulse" }),
+                    "Feature unavailable: please install @explita/cloud-otp-client")))),
+        react_1.default.createElement("div", { className: "ecpauth:px-2" },
+            react_1.default.createElement("p", { className: "ecpauth:text-[11px] ecpauth:text-gray-400 ecpauth:dark:text-gray-500 ecpauth:italic" }, "Note: Disabling 2FA makes your account and your data more vulnerable to unauthorized access."))));
 }

package/dist/components/toggle-account-status.js

@@ -1,49 +1,26 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToggleAccountStatus = ToggleAccountStatus;
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const dialog_1 = require("./ui/dialog");
 const button_1 = require("./ui/button");
 const auth_provider_1 = require("../contexts/auth-provider");
 const message_1 = require("./message");
 const must_login_1 = require("./must-login");
 const utils_1 = require("../lib/utils");
+const alert_circle_1 = require("./icons/alert-circle");
 function ToggleAccountStatus({ user, open, onOpenChange, onSuccess, onSubmit, }) {
     const { user: loggedInUser } = (0, auth_provider_1.useAuth)();
-    const [state, handleSubmit, isPending] = (0, react_1.useActionState)(async function () {
+    const [isPending, setIsPending] = react_1.default.useState(false);
+    const [state, setState] = react_1.default.useState({
+        message: "",
+        //@ts-ignore
+        status: "",
+    });
+    async function handleSubmit() {
         if (!user) {
             return {
                 message: "Please provide a user to toggle account status.",
@@ -56,43 +33,57 @@ function ToggleAccountStatus({ user, open, onOpenChange, onSuccess, onSubmit, })
                 status: "failure",
             };
         }
-        try {
-            const result = await onSubmit(user.id);
+        setIsPending(true);
+        const result = await onSubmit(user.id);
+        setIsPending(false);
+        if (result.status !== "failure") {
             onSuccess?.();
-            return result;
-        }
-        catch (error) {
-            console.log(error);
         }
-    }, undefined);
+        setState(result);
+    }
+    const isSuspending = user?.isActive;
     return (react_1.default.createElement(dialog_1.Dialog, { open: open, onOpenChange: (state) => {
             onOpenChange(state);
             (0, utils_1.unstuckPointerEvents)();
         } },
-        react_1.default.createElement(dialog_1.DialogContent, null, !loggedInUser ? (react_1.default.createElement(must_login_1.MustLogin, { onOpenChange: (state) => {
+        react_1.default.createElement(dialog_1.DialogContent, { className: "ecpauth:p-0 ecpauth:overflow-hidden ecpauth:border-gray-200 ecpauth:dark:border-gray-800 ecpauth:shadow-2xl ecpauth:rounded-2xl ecpauth:max-w-md" }, !loggedInUser ? (react_1.default.createElement(must_login_1.MustLogin, { onOpenChange: (state) => {
                 onOpenChange(state);
                 (0, utils_1.unstuckPointerEvents)();
-            } })) : (react_1.default.createElement("form", { action: handleSubmit },
-            react_1.default.createElement(dialog_1.DialogHeader, null,
-                react_1.default.createElement(dialog_1.DialogTitle, null,
-                    "Toggle account status (",
-                    user?.firstName,
-                    " ",
-                    user?.lastName,
-                    ")"),
-                state?.status === "success" ? (react_1.default.createElement(message_1.Message, { message: state?.message, className: "ecpauth:my-2 ecpauth:font-semibold ecpauth:text-base", variant: "success" })) : (react_1.default.createElement(message_1.Message, { message: state?.message, className: "ecpauth:my-2" }))),
-            react_1.default.createElement(dialog_1.DialogDescription, { className: "ecpauth:flex ecpauth:flex-col ecpauth:gap-2 ecpauth:text-gray-700 ecpauth:dark:text-gray-50 ecpauth:mt-4" },
-                react_1.default.createElement("span", null,
-                    "This action will",
+            } })) : (react_1.default.createElement("form", { onSubmit: handleSubmit, className: "ecpauth:flex ecpauth:flex-col" },
+            react_1.default.createElement("div", { className: "ecpauth:relative ecpauth:px-6 ecpauth:pt-8 ecpauth:pb-6 ecpauth:text-center" },
+                react_1.default.createElement("div", { className: "ecpauth:relative ecpauth:z-10 ecpauth:flex ecpauth:flex-col ecpauth:items-center ecpauth:justify-center" },
+                    react_1.default.createElement("div", { className: (0, utils_1.cn)("ecpauth:size-12 ecpauth:rounded-xl ecpauth:flex ecpauth:items-center ecpauth:justify-center ecpauth:mb-4 ecpauth:shadow-sm ecpauth:border", isSuspending
+                            ? "ecpauth:bg-amber-50 ecpauth:dark:bg-amber-900/20 ecpauth:text-amber-600 ecpauth:dark:text-amber-400 ecpauth:border-amber-100 ecpauth:dark:border-amber-800/50"
+                            : "ecpauth:bg-blue-50 ecpauth:dark:bg-blue-900/20 ecpauth:text-blue-600 ecpauth:dark:text-blue-400 ecpauth:border-blue-100 ecpauth:dark:border-blue-800/50") },
+                        react_1.default.createElement(alert_circle_1.AlertCircleIcon, { size: 24 })),
+                    react_1.default.createElement(dialog_1.DialogHeader, { className: "ecpauth:space-y-1" },
+                        react_1.default.createElement(dialog_1.DialogTitle, { className: "ecpauth:text-xl ecpauth:font-bold ecpauth:text-gray-900 ecpauth:dark:text-white ecpauth:text-center" }, isSuspending ? "Suspend Account" : "Unsuspend Account"),
+                        react_1.default.createElement(dialog_1.DialogDescription, { className: "ecpauth:text-gray-500 ecpauth:dark:text-gray-400 ecpauth:text-center" },
+                            "Manage status for ",
+                            user?.firstName,
+                            " ",
+                            user?.lastName)))),
+            react_1.default.createElement("div", { className: "ecpauth:px-8 ecpauth:pb-6" }, state?.status === "success" ? (react_1.default.createElement("div", { className: "ecpauth:mb-6" },
+                react_1.default.createElement(message_1.Message, { message: state?.message, className: "ecpauth:font-medium ecpauth:text-sm ecpauth:p-3 ecpauth:rounded-xl ecpauth:bg-green-50 ecpauth:dark:bg-green-900/10 ecpauth:border ecpauth:border-green-100 ecpauth:dark:border-green-800/30 ecpauth:text-green-700 ecpauth:dark:text-green-400", variant: "success" }))) : state?.message ? (react_1.default.createElement("div", { className: "ecpauth:mb-6" },
+                react_1.default.createElement(message_1.Message, { message: state?.message, className: "ecpauth:font-medium ecpauth:text-sm ecpauth:p-3 ecpauth:rounded-xl ecpauth:bg-red-50 ecpauth:dark:bg-red-900/10 ecpauth:border ecpauth:border-red-100 ecpauth:dark:border-red-800/30 ecpauth:text-red-700 ecpauth:dark:text-red-400" }))) : (react_1.default.createElement("div", { className: "ecpauth:p-4 ecpauth:rounded-xl ecpauth:bg-gray-50 ecpauth:dark:bg-white/5 ecpauth:border ecpauth:border-gray-100 ecpauth:dark:border-white/10" },
+                react_1.default.createElement("p", { className: "ecpauth:text-sm ecpauth:leading-relaxed ecpauth:text-gray-600 ecpauth:dark:text-gray-300 ecpauth:text-center" },
+                    "Are you sure you want to",
                     " ",
-                    react_1.default.createElement("strong", null, user?.isActive ? "suspend" : "unsuspend"),
-                    " the user."),
-                react_1.default.createElement("span", null,
-                    "You can always",
+                    react_1.default.createElement("strong", null, isSuspending ? "suspend" : "unsuspend"),
                     " ",
-                    react_1.default.createElement("strong", null, user?.isActive ? "unsuspend" : "suspend"),
-                    " the user if you change your mind.")),
-            react_1.default.createElement(dialog_1.DialogFooter, { className: "ecpauth:flex ecpauth:justify-center ecpauth:gap-2 ecpauth:mt-4" },
-                react_1.default.createElement(button_1.Button, { type: "button", variant: "outline", onClick: () => onOpenChange(false) }, "Cancel"),
-                react_1.default.createElement(button_1.Button, { disabled: isPending, type: "submit" }, user?.isActive ? "Suspend" : "Unsuspend")))))));
+                    "this account?",
+                    isSuspending
+                        ? " The user will temporarily lose access to all platform features."
+                        : " The user will regain access to their account features.")))),
+            react_1.default.createElement(dialog_1.DialogFooter, { className: "ecpauth:p-6 ecpauth:pt-0 ecpauth:flex ecpauth:flex-row ecpauth:justify-center ecpauth:gap-3" },
+                react_1.default.createElement(button_1.Button, { type: "button", variant: "outline", onClick: () => onOpenChange(false), className: "ecpauth:flex-1 ecpauth:h-11 ecpauth:rounded-xl ecpauth:font-semibold ecpauth:border-gray-200 ecpauth:dark:border-gray-800 ecpauth:hover:bg-gray-50 ecpauth:dark:hover:bg-white/5 ecpauth:transition-all" }, "Cancel"),
+                react_1.default.createElement(button_1.Button, { disabled: isPending, type: "submit", className: (0, utils_1.cn)("ecpauth:flex-1 ecpauth:h-11 ecpauth:rounded-xl ecpauth:font-bold ecpauth:text-white! ecpauth:shadow-lg ecpauth:transition-all ecpauth:active:scale-[0.98]", isSuspending
+                        ? "ecpauth:bg-amber-600! ecpauth:hover:bg-amber-700! ecpauth:shadow-amber-600/20"
+                        : "ecpauth:bg-blue-600! ecpauth:hover:bg-blue-700! ecpauth:shadow-blue-600/20") }, isPending
+                    ? isSuspending
+                        ? "Suspending..."
+                        : "Unsuspending..."
+                    : isSuspending
+                        ? "Confirm Suspension"
+                        : "Confirm Unsuspension")))))));
 }

package/dist/components/ui/input.js

@@ -37,5 +37,5 @@ exports.Input = Input;
 const React = __importStar(require("react"));
 const utils_1 = require("../../lib/utils");
 function Input({ className, type, ...props }) {
-    return (React.createElement("input", { type: type, "data-slot": "input", className: (0, utils_1.cn)("ecpauth:file:text-stone-950 ecpauth:placeholder:text-stone-500 ecpauth:selection:bg-stone-900 ecpauth:selection:text-stone-50 ecpauth:border-stone-200 ecpauth:flex ecpauth:h-9 ecpauth:w-full ecpauth:min-w-0 ecpauth:rounded-md ecpauth:border ecpauth:bg-transparent ecpauth:px-3 ecpauth:py-1 ecpauth:text-base ecpauth:shadow-xs ecpauth:transition-[color,box-shadow] ecpauth:outline-none ecpauth:file:inline-flex ecpauth:file:h-7 ecpauth:file:border-0 ecpauth:file:bg-transparent ecpauth:file:text-sm ecpauth:file:font-medium ecpauth:disabled:pointer-events-none ecpauth:disabled:cursor-not-allowed ecpauth:disabled:opacity-50 ecpauth:md:text-sm ecpauth:dark:file:text-stone-50 ecpauth:dark:placeholder:text-stone-400 ecpauth:dark:selection:bg-stone-50 ecpauth:dark:selection:text-stone-900 ecpauth:dark:bg-gray-700/50 ecpauth:dark:border-gray-600", "ecpauth:focus-visible:border-stone-950 ecpauth:focus-visible:ring-stone-950/50 ecpauth:focus-visible:ring-[3px] ecpauth:dark:focus-visible:border-stone-300 ecpauth:dark:focus-visible:ring-stone-300/50", "ecpauth:aria-invalid:ring-red-500/20 ecpauth:dark:aria-invalid:ring-red-500/40 ecpauth:aria-invalid:border-red-500 ecpauth:dark:dark:aria-invalid:ring-red-900/40 ecpauth:dark:aria-invalid:border-red-900 ecpauth:focus-visible:ring-2 ecpauth:focus-visible:ring-gray-500", className), ...props }));
+    return (React.createElement("input", { type: type, "data-slot": "input", className: (0, utils_1.cn)("ecpauth:file:text-stone-950 ecpauth:placeholder:text-stone-500 ecpauth:selection:bg-stone-900 ecpauth:selection:text-stone-50 ecpauth:border-stone-200 ecpauth:flex ecpauth:h-9 ecpauth:w-full ecpauth:min-w-0 ecpauth:rounded-md ecpauth:border ecpauth:bg-transparent ecpauth:px-3 ecpauth:py-1 ecpauth:text-base ecpauth:shadow-xs ecpauth:transition-[color,box-shadow] ecpauth:outline-none ecpauth:file:inline-flex ecpauth:file:h-7 ecpauth:file:border-0 ecpauth:file:bg-transparent ecpauth:file:text-sm ecpauth:file:font-medium ecpauth:disabled:pointer-events-none ecpauth:disabled:cursor-not-allowed ecpauth:disabled:opacity-50 ecpauth:md:text-sm ecpauth:dark:file:text-stone-50 ecpauth:dark:placeholder:text-stone-400 ecpauth:dark:selection:bg-stone-50 ecpauth:dark:selection:text-stone-900 ecpauth:dark:bg-gray-700/50 ecpauth:dark:border-gray-600", "ecpauth:focus-visible:border-stone-950 ecpauth:focus-visible:ring-stone-950/50 ecpauth:focus-visible:ring-[3px] ecpauth:dark:focus-visible:border-stone-300 ecpauth:dark:focus-visible:ring-stone-300/50", "ecpauth:aria-invalid:ring-red-500/20 ecpauth:dark:aria-invalid:ring-red-500/40 ecpauth:aria-invalid:border-red-500 ecpauth:dark:dark:aria-invalid:ring-red-900/40 ecpauth:dark:aria-invalid:border-red-900 ecpauth:focus-visible:ring-2 ecpauth:focus-visible:ring-gray-500", "ecpauth:h-11 ecpauth:border-blue-200! ecpauth:focus-visible:ring-blue-500! ecpauth:focus-visible:border-blue-500! ecpauth:placeholder:text-gray-400! ecpauth:rounded-2xl!", className), ...props }));
 }