@inf-monkeys-tech/monkeys-design 0.4.36 → 0.4.37

package/dist/index.js

@@ -20373,6 +20373,265 @@ registerTheme(
     version: "1.0.0"
   }
 );
+var LOGIN_LOGO_POSITIONS = ["top", "middle", "bottom"];
+var normalizeCssValue = (value) => {
+  const trimmed = value?.trim();
+  return trimmed || void 0;
+};
+var createBackgroundImage = (gradient, imageUrl) => {
+  const resolvedGradient = normalizeCssValue(gradient);
+  const resolvedImageUrl = normalizeCssValue(imageUrl);
+  return [resolvedGradient, resolvedImageUrl ? `url(${JSON.stringify(resolvedImageUrl)})` : void 0].filter(Boolean).join(", ");
+};
+var normalizeLogoPosition = (position) => position && LOGIN_LOGO_POSITIONS.includes(position) ? position : "bottom";
+var normalizeLogoScale = (scale) => typeof scale === "number" && Number.isFinite(scale) && scale > 0 ? scale : void 0;
+function LoginPage({
+  className,
+  style,
+  background,
+  logo,
+  primaryColor,
+  radius,
+  customCss,
+  toolbar,
+  title,
+  backAction,
+  methods,
+  activeMethodId,
+  defaultMethodId,
+  onMethodChange,
+  externalLabel,
+  externalMethods = [],
+  callout
+}) {
+  const availableMethods = React.useMemo(() => methods.filter((method) => !method.hidden), [methods]);
+  const fallbackMethodId = defaultMethodId ?? availableMethods[0]?.id;
+  const [internalMethodId, setInternalMethodId] = React.useState(fallbackMethodId);
+  const currentMethodId = activeMethodId ?? internalMethodId;
+  const activeMethod = availableMethods.find((method) => method.id === currentMethodId) ?? availableMethods[0];
+  const hasTabs = availableMethods.length > 1;
+  const backgroundImage = createBackgroundImage(background?.gradient, background?.imageUrl);
+  const backgroundMode = backgroundImage ? "custom" : "default";
+  const logoPosition = normalizeLogoPosition(logo?.position);
+  const logoScale = normalizeLogoScale(logo?.scale);
+  React.useEffect(() => {
+    if (!availableMethods.length) {
+      setInternalMethodId(void 0);
+      return;
+    }
+    if (!currentMethodId || !availableMethods.some((method) => method.id === currentMethodId)) {
+      setInternalMethodId(fallbackMethodId ?? availableMethods[0]?.id);
+    }
+  }, [availableMethods, currentMethodId, fallbackMethodId]);
+  const rootStyle = React.useMemo(
+    () => ({
+      ...primaryColor ? { ["--login-page-theme-primary-color"]: primaryColor } : null,
+      ...radius ? { ["--login-page-theme-radius"]: radius } : null,
+      ...style
+    }),
+    [primaryColor, radius, style]
+  );
+  const handleMethodChange = (methodId) => {
+    if (activeMethodId === void 0) {
+      setInternalMethodId(methodId);
+    }
+    onMethodChange?.(methodId);
+  };
+  const renderExternalMethod = (method) => {
+    const button = /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        className: "login-page__oauth-button",
+        "data-login-part": "external-button",
+        "data-login-method-id": method.id,
+        onClick: method.onClick,
+        disabled: method.disabled,
+        children: [
+          method.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "login-page__oauth-icon", "data-login-part": "external-icon", children: method.icon }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: method.label })
+        ]
+      }
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(React__default.default.Fragment, { children: method.render ? method.render(button) : button }, method.id);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "main",
+    {
+      className: ["login-page", className].filter(Boolean).join(" "),
+      "data-login-page": true,
+      "data-login-part": "root",
+      "data-login-background": backgroundMode,
+      style: rootStyle,
+      children: [
+        customCss ? /* @__PURE__ */ jsxRuntime.jsx("style", { "data-login-page-custom-css": true, children: customCss }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "login-page__background",
+            "data-login-part": "background",
+            "data-login-background": backgroundMode,
+            style: backgroundImage ? { backgroundImage } : void 0,
+            "aria-hidden": "true"
+          }
+        ),
+        toolbar ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "login-page__toolbar", "data-login-part": "toolbar", children: toolbar }) : null,
+        logo?.url ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: `login-page__logo login-page__logo--${logoPosition}`,
+            "data-login-part": "logo",
+            "data-logo-position": logoPosition,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                className: "login-page__logo-image",
+                "data-login-part": "logo-image",
+                src: logo.url,
+                alt: logo.alt ?? "",
+                style: logoScale ? { transform: `scale(${logoScale})` } : void 0
+              }
+            )
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "section",
+          {
+            className: "login-page__form",
+            "data-login-part": "panel",
+            "aria-label": typeof title === "string" ? title : void 0,
+            children: [
+              backAction ? /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "login-page__back", "data-login-part": "back", onClick: backAction.onClick, children: [
+                backAction.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "login-page__back-icon", "data-login-part": "back-icon", children: backAction.icon }) : null,
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: backAction.label })
+              ] }) : null,
+              title ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "login-page__title", "data-login-part": "title", children: title }) : null,
+              hasTabs ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "login-page__tabs", "data-login-part": "tabs", role: "tablist", children: availableMethods.map((method) => {
+                const selected = method.id === activeMethod?.id;
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    role: "tab",
+                    "aria-selected": selected,
+                    className: `login-page__tab ${selected ? "login-page__tab--active" : ""}`,
+                    "data-login-part": "tab",
+                    "data-login-method-id": method.id,
+                    "data-active": selected ? "true" : "false",
+                    onClick: () => handleMethodChange(method.id),
+                    children: [
+                      method.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "login-page__tab-icon", "data-login-part": "tab-icon", children: method.icon }) : null,
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { children: method.label })
+                    ]
+                  },
+                  method.id
+                );
+              }) }) : null,
+              activeMethod ? /* @__PURE__ */ jsxRuntime.jsxs(
+                "form",
+                {
+                  className: "login-page__form-fields",
+                  "data-login-part": "form",
+                  "data-login-method-id": activeMethod.id,
+                  onSubmit: activeMethod.onSubmit,
+                  children: [
+                    activeMethod.fields.map((field) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "login-page__field", "data-login-part": "field", "data-login-field-name": field.name, children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "input",
+                      {
+                        id: field.id,
+                        name: field.name,
+                        type: field.type ?? "text",
+                        value: field.value,
+                        placeholder: field.placeholder,
+                        autoComplete: field.autoComplete,
+                        inputMode: field.inputMode,
+                        maxLength: field.maxLength,
+                        pattern: field.pattern,
+                        disabled: activeMethod.disabled || activeMethod.isLoading || field.disabled,
+                        required: field.required,
+                        className: "login-page__input",
+                        "data-login-part": "input",
+                        onChange: (event) => field.onChange(event.target.value)
+                      }
+                    ) }, field.name)),
+                    activeMethod.checkbox ? /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "login-page__remember", "data-login-part": "checkbox-label", htmlFor: activeMethod.checkbox.id, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "input",
+                        {
+                          id: activeMethod.checkbox.id,
+                          type: "checkbox",
+                          className: "login-page__checkbox",
+                          "data-login-part": "checkbox",
+                          checked: activeMethod.checkbox.checked,
+                          disabled: activeMethod.disabled || activeMethod.isLoading || activeMethod.checkbox.disabled,
+                          onChange: (event) => activeMethod.checkbox?.onChange(event.target.checked)
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { children: activeMethod.checkbox.label })
+                    ] }) : null,
+                    activeMethod.footer || activeMethod.footerAction ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "login-page__method-footer", "data-login-part": "method-footer", children: [
+                      activeMethod.footer,
+                      activeMethod.footerAction ? /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          type: "button",
+                          className: "login-page__method-footer-action",
+                          "data-login-part": "method-footer-action",
+                          "data-login-method-id": activeMethod.id,
+                          onClick: activeMethod.footerAction.onClick,
+                          disabled: activeMethod.disabled || activeMethod.isLoading || activeMethod.footerAction.disabled,
+                          children: activeMethod.footerAction.label
+                        }
+                      ) : null
+                    ] }) : null,
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        type: "submit",
+                        className: "login-page__submit",
+                        "data-login-part": "submit-button",
+                        disabled: activeMethod.disabled || activeMethod.isLoading,
+                        children: activeMethod.isLoading && activeMethod.loadingLabel ? activeMethod.loadingLabel : activeMethod.submitLabel
+                      }
+                    )
+                  ]
+                }
+              ) : null,
+              callout ? /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: `login-page__callout login-page__callout--${callout.tone ?? "info"}`,
+                  "data-login-part": "callout",
+                  "data-tone": callout.tone ?? "info",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "login-page__callout-title", "data-login-part": "callout-title", children: callout.title }),
+                    callout.description ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "login-page__callout-description", "data-login-part": "callout-description", children: callout.description }) : null,
+                    callout.detail ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "login-page__callout-detail", "data-login-part": "callout-detail", children: callout.detail }) : null,
+                    callout.action ? /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        className: "login-page__callout-action",
+                        "data-login-part": "callout-action",
+                        onClick: callout.action.onClick,
+                        disabled: callout.action.disabled,
+                        children: callout.action.label
+                      }
+                    ) : null
+                  ]
+                }
+              ) : null,
+              externalMethods.length ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "login-page__oauth-section", "data-login-part": "external-methods", children: [
+                externalLabel ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "login-page__oauth-label", "data-login-part": "external-label", children: externalLabel }) : null,
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "login-page__oauth-list", "data-login-part": "external-list", children: externalMethods.map(renderExternalMethod) })
+              ] }) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
 var containerStyle = {
   display: "flex",
   alignItems: "center",
@@ -25251,6 +25510,7 @@ exports.InteractiveTableEditableTextCell = InteractiveTableEditableTextCell;
 exports.InteractiveTableReadonlyCell = InteractiveTableReadonlyCell;
 exports.InteractiveTableSelectCell = InteractiveTableSelectCell;
 exports.LoginLayout = LoginLayout;
+exports.LoginPage = LoginPage;
 exports.MonkeysToastProvider = MonkeysToastProvider;
 exports.MonkeysToaster = MonkeysToaster;
 exports.NavButton = NavButton;