@workos-inc/widgets 1.1.4 → 1.2.0

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

@@ -1,157 +0,0 @@
-"use client";
-
-import { DropdownMenu } from "@radix-ui/themes";
-import * as React from "react";
-import { Member } from "../api";
-import { DeleteUserDialog } from "./delete-user-dialog";
-import { EditUserRoleDialog } from "./edit-user-role-dialog";
-import {
-  DestructiveMenuItem,
-  DropdownMenuContent,
-  PrimaryMenuItem,
-} from "./elements";
-import { ResendInviteDialog } from "./resend-invite-dialog";
-import { RevokeInviteDialog } from "./revoke-invite-dialog";
-import { useRoles } from "../api";
-
-interface UserActionsDropdownProps {
-  user: Member;
-  children: React.ReactNode;
-}
-
-type UserActionDialog =
-  | "revoke-membership"
-  | "revoke-invite"
-  | "resend-invite"
-  | "edit-role";
-
-export const UserActionsDropdown = ({
-  user,
-  children,
-}: UserActionsDropdownProps) => {
-  const rolesQuery = useRoles({
-    query: {
-      initialData: [],
-    },
-  });
-  const [openDialog, setOpenDialog] = React.useState<UserActionDialog | null>(
-    null,
-  );
-
-  /**
-   * Assigns a key for each dialog based on its open state to ensure its
-   * internal state is cleared when it is closed.
-   */
-  function getDialogKey(dialog: UserActionDialog) {
-    return `${dialog}-${openDialog === dialog}-${user.id}`;
-  }
-
-  const { actions, items } = React.useMemo(() => {
-    const actions = new Set(user.actions);
-    const items: React.ReactElement[] = [];
-    if (actions.has("edit-role")) {
-      items.push(
-        <PrimaryMenuItem
-          key="edit-role"
-          onSelect={() => setOpenDialog("edit-role")}
-          disabled={
-            rolesQuery.isLoading ||
-            (rolesQuery.isSuccess && rolesQuery.data.length <= 1)
-          }
-          title={
-            rolesQuery.isSuccess && rolesQuery.data.length <= 1
-              ? "You cannot update the role for this user as there is only one role available."
-              : undefined
-          }
-        >
-          Edit role
-        </PrimaryMenuItem>,
-      );
-    }
-    if (actions.has("resend-invite")) {
-      items.push(
-        <PrimaryMenuItem
-          key="resend-invite"
-          onSelect={() => setOpenDialog("resend-invite")}
-        >
-          Resend invitation
-        </PrimaryMenuItem>,
-      );
-    }
-    if (actions.has("revoke-invite")) {
-      items.push(
-        <DestructiveMenuItem
-          key="revoke-invite"
-          onSelect={() => setOpenDialog("revoke-invite")}
-        >
-          Revoke invitation
-        </DestructiveMenuItem>,
-      );
-    }
-    if (actions.has("revoke-membership")) {
-      items.push(
-        <DestructiveMenuItem
-          key="revoke-membership"
-          onSelect={() => setOpenDialog("revoke-membership")}
-        >
-          Remove user
-        </DestructiveMenuItem>,
-      );
-    }
-    return {
-      actions,
-      items,
-    };
-  }, [rolesQuery, user.actions]);
-
-  if (user.isLoggedInUser || items.length === 0) {
-    return null;
-  }
-
-  return (
-    <>
-      <DropdownMenu.Root>
-        <DropdownMenu.Trigger>{children}</DropdownMenu.Trigger>
-        <DropdownMenuContent size="2" align="end">
-          {items}
-        </DropdownMenuContent>
-      </DropdownMenu.Root>
-
-      {actions.has("edit-role") && (
-        <EditUserRoleDialog
-          key={getDialogKey("edit-role")}
-          user={user}
-          open={openDialog === "edit-role"}
-          onOpenChange={(open) => !open && setOpenDialog(null)}
-        />
-      )}
-
-      {actions.has("revoke-membership") && (
-        <DeleteUserDialog
-          key={getDialogKey("revoke-membership")}
-          user={user}
-          open={openDialog === "revoke-membership"}
-          onOpenChange={(open) => !open && setOpenDialog(null)}
-        />
-      )}
-
-      {actions.has("revoke-invite") && (
-        <RevokeInviteDialog
-          key={getDialogKey("revoke-invite")}
-          user={user}
-          open={openDialog === "revoke-invite"}
-          onOpenChange={(open) => !open && setOpenDialog(null)}
-        />
-      )}
-
-      {actions.has("resend-invite") && (
-        <ResendInviteDialog
-          key={getDialogKey("resend-invite")}
-          user={user}
-          open={openDialog === "resend-invite"}
-          onOpenChange={(open) => !open && setOpenDialog(null)}
-        />
-      )}
-    </>
-  );
-};

