@activecollab/components/dist/esm/presentation/shared/UserMenu.js

ActiveCollab Components

import React, { useCallback, useState } from "react";
import { BackupCodesDialogs, CreateLoginCodeDialogs } from "./TwoFactorDialogs";
import { IconButton } from "../../components/IconButton";
import { ArchiveIcon, DollarIcon, EditIcon, HistoryOfChangesIcon, KeyIcon, LockIcon, PersonArrowOutCircleIcon, ProjectAddIcon, TrashIcon, TreeDotsIcon } from "../../components/Icons";
import { List, ListItem, ListSeparator } from "../../components/List";
import { Menu } from "../../components/Menu";

/* User three-dot options menu — the same component as the real
   `PeopleItemMenu` in the app (Menu + List of leading-icon items). Shared by
   every story under `Presentation/People/*` so the user-row actions stay
   identical in one place. Companies get their own menu. Most clicks are
   intentionally no-ops; the two self-hosted 2FA items open working dialogs. */

/** Which set of actions to show, from the owner/power-user's point of view.
 *  `self` = acting on their own row; `member` = another (active) member;
 *  `client` = a client/client+ (no rates & capacity — clients are excluded). */

/** A menu entry: a plain action row, a divider, or one of the self-hosted 2FA
 *  actions that open a dialog. */

/**
 * The two self-hosted 2FA menu items, kept separate from the always-present
 * entries because they render only when {@link UserMenuProps.selfHosted2FA} is
 * true. In the real app that flag is the combined guard
 * `!isOnDemand && multiFactorEnabled` — a Cloud account (Shepherd handles 2FA)
 * or a self-hosted account with 2FA off must never render them.
 *
 * - `backup-codes` — own account only (`self`), sits under Change Password.
 * - `create-login-code` — an owner acting on another user (`member`/`client`),
 *   sits after Change Permissions.
 */
const TWO_FACTOR_ENTRIES = {
  self: {
    type: "twoFactor",
    action: "backup-codes"
  },
  member: {
    type: "twoFactor",
    action: "create-login-code"
  },
  client: {
    type: "twoFactor",
    action: "create-login-code"
  }
};
const TWO_FACTOR_LABELS = {
  "backup-codes": "Backup Codes",
  "create-login-code": "Create Login Code"
};

/**
 * Menu contents per variant, mirroring the app's capability checks:
 * - `self` can edit their profile, change their password (and, on self-hosted
 *   with 2FA on, manage their Backup Codes), see rates/capacity and history,
 *   and invite themselves to projects.
 * - `member` (owner viewing another member) can change permissions (and, on
 *   self-hosted with 2FA on, Create Login Code), rates/capacity and history,
 *   invite to projects, then archive or delete.
 * - `client` (owner viewing a client) can edit profile, change password and
 *   permissions (and Create Login Code), see history, invite to projects, then
 *   archive or delete — but NOT rates & capacity.
 *
 * The 2FA entry is spliced in right after the anchor action below.
 */
const BASE_ENTRIES = {
  self: [{
    type: "item",
    icon: EditIcon,
    label: "Edit Profile"
  }, {
    type: "item",
    icon: LockIcon,
    label: "Change Password"
  }, {
    type: "item",
    icon: DollarIcon,
    label: "Rates and Capacity"
  }, {
    type: "item",
    icon: HistoryOfChangesIcon,
    label: "History of Changes"
  }, {
    type: "separator"
  }, {
    type: "item",
    icon: ProjectAddIcon,
    label: "Invite to Projects"
  }],
  member: [{
    type: "item",
    icon: PersonArrowOutCircleIcon,
    label: "Change Permissions"
  }, {
    type: "item",
    icon: DollarIcon,
    label: "Rates and Capacity"
  }, {
    type: "item",
    icon: HistoryOfChangesIcon,
    label: "History of Changes"
  }, {
    type: "separator"
  }, {
    type: "item",
    icon: ProjectAddIcon,
    label: "Invite to Projects"
  }, {
    type: "separator"
  }, {
    type: "item",
    icon: ArchiveIcon,
    label: "Archive"
  }, {
    type: "item",
    icon: TrashIcon,
    label: "Delete"
  }],
  client: [{
    type: "item",
    icon: EditIcon,
    label: "Edit Profile"
  }, {
    type: "item",
    icon: LockIcon,
    label: "Change Password"
  }, {
    type: "item",
    icon: PersonArrowOutCircleIcon,
    label: "Change Permissions"
  }, {
    type: "item",
    icon: HistoryOfChangesIcon,
    label: "History of Changes"
  }, {
    type: "separator"
  }, {
    type: "item",
    icon: ProjectAddIcon,
    label: "Invite to Projects"
  }, {
    type: "separator"
  }, {
    type: "item",
    icon: ArchiveIcon,
    label: "Archive"
  }, {
    type: "item",
    icon: TrashIcon,
    label: "Delete"
  }]
};

