@stackframe/stack 2.6.11 → 2.6.12

package/dist/esm/components-page/account-settings.js

@@ -9,7 +9,7 @@ import { yupObject, yupString } from "@stackframe/stack-shared/dist/schema-field
 import { generateRandomValues } from "@stackframe/stack-shared/dist/utils/crypto";
 import { throwErr } from "@stackframe/stack-shared/dist/utils/errors";
 import { runAsynchronously, runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Button, Input, Label, PasswordInput, Separator, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Typography } from "@stackframe/stack-ui";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActionCell, Badge, Button, Input, Label, PasswordInput, Separator, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Typography } from "@stackframe/stack-ui";
 import { CirclePlus, Contact, Edit, Settings, ShieldCheck } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { TOTPController, createTOTPKeyURI } from "oslo/otp";
@@ -44,11 +44,11 @@ function AccountSettings(props) {
           content: /* @__PURE__ */ jsx(ProfilePage, {})
         },
         {
-          title: t("Security"),
+          title: t("Emails & Auth"),
           type: "item",
-          id: "security",
+          id: "auth",
           icon: ShieldCheck,
-          content: /* @__PURE__ */ jsx(SecurityPage, {})
+          content: /* @__PURE__ */ jsx(EmailsAndAuthPage, {})
         },
         {
           title: t("Settings"),
@@ -145,54 +145,227 @@ function ProfilePage() {
     )
   ] });
 }
