@explita/cloud-auth-client 0.0.1 → 0.1.0

package/README.md

@@ -78,7 +78,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
         loginPath: "/login", //default is /login
         signupPath: "/signup", //default is /signup
         resetPasswordPath: "/reset-password", //default is /reset-password
-        cookieOverride: cookieOverrideHandler, //included in the server-side functions and only needed if your app runs on localhost subdomain eg: http://console.localhost:3000
+        cookieOverride: cookieOverrideHandler, //included in the server-side functions and only needed if your app needs to use anything from @explita/cloud-auth-client/server, e.g: getServerSession() - only in Next.js
         disableLoading: true, //default is false
         excludedPaths: [], //array of strings of relative paths, all the paths mentioned above are already excluded.
       }}
@@ -165,7 +165,7 @@ LoggedOut; //check if user is logged out
 ```typescript
 "use server";
 
-import {
+import type {
   NewRole,
   ResetPasswordWithToken,
   ResetPasswordWithUserId,
@@ -227,6 +227,29 @@ export async function assignPermissions(roleId: string, permissions: string[]) {
 
 ---
 
+### Using Node/Express Backend
+
+If you're using a Node.js/Express backend and need to authenticate requests between your frontend and backend, use [cloud-auth-express](https://www.npmjs.com/package/@explita/cloud-auth-express) to verify tokens server-side.
+
+Make sure your frontend sends the token along in each request:
+
+```typescript
+import { getToken } from "@explita/cloud-auth-client";
+
+const response = await fetch("/api/your-route", {
+  method: "POST",
+  headers: {
+    Authorization: `Bearer ${getToken()}`,
+  },
+  body: JSON.stringify(data),
+});
+```
+
+> ⚠️ **Note:** This section only applies if you're doing separate frontend/backend communication.
+> If you're building a fullstack app (e.g. with Next.js using Server Actions or API routes), you don't need to handle this manually — it's already managed internally by cloud-auth-client.
+
+---
+
 ### Getting started
 
 Sign up for an account at [Explita Cloud](https://cloud.explita.ng), create a project, add auth service and get your API key from the dashboard and add it to your environment variables.

package/dist/components/change-password.js

@@ -44,7 +44,6 @@ const message_1 = require("./message");
 const must_login_1 = require("./must-login");
 const utils_1 = require("../lib/utils");
 function ChangePassword({ user, open, onOpenChange, onSubmit, onSuccess, }) {
-    var _a, _b;
     const { user: loggedInUser } = (0, auth_provider_1.useAuth)();
     const [state, handleSubmit, isPending] = (0, react_1.useActionState)(async function (prevState, formData) {
         if (!onSubmit || typeof onSubmit !== "function") {
@@ -55,11 +54,11 @@ function ChangePassword({ user, open, onOpenChange, onSubmit, onSuccess, }) {
         }
         try {
             const result = await onSubmit({
-                userId: (user === null || user === void 0 ? void 0 : user.id) || loggedInUser.id,
+                userId: user?.id || loggedInUser.id,
                 password: formData.get("password"),
                 confirmPassword: formData.get("confirmPassword"),
             });
-            onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
+            onSuccess?.();
             return result;
         }
         catch (error) {
@@ -70,7 +69,10 @@ function ChangePassword({ user, open, onOpenChange, onSubmit, onSuccess, }) {
             onOpenChange(state);
             (0, utils_1.unstuckPointerEvents)();
         } },
-        react_1.default.createElement(dialog_1.DialogContent, null, !loggedInUser ? (react_1.default.createElement(must_login_1.MustLogin, { onOpenChange: onOpenChange })) : (react_1.default.createElement("form", { action: handleSubmit },
+        react_1.default.createElement(dialog_1.DialogContent, null, !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,
                 !user || loggedInUser.id === user.id ? (react_1.default.createElement(dialog_1.DialogTitle, null, "Change your password")) : (react_1.default.createElement(dialog_1.DialogTitle, null,
                     "Change password for ",
@@ -78,22 +80,22 @@ function ChangePassword({ user, open, onOpenChange, onSubmit, onSuccess, }) {
                     " ",
                     user.lastName)),
                 react_1.default.createElement(dialog_1.DialogDescription, null, "Please enter the new password"),
-                user && loggedInUser.id !== (user === null || user === void 0 ? void 0 : user.id) && (react_1.default.createElement(dialog_1.DialogDescription, { className: "ecpauth:mt-2 ecpauth:text-base" },
+                user && loggedInUser.id !== user?.id && (react_1.default.createElement(dialog_1.DialogDescription, { className: "ecpauth:mt-2 ecpauth:text-base" },
                     "Username: ",
-                    (user === null || user === void 0 ? void 0 : user.username) || (user === null || user === void 0 ? void 0 : user.email)))),
-            (state === null || state === void 0 ? void 0 : state.status) === "success" ? (react_1.default.createElement(message_1.Message, { message: state === null || state === void 0 ? void 0 : state.message, className: "ecpauth:mt-2 ecpauth:font-semibold ecpauth:text-base", variant: "success" })) : (react_1.default.createElement(message_1.Message, { message: state === null || state === void 0 ? void 0 : state.message, className: "ecpauth:mt-2" })),
+                    user?.username || user?.email))),
+            state?.status === "success" ? (react_1.default.createElement(message_1.Message, { message: state?.message, className: "ecpauth:mt-2 ecpauth:font-semibold ecpauth:text-base", variant: "success" })) : (react_1.default.createElement(message_1.Message, { message: state?.message, className: "ecpauth:mt-2" })),
             react_1.default.createElement("div", { className: "ecpauth:flex ecpauth:flex-col ecpauth:gap-6 ecpauth:my-5" },
                 react_1.default.createElement("div", { className: "ecpauth:grid ecpauth:gap-2" },
                     react_1.default.createElement(label_1.Label, { htmlFor: "password" }, "New Password"),
                     react_1.default.createElement(input_1.Input, { id: "password", type: "password", name: "password" }),
-                    react_1.default.createElement(message_1.Message, { message: (state === null || state === void 0 ? void 0 : state.status) === "validation-error"
-                            ? (_a = state === null || state === void 0 ? void 0 : state.errors) === null || _a === void 0 ? void 0 : _a.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 New Password"),
                     react_1.default.createElement(input_1.Input, { id: "confirmPassword", type: "password", name: "confirmPassword" }),
-                    react_1.default.createElement(message_1.Message, { message: (state === null || state === void 0 ? void 0 : state.status) === "validation-error"
-                            ? (_b = state === null || state === void 0 ? void 0 : state.errors) === null || _b === void 0 ? void 0 : _b.confirmPassword
+                    react_1.default.createElement(message_1.Message, { message: state?.status === "validation-error"
+                            ? state?.errors?.confirmPassword
                             : "" }))),
             react_1.default.createElement("div", { className: "ecpauth:flex ecpauth:justify-end ecpauth:gap-2" },
                 react_1.default.createElement(button_1.Button, { type: "button", variant: "outline", onClick: () => onOpenChange(false) }, "Cancel"),

package/dist/components/icons/lock.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare function LockIcon({ size }: {
+    size?: number;
+}): React.JSX.Element;

package/dist/components/icons/lock.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LockIcon = LockIcon;
+const react_1 = __importDefault(require("react"));
+function LockIcon({ size = 24 }) {
+    return (react_1.default.createElement("svg", { stroke: "currentColor", fill: "none", strokeWidth: "2", viewBox: "0 0 24 24", strokeLinecap: "round", strokeLinejoin: "round", height: `${size}px`, width: `${size}px`, xmlns: "http://www.w3.org/2000/svg" },
+        react_1.default.createElement("path", { d: "M15 21h-8a2 2 0 0 1 -2 -2v-6a2 2 0 0 1 2 -2h10c.265 0 .518 .052 .75 .145" }),
+        react_1.default.createElement("path", { d: "M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0" }),
+        react_1.default.createElement("path", { d: "M8 11v-4a4 4 0 1 1 8 0v4" }),
+        react_1.default.createElement("path", { d: "M19 22v.01" }),
+        react_1.default.createElement("path", { d: "M19 19a2.003 2.003 0 0 0 .914 -3.782a1.98 1.98 0 0 0 -2.414 .483" })));
+}

package/dist/components/icons/logout.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare function LogoutIcon({ size }: {
+    size?: number;
+}): React.JSX.Element;

package/dist/components/icons/logout.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LogoutIcon = LogoutIcon;
+const react_1 = __importDefault(require("react"));
+function LogoutIcon({ size = 24 }) {
+    return (react_1.default.createElement("svg", { stroke: "currentColor", fill: "currentColor", strokeWidth: "0", viewBox: "0 0 20 20", "aria-hidden": "true", height: `${size}px`, width: `${size}px`, xmlns: "http://www.w3.org/2000/svg" },
+        react_1.default.createElement("path", { fillRule: "evenodd", d: "M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10.293 9.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L14.586 9H7a1 1 0 100 2h7.586l-1.293 1.293z", clipRule: "evenodd" })));
+}

package/dist/components/icons/setting.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare function SettingIcon({ size }: {
+    size?: number;
+}): React.JSX.Element;

package/dist/components/icons/setting.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SettingIcon = SettingIcon;
+const react_1 = __importDefault(require("react"));
+function SettingIcon({ size = 24 }) {
+    return (react_1.default.createElement("svg", { stroke: "currentColor", fill: "currentColor", strokeWidth: "0", viewBox: "0 0 24 24", height: `${size}px`, width: `${size}px`, xmlns: "http://www.w3.org/2000/svg" },
+        react_1.default.createElement("path", { fill: "none", d: "M0 0h24v24H0z" }),
+        react_1.default.createElement("path", { d: "M17.41 6.59 15 5.5l2.41-1.09L18.5 2l1.09 2.41L22 5.5l-2.41 1.09L18.5 9l-1.09-2.41zm3.87 6.13L20.5 11l-.78 1.72-1.72.78 1.72.78.78 1.72.78-1.72L23 13.5l-1.72-.78zm-5.04 1.65 1.94 1.47-2.5 4.33-2.24-.94c-.2.13-.42.26-.64.37l-.3 2.4h-5l-.3-2.41c-.22-.11-.43-.23-.64-.37l-2.24.94-2.5-4.33 1.94-1.47c-.01-.11-.01-.24-.01-.36s0-.25.01-.37l-1.94-1.47 2.5-4.33 2.24.94c.2-.13.42-.26.64-.37L7.5 6h5l.3 2.41c.22.11.43.23.64.37l2.24-.94 2.5 4.33-1.94 1.47c.01.12.01.24.01.37s0 .24-.01.36zM13 14c0-1.66-1.34-3-3-3s-3 1.34-3 3 1.34 3 3 3 3-1.34 3-3z" })));
+}

package/dist/components/login-form.js

@@ -45,7 +45,6 @@ const auth_provider_1 = require("../contexts/auth-provider");
 const loader_1 = require("./loader");
 const message_1 = require("./message");
 function Login({ className, ...props }) {
-    var _a, _b;
     const { login, error, computedRouteContext, isAuthenticated } = (0, auth_provider_1.useAuth)();
     const [authToken, setAuthToken] = react_1.default.useState(null);
     const { resetPasswordUrl, signupUrl, loginUrl } = computedRouteContext;
@@ -86,14 +85,14 @@ function Login({ className, ...props }) {
                     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: "email" }, "Email/Username"),
-                            react_1.default.createElement(input_1.Input, { id: "email", type: "text", placeholder: "email@example.com", name: "email", defaultValue: state === null || state === void 0 ? void 0 : state.email }),
-                            react_1.default.createElement(message_1.Message, { message: (_a = error === null || error === void 0 ? void 0 : error.errors) === null || _a === void 0 ? void 0 : _a.email })),
+                            react_1.default.createElement(input_1.Input, { id: "email", type: "text", placeholder: "email@example.com", name: "email", defaultValue: state?.email }),
+                            react_1.default.createElement(message_1.Message, { message: error?.errors?.email })),
                         react_1.default.createElement("div", { className: "ecpauth:grid ecpauth:gap-2" },
                             react_1.default.createElement("div", { className: "ecpauth:flex ecpauth:items-center" },
                                 react_1.default.createElement(label_1.Label, { htmlFor: "password" }, "Password"),
                                 resetPasswordUrl && (react_1.default.createElement("a", { href: resetPasswordUrl, className: "ecpauth:ml-auto ecpauth:inline-block ecpauth:text-sm ecpauth:underline-offset-4 ecpauth:hover:underline" }, "Forgot your password?"))),
                             react_1.default.createElement(input_1.Input, { id: "password", type: "password", name: "password" }),
-                            react_1.default.createElement(message_1.Message, { message: (_b = error === null || error === void 0 ? void 0 : error.errors) === null || _b === void 0 ? void 0 : _b.password })),
+                            react_1.default.createElement(message_1.Message, { message: error?.errors?.password })),
                         react_1.default.createElement(button_1.Button, { type: "submit", className: "ecpauth:w-full ecpauth:cursor-pointer", disabled: isPending }, isPending ? "Logging in..." : "Login")),
                     signupUrl && (react_1.default.createElement("div", { className: "ecpauth:mt-4 ecpauth:text-center ecpauth:text-sm" },
                         "Don't have an account?",

package/dist/components/optional-otp.js

@@ -55,10 +55,10 @@ function OptionalOTPInner({ user, onVerified, onCanceled }) {
         return null; // or a fallback UI
     }
     const otp = useOTP({
-        referenceId: user === null || user === void 0 ? void 0 : user.id,
+        referenceId: user?.id,
         onVerified,
         onCanceled,
-        sentTo: user === null || user === void 0 ? void 0 : user.email,
+        sentTo: user?.email,
         channel: "email",
     });
     (0, react_1.useEffect)(() => {

package/dist/components/reset-password.js

@@ -44,7 +44,6 @@ const label_1 = require("./ui/label");
 const message_1 = require("./message");
 const auth_provider_1 = require("../contexts/auth-provider");
 function ResetPassword({ className, onChangePassword, ...props }) {
-    var _a;
     const { sendPasswordResetRequest, computedRouteContext } = (0, auth_provider_1.useAuth)();
     const [token, setToken] = (0, react_1.useState)(null);
     const { loginUrl } = computedRouteContext;
@@ -75,33 +74,33 @@ function ResetPassword({ className, onChangePassword, ...props }) {
             console.log(error);
         }
     }, undefined);
-    (0, react_1.useEffect)(() => {
-        let timer;
-        if ((state === null || state === void 0 ? void 0 : state.status) === "success") {
-            if (loginUrl) {
-                timer = setTimeout(() => {
-                    window.location.href = loginUrl;
-                }, 2000);
-            }
-        }
-        return () => {
-            clearTimeout(timer);
-        };
-    }, [state === null || state === void 0 ? void 0 : state.status]);
+    // useEffect(() => {
+    //   let timer: NodeJS.Timeout;
+    //   if (state?.status === "success") {
+    //     if (loginUrl) {
+    //       timer = setTimeout(() => {
+    //         window.location.href = loginUrl;
+    //       }, 2000);
+    //     }
+    //   }
+    //   return () => {
+    //     clearTimeout(timer);
+    //   };
+    // }, [state?.status]);
     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" }, "Reset Password"),
                 react_1.default.createElement(card_1.CardDescription, null, "Provide your details to reset your password.")),
             react_1.default.createElement(card_1.CardContent, null,
-                (state === null || state === void 0 ? void 0 : state.status) === "success" ? (react_1.default.createElement(message_1.Message, { message: state === null || state === void 0 ? void 0 : state.message, className: "ecpauth:mb-4 ecpauth:font-semibold ecpauth:text-base", variant: "success" })) : (react_1.default.createElement(message_1.Message, { message: state === null || state === void 0 ? void 0 : state.message, className: "ecpauth:mb-4" })),
+                state?.status === "success" ? (react_1.default.createElement(message_1.Message, { message: state?.message, className: "ecpauth:mb-4 ecpauth:font-semibold ecpauth:text-base", variant: "success" })) : (react_1.default.createElement(message_1.Message, { message: state?.message, className: "ecpauth:mb-4" })),
                 !token ? (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: "email" }, "Email"),
                             react_1.default.createElement(input_1.Input, { id: "email", type: "email", placeholder: "email@example.com", name: "email", defaultValue: 
                                 //@ts-ignore
-                                (_a = state === null || state === void 0 ? void 0 : state.form) === null || _a === void 0 ? void 0 : _a.email })),
+                                state?.form?.email })),
                         react_1.default.createElement(button_1.Button, { type: "submit", className: "ecpauth:w-full ecpauth:cursor-pointer", disabled: isPending }, "Send Reset Password Link")))) : (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" },

package/dist/components/settings.js

@@ -16,7 +16,10 @@ function Settings({ open, onOpenChange, onToggle2FA }) {
             onOpenChange(state);
             (0, utils_1.unstuckPointerEvents)();
         } },
-        react_1.default.createElement(dialog_1.DialogContent, null, !user ? (react_1.default.createElement(must_login_1.MustLogin, { onOpenChange: onOpenChange })) : (react_1.default.createElement("div", { className: "ecpauth:relative" },
+        react_1.default.createElement(dialog_1.DialogContent, null, !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")),

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

@@ -1,9 +1,9 @@
 import React from "react";
-import { Signup, FormResponse, User } from "../types";
+import { CreateUser, FormResponse, User } from "../types";
 type Props = {
     className?: string;
-    onSubmit: (data: Signup) => Promise<FormResponse<User>>;
-    groupId?: string;
+    onSubmit: (data: CreateUser) => Promise<FormResponse<User>>;
+    groupId?: string | null;
     metaData?: Record<string, string>;
     acceptUsername?: boolean;
 };

package/dist/components/signup-form.js

@@ -44,7 +44,6 @@ 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 }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const { computedRouteContext } = (0, auth_provider_1.useAuth)();
     const { loginUrl } = computedRouteContext;
     const [state, handleSubmit, isPending] = (0, react_1.useActionState)(async function (prevState, formData) {
@@ -76,59 +75,59 @@ function Signup({ className, onSubmit, groupId, metaData, acceptUsername = true,
     }, undefined);
     (0, react_1.useEffect)(() => {
         let timer;
-        if ((state === null || state === void 0 ? void 0 : state.status) === "success" && loginUrl) {
+        if (state?.status === "success" && loginUrl) {
             timer = setTimeout(() => {
-                window.location.href = `${loginUrl}?authToken=${state === null || state === void 0 ? void 0 : state.authToken}`;
+                window.location.href = `${loginUrl}?authToken=${state?.authToken}`;
             }, 2000);
         }
         return () => {
             clearTimeout(timer);
         };
-    }, [state === null || state === void 0 ? void 0 : state.status, loginUrl]);
+    }, [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 === null || state === void 0 ? void 0 : state.status) === "success" ? (react_1.default.createElement(message_1.Message, { message: state === null || state === void 0 ? void 0 : state.message, className: "ecpauth:mb-4 ecpauth:font-semibold ecpauth:text-lg", variant: "success" })) : (react_1.default.createElement(message_1.Message, { message: state === null || state === void 0 ? void 0 : state.message, className: "ecpauth:mb-4" })),
+                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: (_a = state === null || state === void 0 ? void 0 : state.form) === null || _a === void 0 ? void 0 : _a.firstName }),
-                            react_1.default.createElement(message_1.Message, { message: (state === null || state === void 0 ? void 0 : state.status) === "validation-error"
-                                    ? (_b = state === null || state === void 0 ? void 0 : state.errors) === null || _b === void 0 ? void 0 : _b.firstName
+                            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: (_c = state === null || state === void 0 ? void 0 : state.form) === null || _c === void 0 ? void 0 : _c.lastName }),
-                            react_1.default.createElement(message_1.Message, { message: (state === null || state === void 0 ? void 0 : state.status) === "validation-error"
-                                    ? (_d = state === null || state === void 0 ? void 0 : state.errors) === null || _d === void 0 ? void 0 : _d.lastName
+                            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: (_e = state === null || state === void 0 ? void 0 : state.form) === null || _e === void 0 ? void 0 : _e.email }),
-                            react_1.default.createElement(message_1.Message, { message: (state === null || state === void 0 ? void 0 : state.status) === "validation-error"
-                                    ? (_f = state === null || state === void 0 ? void 0 : state.errors) === null || _f === void 0 ? void 0 : _f.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: (_g = state === null || state === void 0 ? void 0 : state.form) === null || _g === void 0 ? void 0 : _g.username }),
-                            react_1.default.createElement(message_1.Message, { message: (state === null || state === void 0 ? void 0 : state.status) === "validation-error"
-                                    ? (_h = state === null || state === void 0 ? void 0 : state.errors) === null || _h === void 0 ? void 0 : _h.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 === null || state === void 0 ? void 0 : state.status) === "validation-error"
-                                    ? (_j = state === null || state === void 0 ? void 0 : state.errors) === null || _j === void 0 ? void 0 : _j.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 === null || state === void 0 ? void 0 : state.status) === "validation-error"
-                                    ? (_k = state === null || state === void 0 ? void 0 : state.errors) === null || _k === void 0 ? void 0 : _k.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" },

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

@@ -64,15 +64,15 @@ function Toggle2FA({ onSubmit }) {
     return (react_1.default.createElement("div", { className: "ecpauth:text-stone-800 ecpauth:dark:text-stone-50" },
         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 === null || state === void 0 ? void 0 : state.status) === "success" ? (react_1.default.createElement(message_1.Message, { message: state === null || state === void 0 ? void 0 : state.message, className: "ecpauth:my-2 ecpauth:font-semibold ecpauth:text-base", variant: "success" })) : (react_1.default.createElement(message_1.Message, { message: state === null || state === void 0 ? void 0 : state.message, className: "ecpauth:my-2" })),
+        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 === null || user === void 0 ? void 0 : user.email),
+            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 === null || user === void 0 ? void 0 : user.with2fa), onCheckedChange: () => startTransition(handleSubmit), disabled: !canUseOtp }))),
+                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",
             " ",

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

@@ -40,6 +40,7 @@ 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");
 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 () {
@@ -57,35 +58,41 @@ function ToggleAccountStatus({ user, open, onOpenChange, onSuccess, onSubmit, })
         }
         try {
             const result = await onSubmit(user.id);
-            onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
+            onSuccess?.();
             return result;
         }
         catch (error) {
             console.log(error);
         }
     }, undefined);
-    return (react_1.default.createElement(dialog_1.Dialog, { open: open, onOpenChange: onOpenChange },
-        react_1.default.createElement(dialog_1.DialogContent, null, !loggedInUser ? (react_1.default.createElement(must_login_1.MustLogin, { onOpenChange: onOpenChange })) : (react_1.default.createElement("form", { action: handleSubmit },
+    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) => {
+                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 === null || user === void 0 ? void 0 :
-                    user.firstName,
-                    " ", user === null || user === void 0 ? void 0 :
-                    user.lastName,
+                    "Toggle account status (",
+                    user?.firstName,
+                    " ",
+                    user?.lastName,
                     ")"),
-                (state === null || state === void 0 ? void 0 : state.status) === "success" ? (react_1.default.createElement(message_1.Message, { message: state === null || state === void 0 ? void 0 : state.message, className: "ecpauth:my-2 ecpauth:font-semibold ecpauth:text-base", variant: "success" })) : (react_1.default.createElement(message_1.Message, { message: state === null || state === void 0 ? void 0 : state.message, className: "ecpauth:my-2" }))),
+                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("strong", null, (user === null || user === void 0 ? void 0 : user.isActive) ? "suspend" : "unsuspend"),
+                    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, (user === null || user === void 0 ? void 0 : user.isActive) ? "unsuspend" : "suspend"),
+                    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 === null || user === void 0 ? void 0 : user.isActive) ? "Suspend" : "Unsuspend")))))));
+                react_1.default.createElement(button_1.Button, { disabled: isPending, type: "submit" }, user?.isActive ? "Suspend" : "Unsuspend")))))));
 }

package/dist/components/ui/dialog.js

@@ -47,7 +47,7 @@ exports.DialogTrigger = DialogTrigger;
 const React = __importStar(require("react"));
 const DialogPrimitive = __importStar(require("@radix-ui/react-dialog"));
 const utils_1 = require("../../lib/utils");
-const x_icon_1 = require("../x-icon");
+const x_icon_1 = require("../icons/x-icon");
 function Dialog({ ...props }) {
     return React.createElement(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
 }

package/dist/components/user-card.js

@@ -39,8 +39,11 @@ const dropdown_menu_1 = require("./ui/dropdown-menu");
 const change_password_1 = require("./change-password");
 const auth_provider_1 = require("../contexts/auth-provider");
 const settings_1 = require("./settings");
+const setting_1 = require("./icons/setting");
+const lock_1 = require("./icons/lock");
+const logout_1 = require("./icons/logout");
 function UserCard({ align = "start", onChangePassword, onToggle2FA, trigger, }) {
-    const { logout } = (0, auth_provider_1.useAuth)();
+    const { logout, user } = (0, auth_provider_1.useAuth)();
     const [passwordOpen, setPasswordOpen] = (0, react_1.useState)(false);
     const [settingsOpen, setSettingsOpen] = (0, react_1.useState)(false);
     return (react_1.default.createElement(react_1.default.Fragment, null,
@@ -49,19 +52,29 @@ function UserCard({ align = "start", onChangePassword, onToggle2FA, trigger, })
         react_1.default.createElement(dropdown_menu_1.DropdownMenu, null,
             trigger ? (react_1.default.createElement(dropdown_menu_1.DropdownMenuTrigger, null, trigger)) : (react_1.default.createElement(Trigger, null)),
             react_1.default.createElement(dropdown_menu_1.DropdownMenuContent, { className: "ecpauth:w-56 ecpauth:border-gray-200 ecpauth:dark:border-gray-800", align: align },
-                react_1.default.createElement(dropdown_menu_1.DropdownMenuItem, { onClick: () => setSettingsOpen(true) }, "Settings"),
-                react_1.default.createElement(dropdown_menu_1.DropdownMenuItem, { onClick: () => setPasswordOpen(true) }, "Change Password"),
+                react_1.default.createElement("div", { className: "ecpauth:flex ecpauth:flex-col ecpauth:items-center ecpauth:justify-center ecpauth:py-4" },
+                    react_1.default.createElement("h2", { className: "ecpauth:text-lg ecpauth:font-semibold" }, `${user?.fullName}`),
+                    react_1.default.createElement("p", { className: "ecpauth:text-sm ecpauth:text-muted-foreground" }, user?.role?.label ?? "-Global-")),
                 react_1.default.createElement(dropdown_menu_1.DropdownMenuSeparator, null),
-                react_1.default.createElement(dropdown_menu_1.DropdownMenuItem, { onClick: () => logout() }, "Logout")))));
+                react_1.default.createElement(dropdown_menu_1.DropdownMenuItem, { onClick: () => setSettingsOpen(true) },
+                    react_1.default.createElement(setting_1.SettingIcon, null),
+                    "Settings"),
+                react_1.default.createElement(dropdown_menu_1.DropdownMenuItem, { onClick: () => setPasswordOpen(true) },
+                    react_1.default.createElement(lock_1.LockIcon, null),
+                    "Change Password"),
+                react_1.default.createElement(dropdown_menu_1.DropdownMenuSeparator, null),
+                react_1.default.createElement(dropdown_menu_1.DropdownMenuItem, { onClick: () => logout() },
+                    react_1.default.createElement(logout_1.LogoutIcon, null),
+                    "Logout")))));
 }
 function Trigger() {
     const { user, authLoading } = (0, auth_provider_1.useAuth)();
     return (react_1.default.createElement(dropdown_menu_1.DropdownMenuTrigger, { className: "ecpauth:flex ecpauth:items-center ecpauth:gap-2 ecpauth:p-1 ecpauth:pe-4 ecpauth:rounded-lg ecpauth:border ecpauth:border-gray-200 ecpauth:dark:border-gray-800 ecpauth:cursor-pointer ecpauth:bg-white ecpauth:hover:bg-gray-100 ecpauth:dark:bg-gray-800 ecpauth:dark:hover:bg-gray-800/80 ecpauth:dark:hover:text-white ecpauth:outline-none ecpauth:focus:outline-none" }, authLoading ? ("Please wait...") : (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { className: "ecpauth:size-12 ecpauth:rounded-full ecpauth:bg-gray-200" }),
         react_1.default.createElement("div", { className: "ecpauth:flex ecpauth:flex-col ecpauth:text-left" },
-            react_1.default.createElement("span", { className: "ecpauth:font-semibold ecpauth:text-stone-800 ecpauth:dark:text-stone-50" }, user === null || user === void 0 ? void 0 :
-                user.firstName,
-                " ", user === null || user === void 0 ? void 0 :
-                user.lastName),
-            react_1.default.createElement("span", { className: "ecpauth:text-sm ecpauth:text-gray-500" }, user === null || user === void 0 ? void 0 : user.email))))));
+            react_1.default.createElement("span", { className: "ecpauth:font-semibold ecpauth:text-stone-800 ecpauth:dark:text-stone-50" },
+                user?.firstName,
+                " ",
+                user?.lastName),
+            react_1.default.createElement("span", { className: "ecpauth:text-sm ecpauth:text-gray-500" }, user?.email))))));
 }