package/src/lib/user-profile.tsx

@@ -1,227 +0,0 @@
-"use client";
-
-import {
-  Box,
-  Card,
-  DataList,
-  Flex,
-  Inset,
-  Separator,
-  Strong,
-  Text,
-} from "@radix-ui/themes";
-import clsx from "clsx";
-import { Avatar, SecondaryButton, Skeleton } from "./elements";
-import { Me } from "../api";
-import { EditUserProfileDialog } from "./edit-user-profile-dialog";
-import { getBestName } from "./utils";
-import { getOAuthIcon, getOAuthName } from "./oauth-icons";
-import { GenericError } from "./generic-error";
-
-interface UserProfileProps {
-  userData: Me;
-}
-
-export const UserProfile = ({ userData: user }: UserProfileProps) => {
-  const oauthAccounts = Object.entries(user.oauthProfiles || {});
-
-  return (
-    <Card
-      className={clsx("woswidgets-widget")}
-      data-woswidgets-widget-id="user-profile"
-      size="2"
-    >
-      <DataList.Root>
-        {user.profilePictureUrl && (
-          <>
-            <DataList.Item align="center">
-              <DataList.Label minWidth="220px" highContrast>
-                <Strong>Profile picture</Strong>
-              </DataList.Label>
-              <DataList.Value>
-                <Avatar
-                  size="2"
-                  fallback={<FallbackUserIcon />}
-                  src={user.profilePictureUrl}
-                />
-              </DataList.Value>
-            </DataList.Item>
-
-            <ListSeparator />
-          </>
-        )}
-
-        <DataList.Item align="center">
-          <DataList.Label highContrast>
-            <Strong>Full name</Strong>
-          </DataList.Label>
-          <DataList.Value>
-            <Flex
-              align="center"
-              justify="between"
-              width="100%"
-              minHeight="var(--space-6)"
-            >
-              <Text size="2">
-                {getBestName(user) || (
-                  <Text
-                    color="gray"
-                    style={{ color: "var(--gray-10)", cursor: "default" }}
-                  >
-                    Not set
-                  </Text>
-                )}
-              </Text>
-
-              <EditUserProfileDialog user={user}>
-                <SecondaryButton>Edit</SecondaryButton>
-              </EditUserProfileDialog>
-            </Flex>
-          </DataList.Value>
-        </DataList.Item>
-
-        <ListSeparator />
-
-        <DataList.Item align="center">
-          <DataList.Label highContrast>
-            <Strong>Email address</Strong>
-          </DataList.Label>
-          <DataList.Value>
-            <Flex align="center" minHeight="var(--space-6)">
-              <Text size="2">{user.email}</Text>
-            </Flex>
-          </DataList.Value>
-        </DataList.Item>
-
-        {oauthAccounts.length > 0 && (
-          <>
-            <ListSeparator />
-
-            <DataList.Item>
-              <DataList.Label highContrast>
-                <Strong>Connected accounts</Strong>
-              </DataList.Label>
-              <DataList.Value>
-                <Flex direction="column" gap="2">
-                  {oauthAccounts.map(([account, data]) => (
-                    <OAuthAccount
-                      key={account}
-                      account={account}
-                      email={data?.email}
-                    />
-                  ))}
-                </Flex>
-              </DataList.Value>
-            </DataList.Item>
-          </>
-        )}
-      </DataList.Root>
-    </Card>
-  );
-};
-
-export function UserProfileLoading() {
-  return (
-    <Card size="2">
-      <DataList.Root>
-        <DataList.Item align="center">
-          <DataList.Label minWidth="220px" highContrast>
-            <Strong>
-              <Skeleton>Full name</Skeleton>
-            </Strong>
-          </DataList.Label>
-          <DataList.Value>
-            <Flex
-              align="center"
-              justify="between"
-              width="100%"
-              minHeight="var(--space-6)"
-            >
-              <Text size="2">
-                <Skeleton>Full name</Skeleton>
-              </Text>
-            </Flex>
-          </DataList.Value>
-        </DataList.Item>
-
-        <ListSeparator />
-
-        <DataList.Item align="center">
-          <DataList.Label highContrast>
-            <Strong>
-              <Skeleton>Email address</Skeleton>
-            </Strong>
-          </DataList.Label>
-          <DataList.Value>
-            <Flex align="center" minHeight="var(--space-6)">
-              <Text size="2">
-                <Skeleton>Email address</Skeleton>
-              </Text>
-            </Flex>
-          </DataList.Value>
-        </DataList.Item>
-      </DataList.Root>
-    </Card>
-  );
-}
-
-export function UserProfileError({ error }: { error: unknown }) {
-  return (
-    <Card size="2">
-      <GenericError error={error} />
-    </Card>
-  );
-}
-
-const ListSeparator = () => (
-  <Box asChild gridColumn="span 2">
-    <Inset side="x">
-      <Separator size="4" />
-    </Inset>
-  </Box>
-);
-
-const OAuthAccount = ({
-  account,
-  email,
-}: {
-  account: string;
-  email?: string | null;
-}) => {
-  const Icon = getOAuthIcon(account);
-  const name = getOAuthName(account);
-
-  return (
-    <Flex align="center" gap="1">
-      <Icon />
-
-      <Text size="2" ml="1">
-        {name}
-      </Text>
-
-      {email && (
-        <Box display={{ initial: "none", sm: "contents" }}>
-          <Text size="2" color="gray">
-            ∙
-          </Text>
-          <Text size="2" color="gray">
-            {email}
-          </Text>
-        </Box>
-      )}
-    </Flex>
-  );
-};
-
-const FallbackUserIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="20"
-    height="20"
-    fill="currentColor"
-    viewBox="0 0 256 256"
-  >
-    <title>User icon</title>
-    <path d="M229.19,213c-15.81-27.32-40.63-46.49-69.47-54.62a70,70,0,1,0-63.44,0C67.44,166.5,42.62,185.67,26.81,213a6,6,0,1,0,10.38,6C56.4,185.81,90.34,166,128,166s71.6,19.81,90.81,53a6,6,0,1,0,10.38-6ZM70,96a58,58,0,1,1,58,58A58.07,58.07,0,0,1,70,96Z" />
-  </svg>
-);