-function SecurityPage() {
-  const emailVerificationSection = useEmailVerificationSection();
+function EmailsSection() {
+  const { t } = useTranslation();
+  const user = useUser({ or: "redirect" });
+  const contactChannels = user.useContactChannels();
+  const [addingEmail, setAddingEmail] = useState(contactChannels.length === 0);
+  const [addingEmailLoading, setAddingEmailLoading] = useState(false);
+  const [addedEmail, setAddedEmail] = useState(null);
+  const isLastEmail = contactChannels.filter((x) => x.usedForAuth && x.type === "email").length === 1;
+  useEffect(() => {
+    if (addedEmail) {
+      runAsynchronously(async () => {
+        const cc = contactChannels.find((x) => x.value === addedEmail);
+        if (cc && !cc.isVerified) {
+          await cc.sendVerificationEmail();
+        }
+        setAddedEmail(null);
+      });
+    }
+  }, [contactChannels, addedEmail]);
+  const emailSchema = yupObject({
+    email: yupString().email(t("Please enter a valid email address")).notOneOf(contactChannels.map((x) => x.value), t("Email already exists")).required(t("Email is required"))
+  });
+  const { register, handleSubmit, formState: { errors }, reset } = useForm({
+    resolver: yupResolver(emailSchema)
+  });
+  const onSubmit = async (data) => {
+    setAddingEmailLoading(true);
+    try {
+      await user.createContactChannel({ type: "email", value: data.email, usedForAuth: false });
+      setAddedEmail(data.email);
+    } finally {
+      setAddingEmailLoading(false);
+    }
+    setAddingEmail(false);
+    reset();
+  };
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:flex-row justify-between mb-4 gap-4", children: [
+      /* @__PURE__ */ jsx(Typography, { className: "font-medium", children: t("Emails") }),
+      addingEmail ? /* @__PURE__ */ jsxs(
+        "form",
+        {
+          onSubmit: (e) => {
+            e.preventDefault();
+            runAsynchronously(handleSubmit(onSubmit));
+          },
+          className: "flex flex-col",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  ...register("email"),
+                  placeholder: t("Enter email")
+                }
+              ),
+              /* @__PURE__ */ jsx(Button, { type: "submit", loading: addingEmailLoading, children: t("Add") }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "secondary",
+                  onClick: () => {
+                    setAddingEmail(false);
+                    reset();
+                  },
+                  children: t("Cancel")
+                }
+              )
+            ] }),
+            errors.email && /* @__PURE__ */ jsx(FormWarningText, { text: errors.email.message })
+          ]
+        }
+      ) : /* @__PURE__ */ jsx("div", { className: "flex md:justify-end", children: /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => setAddingEmail(true), children: t("Add an email") }) })
+    ] }),
+    contactChannels.length > 0 ? /* @__PURE__ */ jsx("div", { className: "border rounded-md", children: /* @__PURE__ */ jsx(Table, { children: /* @__PURE__ */ jsx(TableBody, { children: contactChannels.filter((x) => x.type === "email").sort((a, b) => {
+      if (a.isPrimary !== b.isPrimary) return a.isPrimary ? -1 : 1;
+      if (a.isVerified !== b.isVerified) return a.isVerified ? -1 : 1;
+      return 0;
+    }).map((x) => /* @__PURE__ */ jsxs(TableRow, { children: [
+      /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:flex-row gap-2 md:gap-4", children: [
+        x.value,
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          x.isPrimary ? /* @__PURE__ */ jsx(Badge, { children: t("Primary") }) : null,
+          !x.isVerified ? /* @__PURE__ */ jsx(Badge, { variant: "destructive", children: t("Unverified") }) : null,
+          x.usedForAuth ? /* @__PURE__ */ jsx(Badge, { variant: "outline", children: t("Used for sign-in") }) : null
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx(TableCell, { className: "flex justify-end", children: /* @__PURE__ */ jsx(ActionCell, { items: [
+        ...!x.isVerified ? [{
+          item: t("Send verification email"),
+          onClick: async () => {
+            await x.sendVerificationEmail();
+          }
+        }] : [],
+        ...!x.isPrimary && x.isVerified ? [{
+          item: t("Set as primary"),
+          onClick: async () => {
+            await x.update({ isPrimary: true });
+          }
+        }] : !x.isPrimary ? [{
+          item: t("Set as primary"),
+          onClick: async () => {
+          },
+          disabled: true,
+          disabledTooltip: t("Please verify your email first")
+        }] : [],
+        ...!x.usedForAuth && x.isVerified ? [{
+          item: t("Use for sign-in"),
+          onClick: async () => {
+            await x.update({ usedForAuth: true });
+          }
+        }] : [],
+        ...x.usedForAuth && !isLastEmail ? [{
+          item: t("Stop using for sign-in"),
+          onClick: async () => {
+            await x.update({ usedForAuth: false });
+          }
+        }] : x.usedForAuth ? [{
+          item: t("Stop using for sign-in"),
+          onClick: async () => {
+          },
+          disabled: true,
+          disabledTooltip: t("You can not remove your last sign-in email")
+        }] : [],
+        ...!isLastEmail || !x.usedForAuth ? [{
+          item: t("Remove"),
+          onClick: async () => {
+            await x.delete();
+          },
+          danger: true
+        }] : [{
+          item: t("Remove"),
+          onClick: async () => {
+          },
+          disabled: true,
+          disabledTooltip: t("You can not remove your last sign-in email")
+        }]
+      ] }) })
+    ] }, x.id)) }) }) }) : null
+  ] });
+}
+function EmailsAndAuthPage() {
   const passwordSection = usePasswordSection();
   const mfaSection = useMfaSection();
+  const otpSection = useOtpSection();
   return /* @__PURE__ */ jsxs(PageLayout, { children: [
-    emailVerificationSection,
+    /* @__PURE__ */ jsx(EmailsSection, {}),
     passwordSection,
+    otpSection,
     mfaSection
   ] });
 }
