@stackframe/stack 2.4.13 → 2.4.15

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @stackframe/stack
 
+## 2.4.15
+
+### Patch Changes
+
+- Improved client styling, added login form, added spotify oauth
+- Updated dependencies
+  - @stackframe/stack-shared@2.4.12
+
+## 2.4.14
+
+### Patch Changes
+
+- Added email editor
+- Updated dependencies
+  - @stackframe/stack-shared@2.4.11
+
 ## 2.4.13
 
 ### Patch Changes

package/dist/components/credential-sign-in.js

@@ -35,79 +35,59 @@ __export(credential_sign_in_exports, {
   default: () => CredentialSignIn
 });
 module.exports = __toCommonJS(credential_sign_in_exports);
-var import_react = require("react");
+var import_react_hook_form = require("react-hook-form");
+var import_yup = require("@hookform/resolvers/yup");
+var yup = __toESM(require("yup"));
 var import_form_warning = __toESM(require("./form-warning"));
 var import_password_field = __toESM(require("./password-field"));
-var import_email = require("../utils/email");
 var import__ = require("..");
 var import_components_core = require("../components-core");
-var import_stack_shared = require("@stackframe/stack-shared");
+var import_promises = require("@stackframe/stack-shared/dist/utils/promises");
 var import_jsx_runtime = require("react/jsx-runtime");
