@alfadocs/ui-kit 1.78.0 → 1.80.0

package/dist/_chunks/login-dev-card-CvLHj-_N.js

@@ -0,0 +1,353 @@
+import { jsxs as f, jsx as s } from "react/jsx-runtime";
+import { forwardRef as ge, useId as M, useState as l, useEffect as le, useRef as ie } from "react";
+import { useTranslation as Se } from "react-i18next";
+import { c as E } from "./index-D2ZczOXr.js";
+import { i as me, E as qe } from "./email-input-C7THAwh2.js";
+import { B as pe } from "./button-DohK_Ak_.js";
+import { C as Pe } from "./checkbox-BjDv-r3o.js";
+import { C as v } from "./card-BA4Ig_kn.js";
+import { E as je } from "./error-summary-mGxIyDAY.js";
+import { F as ce } from "./form-field-CyHfOVKF.js";
+import { P as ze } from "./password-input-BokZ_rnT.js";
+import { i as De } from "./is-development-CLUAnsU7.js";
+import { i as he } from "./safe-href-5dbsfbQn.js";
+import { u as He } from "./use-state-backed-input-DhRQo6gM.js";
+import { u as Oe, a as Te, A as $e, b as _e, d as O, E as Ge, c as Ue } from "./auth-form-parts-B3GWChvG.js";
+import { u as We, b as Je, a as Ke } from "./use-registration-submit-CLGHxwoT.js";
+import { M as Qe } from "./matrix-rain-sDOUUwZp.js";
+import { a as Xe } from "./error-page-illustration-BdJLuMdV.js";
+const $ = ["email", "password"], Ye = E(
+  "ds:flex ds:w-full ds:flex-col ds:items-center ds:justify-center ds:gap-[var(--spacing-lg)] ds:text-start ds:text-[var(--foreground)] ds:lg:flex-row ds:lg:items-stretch"
+), ue = E("ds:w-full ds:max-w-[400px]"), Ze = E(
+  "ds:flex ds:flex-wrap ds:justify-center ds:gap-x-[var(--spacing-lg)] ds:gap-y-[var(--spacing-lg)]"
+), T = (r) => r && he(r) ? r : void 0, Ve = (r) => Object.values(r).some(Boolean), es = (r) => $.some((i) => !!r[i]), fe = (r) => $.find((i) => r[i]) ?? (r.form ? "password" : void 0), ss = ge(
+  ({
+    title: r,
+    description: i,
+    headingLevel: b = 1,
+    showLogo: I = !0,
+    logoMotion: k = "assemble",
+    children: w,
+    initialValues: o,
+    errors: u,
+    forgotPasswordHref: L,
+    showRememberMe: d = !1,
+    registerDoctorHref: C,
+    registerPatientHref: ve,
+    submitLabel: be,
+    submitting: we = !1,
+    onSubmit: B,
+    fieldNames: t,
+    action: xe,
+    hiddenFields: Fe,
+    devCard: _,
+    className: ye,
+    ...Me
+  }, Ee) => {
+    const { t: n } = Se("ui"), G = M(), R = M(), Ie = M(), A = (e) => `${Ie}-${e}`, m = t !== void 0, [g, N] = l(() => (o == null ? void 0 : o.email) ?? ""), [x, F] = l(""), [U, ke] = l(
+      () => (o == null ? void 0 : o.rememberMe) === !0
+    ), S = d || !!(t != null && t.rememberMe), W = m && S && !(t != null && t.rememberMe);
+    le(() => {
+      W && De() && console.warn(
+        "LoginForm: the remember-me box is shown but `fieldNames.rememberMe` is not set, so the server will not read it."
+      );
+    }, [W]);
+    const [Le, J] = l(() => ({ email: !!(o != null && o.email) })), [Ce, K] = l(!1), [Q, X] = l(
+      () => u ?? {}
+    ), Y = (e) => J(
+      (a) => a[e] ? a : { ...a, [e]: !0 }
+    ), Z = (e) => X(
+      (a) => a[e] ? { ...a, [e]: void 0 } : a
+    ), q = ie(null), P = ie(null), V = He(g, q), ee = () => {
+      F(""), J((e) => ({ ...e, password: !1 }));
+    }, se = () => {
+      var a, h;
+      const e = {
+        email: ((a = q.current) == null ? void 0 : a.value) ?? g,
+        password: ((h = P.current) == null ? void 0 : h.value) ?? x,
+        rememberMe: S && U
+      };
+      return e.email !== g && N(e.email), e.password !== x && F(e.password), e;
+    }, re = {
+      email: !me(g),
+      password: x === ""
+    }, ae = (e) => Ce || Le[e] === !0, Be = {
+      email: ae("email") && re.email ? n(g === "" ? "loginForm.emailRequired" : "inputs.email.invalid") : void 0,
+      password: ae("password") && re.password ? n("loginForm.passwordRequired") : void 0
+    }, y = (e) => Q[e] ?? Be[e], [oe] = l(
+      () => es(u ?? {})
+    ), c = We(
+      $,
+      y,
+      oe
+    ), [j, te] = l(() => {
+      const e = oe ? void 0 : fe(u ?? {});
+      return e ? { target: e } : null;
+    });
+    le(() => {
+      var e;
+      j && ((e = (j.target === "email" ? q : P).current) == null || e.focus());
+    }, [j]);
+    const ne = Je({
+      errors: u,
+      submitting: we,
+      native: m,
+      captcha: !1,
+      firstProblem: () => {
+        const e = se();
+        return me(e.email) ? e.password === "" ? "password" : void 0 : "email";
+      },
+      onRefused: (e) => {
+        K(!0), c.open(() => te({ target: e }));
+      },
+      // Only a React host gets here: a native post is the browser's own.
+      deliver: () => B == null ? void 0 : B(se()),
+      onAnswer: (e) => {
+        const a = e;
+        X(a), Ve(a) && (ee(), K(!1), c.open(() => {
+          const h = fe(a);
+          h && te({ target: h });
+        }));
+      },
+      // The page came back from the browser's cache as it was left: the
+      // password must not come back with it.
+      onRestore: ee
+    }), { busy: z } = ne, Re = Oe("LoginForm", m, xe), de = T(L), D = T(C), H = T(ve), Ae = Te(
+      "LoginForm",
+      m,
+      t,
+      Fe
+    ), p = Q.form, Ne = Ke(
+      p,
+      c.listed.length > 0
+    );
+    return /* @__PURE__ */ f(
+      "div",
+      {
+        ref: Ee,
+        ...Me,
+        "data-component": "login-form",
+        className: Ye({ className: ye }),
+        children: [
+          /* @__PURE__ */ s("div", { className: ue(), children: /* @__PURE__ */ s(v, { variant: "elevated", className: "ds:h-full", children: /* @__PURE__ */ f(v.Body, { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-lg)]", children: [
+            /* @__PURE__ */ s(
+              $e,
+              {
+                id: G,
+                title: r ?? n("loginForm.title"),
+                description: i,
+                level: b,
+                showLogo: I,
+                logoMotion: k
+              }
+            ),
+            w ? /* @__PURE__ */ s(
+              "div",
+              {
+                "data-slot": "host-content",
+                className: "ds:flex ds:flex-col ds:gap-[var(--spacing-md)]",
+                children: w
+              }
+            ) : null,
+            /* @__PURE__ */ f(
+              "form",
+              {
+                noValidate: !0,
+                method: "post",
+                action: Re,
+                "aria-labelledby": G,
+                "aria-busy": z || void 0,
+                onSubmit: ne.handleSubmit,
+                className: "ds:flex ds:flex-col ds:gap-[var(--spacing-md)]",
+                children: [
+                  /* @__PURE__ */ s(
+                    je,
+                    {
+                      ref: c.ref,
+                      headingLevel: b + 1,
+                      "aria-describedby": p ? R : void 0,
+                      errors: c.listed.map((e) => ({
+                        field: e,
+                        message: y(e) ?? "",
+                        targetId: A(e)
+                      }))
+                    }
+                  ),
+                  p && /* @__PURE__ */ s(
+                    _e,
+                    {
+                      id: R,
+                      announce: Ne,
+                      children: p
+                    }
+                  ),
+                  /* @__PURE__ */ s(
+                    ce,
+                    {
+                      id: A("email"),
+                      label: n("loginForm.email"),
+                      required: !0,
+                      error: y("email"),
+                      announceError: !c.lists("email"),
+                      "data-field": "email",
+                      children: /* @__PURE__ */ s(
+                        qe,
+                        {
+                          ref: V.ref,
+                          name: m ? t.email : "email",
+                          autoComplete: "username",
+                          disableBuiltInValidation: !0,
+                          onChange: V.quiet((e) => {
+                            N(e.target.value), Z("email");
+                          }),
+                          onBlur: (e) => {
+                            N(e.target.value), e.target.value !== "" && Y("email");
+                          }
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ s(
+                    ce,
+                    {
+                      id: A("password"),
+                      label: n("loginForm.password"),
+                      required: !0,
+                      error: y("password"),
+                      announceError: !c.lists("password"),
+                      "data-field": "password",
+                      children: /* @__PURE__ */ s(
+                        ze,
+                        {
+                          ref: P,
+                          name: m ? t.password : "password",
+                          autoComplete: "current-password",
+                          "aria-describedby": p ? R : void 0,
+                          value: x,
+                          onChange: (e) => {
+                            F(e.target.value), Z("password");
+                          },
+                          onBlur: (e) => {
+                            F(e.target.value), e.target.value !== "" && Y("password");
+                          }
+                        }
+                      )
+                    }
+                  ),
+                  de && /* @__PURE__ */ s(
+                    O,
+                    {
+                      href: de,
+                      action: "forgot-password",
+                      align: "end",
+                      children: n("loginForm.forgot")
+                    }
+                  ),
+                  S && /* @__PURE__ */ s("div", { "data-field": "remember-me", children: /* @__PURE__ */ s(
+                    Pe,
+                    {
+                      name: m && t.rememberMe || "rememberMe",
+                      checked: U,
+                      onCheckedChange: (e) => ke(e === !0),
+                      label: n("loginForm.rememberMe")
+                    }
+                  ) }),
+                  /* @__PURE__ */ s(Ge, { fields: Ae }),
+                  /* @__PURE__ */ s(
+                    pe,
+                    {
+                      type: "submit",
+                      intent: "primary",
+                      size: "lg",
+                      loading: z,
+                      className: "ds:w-full",
+                      "data-action": "submit",
+                      children: be ?? n("loginForm.submit")
+                    }
+                  )
+                ]
+              }
+            ),
+            (D || H) && /* @__PURE__ */ f(
+              "div",
+              {
+                "data-slot": "register-links",
+                className: Ze(),
+                children: [
+                  D && /* @__PURE__ */ s(O, { href: D, action: "register-doctor", children: n("signedOutHeader.registerDoctor") }),
+                  H && /* @__PURE__ */ s(O, { href: H, action: "register-patient", children: n("signedOutHeader.registerPatient") })
+                ]
+              }
+            ),
+            /* @__PURE__ */ s(Ue, { busy: z })
+          ] }) }) }),
+          _ ? /* @__PURE__ */ s("div", { className: ue(), children: _ }) : null
+        ]
+      }
+    );
+  }
+);
+ss.displayName = "LoginForm";
+const rs = E("ds:h-full ds:w-full"), as = ge(
+  ({ title: r, options: i, headingLevel: b = 2, className: I, ...k }, w) => {
+    const o = M(), u = `h${b}`, L = i.filter((d) => he(d.href));
+    return /* @__PURE__ */ s(
+      "div",
+      {
+        ref: w,
+        ...k,
+        "data-component": "login-dev-card",
+        className: rs({ className: I }),
+        children: /* @__PURE__ */ f(
+          v,
+          {
+            variant: "elevated",
+            "aria-labelledby": o,
+            className: "ds:relative ds:isolate ds:flex ds:h-full ds:flex-col ds:overflow-hidden",
+            children: [
+              /* @__PURE__ */ s("div", { className: "ds:absolute ds:inset-0 ds:z-0 ds:[display:var(--accessible-off,block)]", children: /* @__PURE__ */ s(
+                Qe,
+                {
+                  glyphs: "hex",
+                  decay: "fast",
+                  mask: "center",
+                  maskRadius: "xl",
+                  className: "ds:size-full"
+                }
+              ) }),
+              /* @__PURE__ */ s(v.Header, { className: "ds:relative ds:z-[1]", children: /* @__PURE__ */ f("div", { className: "ds:flex ds:flex-col ds:items-center ds:gap-[var(--spacing-sm)] ds:text-center", children: [
+                /* @__PURE__ */ s("div", { className: "ds:[&>div]:w-24", children: /* @__PURE__ */ s(Xe, { mood: "melt" }) }),
+                /* @__PURE__ */ s(
+                  u,
+                  {
+                    id: o,
+                    className: "type-title-card ds:text-[var(--foreground)]",
+                    children: r
+                  }
+                )
+              ] }) }),
+              /* @__PURE__ */ s(v.Body, { className: "ds:relative ds:z-[1] ds:flex ds:flex-1 ds:flex-col ds:justify-center", children: /* @__PURE__ */ s("div", { className: "ds:mt-[var(--spacing-md)] ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", children: L.map((d, C) => /* @__PURE__ */ s(
+                pe,
+                {
+                  asChild: !0,
+                  intent: "primary",
+                  startIcon: d.icon,
+                  className: "ds:min-h-[var(--min-target-size)] ds:w-full",
+                  children: /* @__PURE__ */ s("a", { href: d.href, "data-action": "dev-login", children: d.label })
+                },
+                `${C}:${d.href}`
+              )) }) })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+as.displayName = "LoginDevCard";
+export {
+  $ as L,
+  as as a,
+  ss as b
+};
+//# sourceMappingURL=login-dev-card-CvLHj-_N.js.map