@truedat/auth 8.14.3 → 8.14.5

package/src/users/components/NewUser.js

@@ -1,30 +1,141 @@
+import { useEffect } from "react";
 import PropTypes from "prop-types";
-import { Header, Container, Segment } from "semantic-ui-react";
-import { connect } from "react-redux";
+import { Form } from "semantic-ui-react";
 import { useIntl } from "react-intl";
+import { useForm, useWatch } from "react-hook-form";
+import TrueModal from "@truedat/core/components/TrueModal";
 import { createUser } from "../routines";
-import UserBreadcrumbs from "./UserBreadcrumbs";
-import UserForm from "./UserForm";
+import useUserModalOperation from "../hooks/useUserModalOperation";
+import useSortedGroups from "../hooks/useSortedGroups";
+import UserFormFields from "./UserFormFields";
+import UserPasswordField from "./UserPasswordField";
 
-const NewUser = ({ createUser }) => {
+const getDefaultValues = () => ({
+  full_name: "",
+  email: "",
+  user_name: "",
+  external_id: "",
+  role: "user",
+  groups: [],
+  password: "",
+  rep_password: "",
+});
+
+export const NewUser = ({ groups, onClose }) => {
   const { formatMessage } = useIntl();
+  const {
+    submit,
+    isSubmitting,
+    onClose: closeModal,
+    error,
+  } = useUserModalOperation(createUser, onClose);
+  const {
+    handleSubmit,
+    control,
+    trigger,
+    getValues,
+    formState: { errors, isValid },
+  } = useForm({
+    mode: "all",
+    defaultValues: getDefaultValues(),
+  });
+  const password = useWatch({ control, name: "password", defaultValue: "" });
+  useEffect(() => {
+    if (getValues("rep_password")) void trigger("rep_password");
+  }, [password, getValues, trigger]);
+
   return (
-    <>
-      <UserBreadcrumbs name={formatMessage({ id: "users.actions.create" })} />
-      <Container text as={Segment}>
-        <Header
-          as="h2"
-          icon="user"
-          content={formatMessage({ id: "users.actions.create" })}
+    <TrueModal
+      open
+      title={formatMessage({ id: "users.actions.create" })}
+      icon="add user"
+      actions={[
+        {
+          key: "cancel",
+          content: formatMessage({ id: "actions.cancel" }),
+          secondary: true,
+          onClick: closeModal,
+          disabled: isSubmitting,
+        },
+        {
+          key: "save",
+          content: formatMessage({
+            id: "user.create.submit",
+          }),
+          primary: true,
+          type: "submit",
+          form: "new-user-form",
+          disabled: isSubmitting || !isValid,
+          loading: isSubmitting,
+        },
+      ]}
+      onClose={closeModal}
+      aria-busy={isSubmitting}
+      closeOnEscape={!isSubmitting}
+      closeOnDimmerClick={!isSubmitting}
+      banner={error ? <span role="alert">{error}</span> : null}
+      bannerType="danger"
+      size="small"
+      className="user-modal user-modal--create"
+    >
+      <Form id="new-user-form" noValidate onSubmit={handleSubmit(submit)}>
+        <UserFormFields
+          control={control}
+          errors={errors}
+          isSubmitting={isSubmitting}
+          groups={groups}
         />
-        <UserForm onSubmit={createUser} />
-      </Container>
-    </>
+        <div className="um-section um-section--password">
+          <div className="um-section-header">
+            <div className="um-section-bar um-section-bar--password" />
+            <span className="um-section-label">
+              {formatMessage({ id: "user.password.header" })}
+            </span>
+          </div>
+          <div className="um-form-grid">
+            <UserPasswordField
+              control={control}
+              name="password"
+              label={formatMessage({ id: "user.form.password" })}
+              disabled={isSubmitting}
+              rules={{
+                required: formatMessage({ id: "user.password.required" }),
+                minLength: {
+                  value: 6,
+                  message: formatMessage(
+                    { id: "user.password.min_length" },
+                    { count: 6 },
+                  ),
+                },
+              }}
+            />
+            <UserPasswordField
+              control={control}
+              name="rep_password"
+              label={formatMessage({ id: "user.form.password_confirmation" })}
+              disabled={isSubmitting}
+              rules={{
+                required: formatMessage({ id: "user.password.required" }),
+                validate: (value) =>
+                  value === getValues("password") ||
+                  formatMessage({ id: "user.password.mismatch" }),
+              }}
+            />
+          </div>
+        </div>
+      </Form>
+    </TrueModal>
   );
 };
 
 NewUser.propTypes = {
-  createUser: PropTypes.func,
+  groups: PropTypes.array,
+  onClose: PropTypes.func.isRequired,
+};
+
+const NewUserWithGroups = (props) => {
+  const groups = useSortedGroups();
+  return <NewUser {...props} groups={groups} />;
 };
 
-export default connect(null, { createUser })(NewUser);
+export default NewUserWithGroups;

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,89 @@ 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";
+import UserGroupLink from "./UserGroupLink";
 
-export const UserAcls = ({ acls }) => {
+export const UnifiedAcls = ({ acls, groupBy }) => {
   const { formatMessage } = useIntl();
+  const grouped = Object.values(
+    _.groupBy((acl) =>
+      groupBy === "role"
+        ? acl.role
+        : JSON.stringify(
+            acl.groupId != null
+              ? ["group", acl.groupId]
+              : ["name", acl.group ?? null],
+          ),
+    )(acls),
+  ).sort(([left], [right]) =>
+    (groupBy === "role" ? left.role : left.group || "").localeCompare(
+      groupBy === "role" ? right.role : right.group || "",
+    ),
+  );
+  return _.isEmpty(acls) ? null : (
+    <Table>
+      <Table.Header>
+        <Table.Row>
+          {["role", "domain", "group"].map((column) => (
+            <Table.HeaderCell key={column}>
+              {formatMessage({ id: `user.acl.${column}` })}
+            </Table.HeaderCell>
+          ))}
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        {grouped.flatMap((entries, groupIndex) =>
+          _.sortBy(["role", "resource.name"])(entries).map((acl, index) => (
+            <Table.Row key={`${groupIndex}:${index}`}>
+              {(groupBy !== "role" || index === 0) && (
+                <Table.Cell rowSpan={groupBy === "role" ? entries.length : 1}>
+                  {acl.role}
+                </Table.Cell>
+              )}
+              <Table.Cell>
+                <DomainTooltip domain={acl.resource} />
+              </Table.Cell>
+              {(groupBy !== "group" || index === 0) && (
+                <Table.Cell rowSpan={groupBy === "group" ? entries.length : 1}>
+                  {acl.group && (
+                    <UserGroupLink id={acl.groupId} name={acl.group} />
+                  )}
+                </Table.Cell>
+              )}
+            </Table.Row>
+          )),
+        )}
+      </Table.Body>
+    </Table>
+  );
+};
+
+UnifiedAcls.propTypes = {
+  acls: PropTypes.array.isRequired,
+  groupBy: PropTypes.oneOf(["role", "group"]).isRequired,
+};
+
+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 +93,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 +144,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);