@drawbridge/components 0.0.78 → 0.1.0

package/dist/dashboard/form-auth.js

@@ -0,0 +1,597 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var form_auth_exports = {};
+__export(form_auth_exports, {
+  FormAuthEmail: () => FormAuthEmail,
+  FormAuthResend: () => FormAuthResend,
+  FormAuthSignup: () => FormAuthSignup,
+  FormProviders: () => FormProviders
+});
+module.exports = __toCommonJS(form_auth_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_form = require("../shared/lib/form");
+var import_react_query = require("@tanstack/react-query");
+var import_react_google_recaptcha_v3 = require("react-google-recaptcha-v3");
+var import_fetch = require("@drawbridge/drawbridge-utils/fetch");
+var import_yup = __toESM(require("../shared/lib/yup"));
+var import_otc = require("./lib/otc");
+var import_utm = require("./lib/utm");
+var import_form2 = __toESM(require("../shared/form"));
+var import_fieldset = __toESM(require("../shared/fieldset"));
+var import_input_group = __toESM(require("../input-group"));
+var import_input_text = __toESM(require("../input-text"));
+var import_divider = __toESM(require("../shared/divider"));
+var import_google = __toESM(require("../icons/google"));
+var import_button = __toESM(require("../shared/button"));
+const FormAuthEmail = ({
+  action = "Sign in",
+  onSuccess,
+  values = {}
+}) => {
+  const schema = {
+    email: import_yup.default.string().label("Email").email().required()
+  };
+  const { control, formState, handleSubmit, setError } = (0, import_form.useForm)({
+    resolver: (0, import_yup.resolver)(
+      import_yup.default.object(schema)
+    ),
+    values
+  });
+  const { executeRecaptcha } = (0, import_react_google_recaptcha_v3.useGoogleReCaptcha)();
+  const onSubmit = async (body) => {
+    try {
+      const payload = {
+        email: body.email
+      };
+      const otcId = await (0, import_otc.requestOtc)({
+        action: "form_auth_signin",
+        body: payload,
+        endpoint: "/oauth/signin/request",
+        executeRecaptcha
+      });
+      onSuccess({
+        body: payload,
+        otcId
+      });
+    } catch (error) {
+      setError(
+        "email",
+        {
+          type: "custom",
+          message: error == null ? void 0 : error.message
+        }
+      );
+    }
+    ;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_form2.default,
+    {
+      ...{
+        className: "w-full space-y-4 form-auth-email",
+        onSubmit: handleSubmit(onSubmit)
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_fieldset.default,
+          {
+            ...{
+              disabled: formState == null ? void 0 : formState.isSubmitting
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_form.Controller,
+              {
+                ...{
+                  control,
+                  name: "email",
+                  render: ({ field: { value, onChange } }) => {
+                    var _a, _b;
+                    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_input_group.default,
+                      {
+                        ...{
+                          error: (_b = (_a = formState == null ? void 0 : formState.errors) == null ? void 0 : _a.email) == null ? void 0 : _b.message,
+                          input: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            import_input_text.default,
+                            {
+                              ...{
+                                autoComplete: "email",
+                                onChange,
+                                type: "email",
+                                value: value || ""
+                              }
+                            }
+                          ),
+                          label: "Email"
+                        }
+                      }
+                    );
+                  }
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_fieldset.default,
+          {
+            ...{
+              disabled: formState == null ? void 0 : formState.isSubmitting
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_button.default,
+              {
+                ...{
+                  loading: formState == null ? void 0 : formState.isSubmitting,
+                  type: "submit"
+                },
+                children: action
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+const FormAuthSignup = ({
+  action = "Sign up",
+  onSuccess,
+  referrer,
+  utm = null,
+  values = {}
+}) => {
+  const schema = {
+    email: import_yup.default.string().label("Email").email().required(),
+    firstName: import_yup.default.string().label("First name").trim().required(),
+    lastName: import_yup.default.string().label("Last name").trim().required()
+  };
+  const { control, formState, handleSubmit, setError } = (0, import_form.useForm)({
+    resolver: (0, import_yup.resolver)(
+      import_yup.default.object(schema)
+    ),
+    values
+  });
+  const { executeRecaptcha } = (0, import_react_google_recaptcha_v3.useGoogleReCaptcha)();
+  const onSubmit = async (body) => {
+    try {
+      const payload = {
+        email: body.email,
+        firstName: body.firstName,
+        lastName: body.lastName,
+        ...referrer && {
+          referrer
+        },
+        // Sent on the REQUEST, not the confirm. The code arrives by email and
+        // may be entered minutes later in another tab, so the api stores the
+        // tags on the otc document and reads them back at provisioning --
+        // exactly what it already does with the referrer.
+        ...utm && {
+          utm
+        }
+      };
+      const otcId = await (0, import_otc.requestOtc)({
+        action: "form_auth_signup",
+        body: payload,
+        endpoint: "/oauth/signup/request",
+        executeRecaptcha
+      });
+      onSuccess({
+        body: payload,
+        otcId
+      });
+    } catch (error) {
+      setError(
+        "email",
+        {
+          type: "custom",
+          message: error == null ? void 0 : error.message
+        }
+      );
+    }
+    ;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_form2.default,
+    {
+      ...{
+        className: "w-full space-y-4 form-auth-signup",
+        onSubmit: handleSubmit(onSubmit)
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_fieldset.default,
+          {
+            ...{
+              disabled: formState == null ? void 0 : formState.isSubmitting
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_form.Controller,
+              {
+                ...{
+                  control,
+                  name: "firstName",
+                  render: ({ field: { value, onChange } }) => {
+                    var _a, _b;
+                    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_input_group.default,
+                      {
+                        ...{
+                          error: (_b = (_a = formState == null ? void 0 : formState.errors) == null ? void 0 : _a.firstName) == null ? void 0 : _b.message,
+                          input: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            import_input_text.default,
+                            {
+                              ...{
+                                autoComplete: "given-name",
+                                onChange,
+                                value: value || ""
+                              }
+                            }
+                          ),
+                          label: "First name"
+                        }
+                      }
+                    );
+                  }
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_fieldset.default,
+          {
+            ...{
+              disabled: formState == null ? void 0 : formState.isSubmitting
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_form.Controller,
+              {
+                ...{
+                  control,
+                  name: "lastName",
+                  render: ({ field: { value, onChange } }) => {
+                    var _a, _b;
+                    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_input_group.default,
+                      {
+                        ...{
+                          error: (_b = (_a = formState == null ? void 0 : formState.errors) == null ? void 0 : _a.lastName) == null ? void 0 : _b.message,
+                          input: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            import_input_text.default,
+                            {
+                              ...{
+                                autoComplete: "family-name",
+                                onChange,
+                                value: value || ""
+                              }
+                            }
+                          ),
+                          label: "Last name"
+                        }
+                      }
+                    );
+                  }
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_fieldset.default,
+          {
+            ...{
+              disabled: formState == null ? void 0 : formState.isSubmitting
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_form.Controller,
+              {
+                ...{
+                  control,
+                  name: "email",
+                  render: ({ field: { value, onChange } }) => {
+                    var _a, _b;
+                    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_input_group.default,
+                      {
+                        ...{
+                          error: (_b = (_a = formState == null ? void 0 : formState.errors) == null ? void 0 : _a.email) == null ? void 0 : _b.message,
+                          input: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            import_input_text.default,
+                            {
+                              ...{
+                                autoComplete: "email",
+                                onChange,
+                                type: "email",
+                                value: value || ""
+                              }
+                            }
+                          ),
+                          label: "Email",
+                          // Sign-up seeds a first campaign from a company domain's
+                          // site (api seedFirstCampaign); a gmail address gets none.
+                          message: "Use your work email and we'll draft a first campaign from your company's website."
+                        }
+                      }
+                    );
+                  }
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_fieldset.default,
+          {
+            ...{
+              disabled: formState == null ? void 0 : formState.isSubmitting
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_button.default,
+              {
+                ...{
+                  loading: formState == null ? void 0 : formState.isSubmitting,
+                  type: "submit"
+                },
+                children: action
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+const FormAuthResend = ({
+  action,
+  body,
+  endpoint,
+  onSuccess
+}) => {
+  var _a, _b;
+  const { clearErrors, formState, handleSubmit, setError } = (0, import_form.useForm)();
+  const { executeRecaptcha } = (0, import_react_google_recaptcha_v3.useGoogleReCaptcha)();
+  const mutation = (0, import_react_query.useMutation)({
+    retry: false,
+    mutationFn: () => (0, import_otc.requestOtc)({
+      action,
+      body,
+      endpoint,
+      executeRecaptcha
+    }),
+    onMutate: () => {
+      clearErrors("submit");
+    },
+    onSuccess: (otcId) => onSuccess(otcId),
+    onError: (error) => {
+      setError("submit", {
+        type: "custom",
+        message: (error == null ? void 0 : error.message) || "We could not send a new code. Please refresh the page and try again."
+      });
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_form2.default,
+    {
+      ...{
+        className: "w-full form-auth-resend",
+        onSubmit: handleSubmit(() => mutation.mutate())
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_fieldset.default,
+          {
+            ...{
+              disabled: mutation == null ? void 0 : mutation.isPending
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_input_group.default,
+              {
+                ...{
+                  error: (_b = (_a = formState == null ? void 0 : formState.errors) == null ? void 0 : _a.submit) == null ? void 0 : _b.message,
+                  input: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_button.default,
+                    {
+                      ...{
+                        loading: mutation == null ? void 0 : mutation.isPending,
+                        type: "submit",
+                        variant: "secondary"
+                      },
+                      children: "Resend code"
+                    }
+                  )
+                }
+              }
+            )
+          }
+        ),
+        (mutation == null ? void 0 : mutation.isSuccess) && // Say so out loud. A resend that succeeds silently is visually
+        // identical to the broken one that sent nothing, which is the whole
+        // complaint — the user is staring at an empty inbox either way and
+        // has no way to tell which is happening.
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "p",
+          {
+            ...{
+              className: "text-sm text-center mt-2"
+            },
+            children: "A new code is on its way."
+          }
+        )
+      ]
+    }
+  );
+};
+const FormAuthGoogle = ({
+  action = "Sign in with Google",
+  ready = true,
+  redirectTo,
+  referrer,
+  utm = null
+}) => {
+  var _a, _b;
+  const { clearErrors, formState, handleSubmit, setError } = (0, import_form.useForm)();
+  const mutation = (0, import_react_query.useMutation)({
+    retry: false,
+    mutationFn: async () => {
+      const params = {};
+      if (redirectTo) {
+        params.redirectTo = redirectTo;
+      }
+      ;
+      if (referrer) {
+        params.ref = referrer;
+      }
+      ;
+      Object.assign(params, (0, import_utm.utmToQuery)(utm));
+      const query = new URLSearchParams(params).toString();
+      const { result } = await (0, import_fetch.request)({
+        endpoint: "/oauth/google/start" + (query ? "?" + query : "")
+      });
+      if (!(result == null ? void 0 : result.url)) {
+        throw new Error("Google sign-in is unavailable right now");
+      }
+      ;
+      return {
+        url: result.url
+      };
+    },
+    onMutate: () => {
+      clearErrors("submit");
+    },
+    onSuccess: ({ url }) => {
+      window.location.href = url;
+    },
+    onError: (error) => {
+      setError("submit", {
+        type: "custom",
+        message: (error == null ? void 0 : error.message) || "Google sign-in is unavailable right now."
+      });
+    }
+  });
+  const isLoading = (mutation == null ? void 0 : mutation.isPending) || (mutation == null ? void 0 : mutation.isSuccess);
+  const busy = isLoading || !ready;
+  (0, import_react.useEffect)(() => {
+    const onPageShow = (event) => {
+      if (event.persisted) {
+        mutation.reset();
+      }
+      ;
+    };
+    window.addEventListener("pageshow", onPageShow);
+    return () => window.removeEventListener("pageshow", onPageShow);
+  }, [mutation]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_form2.default,
+    {
+      ...{
+        className: "w-full form-auth-google",
+        onSubmit: handleSubmit(() => mutation.mutate())
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_fieldset.default,
+        {
+          ...{
+            disabled: busy
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_input_group.default,
+            {
+              ...{
+                error: (_b = (_a = formState == null ? void 0 : formState.errors) == null ? void 0 : _a.submit) == null ? void 0 : _b.message,
+                input: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_button.default,
+                  {
+                    ...{
+                      icon: import_google.default,
+                      loading: busy,
+                      reverse: true,
+                      type: "submit",
+                      variant: "secondary"
+                    },
+                    children: action
+                  }
+                )
+              }
+            }
+          )
+        }
+      )
+    }
+  );
+};
+const FormProviders = ({
+  action,
+  redirectTo,
+  referrer,
+  utm = null
+}) => {
+  var _a;
+  const query = (0, import_react_query.useQuery)({
+    queryKey: ["auth-providers"],
+    queryFn: async () => {
+      const { result } = await (0, import_fetch.request)({
+        endpoint: "/oauth/providers"
+      });
+      return result || {};
+    }
+  });
+  if (query.isError) return null;
+  if (query.isSuccess && Object.keys(((_a = query.data) == null ? void 0 : _a.providers) || {}).length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      FormAuthGoogle,
+      {
+        ...{
+          action,
+          ready: query.isSuccess,
+          redirectTo,
+          referrer,
+          utm
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_divider.default,
+      {
+        ...{
+          classNameLabel: "bg-gray-light"
+        },
+        children: "or"
+      }
+    )
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FormAuthEmail,
+  FormAuthResend,
+  FormAuthSignup,
+  FormProviders
+});