package/src/lib/user-security.tsx

@@ -1,187 +0,0 @@
-"use client";
-
-import { Card, Flex, Grid, Text } from "@radix-ui/themes";
-import clsx from "clsx";
-import { SecondaryButton, Skeleton } from "./elements";
-import { IconPanel } from "./icon-panel";
-import { ButtonIcon, LockClosedIcon } from "@radix-ui/react-icons";
-import { SetPasswordDialog } from "./set-password-dialog";
-import { ChangePasswordDialog } from "./change-password-dialog";
-import { AddMfaDialog } from "./add-mfa-dialog";
-import type {
-  AuthenticationInformationResponseData as AuthenticationSettings,
-  AuthenticationInformationResponseDataVerificationMethodsPassword as PasswordVerificationMethod,
-  AuthenticationInformationResponseDataVerificationMethodsMfa as MfaVerificationMethod,
-} from "../api";
-import { ResetMfaDialog } from "./reset-mfa-dialog";
-import * as CardList from "../card-list";
-import { GenericError } from "./generic-error";
-import { getComparativeReadableDate } from "./utils";
-
-interface UserSecurityProps {
-  settings: AuthenticationSettings;
-}
-
-export const UserSecurity = ({ settings }: UserSecurityProps) => {
-  const passwordSettings = settings.verificationMethods.Password;
-  const mfaSettings = settings.verificationMethods.Mfa;
-
-  return (
-    <CardList.Root
-      className={clsx("woswidgets-widget")}
-      data-woswidgets-widget-id="user-security"
-    >
-      {passwordSettings && (
-        <CardList.Item>
-          <PasswordSettings settings={passwordSettings} />
-        </CardList.Item>
-      )}
-
-      {mfaSettings && (
-        <CardList.Item>
-          <MfaSettings
-            settings={mfaSettings}
-            isPasswordSet={!!passwordSettings?.isSetUp}
-          />
-        </CardList.Item>
-      )}
-    </CardList.Root>
-  );
-};
-
-export function UserSecurityError({ error }: { error: unknown }) {
-  return (
-    <Card size="2">
-      <GenericError error={error} />
-    </Card>
-  );
-}
-
-export function UserSecurityLoading() {
-  return (
-    <Card size="2">
-      <Grid columns="auto 1fr auto" align="center" gap="4">
-        <Skeleton>
-          <IconPanel />
-        </Skeleton>
-
-        <Flex direction="column">
-          <Text size="2" highContrast weight="bold" as="p" mb="-2px">
-            <Skeleton>Password</Skeleton>
-          </Text>
-          <Text as="p" size="2" color="gray">
-            <Skeleton>Set a password to access your account</Skeleton>
-          </Text>
-        </Flex>
-
-        <ChangePasswordDialog>
-          <Skeleton>
-            <SecondaryButton>Change</SecondaryButton>
-          </Skeleton>
-        </ChangePasswordDialog>
-      </Grid>
-    </Card>
-  );
-}
-
-function PasswordSettings({
-  settings,
-}: {
-  settings: NonNullable<PasswordVerificationMethod>;
-}) {
-  return (
-    <Grid columns="auto 1fr auto" align="center" gap="4">
-      <IconPanel>
-        <LockClosedIcon />
-      </IconPanel>
-
-      <Flex direction="column">
-        <Text size="2" highContrast weight="bold" as="p" mb="-2px">
-          Password
-        </Text>
-
-        {settings.isSetUp ? (
-          settings.lastUsed && (
-            <Text size="2" color="gray">
-              Last used{" "}
-              {getComparativeReadableDate(
-                new Date(),
-                new Date(settings.lastUsed),
-              )}
-            </Text>
-          )
-        ) : (
-          <Text as="p" size="2" color="gray">
-            Set a password to access your account
-          </Text>
-        )}
-      </Flex>
-
-      {settings.isSetUp ? (
-        <ChangePasswordDialog>
-          <SecondaryButton>Change</SecondaryButton>
-        </ChangePasswordDialog>
-      ) : (
-        <SetPasswordDialog>
-          <SecondaryButton>Set a password</SecondaryButton>
-        </SetPasswordDialog>
-      )}
-    </Grid>
-  );
-}
-
-function MfaSettings({
-  settings,
-  isPasswordSet,
-}: {
-  settings: NonNullable<MfaVerificationMethod>;
-  isPasswordSet: boolean;
-}) {
-  return (
-    <Grid columns="auto 1fr auto" align="center" gap="4">
-      <IconPanel>
-        <ButtonIcon />
-      </IconPanel>
-
-      <Flex direction="column">
-        <Text size="2" highContrast weight="bold" as="p" mb="-2px">
-          Multi-factor authentication
-        </Text>
-
-        {settings.isSetUp ? (
-          <Text size="2">
-            Authenticator app
-            {settings.lastUsed && (
-              <>
-                <Text size="2" color="gray" mx="1">
-                  ∙
-                </Text>
-                <Text size="2" color="gray">
-                  Last used{" "}
-                  {getComparativeReadableDate(
-                    new Date(),
-                    new Date(settings.lastUsed),
-                  )}
-                </Text>
-              </>
-            )}
-          </Text>
-        ) : (
-          <Text as="p" size="2" color="gray">
-            Secure your account with an extra verification step
-          </Text>
-        )}
-      </Flex>
-
-      {settings.isSetUp ? (
-        <ResetMfaDialog isPasswordSet={isPasswordSet}>
-          <SecondaryButton>Disable</SecondaryButton>
-        </ResetMfaDialog>
-      ) : (
-        <AddMfaDialog>
-          <SecondaryButton>Set up authenticator app</SecondaryButton>
-        </AddMfaDialog>
-      )}
-    </Grid>
-  );
-}