@truedat/auth 8.14.2 → 8.14.4

package/src/users/components/Password.js

@@ -1,193 +1,16 @@
-import _ from "lodash/fp";
 import PropTypes from "prop-types";
-import { Container, Header, Icon, Segment } from "semantic-ui-react";
-import { FormattedMessage, useIntl } from "react-intl";
 import { connect } from "react-redux";
-import { useForm, Controller } from "react-hook-form";
-import { Button, Form } from "semantic-ui-react";
-import HistoryBackButton from "@truedat/core/components/HistoryBackButton";
-import { updatePassword } from "../routines";
-
-const MIN_LENGTH = 6;
-
-export const Password = ({
-  id,
-  userName,
-  authUserName,
-  updatePassword,
-  passwordUpdating,
-}) => {
-  const { formatMessage } = useIntl();
-  const {
-    handleSubmit,
-    control,
-    formState: { errors, isValid },
-    watch,
-  } = useForm({
-    mode: "all",
-    defaultValues: {
-      currentPassword: "",
-      password: "",
-      passwordConfirmation: "",
-    },
-  });
-
-  const needsCurrentPassword = _.isEmpty(userName) || userName === authUserName;
-
-  const onSubmit = ({ currentPassword, password }) => {
-    const user = needsCurrentPassword
-      ? { new_password: password, old_password: currentPassword }
-      : { id: id, new_password: password };
-    updatePassword({ user });
-  };
-
-  const passwordConfirmationValidator = (value) =>
-    value === watch("password") ||
-    formatMessage({ id: "user.password.must.match" });
+import { useNavigate } from "react-router";
+import { UserPasswordModal } from "./UserPasswordModal";
 
+export const Password = ({ id, userName, authUserName }) => {
+  const navigate = useNavigate();
   return (
-    <Container text as={Segment}>
-      <Header as="h2">
-        <Icon
-          circular
-          name={formatMessage({
-            id: "user.password.header.icon",
-            defaultMessage: "user",
-          })}
-        />
-        <Header.Content>
-          {_.isEmpty(userName) ? (
-            <FormattedMessage id="user.password.header" />
-          ) : (
-            userName
-          )}
-          <Header.Subheader>
-            <FormattedMessage id="user.password.change" />
-          </Header.Subheader>
-        </Header.Content>
-      </Header>
-      <Segment attached="bottom">
-        <Form onSubmit={handleSubmit(onSubmit)}>
-          {needsCurrentPassword ? (
-            <Controller
-              control={control}
-              name="currentPassword"
-              rules={{
-                minLength: {
-                  value: MIN_LENGTH,
-                  message: formatMessage(
-                    { id: "form.validation.minLength" },
-                    {
-                      prop: formatMessage({ id: "user.password.current" }),
-                      value: MIN_LENGTH,
-                    },
-                  ),
-                },
-                required: formatMessage(
-                  { id: "form.validation.required" },
-                  { prop: formatMessage({ id: "user.password.current" }) },
-                ),
-              }}
-              render={({ field: { onChange, onBlur, value } }) => (
-                <Form.Input
-                  autoComplete="off"
-                  error={
-                    errors.currentPassword?.type === "minLength" &&
-                    errors.currentPassword.message
-                  }
-                  icon="lock"
-                  iconPosition="left"
-                  id="currentPassword"
-                  label={formatMessage({ id: "user.password.current" })}
-                  onChange={onChange}
-                  onBlur={onBlur}
-                  value={value}
-                  type="password"
-                  required
-                />
-              )}
-            />
-          ) : null}
-          <Controller
-            control={control}
-            name="password"
-            rules={{
-              minLength: {
-                value: MIN_LENGTH,
-                message: formatMessage(
-                  { id: "form.validation.minLength" },
-                  {
-                    prop: formatMessage({ id: "user.password.new_password" }),
-                    value: MIN_LENGTH,
-                  },
-                ),
-              },
-              required: formatMessage(
-                { id: "form.validation.required" },
-                { prop: formatMessage({ id: "user.password.new_password" }) },
-              ),
-            }}
-            render={({ field: { onBlur, onChange, value } }) => (
-              <Form.Input
-                autoComplete="off"
-                error={
-                  errors.password?.type === "minLength" &&
-                  errors.password.message
-                }
-                icon="lock"
-                iconPosition="left"
-                id="password"
-                label={formatMessage({ id: "user.password.new_password" })}
-                onChange={onChange}
-                onBlur={onBlur}
-                value={value}
-                type="password"
-                required
-              />
-            )}
-          />
-          <Controller
-            control={control}
-            name="passwordConfirmation"
-            rules={{
-              validate: passwordConfirmationValidator,
-              required: true,
-            }}
-            render={({ field: { onBlur, onChange, value } }) => (
-              <Form.Input
-                autoComplete="off"
-                error={
-                  errors.passwordConfirmation?.type === "validate" &&
-                  errors.passwordConfirmation.message
-                }
-                icon="lock"
-                iconPosition="left"
-                id="passwordConfirmation"
-                label={formatMessage({ id: "login.form.re_password.label" })}
-                onChange={onChange}
-                onBlur={onBlur}
-                value={value}
-                type="password"
-                required
-              />
-            )}
-          />
-          <div className="actions">
-            <HistoryBackButton
-              content={<FormattedMessage id="actions.cancel" />}
-            />
-            <Button
-              primary
-              type="submit"
-              disabled={!isValid}
-              loading={passwordUpdating}
-            >
-              {formatMessage({ id: "user.password.save" })}
-            </Button>
-          </div>
-        </Form>
-      </Segment>
-    </Container>
+    <UserPasswordModal
+      user={{ id, user_name: userName || authUserName }}
+      authUserName={authUserName}
+      onClose={() => navigate(-1)}
+    />
   );
 };
 
@@ -197,9 +20,8 @@ Password.propTypes = {
   authUserName: PropTypes.string,
 };
 
-const mapStateToProps = ({ authentication, passwordUpdating }) => ({
-  passwordUpdating,
+const mapStateToProps = ({ authentication }) => ({
   authUserName: authentication?.user_name,
 });
 
-export default connect(mapStateToProps, { updatePassword })(Password);
+export default connect(mapStateToProps)(Password);

package/src/users/components/UserAcls.js

@@ -3,11 +3,28 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Header, Table } from "semantic-ui-react";
 import { useIntl } from "react-intl";
+import { DomainTooltip } from "@truedat/bg/taxonomy/components/DomainPath";
 import { getUserAcls } from "../selectors";
 import UserAclRow from "./UserAclRow";
 
-export const UserAcls = ({ acls }) => {
+export const UserAcls = ({ acls, groupBy }) => {
   const { formatMessage } = useIntl();
+  const grouped = groupBy
+    ? Object.entries(
+        _.groupBy((acl) =>
+          groupBy === "role"
+            ? acl.role
+            : `${acl.resource?.type}:${acl.resource?.id ?? acl.resource?.name}`,
+        )(acls || []),
+      ).sort(([, left], [, right]) =>
+        (groupBy === "role"
+          ? left[0].role
+          : left[0].resource?.name || ""
+        ).localeCompare(
+          groupBy === "role" ? right[0].role : right[0].resource?.name || "",
+        ),
+      )
+    : [];
   return _.isEmpty(acls) ? null : (
     <>
       <Header as="h2" content={formatMessage({ id: "user.acl" })} />
@@ -15,17 +32,49 @@ export const UserAcls = ({ acls }) => {
         <Table.Header>
           <Table.Row>
             <Table.HeaderCell
-              content={formatMessage({ id: "user.acl.domain" })}
+              content={formatMessage({
+                id: groupBy === "role" ? "user.acl.role" : "user.acl.domain",
+              })}
             />
             <Table.HeaderCell
-              content={formatMessage({ id: "user.acl.role" })}
+              content={formatMessage({
+                id: groupBy === "role" ? "user.acl.domain" : "user.acl.role",
+              })}
             />
           </Table.Row>
         </Table.Header>
         <Table.Body>
-          {acls.map((a, i) => (
-            <UserAclRow key={i} {...a} />
-          ))}
+          {groupBy
+            ? grouped.map(([key, entries]) => (
+                <Table.Row key={key}>
+                  <Table.Cell>
+                    {groupBy === "role" ? (
+                      entries[0].role
+                    ) : (
+                      <DomainTooltip domain={entries[0].resource} />
+                    )}
+                  </Table.Cell>
+                  <Table.Cell>
+                    <ul className="um-acl-values">
+                      {groupBy === "role"
+                        ? _.uniqBy(
+                            (acl) =>
+                              `${acl.resource?.type}:${acl.resource?.id ?? acl.resource?.name}`,
+                          )(entries).map(({ resource }) => (
+                            <li
+                              key={`${resource?.type}:${resource?.id ?? resource?.name}`}
+                            >
+                              <DomainTooltip domain={resource} />
+                            </li>
+                          ))
+                        : _.uniq(entries.map(({ role }) => role))
+                            .sort()
+                            .map((role) => <li key={role}>{role}</li>)}
+                    </ul>
+                  </Table.Cell>
+                </Table.Row>
+              ))
+            : acls.map((a, i) => <UserAclRow key={i} {...a} />)}
         </Table.Body>
       </Table>
     </>
@@ -34,6 +83,7 @@ export const UserAcls = ({ acls }) => {
 
 UserAcls.propTypes = {
   acls: PropTypes.array,
+  groupBy: PropTypes.oneOf(["domain", "role"]),
 };
 
 const mapStateToProps = (state) => ({

package/src/users/components/UserActions.js

@@ -1,45 +1,112 @@
 import _ from "lodash/fp";
-import { connect, useDispatch } from "react-redux";
+import { connect } from "react-redux";
+import { useState } from "react";
 import PropTypes from "prop-types";
 import { Button, Icon } from "semantic-ui-react";
-import { FormattedMessage } from "react-intl";
-import ConfirmModal from "@truedat/core/components/ConfirmModal";
+import { FormattedMessage, useIntl } from "react-intl";
+import TrueModal from "@truedat/core/components/TrueModal";
 import GroupActions from "@truedat/core/components/GroupActions";
 import { linkTo, USERS } from "@truedat/core/routes";
 import { Link, useNavigate } from "react-router";
-import { deleteUser, fetchUsers } from "../routines";
+import { deleteUser } from "../routines";
+import useUserModalOperation from "../hooks/useUserModalOperation";
 
-const ModalDelete = ({ handleDelete, id, name }) => (
-  <ConfirmModal
-    icon="trash"
-    trigger={
+export const DeleteUserModal = ({ id, name, onClose, onDeleted }) => {
+  const { formatMessage } = useIntl();
+  const {
+    submit,
+    isSubmitting,
+    onClose: closeModal,
+    error,
+  } = useUserModalOperation(deleteUser, onClose, () => {
+    onClose();
+    onDeleted?.();
+  });
+  return (
+    <TrueModal
+      open
+      title={formatMessage({ id: "user.delete.title" })}
+      headerColor="#ffffff"
+      headerTextColor="var(--td-danger, #b91c1c)"
+      icon="warning sign"
+      className="user-modal user-modal--delete"
+      size="mini"
+      onClose={closeModal}
+      aria-busy={isSubmitting}
+      closeOnEscape={!isSubmitting}
+      closeOnDimmerClick={!isSubmitting}
+      banner={error ? <span role="alert">{error}</span> : null}
+      bannerType="danger"
+      actions={[
+        {
+          key: "cancel",
+          secondary: true,
+          content: formatMessage({ id: "actions.cancel" }),
+          disabled: isSubmitting,
+          onClick: closeModal,
+        },
+        {
+          key: "delete",
+          negative: true,
+          content: formatMessage({ id: "user.delete.submit" }),
+          loading: isSubmitting,
+          onClick: () => submit({ id }),
+        },
+      ]}
+    >
+      <p>
+        <FormattedMessage
+          id="user.delete.description"
+          values={{
+            name,
+            strong: (chunks) => <strong>{chunks}</strong>,
+            danger: (chunks) => (
+              <span className="um-danger-text">{chunks}</span>
+            ),
+          }}
+        />
+      </p>
+      <p>
+        <FormattedMessage id="user.delete.confirm" />
+      </p>
+    </TrueModal>
+  );
+};
+
+DeleteUserModal.propTypes = {
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  name: PropTypes.string,
+  onDeleted: PropTypes.func,
+  onClose: PropTypes.func.isRequired,
+};
+
+const ModalDelete = ({ id, name }) => {
+  const navigate = useNavigate();
+  const [open, setOpen] = useState(false);
+  return (
+    <>
       <Button
         icon={<Icon name="trash alternate outline" color="red" />}
         content={<FormattedMessage id="actions.delete" />}
+        onClick={() => setOpen(true)}
       />
-    }
-    header={<FormattedMessage id="user.actions.delete.confirmation.header" />}
-    size="small"
-    content={
-      <FormattedMessage
-        id="user.actions.delete.confirmation.content"
-        values={{ name: <i>{name}</i> }}
-      />
-    }
-    onConfirm={() => handleDelete({ id })}
-  />
-);
-
-export const UserActions = ({ deleteUser, user: { id, name } }) => {
-  const navigate = useNavigate();
-  const dispatch = useDispatch();
-
-  const onConfirmDelete = async ({ id }) => {
-    await deleteUser({ id });
-    dispatch(fetchUsers());
-    navigate(USERS);
-  };
+      {open && (
+        <DeleteUserModal
+          onDeleted={() => navigate(USERS)}
+          id={id}
+          name={name}
+          onClose={() => setOpen(false)}
+        />
+      )}
+    </>
+  );
+};
+ModalDelete.propTypes = {
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  name: PropTypes.string,
+};
 
+export const UserActions = ({ user: { id, name, full_name, user_name } }) => {
   const generateAvailableActions = () => {
     const actions = {
       edit: true,
@@ -77,9 +144,8 @@ export const UserActions = ({ deleteUser, user: { id, name } }) => {
         icon: "trash",
         value: "delete",
         as: ModalDelete,
-        handleDelete: onConfirmDelete,
         id,
-        name,
+        name: full_name || name || user_name,
         selected: false,
         active: false,
       },
@@ -99,10 +165,9 @@ export const UserActions = ({ deleteUser, user: { id, name } }) => {
 };
 
 UserActions.propTypes = {
-  deleteUser: PropTypes.func,
   user: PropTypes.object.isRequired,
 };
 
 const mapStateToProps = ({ user }) => ({ user });
 
-export default connect(mapStateToProps, { deleteUser })(UserActions);
+export default connect(mapStateToProps)(UserActions);

package/src/users/components/UserCard.js

@@ -1,32 +1,178 @@
 import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import { Icon, Card } from "semantic-ui-react";
+import { Icon, Card, Label, Popup } from "semantic-ui-react";
 import { Link } from "react-router";
+import { useIntl } from "react-intl";
 import { linkTo } from "@truedat/core/routes";
-import { deleteUser } from "../routines";
 
-export const UserCard = ({
-  user: { user_name, id, full_name, email, external_id },
-  showFullName = true,
-}) => (
-  <Card key={id}>
-    <Card.Content>
-      <Card.Header as={Link} to={linkTo.USER({ id })}>
-        <Icon name="user" />
-        {user_name}
-      </Card.Header>
-      <Card.Description>
-        {showFullName ? full_name : external_id}
-        <br />
-        {email}
-      </Card.Description>
-    </Card.Content>
-  </Card>
+const getInitials = (fullName, userName) => {
+  const normalizedFullName = fullName?.trim() || "";
+
+  if (normalizedFullName) {
+    const parts = normalizedFullName.split(/\s+/);
+    return parts.length >= 2
+      ? (parts[0][0] + parts[parts.length - 1][0]).toUpperCase()
+      : parts[0][0].toUpperCase();
+  }
+  return userName ? userName[0].toUpperCase() : "?";
+};
+
+const getGroupName = (group) => {
+  if (typeof group === "string") {
+    return group;
+  }
+
+  return group?.alias || group?.name || String(group);
+};
+
+const renderGroupsBadgeLabel = (groupsCount, id) => (
+  <Label
+    as={Link}
+    to={linkTo.USER({ id })}
+    attached="bottom right"
+    className="overlapping groups-badge"
+  >
+    <Icon name="users" />
+    {groupsCount}
+  </Label>
 );
 
+const GroupsBadge = ({ groups, id }) => {
+  const { formatMessage } = useIntl();
+  const groupsCount = groups.length;
+
+  if (groupsCount === 0) {
+    return null;
+  }
+
+  const label = renderGroupsBadgeLabel(groupsCount, id);
+
+  return (
+    <Popup
+      className="uc-groups-popover"
+      content={
+        <div className="uc-groups-popup">
+          <div className="uc-groups-popup__header">
+            <Icon name="users" />
+            <span>{formatMessage({ id: "user.form.groups" })}</span>
+          </div>
+          <ul className="uc-groups-popup__list">
+            {groups.map((group) => {
+              const groupName = getGroupName(group);
+              return (
+                <li className="uc-groups-popup__item" key={groupName}>
+                  <span className="uc-groups-popup__marker">
+                    {groupName[0]?.toUpperCase()}
+                  </span>
+                  <span className="uc-groups-popup__name">{groupName}</span>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      }
+      position="bottom center"
+      trigger={label}
+    />
+  );
+};
+
+GroupsBadge.propTypes = {
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  groups: PropTypes.array,
+};
+
+export const UserCard = ({
+  user: { user_name, id, full_name, email, external_id, groups },
+}) => {
+  const { formatMessage } = useIntl();
+  const userName = user_name?.trim() || "";
+  const fullName = full_name?.trim() || "";
+  const displayName = fullName || userName;
+  const editUserLabel = formatMessage({ id: "users.actions.edit" });
+  const editPasswordLabel = formatMessage({
+    id: "user.actions.edit_password",
+  });
+  const usernameDetail = fullName ? userName : "";
+  const userEmail = email?.trim() || "";
+  const externalId = external_id?.trim() || "";
+  const userGroups = groups || [];
+
+  return (
+    <Card key={id} className="td-card-base td-card--user">
+      <Card.Content
+        as={Link}
+        className="uc-card-link"
+        to={linkTo.USER({ id })}
+        aria-label={formatMessage(
+          { id: "user.info.open" },
+          { name: displayName },
+        )}
+      >
+        <div className="uc-summary">
+          <div className="uc-avatar">{getInitials(full_name, user_name)}</div>
+          <div className="uc-name" title={displayName}>
+            {displayName}
+          </div>
+        </div>
+
+        <div className="uc-meta-grid">
+          {usernameDetail && (
+            <>
+              <Icon name="user" />
+              <span className="uc-username">{usernameDetail}</span>
+            </>
+          )}
+          {userEmail && (
+            <>
+              <Icon name="mail" />
+              <span className="uc-email">{userEmail}</span>
+            </>
+          )}
+          {externalId && (
+            <>
+              <Icon name="id badge" />
+              <span
+                className="uc-external-id"
+                title={`${formatMessage({
+                  id: "user.form.external_id",
+                  defaultMessage: "ID externo",
+                })}: ${externalId}`}
+              >
+                {externalId}
+              </span>
+            </>
+          )}
+        </div>
+      </Card.Content>
+
+      <div className="uc-actions">
+        <Link
+          className="uc-action-btn"
+          to={linkTo.USER_EDIT({ id })}
+          aria-label={editUserLabel}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <Icon name="pencil alternate" />
+          <span className="uc-action-label">{editUserLabel}</span>
+        </Link>
+        <Link
+          className="uc-action-btn uc-action-btn--key"
+          to={linkTo.USER_EDIT_PASSWORD({ id })}
+          aria-label={editPasswordLabel}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <Icon name="key" />
+          <span className="uc-action-label">{editPasswordLabel}</span>
+        </Link>
+      </div>
+
+      <GroupsBadge groups={userGroups} id={id} />
+    </Card>
+  );
+};
+
 UserCard.propTypes = {
   user: PropTypes.object,
-  showFullName: PropTypes.bool,
 };
 
-export default connect(null, { deleteUser })(UserCard);
+export default UserCard;