@workos-inc/widgets 1.0.0 → 1.1.0

package/src/lib/reset-mfa-dialog.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import * as React from "react";
+import { AlertDialog, Flex } from "@radix-ui/themes";
+import { type ReactNode } from "react";
+import {
+  AlertDialogContent,
+  DestructiveButton,
+  SecondaryButton,
+} from "./elements";
+import { useDeleteTotpFactors } from "@repo/api";
+import { useSecuritySettings } from "./use-security-settings";
+import { ElevatedAccess } from "./elevated-access";
+import { SaveButton } from "./save-button";
+import { useDialogClose } from "./use-dialog-close";
+
+interface ResetMfaDialogProps extends AlertDialog.RootProps {
+  children?: ReactNode;
+  isPasswordSet: boolean;
+}
+
+export function ResetMfaDialog({
+  children,
+  isPasswordSet,
+  ...props
+}: ResetMfaDialogProps) {
+  const [open, setOpen] = React.useState(false);
+
+  const handleClose = React.useCallback(() => {
+    setOpen(false);
+  }, []);
+
+  return (
+    <AlertDialog.Root {...props} open={open} onOpenChange={setOpen}>
+      <AlertDialog.Trigger>{children}</AlertDialog.Trigger>
+
+      <AlertDialogContent maxWidth="480px">
+        <ElevatedAccess type="alert">
+          <Content onClose={handleClose} isPasswordSet={isPasswordSet} />
+        </ElevatedAccess>
+      </AlertDialogContent>
+    </AlertDialog.Root>
+  );
+}
+
+function Content({
+  onClose,
+  isPasswordSet,
+}: {
+  onClose: () => void;
+  isPasswordSet: boolean;
+}) {
+  const securitySettings = useSecuritySettings();
+  const resetMfa = useDeleteTotpFactors();
+
+  const onSubmitForm = () => {
+    resetMfa.mutate();
+  };
+
+  useDialogClose(resetMfa.isSuccess, () => {
+    securitySettings.update("Mfa", false);
+  });
+
+  return (
+    <>
+      <AlertDialog.Title>
+        Disable multi-factor authentication?
+      </AlertDialog.Title>
+      <AlertDialog.Description>
+        Turning off MFA will remove the additional layer of security on your
+        account.{" "}
+        {isPasswordSet
+          ? "We will only ask for your password during sign-in."
+          : "We will not ask for additional verification during sign-in."}
+      </AlertDialog.Description>
+
+      <Flex gap="3" justify="end" mt="5" asChild>
+        <form
+          onSubmit={(event) => {
+            event.preventDefault();
+            onSubmitForm();
+          }}
+        >
+          <AlertDialog.Cancel>
+            <SecondaryButton
+              disabled={resetMfa.isPending || resetMfa.isSuccess}
+            >
+              Cancel
+            </SecondaryButton>
+          </AlertDialog.Cancel>
+
+          <SaveButton
+            asChild
+            loading={resetMfa.isPending}
+            done={resetMfa.isSuccess}
+            onDone={onClose}
+          >
+            <DestructiveButton type="submit">Disable</DestructiveButton>
+          </SaveButton>
+        </form>
+      </Flex>
+    </>
+  );
+}

package/src/lib/revoke-invite-dialog.tsx

@@ -9,15 +9,15 @@ import {
 } from "@radix-ui/themes";
 import { type ReactNode, useRef } from "react";
 import { useRevokeUserInvite } from "./api/user";
-import type { User } from "./api/user";
 import {
   AlertDialogContent,
   DestructiveButton,
   SecondaryButton,
 } from "./elements";
+import { Member } from "@repo/api";
 
 interface RevokeInviteDialogProps extends AlertDialog.RootProps {
-  user: User;
+  user: Member;
   children?: ReactNode;
 }
 