-function SettingsPage() {
-  const deleteAccountSection = useDeleteAccountSection();
-  const signOutSection = useSignOutSection();
-  return /* @__PURE__ */ jsxs(PageLayout, { children: [
-    deleteAccountSection,
-    signOutSection
-  ] });
-}
-function useEmailVerificationSection() {
+function useOtpSection() {
   const { t } = useTranslation();
-  const user = useUser({ or: "redirect" });
-  const [emailSent, setEmailSent] = useState(false);
-  if (!user.primaryEmail) {
+  const user = useUser({ or: "throw" });
+  const project = useStackApp().useProject();
+  const contactChannels = user.useContactChannels();
+  const isLastAuth = user.otpAuthEnabled && !user.hasPassword && user.oauthProviders.length === 0;
+  const [disabling, setDisabling] = useState(false);
+  const hasValidEmail = contactChannels.filter((x) => x.type === "email" && x.isVerified && x.usedForAuth).length > 0;
+  if (!project.config.magicLinkEnabled) {
     return null;
   }
-  return /* @__PURE__ */ jsx(
-    Section,
+  const handleDisableOTP = async () => {
+    await user.update({ otpAuthEnabled: false });
+    setDisabling(false);
+  };
+  return /* @__PURE__ */ jsx(Section, { title: t("OTP sign-in"), description: user.otpAuthEnabled ? t("OTP/magic link sign-in is currently enabled.") : t("Enable sign-in via magic link or OTP sent to your sign-in emails."), children: /* @__PURE__ */ jsx("div", { className: "flex md:justify-end", children: hasValidEmail ? user.otpAuthEnabled ? !isLastAuth ? !disabling ? /* @__PURE__ */ jsx(
+    Button,
     {
-      title: t("Email Verification"),
-      description: t("Verify your email address to secure your account"),
-      children: /* @__PURE__ */ jsx("div", { children: user.primaryEmailVerified ? /* @__PURE__ */ jsx(Typography, { variant: "success", children: t("Your email has been verified.") }) : /* @__PURE__ */ jsx("div", { className: "flex", children: /* @__PURE__ */ jsx(
+      variant: "secondary",
+      onClick: () => setDisabling(true),
+      children: t("Disable OTP")
+    }
+  ) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "destructive", children: t("Are you sure you want to disable OTP sign-in? You will not be able to sign in with only emails anymore.") }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsx(
         Button,
         {
-          disabled: emailSent,
-          onClick: async () => {
-            await user.sendVerificationEmail();
-            setEmailSent(true);
-          },
-          children: emailSent ? t("Email sent!") : t("Send Verification Email")
+          variant: "destructive",
+          onClick: handleDisableOTP,
+          children: t("Disable")
         }
-      ) }) })
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "secondary",
+          onClick: () => setDisabling(false),
+          children: t("Cancel")
+        }
+      )
+    ] })
+  ] }) : /* @__PURE__ */ jsx(Typography, { variant: "secondary", type: "label", children: t("OTP sign-in is enabled and cannot be disabled as it is currently the only sign-in method") }) : /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "secondary",
+      onClick: async () => {
+        await user.update({ otpAuthEnabled: true });
+      },
+      children: t("Enable OTP")
     }
