@workos-inc/widgets 1.0.0 → 1.1.0

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

@@ -0,0 +1,290 @@
+"use client";
+
+import { Callout, Dialog, Flex, Text, VisuallyHidden } from "@radix-ui/themes";
+import * as Form from "@radix-ui/react-form";
+import * as React from "react";
+import { type ReactNode } from "react";
+import {
+  DialogContent,
+  Label,
+  PasswordField,
+  PrimaryButton,
+  SecondaryButton,
+} from "./elements";
+import { useUpdatePassword } from "@repo/api";
+import { SaveButton } from "./save-button";
+
+interface ChangePasswordDialogProps extends Dialog.RootProps {
+  children?: ReactNode;
+}
+
+export function ChangePasswordDialog({
+  children,
+  ...props
+}: ChangePasswordDialogProps) {
+  const [open, setOpen] = React.useState(false);
+
+  const handleClose = React.useCallback(() => {
+    setOpen(false);
+  }, []);
+
+  return (
+    <Dialog.Root
+      {...props}
+      open={props.open || open}
+      onOpenChange={props.onOpenChange || setOpen}
+    >
+      <Dialog.Trigger>{children}</Dialog.Trigger>
+
+      <DialogContent maxWidth="480px">
+        <Content onClose={handleClose} />
+      </DialogContent>
+    </Dialog.Root>
+  );
+}
+
+interface ContentProps {
+  onClose: () => void;
+}
+
+function Content({ onClose }: ContentProps) {
+  const changePassword = useUpdatePassword({
+    mutation: {
+      onError: (error) => {
+        const errorMsg = getMutationErrorMessage(error);
+        if (errorMsg === "Invalid credentials") {
+          setServerErrors({
+            currentPassword:
+              "Your current password is incorrect. Please, try again.",
+          });
+        }
+      },
+    },
+  });
+  const [disableSubmit, setDisableSubmit] = React.useState(true);
+  const [serverErrors, setServerErrors] = React.useState<{
+    currentPassword?: string;
+    password?: string;
+    confirmPassword?: string;
+  }>({});
+
+  const errorMessage = React.useMemo(() => {
+    if (changePassword.error) {
+      return getMutationErrorMessage(changePassword.error);
+    }
+
+    return null;
+  }, [changePassword.error]);
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    const formData = new FormData(event.currentTarget);
+    const currentPassword = formData.get("oldPassword")?.toString() ?? "";
+    const newPassword = formData.get("password")?.toString() ?? "";
+
+    changePassword.mutate({
+      data: { currentPassword, newPassword },
+    });
+  };
+
+  return (
+    <>
+      <Dialog.Title mb="5">Change Password</Dialog.Title>
+      <VisuallyHidden>
+        <Dialog.Description>Change your account password</Dialog.Description>
+      </VisuallyHidden>
+
+      {errorMessage && errorMessage !== "Invalid credentials" ? (
+        <Callout.Root color="red" my="-2">
+          <Callout.Text>{errorMessage}</Callout.Text>
+        </Callout.Root>
+      ) : null}
+
+      <Form.Root
+        onSubmit={handleSubmit}
+        onChange={(event) => {
+          const formData = new FormData(event.currentTarget);
+          const currentPassword = formData.get("oldPassword")?.toString() ?? "";
+          const newPassword = formData.get("password")?.toString() ?? "";
+          const confirmPassword =
+            formData.get("confirmPassword")?.toString() ?? "";
+
+          setDisableSubmit(
+            currentPassword === "" ||
+              newPassword === "" ||
+              confirmPassword === "",
+          );
+          setServerErrors({});
+        }}
+        onClearServerErrors={() => {
+          setServerErrors({});
+        }}
+      >
+        <Flex mt="5" direction="column" gap="4">
+          <Form.Field
+            name="oldPassword"
+            asChild
+            serverInvalid={!serverErrors.currentPassword}
+          >
+            <Flex direction="column" gap="2">
+              <Form.Label asChild>
+                <Label>Enter your current password</Label>
+              </Form.Label>
+
+              <Form.Control asChild>
+                <PasswordField
+                  autoFocus
+                  required
+                  disabled={
+                    changePassword.isPending || changePassword.isSuccess
+                  }
+                  autoComplete="current-password"
+                  placeholder="Current password"
+                />
+              </Form.Control>
+
+              <Form.Message match="valueMissing" asChild>
+                <Text size="2" color="red">
+                  Please enter your current password
+                </Text>
+              </Form.Message>
+
+              {serverErrors.currentPassword && (
+                <Form.Message asChild>
+                  <Text size="2" color="red">
+                    {serverErrors.currentPassword}
+                  </Text>
+                </Form.Message>
+              )}
+            </Flex>
+          </Form.Field>
+
+          <Form.Field
+            name="password"
+            asChild
+            serverInvalid={!serverErrors.password}
+          >
+            <Flex direction="column" gap="2">
+              <Form.Label asChild>
+                <Label>Enter your new password</Label>
+              </Form.Label>
+
+              <Form.Control asChild>
+                <PasswordField
+                  autoComplete="new-password"
+                  placeholder="New password"
+                  required
+                  disabled={
+                    changePassword.isPending || changePassword.isSuccess
+                  }
+                />
+              </Form.Control>
+
+              <Form.Message match="valueMissing" asChild>
+                <Text size="2" color="red">
+                  Please enter your 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>
+              <Form.Message
+                match={(value, formData) =>
+                  value === formData.get("oldPassword")
+                }
+                asChild
+              >
+                <Text size="2" color="red">
+                  You cannot reuse your current password
+                </Text>
+              </Form.Message>
+            </Flex>
+          </Form.Field>
+
+          <Form.Field
+            name="confirmPassword"
+            asChild
+            serverInvalid={!serverErrors.confirmPassword}
+          >
+            <Flex direction="column" gap="2">
+              <Form.Label asChild>
+                <Label>Confirm your new password</Label>
+              </Form.Label>
+
+              <Form.Control asChild>
+                <PasswordField
+                  autoComplete="new-password"
+                  placeholder="Confirm new password"
+                  required
+                  disabled={
+                    changePassword.isPending || changePassword.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 new passwords you entered don’t match.
+                </Text>
+              </Form.Message>
+            </Flex>
+          </Form.Field>
+        </Flex>
+
+        <Flex mt="5" gap="3" justify="end">
+          <Dialog.Close>
+            <SecondaryButton
+              type="button"
+              disabled={changePassword.isPending || changePassword.isSuccess}
+            >
+              Cancel
+            </SecondaryButton>
+          </Dialog.Close>
+
+          <SaveButton
+            asChild
+            loading={changePassword.isPending}
+            done={changePassword.isSuccess}
+            onDone={onClose}
+          >
+            <PrimaryButton type="submit" disabled={disableSubmit}>
+              Change password
+            </PrimaryButton>
+          </SaveButton>
+        </Flex>
+      </Form.Root>
+
+      {/* mirror errors in a live region */}
+      <VisuallyHidden asChild>
+        <section aria-live="polite">{errorMessage}</section>
+      </VisuallyHidden>
+    </>
+  );
+}
+
+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/copy-button.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { CheckIcon, CopyIcon } from "@radix-ui/react-icons";
+import { Slot, Slottable } from "@radix-ui/themes";
+
+interface CopyButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  value: string;
+  asChild?: boolean;
+}
+
+export const CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(
+  function CopyButton({ value, asChild, children, style, ...props }, ref) {
+    const [hasCopied, setHasCopied] = React.useState(false);
+    const Comp = asChild ? Slot : "button";
+    const timeoutRef = React.useRef<NodeJS.Timeout>();
+
+    const handleClick = async () => {
+      try {
+        console.log("Copying text:", value);
+        await navigator.clipboard.writeText(value);
+        setHasCopied(true);
+
+        // Clear any existing timeout
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+
+        // Set new timeout
+        timeoutRef.current = setTimeout(() => {
+          setHasCopied(false);
+        }, 3000);
+      } catch (err) {
+        console.error("Failed to copy text:", err);
+      }
+    };
+
+    // Cleanup timeout on unmount
+    React.useEffect(() => {
+      return () => {
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+      };
+    }, []);
+
+    return (
+      <Comp onPointerUp={handleClick} ref={ref} {...props}>
+        {hasCopied ? <CheckIcon /> : <CopyIcon />}
+        <Slottable>{children}</Slottable>
+      </Comp>
+    );
+  },
+);