@@ -30,11 +30,14 @@ export function RevokeInviteDialog({
   const cancelButtonRef = useRef<HTMLButtonElement>(null);
 
   const onSubmitForm = () => {
-    revokeInvite.mutate(user.id, {
-      onSuccess: () => {
-        props.onOpenChange?.(false);
+    revokeInvite.mutate(
+      { userId: user.id },
+      {
+        onSuccess: () => {
+          props.onOpenChange?.(false);
+        },
       },
-    });
+    );
   };
 
   return (

package/src/lib/save-button.css

@@ -0,0 +1,60 @@
+.woswidgets-save-button {
+  --easing: cubic-bezier(1, -0.4, 0.35, 0.95);
+  --duration: 0.35s;
+
+  position: relative;
+  transition:
+    width var(--duration) var(--easing),
+    background var(--duration) ease-out,
+    color 0.1s ease-out;
+  width: calc-size(max-content, size);
+  white-space: nowrap;
+}
+
+.woswidgets-save-button[data-save-state="loading"] {
+  background-color: var(--accent-8);
+}
+
+.woswidgets-save-button[data-save-state="done"] {
+  width: 80px;
+  background-color: var(--success-color, var(--green-10));
+}
+
+.woswidgets-save-button[data-save-state="loading"],
+.woswidgets-save-button[data-save-state="done"] {
+  color: transparent;
+  pointer-events: none;
+}
+
+.woswidgets-save-button[data-save-state="loading"] > * {
+  color: var(--accent-contrast);
+}
+
+.woswidgets-save-button[data-save-state="done"] > * {
+  color: var(--accent-contrast);
+}
+
+.woswidgets-save-button__done-icon,
+.woswidgets-save-button__done-text {
+  transition:
+    transform var(--duration) var(--easing),
+    opacity var(--duration) var(--easing);
+  opacity: 1;
+  transform: translateX(0px);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .woswidgets-save-button__done-icon {
+    @starting-style {
+      opacity: 0;
+      transform: translateX(10px);
+    }
+  }
+
+  .woswidgets-save-button__done-text {
+    @starting-style {
+      opacity: 0;
+      transform: translateX(-10px);
+    }
+  }
+}

package/src/lib/save-button.tsx

@@ -0,0 +1,113 @@
+import {
+  ButtonProps,
+  Flex,
+  Slot,
+  Slottable,
+  Spinner,
+  Text,
+} from "@radix-ui/themes";
+import { CheckIcon } from "@radix-ui/react-icons";
+import { useEffect, useRef, useState } from "react";
+import { namespaceClassNames } from "./utils";
+
+const DONE_TIMEOUT_MS = 1500;
+const SAVING_TIMEOUT_MS = 600;
+
+interface SaveButtonProps extends ButtonProps {
+  asChild?: boolean;
+  children: React.ReactNode;
+  loading?: boolean;
+  done?: boolean;
+  onDone?: () => void;
+}
+
+export function SaveButton({
+  asChild = false,
+  children,
+  loading,
+  done,
+  onDone,
+  ...props
+}: SaveButtonProps) {
+  const [state, setState] = useState<"idle" | "loading" | "done">(
+    loading ? "loading" : done ? "done" : "idle",
+  );
+  const loadingStartTime = useRef<number | null>(null);
+  const Button = asChild ? Slot : "button";
+
+  useEffect(() => {
+    if (loading) {
+      setState("loading");
+      loadingStartTime.current = Date.now();
+    } else if (done) {
+      const currentTime = Date.now();
+      const loadingDuration = loadingStartTime.current
+        ? currentTime - loadingStartTime.current
+        : 0;
+
+      // If loading lasted less than 500 ms, wait for the remaining time
+      const remainingDelay = Math.max(0, SAVING_TIMEOUT_MS - loadingDuration);
+
+      let doneTimer: NodeJS.Timeout | null = null;
+      const savedTimer = setTimeout(() => {
+        setState("done");
+
+        doneTimer = setTimeout(() => {
+          onDone?.();
+        }, DONE_TIMEOUT_MS);
+      }, remainingDelay);
+
+      return () => {
+        clearTimeout(savedTimer);
+        if (doneTimer) {
+          clearTimeout(doneTimer);
+        }
+      };
+    } else if (!loading && !done) {
+      setState("idle");
+    }
+  }, [loading, done, onDone]);
+
+  return (
+    <Button
+      {...props}
+      className={namespaceClassNames("save-button")}
+      data-save-state={state}
+    >
+      <Slottable>{children}</Slottable>
+
+      {state === "loading" && (
+        <Flex
+          as="span"
+          align="center"
+          justify="center"
+          position="absolute"
+          inset="0"
+        >
+          <Spinner size="1" />
+        </Flex>
+      )}
+
+      {state === "done" && (
+        <Flex
+          as="span"
+          align="center"
+          justify="center"
+          position="absolute"
+          inset="0"
+          gap="1"
+        >
+          <CheckIcon
+            width="18px"
+            height="18px"
+            style={{ marginLeft: "-4px" }}
+            className={namespaceClassNames("save-button__done-icon")}
+          />
+          <Text className={namespaceClassNames("save-button__done-text")}>
+            Done
+          </Text>
+        </Flex>
+      )}
+    </Button>
+  );
+}

package/src/lib/set-password-dialog.tsx

@@ -0,0 +1,204 @@
+"use client";
+
+import { Callout, Dialog, Flex, Text, VisuallyHidden } from "@radix-ui/themes";
+import * as React from "react";
+import { type ReactNode } from "react";
+import {
+  DialogContent,
+  Label,
+  PasswordField,
+  PrimaryButton,
+  SecondaryButton,
+} from "./elements";
+import * as Form from "@radix-ui/react-form";
+import { useCreatePassword } from "@repo/api";
+import { useSecuritySettings } from "./use-security-settings";
+import { ElevatedAccess } from "./elevated-access";
+import { SaveButton } from "./save-button";
+import { useDialogClose } from "./use-dialog-close";
+
+interface SetPasswordDialogProps extends Dialog.RootProps {
+  children?: ReactNode;
+}
+
+export function SetPasswordDialog({
+  children,
+  ...props
+}: SetPasswordDialogProps) {
+  const [open, setOpen] = React.useState(false);
+
+  const handleClose = React.useCallback(() => {
+    setOpen(false);
+  }, []);
+
+  return (
+    <Dialog.Root {...props} open={open} onOpenChange={setOpen}>
+      <Dialog.Trigger>{children}</Dialog.Trigger>
+
+      <DialogContent maxWidth="480px">
+        <ElevatedAccess>
+          <Content onClose={handleClose} />
+        </ElevatedAccess>
+      </DialogContent>
+    </Dialog.Root>
+  );
+}
+
+interface ContentProps {
+  onClose: () => void;
+}
+
+function Content({ onClose }: ContentProps) {
+  const setPassword = useCreatePassword();
+  const securitySettings = useSecuritySettings();
+  const [disableSubmit, setDisableSubmit] = React.useState(true);
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    const formData = new FormData(event.currentTarget);
+    const password = formData.get("password")?.toString();
+
+    if (!password) {
+      return;
+    }
+
+    setPassword.mutate({ data: { password } });
+  };
+
+  useDialogClose(setPassword.isSuccess, () => {
+    securitySettings.update("Password", true);
+  });
+
+  return (
+    <>
+      <Dialog.Title mb="5">Set New Password</Dialog.Title>
+      <VisuallyHidden>
+        <Dialog.Description>
+          Set a new password for your account
+        </Dialog.Description>
+      </VisuallyHidden>
+
+      {setPassword.error ? (
+        <Callout.Root color="red" my="-2">
+          <Callout.Text>
+            {getMutationErrorMessage(setPassword.error)}
+          </Callout.Text>
+        </Callout.Root>
+      ) : null}
+
+      <Form.Root
+        onSubmit={handleSubmit}
+        onChange={(event) => {
+          const formData = new FormData(event.currentTarget);
+          const password = formData.get("password")?.toString();
+          const confirmPassword = formData.get("confirmPassword")?.toString();
+          setDisableSubmit(password === "" || confirmPassword === "");
+        }}
+      >
+        <Flex mt="5" direction="column" gap="4">
+          <Form.Field name="password" asChild>
+            <Flex direction="column" gap="2">
+              <Form.Label asChild>
+                <Label>Enter a new password</Label>
+              </Form.Label>
+              <Form.Control asChild>
+                <PasswordField
+                  autoFocus
+                  required
+                  autoComplete="new-password"
+                  placeholder="New password"
+                  disabled={setPassword.isPending || setPassword.isSuccess}
+                />
+              </Form.Control>
+              <Form.Message match="valueMissing" asChild>
+                <Text size="2" color="red">
+                  Please enter a new password
+                </Text>
+              </Form.Message>
+              <Form.Message match={(value) => value.length < 8} asChild>
+                <Text size="2" color="red">
+                  Password must be at least 8 characters
+                </Text>
+              </Form.Message>
+            </Flex>
+          </Form.Field>
+
+          <Form.Field name="confirmPassword" asChild>
+            <Flex direction="column" gap="2">
+              <Form.Label asChild>
+                <Label>Confirm your new password</Label>
+              </Form.Label>
+              <Form.Control asChild>
+                <PasswordField
+                  required
+                  autoComplete="new-password"
+                  placeholder="Confirm new password"
+                  disabled={setPassword.isPending || setPassword.isSuccess}
+                />
+              </Form.Control>
+              <Form.Message match="valueMissing" asChild>
+                <Text size="2" color="red">
+                  Please confirm your new password
+                </Text>
+              </Form.Message>
+              <Form.Message
+                match={(value, formData) => value !== formData.get("password")}
+                asChild
+              >
+                <Text size="2" color="red">
+                  The passwords you entered don’t match.
+                </Text>
+              </Form.Message>
+            </Flex>
+          </Form.Field>
+        </Flex>
+
+        <Flex mt="5" gap="3" justify="end">
+          <Dialog.Close>
+            <SecondaryButton
+              disabled={setPassword.isPending || setPassword.isSuccess}
+            >
+              Cancel
+            </SecondaryButton>
+          </Dialog.Close>
+
+          <SaveButton
+            asChild
+            loading={setPassword.isPending}
+            done={setPassword.isSuccess}
+            onDone={onClose}
+          >
+            <PrimaryButton type="submit" disabled={disableSubmit}>
+              Set password
+            </PrimaryButton>
+          </SaveButton>
+        </Flex>
+
+        {/* mirror errors in a live region */}
+        <VisuallyHidden asChild>
+          <section aria-live="polite">
+            {getMutationErrorMessage(setPassword.error)}
+          </section>
+        </VisuallyHidden>
+      </Form.Root>
+    </>
+  );
+}
+
+function getMutationErrorMessage(error: unknown) {
+  if (error instanceof Error) {
+    return error.message;
+  }
+
+  if (
+    typeof error === "object" &&
+    error !== null &&
+    "message" in error &&
+    typeof error.message === "string"
+  ) {
+    return error.message;
+  }
+
+  return "Something went wrong. Please try again.";
+}

package/src/lib/use-dialog-close.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+
+export function useDialogClose(enabled: boolean, callback: () => void) {
+  const callbackRef = React.useRef(callback);
+  const firstRenderRef = React.useRef(true);
+
+  React.useEffect(() => {
+    if (firstRenderRef.current) {
+      firstRenderRef.current = false;
+      return;
+    }
+
+    const cb = callbackRef.current;
+
+    return () => {
+      if (enabled) cb();
+    };
+  }, [enabled]);
+}

package/src/lib/use-security-settings.tsx

@@ -0,0 +1,49 @@
+import {
+  AuthenticationInformationResponse,
+  getAuthenticationInformationQueryKey,
+} from "@repo/api";
+import { useQueryClient } from "@tanstack/react-query";
+
+type Methods = "Password" | "Mfa" | "Passkey";
+
+/**
+ * A hook that provides utilities for managing security settings.
+ * Allows optimistically updating verification method status (password, MFA, passkey)
+ * while also triggering a server revalidation.
+ */
+export function useSecuritySettings() {
+  const client = useQueryClient();
+
+  const update = (method: Methods, isSetUp: boolean) => {
+    const queryKey = getAuthenticationInformationQueryKey();
+
+    // Optimistic update
+    client.setQueriesData<AuthenticationInformationResponse>(
+      { queryKey, exact: false },
+      (data) => {
+        if (!data) {
+          return data;
+        }
+
+        return {
+          ...data,
+          data: {
+            ...data.data,
+            verificationMethods: {
+              ...data.data.verificationMethods,
+              [method]: { ...data.data.verificationMethods[method], isSetUp },
+            },
+          },
+        };
+      },
+    );
+
+    // Also validate it with the server
+    client.invalidateQueries({
+      queryKey: getAuthenticationInformationQueryKey(),
+      exact: false,
+    });
+  };
+
+  return { update };
+}

package/src/lib/user-actions-dropdown.tsx

@@ -2,9 +2,9 @@
 
 import { DropdownMenu } from "@radix-ui/themes";
 import * as React from "react";
-import type { User } from "./api/user";
+import { Member } from "@repo/api";
 import { DeleteUserDialog } from "./delete-user-dialog";
-import { EditUserDetailsDialog } from "./edit-user-details-dialog";
+import { EditUserRoleDialog } from "./edit-user-role-dialog";
 import {
   DestructiveMenuItem,
   DropdownMenuContent,
@@ -12,10 +12,10 @@ import {
 } from "./elements";
 import { ResendInviteDialog } from "./resend-invite-dialog";
 import { RevokeInviteDialog } from "./revoke-invite-dialog";
-import { useRoles } from "./api/role";
+import { useRoles } from "@repo/api";
 
 interface UserActionsDropdownProps {
-  user: User;
+  user: Member;
   children: React.ReactNode;
 }
 
@@ -29,7 +29,11 @@ export const UserActionsDropdown = ({
   user,
   children,
 }: UserActionsDropdownProps) => {
-  const rolesQuery = useRoles();
+  const rolesQuery = useRoles({
+    query: {
+      initialData: [],
+    },
+  });
   const [openDialog, setOpenDialog] = React.useState<UserActionDialog | null>(
     null,
   );
@@ -114,7 +118,7 @@ export const UserActionsDropdown = ({
       </DropdownMenu.Root>
 
       {actions.has("edit-role") && (
-        <EditUserDetailsDialog
+        <EditUserRoleDialog
           key={getDialogKey("edit-role")}
           user={user}
           open={openDialog === "edit-role"}