+var schema = yup.object().shape({
+  email: yup.string().email("Please enter a valid email").required("Please enter your email"),
+  password: yup.string().required("Please enter your password")
+});
 function CredentialSignIn() {
-  const [email, setEmail] = (0, import_react.useState)("");
-  const [emailError, setEmailError] = (0, import_react.useState)("");
-  const [password, setPassword] = (0, import_react.useState)("");
-  const [passwordError, setPasswordError] = (0, import_react.useState)("");
+  const { register, handleSubmit, setError, formState: { errors }, clearErrors } = (0, import_react_hook_form.useForm)({
+    resolver: (0, import_yup.yupResolver)(schema)
+  });
   const app = (0, import__.useStackApp)();
-  const onSubmit = async () => {
-    if (!email) {
-      setEmailError("Please enter your email");
-      return;
-    }
-    if (!(0, import_email.validateEmail)(email)) {
-      setEmailError("Please enter a valid email");
-      return;
-    }
-    if (!password) {
-      setPasswordError("Please enter your password");
-      return;
-    }
+  const onSubmit = async (data) => {
+    const { email, password } = data;
     const error = await app.signInWithCredential({ email, password });
-    if (error instanceof import_stack_shared.KnownErrors.EmailPasswordMismatch) {
-      setPasswordError("Wrong email or password");
-    } else if (error) {
-      setEmailError(`An error occurred. ${error.message}`);
-    }
+    setError("email", { type: "manual", message: error?.message });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "stretch" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Label, { htmlFor: "email", children: "Email" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_components_core.Input,
-      {
-        id: "email",
-        type: "email",
-        name: "email",
-        value: email,
-        onChange: (e) => {
-          setEmail(e.target.value);
-          setEmailError("");
-        }
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.default, { text: emailError }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Label, { htmlFor: "password", style: { marginTop: "1rem" }, children: "Password" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_password_field.default,
-      {
-        id: "password",
-        name: "password",
-        value: password,
-        onChange: (e) => {
-          setPassword(e.target.value);
-          setPasswordError("");
-        }
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.default, { text: passwordError }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Link, { href: app.urls.forgotPassword, size: "sm", style: { marginTop: "0.5rem" }, children: "Forgot password?" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_components_core.Button,
-      {
-        style: { marginTop: "1.5rem" },
-        onClick: onSubmit,
-        children: "Sign In"
-      }
-    )
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "form",
+    {
+      style: { display: "flex", flexDirection: "column", alignItems: "stretch" },
+      onSubmit: (e) => (0, import_promises.runAsynchronously)(handleSubmit(onSubmit)(e)),
+      noValidate: true,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Label, { htmlFor: "email", children: "Email" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components_core.Input,
+          {
+            id: "email",
+            type: "email",
+            ...register("email")
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.default, { text: errors.email?.message?.toString() }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Label, { htmlFor: "password", style: { marginTop: "1rem" }, children: "Password" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_password_field.default,
+          {
+            id: "password",
+            ...register("password")
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.default, { text: errors.password?.message?.toString() }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Link, { href: app.urls.forgotPassword, size: "sm", style: { marginTop: "0.5rem" }, children: "Forgot password?" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Button, { type: "submit", style: { marginTop: "1.5rem" }, children: "Sign In" })
+      ]
+    }
+  );
 }
 //# sourceMappingURL=credential-sign-in.js.map

package/dist/components/credential-sign-in.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/credential-sign-in.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from \"react\";\nimport FormWarningText from \"./form-warning\";\nimport PasswordField from \"./password-field\";\nimport { validateEmail } from \"../utils/email\";\nimport { useStackApp } from \"..\";\nimport { Button, Input, Label, Link } from \"../components-core\";\nimport { KnownErrors } from \"@stackframe/stack-shared\";\n\nexport default function CredentialSignIn() {\n  const [email, setEmail] = useState('');\n  const [emailError, setEmailError] = useState('');\n  const [password, setPassword] = useState('');\n  const [passwordError, setPasswordError] = useState('');\n  const app = useStackApp();\n  \n  const onSubmit = async () => {\n    if (!email) {\n      setEmailError('Please enter your email');\n      return;\n    }\n    if (!validateEmail(email)) {\n      setEmailError('Please enter a valid email');\n      return;\n    }\n    if (!password) {\n      setPasswordError('Please enter your password');\n      return;\n    }\n    \n    const error = await app.signInWithCredential({ email, password });\n\n    if (error instanceof KnownErrors.EmailPasswordMismatch) {\n      setPasswordError('Wrong email or password');\n    } else if (error) {\n      setEmailError(`An error occurred. ${error.message}`);\n    }\n  };\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'stretch' }}>\n      <Label htmlFor=\"email\">Email</Label>\n      <Input\n        id=\"email\"\n        type=\"email\"\n        name=\"email\"\n        value={email}\n        onChange={(e) => {\n          setEmail(e.target.value);\n          setEmailError('');\n        }}\n      />\n      <FormWarningText text={emailError} />\n\n      <Label htmlFor=\"password\" style={{ marginTop: '1rem' }}>Password</Label>\n      <PasswordField\n        id=\"password\"\n        name=\"password\"\n        value={password}\n        onChange={(e) => {\n          setPassword(e.target.value);\n          setPasswordError('');\n        }}\n      />\n      <FormWarningText text={passwordError} />\n\n      <Link href={app.urls.forgotPassword} size='sm' style={{ marginTop: '0.5rem' }}>\n        Forgot password?\n      </Link>\n\n      <Button\n        style={{ marginTop: '1.5rem' }}\n        onClick={onSubmit}\n      >\n          Sign In\n      </Button>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAyB;AACzB,0BAA4B;AAC5B,4BAA0B;AAC1B,mBAA8B;AAC9B,eAA4B;AAC5B,6BAA2C;AAC3C,0BAA4B;AAiCxB;AA/BW,SAAR,mBAAoC;AACzC,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,EAAE;AACrC,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,EAAE;AAC/C,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,EAAE;AAC3C,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,EAAE;AACrD,QAAM,UAAM,sBAAY;AAExB,QAAM,WAAW,YAAY;AAC3B,QAAI,CAAC,OAAO;AACV,oBAAc,yBAAyB;AACvC;AAAA,IACF;AACA,QAAI,KAAC,4BAAc,KAAK,GAAG;AACzB,oBAAc,4BAA4B;AAC1C;AAAA,IACF;AACA,QAAI,CAAC,UAAU;AACb,uBAAiB,4BAA4B;AAC7C;AAAA,IACF;AAEA,UAAM,QAAQ,MAAM,IAAI,qBAAqB,EAAE,OAAO,SAAS,CAAC;AAEhE,QAAI,iBAAiB,gCAAY,uBAAuB;AACtD,uBAAiB,yBAAyB;AAAA,IAC5C,WAAW,OAAO;AAChB,oBAAc,sBAAsB,MAAM,OAAO,EAAE;AAAA,IACrD;AAAA,EACF;AAEA,SACE,6CAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,YAAY,UAAU,GAC5E;AAAA,gDAAC,gCAAM,SAAQ,SAAQ,mBAAK;AAAA,IAC5B;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH,MAAK;AAAA,QACL,MAAK;AAAA,QACL,OAAO;AAAA,QACP,UAAU,CAAC,MAAM;AACf,mBAAS,EAAE,OAAO,KAAK;AACvB,wBAAc,EAAE;AAAA,QAClB;AAAA;AAAA,IACF;AAAA,IACA,4CAAC,oBAAAA,SAAA,EAAgB,MAAM,YAAY;AAAA,IAEnC,4CAAC,gCAAM,SAAQ,YAAW,OAAO,EAAE,WAAW,OAAO,GAAG,sBAAQ;AAAA,IAChE;AAAA,MAAC,sBAAAC;AAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,MAAK;AAAA,QACL,OAAO;AAAA,QACP,UAAU,CAAC,MAAM;AACf,sBAAY,EAAE,OAAO,KAAK;AAC1B,2BAAiB,EAAE;AAAA,QACrB;AAAA;AAAA,IACF;AAAA,IACA,4CAAC,oBAAAD,SAAA,EAAgB,MAAM,eAAe;AAAA,IAEtC,4CAAC,+BAAK,MAAM,IAAI,KAAK,gBAAgB,MAAK,MAAK,OAAO,EAAE,WAAW,SAAS,GAAG,8BAE/E;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,WAAW,SAAS;AAAA,QAC7B,SAAS;AAAA,QACV;AAAA;AAAA,IAED;AAAA,KACF;AAEJ;","names":["FormWarningText","PasswordField"]}
+{"version":3,"sources":["../../src/components/credential-sign-in.tsx"],"sourcesContent":["'use client';\n\nimport { useForm } from \"react-hook-form\";\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport * as yup from \"yup\";\nimport FormWarningText from \"./form-warning\";\nimport PasswordField from \"./password-field\";\nimport { useStackApp } from \"..\";\nimport { Button, Input, Label, Link } from \"../components-core\";\nimport { runAsynchronously } from \"@stackframe/stack-shared/dist/utils/promises\";\n\nconst schema = yup.object().shape({\n  email: yup.string().email('Please enter a valid email').required('Please enter your email'),\n  password: yup.string().required('Please enter your password')\n});\n\nexport default function CredentialSignIn() {\n  const { register, handleSubmit, setError, formState: { errors }, clearErrors } = useForm({\n    resolver: yupResolver(schema)\n  });\n  const app = useStackApp();\n\n  const onSubmit = async (data: yup.InferType<typeof schema>) => {\n    const { email, password } = data;\n\n    const error = await app.signInWithCredential({ email, password });\n    setError('email', { type: 'manual', message: error?.message });\n  };\n\n  return (\n    <form \n      style={{ display: 'flex', flexDirection: 'column', alignItems: 'stretch' }} \n      onSubmit={e => runAsynchronously(handleSubmit(onSubmit)(e))}\n      noValidate\n    >\n      <Label htmlFor=\"email\">Email</Label>\n      <Input\n        id=\"email\"\n        type=\"email\"\n        {...register('email')}\n      />\n      <FormWarningText text={errors.email?.message?.toString()} />\n\n      <Label htmlFor=\"password\" style={{ marginTop: '1rem' }}>Password</Label>\n      <PasswordField\n        id=\"password\"\n        {...register('password')}\n      />\n      <FormWarningText text={errors.password?.message?.toString()} />\n\n      <Link href={app.urls.forgotPassword} size='sm' style={{ marginTop: '0.5rem' }}>\n        Forgot password?\n      </Link>\n\n      <Button type=\"submit\" style={{ marginTop: '1.5rem' }}>\n        Sign In\n      </Button>\n    </form>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,6BAAwB;AACxB,iBAA4B;AAC5B,UAAqB;AACrB,0BAA4B;AAC5B,4BAA0B;AAC1B,eAA4B;AAC5B,6BAA2C;AAC3C,sBAAkC;AAqB9B;AAnBJ,IAAM,SAAa,WAAO,EAAE,MAAM;AAAA,EAChC,OAAW,WAAO,EAAE,MAAM,4BAA4B,EAAE,SAAS,yBAAyB;AAAA,EAC1F,UAAc,WAAO,EAAE,SAAS,4BAA4B;AAC9D,CAAC;AAEc,SAAR,mBAAoC;AACzC,QAAM,EAAE,UAAU,cAAc,UAAU,WAAW,EAAE,OAAO,GAAG,YAAY,QAAI,gCAAQ;AAAA,IACvF,cAAU,wBAAY,MAAM;AAAA,EAC9B,CAAC;AACD,QAAM,UAAM,sBAAY;AAExB,QAAM,WAAW,OAAO,SAAuC;AAC7D,UAAM,EAAE,OAAO,SAAS,IAAI;AAE5B,UAAM,QAAQ,MAAM,IAAI,qBAAqB,EAAE,OAAO,SAAS,CAAC;AAChE,aAAS,SAAS,EAAE,MAAM,UAAU,SAAS,OAAO,QAAQ,CAAC;AAAA,EAC/D;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,YAAY,UAAU;AAAA,MACzE,UAAU,WAAK,mCAAkB,aAAa,QAAQ,EAAE,CAAC,CAAC;AAAA,MAC1D,YAAU;AAAA,MAEV;AAAA,oDAAC,gCAAM,SAAQ,SAAQ,mBAAK;AAAA,QAC5B;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,MAAK;AAAA,YACJ,GAAG,SAAS,OAAO;AAAA;AAAA,QACtB;AAAA,QACA,4CAAC,oBAAAA,SAAA,EAAgB,MAAM,OAAO,OAAO,SAAS,SAAS,GAAG;AAAA,QAE1D,4CAAC,gCAAM,SAAQ,YAAW,OAAO,EAAE,WAAW,OAAO,GAAG,sBAAQ;AAAA,QAChE;AAAA,UAAC,sBAAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACF,GAAG,SAAS,UAAU;AAAA;AAAA,QACzB;AAAA,QACA,4CAAC,oBAAAD,SAAA,EAAgB,MAAM,OAAO,UAAU,SAAS,SAAS,GAAG;AAAA,QAE7D,4CAAC,+BAAK,MAAM,IAAI,KAAK,gBAAgB,MAAK,MAAK,OAAO,EAAE,WAAW,SAAS,GAAG,8BAE/E;AAAA,QAEA,4CAAC,iCAAO,MAAK,UAAS,OAAO,EAAE,WAAW,SAAS,GAAG,qBAEtD;AAAA;AAAA;AAAA,EACF;AAEJ;","names":["FormWarningText","PasswordField"]}

package/dist/components/credential-sign-up.js

@@ -35,111 +35,87 @@ __export(credential_sign_up_exports, {
   default: () => CredentialSignUp
 });
 module.exports = __toCommonJS(credential_sign_up_exports);
-var import_react = require("react");
+var import_react_hook_form = require("react-hook-form");
+var import_yup = require("@hookform/resolvers/yup");
+var yup = __toESM(require("yup"));
 var import_password_field = __toESM(require("./password-field"));
 var import_form_warning = __toESM(require("./form-warning"));
-var import_email = require("../utils/email");
-var import_password = require("@stackframe/stack-shared/dist/helpers/password");
 var import__ = require("..");
 var import_components_core = require("../components-core");
-var import_stack_shared = require("@stackframe/stack-shared");
+var import_promises = require("@stackframe/stack-shared/dist/utils/promises");
+var import_password = require("@stackframe/stack-shared/dist/helpers/password");
 var import_jsx_runtime = require("react/jsx-runtime");
+var schema = yup.object().shape({
+  email: yup.string().email("Please enter a valid email").required("Please enter your email"),
+  password: yup.string().required("Please enter your password").test({
+    name: "is-valid-password",
+    test: (value, ctx) => {
+      const error = (0, import_password.getPasswordError)(value);
+      if (error) {
+        return ctx.createError({ message: error.message });
+      } else {
+        return true;
+      }
+    }
+  }),
+  passwordRepeat: yup.string().nullable().oneOf([yup.ref("password"), null], "Passwords do not match").required("Please repeat your password")
+});
 function CredentialSignUp() {
-  const [email, setEmail] = (0, import_react.useState)("");
-  const [emailError, setEmailError] = (0, import_react.useState)("");
-  const [password, setPassword] = (0, import_react.useState)("");
-  const [passwordError, setPasswordError] = (0, import_react.useState)("");
-  const [passwordRepeat, setPasswordRepeat] = (0, import_react.useState)("");
-  const [passwordRepeatError, setPasswordRepeatError] = (0, import_react.useState)("");
+  const { register, handleSubmit, setError, formState: { errors }, clearErrors } = (0, import_react_hook_form.useForm)({
+    resolver: (0, import_yup.yupResolver)(schema)
+  });
   const app = (0, import__.useStackApp)();
-  const onSubmit = async () => {
-    if (!email) {
-      setEmailError("Please enter your email");
-      return;
-    }
-    if (!(0, import_email.validateEmail)(email)) {
-      setEmailError("Please enter a valid email");
-      return;
-    }
-    if (!password) {
-      setPasswordError("Please enter your password");
-      return;
-    }
-    if (!passwordRepeat) {
-      setPasswordRepeatError("Please repeat your password");
-      return;
-    }
-    if (password !== passwordRepeat) {
-      setPasswordRepeatError("Passwords do not match");
-      return;
-    }
-    const passwordError2 = (0, import_password.getPasswordError)(password);
-    if (passwordError2) {
-      setPasswordError(passwordError2.message);
-      return;
-    }
-    let error;
-    error = await app.signUpWithCredential({ email, password });
-    if (error instanceof import_stack_shared.KnownErrors.UserEmailAlreadyExists) {
-      setEmailError("User already exists");
-    } else if (error) {
-      setEmailError(`An error occurred. ${error.message}`);
-    }
+  const onSubmit = async (data) => {
+    const { email, password } = data;
+    const error = await app.signUpWithCredential({ email, password });
+    setError("email", { type: "manual", message: error?.message });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "stretch" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Label, { htmlFor: "email", children: "Email" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_components_core.Input,
-      {
-        id: "email",
-        type: "email",
-        name: "email",
-        value: email,
-        onChange: (e) => {
-          setEmail(e.target.value);
-          setEmailError("");
-        }
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.default, { text: emailError }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Label, { htmlFor: "password", style: { marginTop: "1rem" }, children: "Password" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_password_field.default,
-      {
-        id: "password",
-        name: "password",
-        value: password,
-        onChange: (e) => {
-          setPassword(e.target.value);
-          setPasswordError("");
-          setPasswordRepeatError("");
-        }
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.default, { text: passwordError }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Label, { htmlFor: "repeat-password", style: { marginTop: "1rem" }, children: "Repeat Password" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_password_field.default,
-      {
-        id: "repeat-password",
-        name: "repeat-password",
-        value: passwordRepeat,
-        onChange: (e) => {
-          setPasswordRepeat(e.target.value);
-          setPasswordError("");
-          setPasswordRepeatError("");
-        }
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.default, { text: passwordRepeatError }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_components_core.Button,
-      {
-        style: { marginTop: "1.5rem" },
-        onClick: onSubmit,
-        children: "Sign Up"
-      }
-    )
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "form",
+    {
+      style: { display: "flex", flexDirection: "column", alignItems: "stretch" },
+      onSubmit: (e) => (0, import_promises.runAsynchronously)(handleSubmit(onSubmit)(e)),
+      noValidate: true,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Label, { htmlFor: "email", children: "Email" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components_core.Input,
+          {
+            id: "email",
+            type: "email",
+            ...register("email")
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.default, { text: errors.email?.message?.toString() }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Label, { htmlFor: "password", style: { marginTop: "1rem" }, children: "Password" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_password_field.default,
+          {
+            id: "password",
+            ...register("password"),
+            onChange: (e) => {
+              clearErrors("password");
+              clearErrors("passwordRepeat");
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.default, { text: errors.password?.message?.toString() }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Label, { htmlFor: "repeat-password", style: { marginTop: "1rem" }, children: "Repeat Password" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_password_field.default,
+          {
+            id: "repeat-password",
+            ...register("passwordRepeat"),
+            onChange: (e) => {
+              clearErrors("password");
+              clearErrors("passwordRepeat");
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.default, { text: errors.passwordRepeat?.message?.toString() }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Button, { type: "submit", style: { marginTop: "1.5rem" }, children: "Sign Up" })
+      ]
+    }
+  );
 }
 //# sourceMappingURL=credential-sign-up.js.map

package/dist/components/credential-sign-up.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/credential-sign-up.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from \"react\";\nimport PasswordField from \"./password-field\";\nimport FormWarningText from \"./form-warning\";\nimport { validateEmail } from \"../utils/email\";\nimport { getPasswordError } from \"@stackframe/stack-shared/dist/helpers/password\";\nimport { useStackApp } from \"..\";\nimport { Label, Input, Button } from \"../components-core\";\nimport { KnownErrors } from \"@stackframe/stack-shared\";\n\nexport default function CredentialSignUp() {\n  const [email, setEmail] = useState('');\n  const [emailError, setEmailError] = useState('');\n  const [password, setPassword] = useState('');\n  const [passwordError, setPasswordError] = useState('');\n  const [passwordRepeat, setPasswordRepeat] = useState('');\n  const [passwordRepeatError, setPasswordRepeatError] = useState('');\n  const app = useStackApp();\n\n  const onSubmit = async () => {\n    if (!email) {\n      setEmailError('Please enter your email');\n      return;\n    }\n    if (!validateEmail(email)) {\n      setEmailError('Please enter a valid email');\n      return;\n    }\n    if (!password) {\n      setPasswordError('Please enter your password');\n      return;\n    }\n    if (!passwordRepeat) {\n      setPasswordRepeatError('Please repeat your password');\n      return;\n    }\n    if (password !== passwordRepeat) {\n      setPasswordRepeatError('Passwords do not match');\n      return;\n    }\n\n    const passwordError = getPasswordError(password);\n    if (passwordError) {\n      setPasswordError(passwordError.message);\n      return;\n    }\n\n    let error;\n    error = await app.signUpWithCredential({ email, password });\n    \n    if (error instanceof KnownErrors.UserEmailAlreadyExists) {\n      setEmailError('User already exists');\n    } else if (error) {\n      setEmailError(`An error occurred. ${error.message}`);\n    }\n  };\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'stretch' }}>\n      <Label htmlFor=\"email\">Email</Label>\n      <Input\n        id=\"email\"\n        type=\"email\"\n        name=\"email\"\n        value={email}\n        onChange={(e) => {\n          setEmail(e.target.value);\n          setEmailError('');\n        }}\n      />\n      <FormWarningText text={emailError} />\n\n      <Label htmlFor=\"password\" style={{ marginTop: '1rem' }}>Password</Label>\n      <PasswordField\n        id=\"password\"\n        name=\"password\"\n        value={password}\n        onChange={(e) => {\n          setPassword(e.target.value);\n          setPasswordError('');\n          setPasswordRepeatError('');\n        }}\n      />\n      <FormWarningText text={passwordError} />\n        \n      <Label htmlFor=\"repeat-password\" style={{ marginTop: '1rem' }}>Repeat Password</Label>\n      <PasswordField\n        id=\"repeat-password\"\n        name=\"repeat-password\"\n        value={passwordRepeat}\n        onChange={(e) => {\n          setPasswordRepeat(e.target.value);\n          setPasswordError('');\n          setPasswordRepeatError('');\n        }}\n      />\n      <FormWarningText text={passwordRepeatError} />\n\n      <Button \n        style={{ marginTop: '1.5rem' }}\n        onClick={onSubmit}\n      >\n          Sign Up\n      </Button>\n    </div>\n  );\n}\n"],"mappings":"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","names":["passwordError","FormWarningText","PasswordField"]}
+{"version":3,"sources":["../../src/components/credential-sign-up.tsx"],"sourcesContent":["'use client';\n\nimport { useForm } from \"react-hook-form\";\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport * as yup from \"yup\";\nimport PasswordField from \"./password-field\";\nimport FormWarningText from \"./form-warning\";\nimport { useStackApp } from \"..\";\nimport { Label, Input, Button } from \"../components-core\";\nimport { runAsynchronously } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { getPasswordError } from \"@stackframe/stack-shared/dist/helpers/password\";\n\nconst schema = yup.object().shape({\n  email: yup.string().email('Please enter a valid email').required('Please enter your email'),\n  password: yup.string().required('Please enter your password').test({\n    name: 'is-valid-password',\n    test: (value, ctx) => {\n      const error = getPasswordError(value);\n      if (error) {\n        return ctx.createError({ message: error.message });\n      } else {\n        return true;\n      }\n    }\n  }),\n  passwordRepeat: yup.string().nullable().oneOf([yup.ref('password'), null], 'Passwords do not match').required('Please repeat your password')\n});\n\nexport default function CredentialSignUp() {\n  const { register, handleSubmit, setError, formState: { errors }, clearErrors } = useForm({\n    resolver: yupResolver(schema)\n  });\n  const app = useStackApp();\n\n  const onSubmit = async (data: yup.InferType<typeof schema>) => {\n    const { email, password } = data;\n    const error = await app.signUpWithCredential({ email, password });\n    setError('email', { type: 'manual', message: error?.message });\n  };\n\n  return (\n    <form \n      style={{ display: 'flex', flexDirection: 'column', alignItems: 'stretch' }} \n      onSubmit={e => runAsynchronously(handleSubmit(onSubmit)(e))}\n      noValidate\n    >\n      <Label htmlFor=\"email\">Email</Label>\n      <Input\n        id=\"email\"\n        type=\"email\"\n        {...register('email')}\n      />\n      <FormWarningText text={errors.email?.message?.toString()} />\n\n      <Label htmlFor=\"password\" style={{ marginTop: '1rem' }}>Password</Label>\n      <PasswordField\n        id=\"password\"\n        {...register('password')}\n        onChange={(e) => {\n          clearErrors('password');\n          clearErrors('passwordRepeat');\n        }}\n      />\n      <FormWarningText text={errors.password?.message?.toString()} />\n        \n      <Label htmlFor=\"repeat-password\" style={{ marginTop: '1rem' }}>Repeat Password</Label>\n      <PasswordField\n        id=\"repeat-password\"\n        {...register('passwordRepeat')}\n        onChange={(e) => {\n          clearErrors('password');\n          clearErrors('passwordRepeat');\n        }}\n      />\n      <FormWarningText text={errors.passwordRepeat?.message?.toString()} />\n\n      <Button type=\"submit\" style={{ marginTop: '1.5rem' }}>\n        Sign Up\n      </Button>\n    </form>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,6BAAwB;AACxB,iBAA4B;AAC5B,UAAqB;AACrB,4BAA0B;AAC1B,0BAA4B;AAC5B,eAA4B;AAC5B,6BAAqC;AACrC,sBAAkC;AAClC,sBAAiC;AA+B7B;AA7BJ,IAAM,SAAa,WAAO,EAAE,MAAM;AAAA,EAChC,OAAW,WAAO,EAAE,MAAM,4BAA4B,EAAE,SAAS,yBAAyB;AAAA,EAC1F,UAAc,WAAO,EAAE,SAAS,4BAA4B,EAAE,KAAK;AAAA,IACjE,MAAM;AAAA,IACN,MAAM,CAAC,OAAO,QAAQ;AACpB,YAAM,YAAQ,kCAAiB,KAAK;AACpC,UAAI,OAAO;AACT,eAAO,IAAI,YAAY,EAAE,SAAS,MAAM,QAAQ,CAAC;AAAA,MACnD,OAAO;AACL,eAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF,CAAC;AAAA,EACD,gBAAoB,WAAO,EAAE,SAAS,EAAE,MAAM,CAAK,QAAI,UAAU,GAAG,IAAI,GAAG,wBAAwB,EAAE,SAAS,6BAA6B;AAC7I,CAAC;AAEc,SAAR,mBAAoC;AACzC,QAAM,EAAE,UAAU,cAAc,UAAU,WAAW,EAAE,OAAO,GAAG,YAAY,QAAI,gCAAQ;AAAA,IACvF,cAAU,wBAAY,MAAM;AAAA,EAC9B,CAAC;AACD,QAAM,UAAM,sBAAY;AAExB,QAAM,WAAW,OAAO,SAAuC;AAC7D,UAAM,EAAE,OAAO,SAAS,IAAI;AAC5B,UAAM,QAAQ,MAAM,IAAI,qBAAqB,EAAE,OAAO,SAAS,CAAC;AAChE,aAAS,SAAS,EAAE,MAAM,UAAU,SAAS,OAAO,QAAQ,CAAC;AAAA,EAC/D;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,YAAY,UAAU;AAAA,MACzE,UAAU,WAAK,mCAAkB,aAAa,QAAQ,EAAE,CAAC,CAAC;AAAA,MAC1D,YAAU;AAAA,MAEV;AAAA,oDAAC,gCAAM,SAAQ,SAAQ,mBAAK;AAAA,QAC5B;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,MAAK;AAAA,YACJ,GAAG,SAAS,OAAO;AAAA;AAAA,QACtB;AAAA,QACA,4CAAC,oBAAAA,SAAA,EAAgB,MAAM,OAAO,OAAO,SAAS,SAAS,GAAG;AAAA,QAE1D,4CAAC,gCAAM,SAAQ,YAAW,OAAO,EAAE,WAAW,OAAO,GAAG,sBAAQ;AAAA,QAChE;AAAA,UAAC,sBAAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACF,GAAG,SAAS,UAAU;AAAA,YACvB,UAAU,CAAC,MAAM;AACf,0BAAY,UAAU;AACtB,0BAAY,gBAAgB;AAAA,YAC9B;AAAA;AAAA,QACF;AAAA,QACA,4CAAC,oBAAAD,SAAA,EAAgB,MAAM,OAAO,UAAU,SAAS,SAAS,GAAG;AAAA,QAE7D,4CAAC,gCAAM,SAAQ,mBAAkB,OAAO,EAAE,WAAW,OAAO,GAAG,6BAAe;AAAA,QAC9E;AAAA,UAAC,sBAAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACF,GAAG,SAAS,gBAAgB;AAAA,YAC7B,UAAU,CAAC,MAAM;AACf,0BAAY,UAAU;AACtB,0BAAY,gBAAgB;AAAA,YAC9B;AAAA;AAAA,QACF;AAAA,QACA,4CAAC,oBAAAD,SAAA,EAAgB,MAAM,OAAO,gBAAgB,SAAS,SAAS,GAAG;AAAA,QAEnE,4CAAC,iCAAO,MAAK,UAAS,OAAO,EAAE,WAAW,SAAS,GAAG,qBAEtD;AAAA;AAAA;AAAA,EACF;AAEJ;","names":["FormWarningText","PasswordField"]}

package/dist/components/forgot-password.js

@@ -35,52 +35,55 @@ __export(forgot_password_exports, {
   default: () => ForgotPassword
 });
 module.exports = __toCommonJS(forgot_password_exports);
-var import_react = require("react");
+var import_react_hook_form = require("react-hook-form");
+var import_yup = require("@hookform/resolvers/yup");
+var yup = __toESM(require("yup"));
 var import_form_warning = __toESM(require("./form-warning"));
-var import_email = require("../utils/email");
 var import__ = require("..");
 var import_components_core = require("../components-core");
+var import_promises = require("@stackframe/stack-shared/dist/utils/promises");
 var import_jsx_runtime = require("react/jsx-runtime");
+var schema = yup.object().shape({
+  email: yup.string().email("Please enter a valid email").required("Please enter your email")
+});
 function ForgotPassword({ onSent }) {
-  const [email, setEmail] = (0, import_react.useState)("");
-  const [emailError, setEmailError] = (0, import_react.useState)("");
+  const { register, handleSubmit, formState: { errors }, clearErrors } = (0, import_react_hook_form.useForm)({
+    resolver: (0, import_yup.yupResolver)(schema)
+  });
   const stackApp = (0, import__.useStackApp)();
-  const onSubmit = async () => {
-    if (!email) {
-      setEmailError("Please enter your email");
-      return;
-    }
-    if (!(0, import_email.validateEmail)(email)) {
-      setEmailError("Please enter a valid email");
-      return;
-    }
+  const onSubmit = async (data) => {
+    const { email } = data;
     await stackApp.sendForgotPasswordEmail(email);
     onSent?.();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "stretch" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Label, { htmlFor: "email", children: "Your Email" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_components_core.Input,
-      {
-        id: "email",
-        type: "email",
-        name: "email",
-        value: email,
-        onChange: (e) => {
-          setEmail(e.target.value);
-          setEmailError("");
-        }
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.default, { text: emailError }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_components_core.Button,
-      {
-        style: { marginTop: "1.5rem" },
-        onClick: onSubmit,
-        children: "Send Email"
-      }
-    )
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "form",
+    {
+      style: { display: "flex", flexDirection: "column", alignItems: "stretch" },
+      onSubmit: (e) => (0, import_promises.runAsynchronously)(handleSubmit(onSubmit)(e)),
+      noValidate: true,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Label, { htmlFor: "email", children: "Your Email" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components_core.Input,
+          {
+            id: "email",
+            type: "email",
+            ...register("email"),
+            onChange: () => clearErrors("email")
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.default, { text: errors.email?.message?.toString() }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components_core.Button,
+          {
+            type: "submit",
+            style: { marginTop: "1.5rem" },
+            children: "Send Email"
+          }
+        )
+      ]
+    }
+  );
 }
 //# sourceMappingURL=forgot-password.js.map

package/dist/components/forgot-password.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/forgot-password.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from \"react\";\nimport FormWarningText from \"./form-warning\";\nimport { validateEmail } from \"../utils/email\";\nimport { useStackApp } from \"..\";\nimport { Button, Input, Label } from \"../components-core\";\n\n\nexport default function ForgotPassword({ onSent }: { onSent?: () => void }) {\n  const [email, setEmail] = useState('');\n  const [emailError, setEmailError] = useState('');\n  const stackApp = useStackApp();\n  \n  const onSubmit = async () => {\n    if (!email) {\n      setEmailError('Please enter your email');\n      return;\n    }\n    if (!validateEmail(email)) {\n      setEmailError('Please enter a valid email');\n      return;\n    }\n    await stackApp.sendForgotPasswordEmail(email);\n\n    onSent?.();\n  };\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'stretch' }}>\n      <Label htmlFor=\"email\">Your Email</Label>\n      <Input\n        id=\"email\"\n        type=\"email\"\n        name=\"email\"\n        value={email}\n        onChange={(e) => {\n          setEmail(e.target.value);\n          setEmailError('');\n        }}\n      />\n      <FormWarningText text={emailError} />\n\n      <Button\n        style={{ marginTop: '1.5rem'}}\n        onClick={onSubmit}\n      >\n          Send Email\n      </Button>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAyB;AACzB,0BAA4B;AAC5B,mBAA8B;AAC9B,eAA4B;AAC5B,6BAAqC;AAuBjC;AApBW,SAAR,eAAgC,EAAE,OAAO,GAA4B;AAC1E,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,EAAE;AACrC,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,EAAE;AAC/C,QAAM,eAAW,sBAAY;AAE7B,QAAM,WAAW,YAAY;AAC3B,QAAI,CAAC,OAAO;AACV,oBAAc,yBAAyB;AACvC;AAAA,IACF;AACA,QAAI,KAAC,4BAAc,KAAK,GAAG;AACzB,oBAAc,4BAA4B;AAC1C;AAAA,IACF;AACA,UAAM,SAAS,wBAAwB,KAAK;AAE5C,aAAS;AAAA,EACX;AAEA,SACE,6CAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,YAAY,UAAU,GAC5E;AAAA,gDAAC,gCAAM,SAAQ,SAAQ,wBAAU;AAAA,IACjC;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH,MAAK;AAAA,QACL,MAAK;AAAA,QACL,OAAO;AAAA,QACP,UAAU,CAAC,MAAM;AACf,mBAAS,EAAE,OAAO,KAAK;AACvB,wBAAc,EAAE;AAAA,QAClB;AAAA;AAAA,IACF;AAAA,IACA,4CAAC,oBAAAA,SAAA,EAAgB,MAAM,YAAY;AAAA,IAEnC;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,WAAW,SAAQ;AAAA,QAC5B,SAAS;AAAA,QACV;AAAA;AAAA,IAED;AAAA,KACF;AAEJ;","names":["FormWarningText"]}
+{"version":3,"sources":["../../src/components/forgot-password.tsx"],"sourcesContent":["'use client';\n\nimport { useForm } from \"react-hook-form\";\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport * as yup from \"yup\";\nimport FormWarningText from \"./form-warning\";\nimport { useStackApp } from \"..\";\nimport { Button, Input, Label } from \"../components-core\";\nimport { runAsynchronously } from \"@stackframe/stack-shared/dist/utils/promises\";\n\nconst schema = yup.object().shape({\n  email: yup.string().email('Please enter a valid email').required('Please enter your email')\n});\n\nexport default function ForgotPassword({ onSent }: { onSent?: () => void }) {\n  const { register, handleSubmit, formState: { errors }, clearErrors } = useForm({\n    resolver: yupResolver(schema)\n  });\n  const stackApp = useStackApp();\n\n  const onSubmit = async (data: yup.InferType<typeof schema>) => {\n    const { email } = data;\n    await stackApp.sendForgotPasswordEmail(email);\n    onSent?.();\n  };\n\n  return (\n    <form\n      style={{ display: 'flex', flexDirection: 'column', alignItems: 'stretch' }}       \n      onSubmit={e => runAsynchronously(handleSubmit(onSubmit)(e))}\n      noValidate\n    >\n      <Label htmlFor=\"email\">Your Email</Label>\n      <Input\n        id=\"email\"\n        type=\"email\"\n        {...register('email')}\n        onChange={() => clearErrors('email')}\n      />\n      <FormWarningText text={errors.email?.message?.toString()} />\n\n      <Button\n        type=\"submit\"\n        style={{ marginTop: '1.5rem' }}\n      >\n        Send Email\n      </Button>\n    </form>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,6BAAwB;AACxB,iBAA4B;AAC5B,UAAqB;AACrB,0BAA4B;AAC5B,eAA4B;AAC5B,6BAAqC;AACrC,sBAAkC;AAmB9B;AAjBJ,IAAM,SAAa,WAAO,EAAE,MAAM;AAAA,EAChC,OAAW,WAAO,EAAE,MAAM,4BAA4B,EAAE,SAAS,yBAAyB;AAC5F,CAAC;AAEc,SAAR,eAAgC,EAAE,OAAO,GAA4B;AAC1E,QAAM,EAAE,UAAU,cAAc,WAAW,EAAE,OAAO,GAAG,YAAY,QAAI,gCAAQ;AAAA,IAC7E,cAAU,wBAAY,MAAM;AAAA,EAC9B,CAAC;AACD,QAAM,eAAW,sBAAY;AAE7B,QAAM,WAAW,OAAO,SAAuC;AAC7D,UAAM,EAAE,MAAM,IAAI;AAClB,UAAM,SAAS,wBAAwB,KAAK;AAC5C,aAAS;AAAA,EACX;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,YAAY,UAAU;AAAA,MACzE,UAAU,WAAK,mCAAkB,aAAa,QAAQ,EAAE,CAAC,CAAC;AAAA,MAC1D,YAAU;AAAA,MAEV;AAAA,oDAAC,gCAAM,SAAQ,SAAQ,wBAAU;AAAA,QACjC;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,MAAK;AAAA,YACJ,GAAG,SAAS,OAAO;AAAA,YACpB,UAAU,MAAM,YAAY,OAAO;AAAA;AAAA,QACrC;AAAA,QACA,4CAAC,oBAAAA,SAAA,EAAgB,MAAM,OAAO,OAAO,SAAS,SAAS,GAAG;AAAA,QAE1D;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,OAAO,EAAE,WAAW,SAAS;AAAA,YAC9B;AAAA;AAAA,QAED;AAAA;AAAA;AAAA,EACF;AAEJ;","names":["FormWarningText"]}

package/dist/components/magic-link-sign-in.js

@@ -36,57 +36,53 @@ __export(magic_link_sign_in_exports, {
 });
 module.exports = __toCommonJS(magic_link_sign_in_exports);
 var import_react = require("react");
+var import_react_hook_form = require("react-hook-form");
+var import_yup = require("@hookform/resolvers/yup");
+var yup = __toESM(require("yup"));
 var import_form_warning = __toESM(require("./form-warning"));
-var import_email = require("../utils/email");
 var import__ = require("..");
 var import_components_core = require("../components-core");
+var import_promises = require("@stackframe/stack-shared/dist/utils/promises");
 var import_jsx_runtime = require("react/jsx-runtime");
+var schema = yup.object().shape({
+  email: yup.string().email("Please enter a valid email").required("Please enter your email")
+});
 function MagicLinkSignIn() {
-  const [email, setEmail] = (0, import_react.useState)("");
+  const { register, handleSubmit, setError, formState: { errors }, clearErrors } = (0, import_react_hook_form.useForm)({
+    resolver: (0, import_yup.yupResolver)(schema)
+  });
   const [sent, setSent] = (0, import_react.useState)(false);
-  const [error, setError] = (0, import_react.useState)("");
   const app = (0, import__.useStackApp)();
-  const onSubmit = async () => {
-    if (!email) {
-      setError("Please enter your email");
-      return;
-    }
-    if (!(0, import_email.validateEmail)(email)) {
-      setError("Please enter a valid email");
-      return;
-    }
-    const error2 = await app.sendMagicLinkEmail(email);
-    if (error2) {
-      setError(error2.message);
+  const onSubmit = async (data) => {
+    const { email } = data;
+    const error = await app.sendMagicLinkEmail(email);
+    if (error) {
+      setError("email", { type: "manual", message: error.message });
       return;
     }
     setSent(true);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "stretch" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Label, { htmlFor: "email", children: "Email" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_components_core.Input,
-      {
-        id: "email",
-        type: "email",
-        name: "email",
-        value: email,
-        onChange: (e) => {
-          setEmail(e.target.value);
-          setError("");
-        }
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.default, { text: error }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_components_core.Button,
-      {
-        disabled: sent,
-        style: { marginTop: "1.5rem" },
-        onClick: onSubmit,
-        children: sent ? "Email sent" : "Send magic link"
-      }
-    )
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "form",
+    {
+      style: { display: "flex", flexDirection: "column", alignItems: "stretch" },
+      onSubmit: (e) => (0, import_promises.runAsynchronously)(handleSubmit(onSubmit)(e)),
+      noValidate: true,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Label, { htmlFor: "email", children: "Email" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components_core.Input,
+          {
+            id: "email",
+            type: "email",
+            ...register("email"),
+            disabled: sent
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.default, { text: errors.email?.message?.toString() }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Button, { disabled: sent, style: { marginTop: "1.5rem" }, type: "submit", children: sent ? "Email sent" : "Send magic link" })
+      ]
+    }
+  );
 }
 //# sourceMappingURL=magic-link-sign-in.js.map