package/src/lib/delete-user-dialog.tsx

@@ -10,17 +10,17 @@ import {
 } from "@radix-ui/themes";
 import { type ReactNode, useRef } from "react";
 import { useDeleteUser } from "./api/user";
-import type { User } from "./api/user";
 import {
   AlertDialogContent,
   DestructiveButton,
   SecondaryButton,
 } from "./elements";
+import { Member } from "@repo/api";
 
 interface DeleteUserDialogProps extends AlertDialog.RootProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
-  user: User;
+  user: Member;
   children?: ReactNode;
 }
 
@@ -33,11 +33,14 @@ export function DeleteUserDialog({
   const inputRef = useRef<HTMLInputElement>(null);
 
   const onSubmitForm = () => {
-    deleteUser.mutate(user.id, {
-      onSuccess: () => {
-        props.onOpenChange(false);
+    deleteUser.mutate(
+      { userId: user.id },
+      {
+        onSuccess: () => {
+          props.onOpenChange(false);
+        },
       },
-    });
+    );
   };
 
   return (

package/src/lib/edit-user-profile-dialog.tsx

@@ -0,0 +1,181 @@
+"use client";
+
+import { Callout, Dialog, Flex, Text, VisuallyHidden } from "@radix-ui/themes";
+import { getMeQueryKey, Me, useUpdateMe } from "@repo/api";
+import { useQueryClient } from "@tanstack/react-query";
+import * as React from "react";
+import { type ReactNode } from "react";
+import * as Form from "@radix-ui/react-form";
+import {
+  DialogContent,
+  Label,
+  PrimaryButton,
+  SecondaryButton,
+  TextField,
+} from "./elements";
+import { SaveButton } from "./save-button";
+
+interface EditUserProfileDialogProps extends Dialog.RootProps {
+  user: Me;
+  children?: ReactNode;
+}
+
+export function EditUserProfileDialog({
+  children,
+  user,
+  ...props
+}: EditUserProfileDialogProps) {
+  const [open, setOpen] = React.useState(false);
+
+  const handleClose = React.useCallback(() => {
+    setOpen(false);
+  }, []);
+
+  return (
+    <Dialog.Root
+      {...props}
+      open={props.open ?? open}
+      onOpenChange={props.onOpenChange ?? setOpen}
+    >
+      <Dialog.Trigger>{children}</Dialog.Trigger>
+
+      <DialogContent maxWidth="480px">
+        <Content user={user} onClose={handleClose} />
+      </DialogContent>
+    </Dialog.Root>
+  );
+}
+
+interface ContentProps extends Pick<EditUserProfileDialogProps, "user"> {
+  onClose: () => void;
+}
+
+function Content({ user, onClose }: ContentProps) {
+  const client = useQueryClient();
+  const updateMe = useUpdateMe({
+    mutation: {
+      onSettled: () => {
+        client.invalidateQueries({ queryKey: getMeQueryKey() });
+      },
+      onSuccess: (newProfile) => {
+        client.setQueryData(getMeQueryKey(), {
+          ...user,
+          firstName: newProfile.firstName || user.firstName,
+          lastName: newProfile.lastName || user.lastName,
+        });
+      },
+    },
+  });
+
+  return (
+    <>
+      <Dialog.Title mb="5">Edit name</Dialog.Title>
+      <VisuallyHidden>
+        <Dialog.Description>
+          Edit the details of <Text weight="bold">{user.email}</Text>
+        </Dialog.Description>
+      </VisuallyHidden>
+
+      {updateMe.error ? (
+        <Callout.Root color="red" my="-2">
+          <Callout.Text>{getMutationErrorMessage(updateMe.error)}</Callout.Text>
+        </Callout.Root>
+      ) : null}
+
+      <Form.Root
+        onSubmit={async (event) => {
+          event.preventDefault();
+          const formData = new FormData(event.currentTarget);
+          const firstName = formData.get("firstName")?.toString();
+          const lastName = formData.get("lastName")?.toString();
+          updateMe.mutate({
+            data: {
+              firstName: firstName ?? undefined,
+              lastName: lastName ?? undefined,
+            },
+          });
+        }}
+      >
+        <Flex my="5" direction="column" gap="4">
+          <Form.Field name="firstName" asChild>
+            <Flex direction="column" gap="1">
+              <Form.Label asChild>
+                <Label>First name</Label>
+              </Form.Label>
+              <Form.Control asChild>
+                <TextField
+                  data-1p-ignore
+                  autoComplete="given-name"
+                  defaultValue={user.firstName ?? ""}
+                  placeholder="Your first name"
+                  disabled={updateMe.isPending || updateMe.isSuccess}
+                />
+              </Form.Control>
+            </Flex>
+          </Form.Field>
+
+          <Form.Field name="lastName" asChild>
+            <Flex direction="column" gap="1">
+              <Form.Label asChild>
+                <Label>Last name</Label>
+              </Form.Label>
+              <Form.Control asChild>
+                <TextField
+                  data-1p-ignore
+                  autoComplete="family-name"
+                  defaultValue={user.lastName ?? ""}
+                  placeholder="Your last name"
+                  disabled={updateMe.isPending || updateMe.isSuccess}
+                />
+              </Form.Control>
+            </Flex>
+          </Form.Field>
+        </Flex>
+
+        <Flex mt="5" gap="3" justify="end">
+          <Dialog.Close>
+            <SecondaryButton
+              disabled={updateMe.isPending || updateMe.isSuccess}
+            >
+              Cancel
+            </SecondaryButton>
+          </Dialog.Close>
+
+          <SaveButton
+            asChild
+            loading={updateMe.isPending}
+            done={updateMe.isSuccess}
+            onDone={onClose}
+          >
+            <PrimaryButton>Save</PrimaryButton>
+          </SaveButton>
+        </Flex>
+
+        {/* mirror errors in a live region */}
+        <VisuallyHidden asChild>
+          <section aria-live="polite">
+            {getMutationErrorMessage(updateMe.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;
+  }
+
+  // TODO Handle server errors
+  return "Something went wrong. Please try again.";
+}

package/src/lib/{edit-user-details-dialog.tsx → edit-user-role-dialog.tsx}

@@ -11,7 +11,6 @@ import {
 } from "@radix-ui/themes";
 import { type ReactNode, useState } from "react";
 import { useUpdateUserRole } from "./api/user";
-import type { User } from "./api/user";
 import {
   DialogContent,
   PrimaryButton,
@@ -22,31 +21,35 @@ import {
   Skeleton,
 } from "./elements";
 import { getBestName } from "./utils";
-import { useRoles } from "./api/role";
+import { Member, useRoles } from "@repo/api";
 
-interface EditUserDialogProps extends Dialog.RootProps {
+interface EditUserRoleDialogProps extends Dialog.RootProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
-  user: User;
+  user: Member;
   children?: ReactNode;
 }
 
-export function EditUserDetailsDialog({
+export function EditUserRoleDialog({
   children,
   user,
   ...props
-}: EditUserDialogProps) {
+}: EditUserRoleDialogProps) {
   const displayName = getBestName(user) || user.email;
-  const rolesQuery = useRoles();
+  const rolesQuery = useRoles({
+    query: {
+      initialData: [],
+    },
+  });
   const { data: roles } = rolesQuery;
   const updateUser = useUpdateUserRole();
   const [selectedRole, setSelectedRole] = useState(
-    user.roles[0]?.slug || "Unknown",
+    user.roles?.at(0)?.slug || "Unknown",
   );
 
   const onSubmitForm = ({ id, roles }: { id: string; roles: string[] }) => {
     updateUser.mutate(
-      { id, data: { roles } },
+      { userId: id, data: { roles } },
       {
         onSuccess: () => {
           props.onOpenChange(false);

package/src/lib/elements.tsx

@@ -39,6 +39,7 @@ import cx from "clsx";
 import { useElement } from "./widgets-context";
 import { namespaceClassNames } from "./utils";
 import { useLayoutEffect } from "./use-layout-effect";
+import { EyeClosedIcon, EyeOpenIcon } from "@radix-ui/react-icons";
 
 export const PrimaryButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
   function PrimaryButton({ className, ...props }, ref) {
@@ -64,6 +65,7 @@ export const SecondaryButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
     return (
       <RadixButton
         ref={ref}
+        highContrast
         className={cx(
           namespaceClassNames("button", "button--secondary"),
           className,
@@ -176,7 +178,7 @@ export const SelectItem = React.forwardRef<
 });
 
 export const Label = React.forwardRef<HTMLLabelElement, TextProps>(
-  function Label({ children, className, ...props }, ref) {
+  function Label({ children, className, style = {}, ...props }, ref) {
     const element = useElement("label");
     return (
       // @ts-expect-error: Text props are a complex union type depending on the
@@ -187,6 +189,7 @@ export const Label = React.forwardRef<HTMLLabelElement, TextProps>(
         weight="bold"
         size="2"
         className={cx(namespaceClassNames("label"), className)}
+        style={{ width: "fit-content", ...style }}
         {...props}
         {...element}
       >
@@ -225,6 +228,36 @@ export const TextFieldSlot = React.forwardRef<
   );
 });
 
+export const PasswordField = React.forwardRef<
+  HTMLInputElement,
+  RadixTextField.RootProps
+>(function TextField({ className, ...props }, ref) {
+  const element = useElement("textfield");
+  const [showPassword, setShowPassword] = React.useState(false);
+  return (
+    <RadixTextField.Root
+      ref={ref}
+      variant="surface"
+      className={cx(namespaceClassNames("text-field"), className)}
+      {...props}
+      {...element}
+      type={showPassword ? "text" : "password"}
+    >
+      <RadixTextField.Slot side="right">
+        <IconButton
+          type="button"
+          size="1"
+          variant="ghost"
+          color="gray"
+          onClick={() => setShowPassword(!showPassword)}
+        >
+          {showPassword ? <EyeOpenIcon /> : <EyeClosedIcon />}
+        </IconButton>
+      </RadixTextField.Slot>
+    </RadixTextField.Root>
+  );
+});
+
 export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
   function Badge({ className, ...props }, ref) {
     const element = useElement("badge");