-  );
+  ) : /* @__PURE__ */ jsx(Typography, { variant: "secondary", type: "label", children: t("To enable OTP sign-in, please add a verified email and set it as your sign-in email.") }) }) });
+}
+function SettingsPage() {
+  const deleteAccountSection = useDeleteAccountSection();
+  const signOutSection = useSignOutSection();
+  return /* @__PURE__ */ jsxs(PageLayout, { children: [
+    deleteAccountSection,
+    signOutSection
+  ] });
 }
 function usePasswordSection() {
   const { t } = useTranslation();
+  const user = useUser({ or: "throw" });
+  const contactChannels = user.useContactChannels();
+  const [changingPassword, setChangingPassword] = useState(false);
+  const [loading, setLoading] = useState(false);
   const passwordSchema = yupObject({
-    oldPassword: yupString().required(t("Please enter your old password")),
+    oldPassword: user.hasPassword ? yupString().required(t("Please enter your old password")) : yupString(),
     newPassword: yupString().required(t("Please enter your password")).test({
       name: "is-valid-password",
       test: (value, ctx) => {
@@ -206,23 +379,20 @@ function usePasswordSection() {
     }),
     newPasswordRepeat: yupString().nullable().oneOf([yup.ref("newPassword"), "", null], t("Passwords do not match")).required(t("Please repeat your password"))
   });
-  const user = useUser({ or: "throw" });
-  const [changingPassword, setChangingPassword] = useState(false);
   const { register, handleSubmit, setError, formState: { errors }, clearErrors, reset } = useForm({
     resolver: yupResolver(passwordSchema)
   });
-  const [alreadyReset, setAlreadyReset] = useState(false);
-  const [loading, setLoading] = useState(false);
+  const hasValidEmail = contactChannels.filter((x) => x.type === "email" && x.isVerified && x.usedForAuth).length > 0;
   const onSubmit = async (data) => {
     setLoading(true);
     try {
       const { oldPassword, newPassword } = data;
-      const error = await user.updatePassword({ oldPassword, newPassword });
+      const error = user.hasPassword ? await user.updatePassword({ oldPassword, newPassword }) : await user.setPassword({ password: newPassword });
       if (error) {
         setError("oldPassword", { type: "manual", message: t("Incorrect password") });
       } else {
         reset();
-        setAlreadyReset(true);
+        setChangingPassword(false);
       }
     } finally {
       setLoading(false);
@@ -230,69 +400,83 @@ function usePasswordSection() {
   };
   const registerPassword = register("newPassword");
   const registerPasswordRepeat = register("newPasswordRepeat");
-  if (!user.hasPassword) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(Label, { children: t("Change password") }),
-    /* @__PURE__ */ jsx("div", { children: alreadyReset ? /* @__PURE__ */ jsx(Typography, { variant: "success", children: t("Password changed successfully!") }) : !changingPassword ? /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "secondary",
-        onClick: async () => {
-          setChangingPassword(true);
-        },
-        children: t("Change Password")
-      }
-    ) : /* @__PURE__ */ jsxs(
-      "form",
-      {
-        onSubmit: (e) => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e)),
-        noValidate: true,
-        children: [
-          /* @__PURE__ */ jsx(Label, { htmlFor: "old-password", className: "mb-1", children: t("Old password") }),
-          /* @__PURE__ */ jsx(
-            Input,
-            {
-              id: "old-password",
-              type: "password",
-              ...register("oldPassword")
-            }
-          ),
-          /* @__PURE__ */ jsx(FormWarningText, { text: errors.oldPassword?.message?.toString() }),
-          /* @__PURE__ */ jsx(Label, { htmlFor: "new-password", className: "mt-4 mb-1", children: t("Password") }),
-          /* @__PURE__ */ jsx(
-            PasswordInput,
-            {
-              id: "new-password",
-              ...registerPassword,
-              onChange: (e) => {
-                clearErrors("newPassword");
-                clearErrors("newPasswordRepeat");
-                runAsynchronously(registerPassword.onChange(e));
+  return /* @__PURE__ */ jsx(
+    Section,
+    {
+      title: t("Password"),
+      description: user.hasPassword ? t("Update your password") : t("Set a password for your account"),
+      children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: !changingPassword ? hasValidEmail ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "secondary",
+          onClick: () => setChangingPassword(true),
+          children: user.hasPassword ? t("Update password") : t("Set password")
+        }
+      ) : /* @__PURE__ */ jsx(Typography, { variant: "secondary", type: "label", children: t("To set a password, please add a verified email and set it as your sign-in email.") }) : /* @__PURE__ */ jsxs(
+        "form",
+        {
+          onSubmit: (e) => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e)),
+          noValidate: true,
+          children: [
+            user.hasPassword && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Label, { htmlFor: "old-password", className: "mb-1", children: t("Old password") }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id: "old-password",
+                  type: "password",
+                  ...register("oldPassword")
+                }
+              ),
+              /* @__PURE__ */ jsx(FormWarningText, { text: errors.oldPassword?.message?.toString() })
+            ] }),
+            /* @__PURE__ */ jsx(Label, { htmlFor: "new-password", className: "mt-4 mb-1", children: t("New password") }),
+            /* @__PURE__ */ jsx(
+              PasswordInput,
+              {
+                id: "new-password",
+                ...registerPassword,
+                onChange: (e) => {
+                  clearErrors("newPassword");
+                  clearErrors("newPasswordRepeat");
+                  runAsynchronously(registerPassword.onChange(e));
+                }
               }
-            }
-          ),
-          /* @__PURE__ */ jsx(FormWarningText, { text: errors.newPassword?.message?.toString() }),
-          /* @__PURE__ */ jsx(Label, { htmlFor: "repeat-password", className: "mt-4 mb-1", children: t("Repeat password") }),
-          /* @__PURE__ */ jsx(
-            PasswordInput,
-            {
-              id: "repeat-password",
-              ...registerPasswordRepeat,
-              onChange: (e) => {
-                clearErrors("newPassword");
-                clearErrors("newPasswordRepeat");
-                runAsynchronously(registerPasswordRepeat.onChange(e));
+            ),
+            /* @__PURE__ */ jsx(FormWarningText, { text: errors.newPassword?.message?.toString() }),
+            /* @__PURE__ */ jsx(Label, { htmlFor: "repeat-password", className: "mt-4 mb-1", children: t("Repeat new password") }),
+            /* @__PURE__ */ jsx(
+              PasswordInput,
+              {
+                id: "repeat-password",
+                ...registerPasswordRepeat,
+                onChange: (e) => {
+                  clearErrors("newPassword");
+                  clearErrors("newPasswordRepeat");
+                  runAsynchronously(registerPasswordRepeat.onChange(e));
+                }
               }
-            }
-          ),
-          /* @__PURE__ */ jsx(FormWarningText, { text: errors.newPasswordRepeat?.message?.toString() }),
-          /* @__PURE__ */ jsx(Button, { type: "submit", className: "mt-6", loading, children: t("Change Password") })
-        ]
-      }
-    ) })
-  ] });
+            ),
+            /* @__PURE__ */ jsx(FormWarningText, { text: errors.newPasswordRepeat?.message?.toString() }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-6 flex gap-4", children: [
+              /* @__PURE__ */ jsx(Button, { type: "submit", loading, children: user.hasPassword ? t("Update Password") : t("Set Password") }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "secondary",
+                  onClick: () => {
+                    setChangingPassword(false);
+                    reset();
+                  },
+                  children: t("Cancel")
+                }
+              )
+            ] })
+          ]
+        }
+      ) })
+    }
+  );
 }
 function useMfaSection() {
   const { t } = useTranslation();
@@ -323,7 +507,7 @@ function useMfaSection() {
   return /* @__PURE__ */ jsx(
     Section,
     {
-      title: t("Multi-factor Authentication"),
+      title: t("Multi-factor authentication"),
       description: isEnabled ? t("Multi-factor authentication is currently enabled.") : t("Multi-factor authentication is currently disabled."),
       children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
         !isEnabled && generatedSecret && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -366,18 +550,18 @@ function useMfaSection() {
                 totpMultiFactorSecret: null
               });
             },
-            children: t("Disable")
+            children: t("Disable MFA")
           }
         ) : !generatedSecret && /* @__PURE__ */ jsx(
           Button,
           {
-            variant: "default",
+            variant: "secondary",
             onClick: async () => {
               const secret = generateRandomValues(new Uint8Array(20));
               setQrCodeUrl(await generateTotpQrCode(project, user, secret));
               setGeneratedSecret(secret);
             },
-            children: t("Enable")
+            children: t("Enable MFA")
           }
         ) })
       ] })