@workos-inc/widgets 1.1.5 → 1.2.0

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

@@ -1,290 +0,0 @@
-"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 "../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/constants.ts

@@ -1,3 +0,0 @@
-export const USER_ROW_LIMIT = 10;
-export const WIDGETS_API_VERSION = "1";
-export const WIDGETS_CLASS_NAMESPACE = "woswidgets";

package/src/lib/copy-button.tsx

@@ -1,53 +0,0 @@
-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

@@ -1,110 +0,0 @@
-"use client";
-
-import * as React from "react";
-import {
-  AlertDialog,
-  Callout,
-  Flex,
-  Text,
-  VisuallyHidden,
-} from "@radix-ui/themes";
-import { type ReactNode, useRef } from "react";
-import { useDeleteUser } from "./api/user";
-import {
-  AlertDialogContent,
-  DestructiveButton,
-  SecondaryButton,
-} from "./elements";
-import { Member } from "../api";
-
-interface DeleteUserDialogProps extends AlertDialog.RootProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  user: Member;
-  children?: ReactNode;
-}
-
-export function DeleteUserDialog({
-  children,
-  user,
-  ...props
-}: DeleteUserDialogProps) {
-  const deleteUser = useDeleteUser();
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const onSubmitForm = () => {
-    deleteUser.mutate(
-      { userId: user.id },
-      {
-        onSuccess: () => {
-          props.onOpenChange(false);
-        },
-      },
-    );
-  };
-
-  return (
-    <AlertDialog.Root {...props}>
-      {children && <AlertDialog.Trigger>{children}</AlertDialog.Trigger>}
-
-      <AlertDialogContent
-        maxWidth="480px"
-        onOpenAutoFocus={() => {
-          requestAnimationFrame(() => {
-            inputRef.current?.focus();
-          });
-        }}
-      >
-        <AlertDialog.Title>Remove user</AlertDialog.Title>
-        <Flex direction="column" gap="3">
-          <AlertDialog.Description>
-            Are you sure you want to remove{" "}
-            <Text weight="bold">{user.email}</Text>? This action is immediate
-            and cannot be undone.
-          </AlertDialog.Description>
-        </Flex>
-
-        {deleteUser.error ? (
-          <Callout.Root color="red" mt="4" mb="-2">
-            <Callout.Text>
-              {getMutationErrorMessage(deleteUser.error)}
-            </Callout.Text>
-          </Callout.Root>
-        ) : null}
-
-        <Flex gap="3" justify="end" mt="5" asChild>
-          <form
-            onSubmit={(event) => {
-              event.preventDefault();
-              onSubmitForm();
-            }}
-          >
-            <AlertDialog.Cancel>
-              <SecondaryButton disabled={deleteUser.isPending}>
-                Cancel
-              </SecondaryButton>
-            </AlertDialog.Cancel>
-
-            <DestructiveButton type="submit" loading={deleteUser.isPending}>
-              Remove
-            </DestructiveButton>
-          </form>
-        </Flex>
-        {/* mirror errors in a live region */}
-        <VisuallyHidden asChild>
-          <section aria-live="polite">
-            {getMutationErrorMessage(deleteUser.error)}
-          </section>
-        </VisuallyHidden>
-      </AlertDialogContent>
-    </AlertDialog.Root>
-  );
-}
-
-function getMutationErrorMessage(error: unknown) {
-  if (!error) {
-    return null;
-  }
-  // TODO Handle server errors
-  return "There was an error removing the user. Please try again.";
-}

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

@@ -1,181 +0,0 @@
-"use client";
-
-import { Callout, Dialog, Flex, Text, VisuallyHidden } from "@radix-ui/themes";
-import { getMeQueryKey, Me, useUpdateMe } from "../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.";
-}