Alert Dialog

<Flex gap="4">
  <AlertDialog.Root>
    <AlertDialog.Trigger>
      <Button>Size 1</Button>
    </AlertDialog.Trigger>
    <AlertDialog.Content size="1">
      <AlertDialog.Header
        title="Revoke setup link"
        description="The setup link will no longer be accessible and any existing setup sessions will be revoked."
      />

      <AlertDialog.Footer>
        <AlertDialog.Cancel>
          <Button>Cancel</Button>
        </AlertDialog.Cancel>
        <AlertDialog.Action>
          <Button color="red">Revoke link</Button>
        </AlertDialog.Action>
      </AlertDialog.Footer>
    </AlertDialog.Content>
  </AlertDialog.Root>

  <AlertDialog.Root>
    <AlertDialog.Trigger>
      <Button>Size 2</Button>
    </AlertDialog.Trigger>
    <AlertDialog.Content size="2">
      <AlertDialog.Header
        title="Revoke setup link"
        description="The setup link will no longer be accessible and any existing setup sessions will be revoked."
      />

      <AlertDialog.Footer>
        <AlertDialog.Cancel>
          <Button>Cancel</Button>
        </AlertDialog.Cancel>
        <AlertDialog.Action>
          <Button color="red">Revoke link</Button>
        </AlertDialog.Action>
      </AlertDialog.Footer>
    </AlertDialog.Content>
  </AlertDialog.Root>
</Flex>

<AlertDialog.Root>
  <AlertDialog.Trigger>
    <Button>Open</Button>
  </AlertDialog.Trigger>
  <AlertDialog.Content size="2">
    <AlertDialog.Header
      title="Log out of all devices"
      description="Are you sure you want to log out this user from all devices?"
    />

    <Dialog.Body>
      <Inset side="x" py="current">
        <Table.Content>
          <Table.Header>
            <Table.Row>
              <Table.ColumnHeader>Device</Table.ColumnHeader>
              <Table.ColumnHeader>Location</Table.ColumnHeader>
            </Table.Row>
          </Table.Header>
          <Table.Body>
            <Table.Row>
              <Table.RowHeader>iPhone Xs</Table.RowHeader>
              <Table.Cell>Sant Cugat del Vallès, Spain</Table.Cell>
            </Table.Row>
            <Table.Row>
              <Table.RowHeader>MacBook Pro 15″</Table.RowHeader>
              <Table.Cell>Sant Cugat del Vallès, Spain</Table.Cell>
            </Table.Row>
          </Table.Body>
        </Table.Content>
      </Inset>
    </Dialog.Body>

    <Dialog.Footer>
      <AlertDialog.Cancel>
        <Button>Cancel</Button>
      </AlertDialog.Cancel>
      <AlertDialog.Action>
        <Button color="red">Log out</Button>
      </AlertDialog.Action>
    </Dialog.Footer>
  </AlertDialog.Content>
</AlertDialog.Root>

<AlertDialog.Root>
  <AlertDialog.Trigger>
    <Button>Open</Button>
  </AlertDialog.Trigger>
  <AlertDialog.Content maxWidth="500px">
    <AlertDialog.Header
      title="Revoke setup link"
      description="The setup link will no longer be accessible and any existing setup sessions will be revoked."
      error="Something went wrong. Try again later."
    />

    <AlertDialog.Footer>
      <AlertDialog.Cancel>
        <Button>Cancel</Button>
      </AlertDialog.Cancel>
      <AlertDialog.Action>
        <Button color="red">Revoke link</Button>
      </AlertDialog.Action>
    </AlertDialog.Footer>
  </AlertDialog.Content>
</AlertDialog.Root>

<AlertDialog.Root>
  <AlertDialog.Trigger>
    <Button>Open</Button>
  </AlertDialog.Trigger>
  <AlertDialog.Content maxWidth="500px">
    <AlertDialog.Header
      title="Revoke setup link"
      description="The setup link will no longer be accessible and any existing setup sessions will be revoked."
    >
      <Callout.Root color="gray">
        <Callout.Text>This action is irreversible.</Callout.Text>
      </Callout.Root>
    </AlertDialog.Header>

    <AlertDialog.Footer>
      <AlertDialog.Cancel>
        <Button>Cancel</Button>
      </AlertDialog.Cancel>
      <AlertDialog.Action>
        <Button color="red">Revoke link</Button>
      </AlertDialog.Action>
    </AlertDialog.Footer>
  </AlertDialog.Content>
</AlertDialog.Root>

() => {
  const [isOpen, setIsOpen] = React.useState(false);
  const [isLoading, setIsLoading] = React.useState(false);

  const handleRevoke = async () => {
    setIsLoading(true);

    // Simulate API call
    await new Promise((resolve) => setTimeout(resolve, 2000));

    setIsLoading(false);
    setIsOpen(false);
  };

  return (
    <AlertDialog.Root open={isOpen} onOpenChange={setIsOpen}>
      <AlertDialog.Trigger>
        <Button color="red">Revoke setup link</Button>
      </AlertDialog.Trigger>
      <AlertDialog.Content>
        <AlertDialog.Header
          title="Revoke setup link"
          description="The setup link will no longer be accessible and any existing setup sessions will be revoked."
        />

        <AlertDialog.Footer>
          <AlertDialog.Cancel>
            <Button>Cancel</Button>
          </AlertDialog.Cancel>
          <AlertDialog.Action asChild>
            <Button
              color="red"
              loading={isLoading}
              onClick={(e) => {
                e.preventDefault();
                handleRevoke();
              }}
            >
              Revoke link
            </Button>
          </AlertDialog.Action>
        </AlertDialog.Footer>
      </AlertDialog.Content>
    </AlertDialog.Root>
  );
};