/** The action row each variant's 2FA item is inserted directly after. */
const TWO_FACTOR_ANCHOR = {
  self: "Change Password",
  member: "Change Permissions",
  client: "Change Permissions"
};

/** Build the final entry list, splicing the 2FA item in after its anchor when
 *  the self-hosted + 2FA-enabled guard is on. */
const entriesFor = (variant, selfHosted2FA) => {
  const base = BASE_ENTRIES[variant];
  const twoFactor = TWO_FACTOR_ENTRIES[variant];
  if (!selfHosted2FA || !twoFactor) {
    return base;
  }
  const anchorLabel = TWO_FACTOR_ANCHOR[variant];
  const out = [];
  base.forEach(entry => {
    out.push(entry);
    if (entry.type === "item" && entry.label === anchorLabel) {
      out.push(twoFactor);
    }
  });
  return out;
};
export const UserMenu = _ref => {
  let _ref$variant = _ref.variant,
    variant = _ref$variant === void 0 ? "member" : _ref$variant,
    targetClassName = _ref.targetClassName,
    _ref$size = _ref.size,
    size = _ref$size === void 0 ? "medium" : _ref$size,
    _ref$selfHosted2FA = _ref.selfHosted2FA,
    selfHosted2FA = _ref$selfHosted2FA === void 0 ? true : _ref$selfHosted2FA,
    _ref$userName = _ref.userName,
    userName = _ref$userName === void 0 ? "this user" : _ref$userName;
  const _useState = useState(false),
    open = _useState[0],
    setOpen = _useState[1];
  const _useState2 = useState(false),
    backupCodesOpen = _useState2[0],
    setBackupCodesOpen = _useState2[1];
  const _useState3 = useState(false),
    loginCodeOpen = _useState3[0],
    setLoginCodeOpen = _useState3[1];
  const handleOpen = useCallback(() => setOpen(true), []);
  const handleClose = useCallback(() => setOpen(false), []);
  const handleTwoFactor = useCallback(action => {
    // Close the menu first, then open the dialog (the app's
    // closed-menu-then-dialog pattern).
    setOpen(false);
    if (action === "backup-codes") {
      setBackupCodesOpen(true);
    } else {
      setLoginCodeOpen(true);
    }
  }, []);
  const triggerClassName = [targetClassName, open ? "open" : ""].filter(Boolean).join(" ") || undefined;
  const entries = entriesFor(variant, selfHosted2FA);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Menu, {
    open: open,
    onOpen: handleOpen,
    onClose: handleClose,
    position: "bottom-end",
    target: /*#__PURE__*/React.createElement(IconButton, {
      type: "button",
      variant: "text gray",
      size: size,
      className: triggerClassName,
      active: open
    }, /*#__PURE__*/React.createElement(TreeDotsIcon, null))
  }, /*#__PURE__*/React.createElement(List, {
    style: {
      padding: "8px 0",
      minWidth: 220
    },
    tabIndex: -1
  }, entries.map((entry, index) => {
    if (entry.type === "separator") {
      return /*#__PURE__*/React.createElement(ListSeparator, {
        key: "sep-" + index
      });
    }
    if (entry.type === "twoFactor") {
      return /*#__PURE__*/React.createElement(ListItem, {
        key: entry.action,
        onClick: () => handleTwoFactor(entry.action)
      }, /*#__PURE__*/React.createElement(KeyIcon, null), TWO_FACTOR_LABELS[entry.action]);
    }
    return /*#__PURE__*/React.createElement(ListItem, {
      key: entry.label,
      onClick: () => undefined
    }, /*#__PURE__*/React.createElement(entry.icon, null), entry.label);
  }))), /*#__PURE__*/React.createElement(BackupCodesDialogs, {
    open: backupCodesOpen,
    onClose: () => setBackupCodesOpen(false)
  }), /*#__PURE__*/React.createElement(CreateLoginCodeDialogs, {
    open: loginCodeOpen,
    onClose: () => setLoginCodeOpen(false),
    userName: userName
  }));
};
UserMenu.displayName = "UserMenu";
//# sourceMappingURL=UserMenu.js.map