() => {
  const [isOpen, setIsOpen] = React.useState(false);
  const DELETE_CONFIRMATION_TEXT = 'DELETE OBJECT';

  const formId = React.useId();
  const form = useForm({
    resolver: zodResolver(
      z.object({
        confirmationText: z
          .string()
          .refine((val) => val === DELETE_CONFIRMATION_TEXT, {
            message: 'Confirmation text must match exactly',
          }),
      }),
    ),
    defaultValues: { confirmationText: '' },
  });

  // Reset form when dialog opens
  React.useEffect(() => {
    if (isOpen) {
      form.reset();
    }
  }, [isOpen, form]);

  const onSubmit = async (data) => {
    // Simulate API call
    await new Promise((resolve) => setTimeout(resolve, 2000));
    setIsOpen(false);
  };

  return (
    <AlertDialog.Root open={isOpen} onOpenChange={setIsOpen}>
      <AlertDialog.Trigger>
        <Button color="red">Delete object</Button>
      </AlertDialog.Trigger>
      <AlertDialog.Content size="2">
        <AlertDialog.Header
          title="Delete object"
          description={
            <AlertDialog.Description>
              All data associated with this object will be deleted. This action
              is immediate, cannot be undone, and may cause issues if the object
              is still being used in your application.
            </AlertDialog.Description>
          }
        />

        <AlertDialog.Body>
          <form id={formId} onSubmit={form.handleSubmit(onSubmit)}>
            <Controller
              name="confirmationText"
              control={form.control}
              render={({ field, fieldState }) => (
                <Flex direction="column" gap="2">
                  <label htmlFor="confirmationText">
                    <Text color="gray" size="2">
                      Please type "
                      <Text weight="bold">{DELETE_CONFIRMATION_TEXT}</Text>" to
                      confirm the deletion.
                    </Text>
                  </label>
                  <TextField.Root
                    {...field}
                    id="confirmationText"
                    placeholder={DELETE_CONFIRMATION_TEXT}
                    invalid={!!fieldState.error}
                  />
                </Flex>
              )}
            />
          </form>
        </AlertDialog.Body>

        <AlertDialog.Footer>
          <AlertDialog.Cancel>
            <Button>Cancel</Button>
          </AlertDialog.Cancel>
          <Button
            color="red"
            form={formId}
            disabled={
              form.watch('confirmationText') !== DELETE_CONFIRMATION_TEXT ||
              form.formState.isSubmitting
            }
            loading={form.formState.isSubmitting}
            type="submit"
          >
            Delete object
          </Button>
        </AlertDialog.Footer>
      </AlertDialog.Content>
    </AlertDialog.Root>
  );
};

() => {
  const [isOpen, setIsOpen] = React.useState(false);
  const DOMAIN_NAME = 'authkit-playground-staging.workos.dev';

  const form = useForm({
    resolver: zodResolver(
      z.object({
        confirmationText: z
          .string()
          .min(1, 'Confirmation text is required')
          .refine((val) => val === DOMAIN_NAME, {
            message: `Please type "${DOMAIN_NAME}" to confirm`,
          }),
      }),
    ),
    defaultValues: { confirmationText: '' },
  });

  // Reset form when dialog opens
  React.useEffect(() => {
    if (isOpen) {
      form.reset();
      form.clearErrors();
    }
  }, [isOpen, form]);

  const onSubmit = async (data) => {
    try {
      // Simulate API call that fails
      await new Promise((resolve, reject) => {
        setTimeout(() => {
          reject(new Error());
        }, 1500);
      });

      setIsOpen(false);
    } catch (error) {
      form.setError('root', {
        message: error.message || 'Something went wrong. Try again later.',
      });
    }
  };

  return (
    <AlertDialog.Root open={isOpen} onOpenChange={setIsOpen}>
      <AlertDialog.Trigger>
        <Button color="red">Test error handling</Button>
      </AlertDialog.Trigger>
      <AlertDialog.Content size="2">
        <AlertDialog.Header
          title="Delete AuthKit domain"
          error={form.formState.errors.root?.message}
        />
        <AlertDialog.Body>
          <form
            id="delete-domain-form"
            noValidate
            onSubmit={form.handleSubmit(onSubmit)}
          >
            <Flex direction="column" gap="3">
              <Text size="2">
                Are you sure you want to delete{' '}
                <Text weight="bold">{DOMAIN_NAME}</Text>?
              </Text>
              <Controller
                name="confirmationText"
                control={form.control}
                render={({ field, fieldState }) => (
                  <Flex direction="column" gap="2">
                    <label htmlFor="confirmationText">
                      <Text color="gray" size="2">
                        Please type <Text weight="bold">{DOMAIN_NAME}</Text> to
                        confirm the deletion.
                      </Text>
                    </label>
                    <TextField.Root
                      {...field}
                      id="confirmationText"
                      placeholder={DOMAIN_NAME}
                      invalid={!!fieldState.error}
                    />
                    {fieldState.error && (
                      <Text size="2" color="red" mt="1">
                        {fieldState.error.message}
                      </Text>
                    )}
                  </Flex>
                )}
              />
            </Flex>
          </form>
        </AlertDialog.Body>

        <AlertDialog.Footer>
          <AlertDialog.Cancel>
            <Button>Cancel</Button>
          </AlertDialog.Cancel>
          <Button
            type="submit"
            form="delete-domain-form"
            color="red"
            disabled={
              form.watch('confirmationText') !== DOMAIN_NAME ||
              form.formState.isSubmitting
            }
            loading={form.formState.isSubmitting}
          >
            Delete AuthKit domain
          </Button>
        </AlertDialog.Footer>
      </AlertDialog.Content>
    </AlertDialog.Root>
  );
};