@truedat/auth 8.14.3 → 8.14.4

package/src/users/components/UserInfoModal.js

@@ -0,0 +1,268 @@
+import PropTypes from "prop-types";
+import { useState } from "react";
+import { connect } from "react-redux";
+import { Checkbox, Icon } from "semantic-ui-react";
+import { FormattedMessage, useIntl } from "react-intl";
+import { Link } from "react-router";
+import TrueModal from "@truedat/core/components/TrueModal";
+import { linkTo } from "@truedat/core/routes";
+import { useGroups } from "../../groups/hooks/useGroups";
+import { getUserAcls, getUserGroupAcls } from "../selectors";
+import { UserAcls } from "./UserAcls";
+import { UserGroupAcls } from "./UserGroupAcls";
+import UserGroupLink from "./UserGroupLink";
+import { userTypeOptions } from "./UserTypeSelector";
+
+const getGroupName = (group) => {
+  if (typeof group === "string") return group;
+  return group?.alias || group?.name || String(group);
+};
+
+export const UserInfoModal = ({
+  user,
+  groups = [],
+  acls,
+  groupAcls,
+  onClose,
+}) => {
+  const { formatMessage } = useIntl();
+  const [groupByRole, setGroupByRole] = useState(false);
+  const [aclsOpen, setAclsOpen] = useState(true);
+  const [groupAclsOpen, setGroupAclsOpen] = useState(true);
+
+  if (!user?.id) return null;
+
+  const displayName = user.full_name?.trim() || user.user_name || "";
+  const nameParts = displayName.split(/\s+/);
+  const initials =
+    (nameParts[0]?.[0] || "?") +
+    (nameParts.length > 1 ? nameParts[nameParts.length - 1][0] : "");
+  const userType = userTypeOptions.find(({ value }) => value === user.role);
+  const unavailable = formatMessage({ id: "user.info.unavailable" });
+  const hasAcls = acls?.length > 0;
+  const hasGroupAcls = groupAcls?.length > 0;
+  const aclsPanelId = `user-acls-panel-${user.id}`;
+  const groupAclsPanelId = `user-group-acls-panel-${user.id}`;
+
+  return (
+    <TrueModal
+      open
+      title={<FormattedMessage id="user.info.title" />}
+      icon="info circle"
+      actions={[
+        {
+          key: "close",
+          content: formatMessage({
+            id: "actions.close",
+            defaultMessage: "Close",
+          }),
+          secondary: true,
+          onClick: onClose,
+        },
+        {
+          key: "edit",
+          content: formatMessage({ id: "users.actions.edit" }),
+          primary: true,
+          as: Link,
+          to: linkTo.USER_EDIT({ id: user.id }),
+        },
+      ]}
+      onClose={onClose}
+      size="small"
+      className="user-modal user-modal--info"
+    >
+      <div className="um-profile">
+        <div className="um-avatar" aria-hidden="true">
+          {initials.toUpperCase()}
+        </div>
+        <div className="um-profile-identity">
+          <h2 className="um-profile-name">{displayName}</h2>
+          <p>
+            <Icon name="mail" size="small" aria-hidden="true" />
+            {user.email || <em className="um-unavailable">{unavailable}</em>}
+          </p>
+        </div>
+        {userType ? (
+          <span className="um-user-type-box um-user-type-box--active">
+            <Icon name={userType.icon} aria-hidden="true" />
+            {formatMessage({ id: userType.messageId })}
+          </span>
+        ) : (
+          <em className="um-unavailable">{user.role || unavailable}</em>
+        )}
+      </div>
+      <dl className="um-profile-fields">
+        {[
+          ["user circle", "user.form.user_name", user.user_name],
+          ["id badge", "user.form.external_id", user.external_id],
+        ].map(([icon, messageId, value]) => (
+          <div className="um-profile-field" key={messageId}>
+            <dt>
+              <Icon name={icon} aria-hidden="true" />
+              {formatMessage({ id: messageId })}
+            </dt>
+            <dd>
+              {value || <em className="um-unavailable">{unavailable}</em>}
+            </dd>
+          </div>
+        ))}
+      </dl>
+      {user.groups?.length ? (
+        <section className="um-profile-groups">
+          <h3 className="um-section-label">
+            <span>
+              <Icon name="users" aria-hidden="true" />
+            </span>
+            <span>
+              <FormattedMessage id="user.form.groups" />
+              <span className="um-acl-count">({user.groups.length})</span>
+            </span>
+          </h3>
+          <ul className="um-groups">
+            {user.groups.map((group, index) => {
+              const name = typeof group === "string" ? group : group?.name;
+              const alias =
+                typeof group === "string" ? group : group?.alias || name;
+              const namedGroup = groups.find(
+                (candidate) => name != null && candidate.name === name,
+              );
+              const aliasGroups = groups.filter(
+                (candidate) => alias && candidate.alias === alias,
+              );
+              const id =
+                group?.id ??
+                namedGroup?.id ??
+                (aliasGroups.length === 1 ? aliasGroups[0].id : undefined);
+              return (
+                <li key={id ?? index} className="um-group-chip">
+                  <UserGroupLink id={id} name={getGroupName(group)} />
+                </li>
+              );
+            })}
+          </ul>
+        </section>
+      ) : (
+        <p className="um-empty">
+          <Icon name="users" aria-hidden="true" />
+          <FormattedMessage id="user.info.no_groups" />
+        </p>
+      )}
+
+      <div className="um-permissions">
+        {hasAcls ? (
+          <div className="um-acl-section">
+            <div className="um-acl-toolbar">
+              <button
+                type="button"
+                className="um-acl-header"
+                aria-expanded={aclsOpen}
+                aria-controls={aclsPanelId}
+                onClick={() => setAclsOpen((open) => !open)}
+              >
+                <span className="um-acl-icon--primary">
+                  <Icon name="shield alternate" />
+                </span>
+                <span className="um-acl-title">
+                  <FormattedMessage id="user.info.direct_permissions" />
+                  <span className="um-acl-count">
+                    ({new Set(acls.map(({ role }) => role)).size})
+                  </span>
+                </span>
+                <Icon name={aclsOpen ? "chevron up" : "chevron down"} />
+              </button>
+              <div className="um-acl-grouping">
+                <Checkbox
+                  toggle
+                  label={formatMessage({ id: "user.info.group_by_role" })}
+                  checked={groupByRole}
+                  onChange={(_event, { checked }) => setGroupByRole(checked)}
+                />
+              </div>
+            </div>
+            {aclsOpen && (
+              <div
+                id={aclsPanelId}
+                className="um-acl-panel"
+                role="region"
+                aria-label={formatMessage({
+                  id: "user.info.direct_permissions",
+                })}
+                tabIndex={0}
+              >
+                <UserAcls
+                  acls={acls}
+                  groupBy={groupByRole ? "role" : "domain"}
+                />
+              </div>
+            )}
+          </div>
+        ) : (
+          <p className="um-empty">
+            <Icon name="shield alternate" aria-hidden="true" />
+            <FormattedMessage id="user.info.no_permissions" />
+          </p>
+        )}
+
+        {hasGroupAcls ? (
+          <div className="um-acl-section um-acl-section--groups">
+            <button
+              type="button"
+              className="um-acl-header"
+              aria-expanded={groupAclsOpen}
+              aria-controls={groupAclsPanelId}
+              onClick={() => setGroupAclsOpen((open) => !open)}
+            >
+              <span className="um-acl-icon--groups">
+                <Icon name="users" />
+              </span>
+              <span className="um-acl-title">
+                <FormattedMessage id="user.info.group_permissions" />
+                <span className="um-acl-count">({groupAcls.length})</span>
+              </span>
+              <Icon name={groupAclsOpen ? "chevron up" : "chevron down"} />
+            </button>
+            {groupAclsOpen && (
+              <div
+                id={groupAclsPanelId}
+                className="um-acl-panel"
+                role="region"
+                aria-label={formatMessage({
+                  id: "user.info.group_permissions",
+                })}
+                tabIndex={0}
+              >
+                <UserGroupAcls acls={groupAcls} />
+              </div>
+            )}
+          </div>
+        ) : (
+          <p className="um-empty">
+            <Icon name="users" aria-hidden="true" />
+            <FormattedMessage id="user.info.no_group_permissions" />
+          </p>
+        )}
+      </div>
+    </TrueModal>
+  );
+};
+
+UserInfoModal.propTypes = {
+  user: PropTypes.object,
+  groups: PropTypes.array,
+  acls: PropTypes.array,
+  groupAcls: PropTypes.array,
+  onClose: PropTypes.func.isRequired,
+};
+
+const UserInfoModalWithGroups = (props) => {
+  const { groups } = useGroups();
+  return <UserInfoModal {...props} groups={groups} />;
+};
+
+const mapStateToProps = (state) => ({
+  user: state.user,
+  acls: getUserAcls(state),
+  groupAcls: getUserGroupAcls(state),
+});
+
+export default connect(mapStateToProps)(UserInfoModalWithGroups);

package/src/users/components/UserPasswordField.js

@@ -0,0 +1,66 @@
+import { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import { Controller } from "react-hook-form";
+import { Form, Icon } from "semantic-ui-react";
+
+const Feedback = ({ id, message }) => {
+  const [lastMessage, setLastMessage] = useState(message);
+  useEffect(() => {
+    if (message) setLastMessage(message);
+  }, [message]);
+
+  return (
+    <div className="um-field-feedback" id={id} aria-live="polite">
+      <span className={message ? "is-visible" : ""} aria-hidden={!message}>
+        {lastMessage}
+      </span>
+    </div>
+  );
+};
+
+Feedback.propTypes = { id: PropTypes.string, message: PropTypes.string };
+
+const UserPasswordField = ({
+  control,
+  name,
+  label,
+  rules,
+  disabled,
+  autoComplete = "new-password",
+}) => (
+  <Controller
+    control={control}
+    name={name}
+    rules={rules}
+    render={({ field, fieldState: { error } }) => (
+      <Form.Field required disabled={disabled} error={Boolean(error)}>
+        <label htmlFor={name}>{label}</label>
+        <div className="ui left icon input">
+          <input
+            {...field}
+            id={name}
+            type="password"
+            autoComplete={autoComplete}
+            disabled={disabled}
+            required
+            aria-invalid={Boolean(error)}
+            aria-describedby={`${name}-feedback`}
+          />
+          <Icon name="lock" aria-hidden="true" />
+        </div>
+        <Feedback id={`${name}-feedback`} message={error?.message} />
+      </Form.Field>
+    )}
+  />
+);
+
+UserPasswordField.propTypes = {
+  control: PropTypes.object.isRequired,
+  name: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  rules: PropTypes.object,
+  disabled: PropTypes.bool,
+  autoComplete: PropTypes.string,
+};
+
+export default UserPasswordField;

package/src/users/components/UserPasswordModal.js

@@ -0,0 +1,210 @@
+import { useEffect, useRef } from "react";
+import { flushSync } from "react-dom";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { Form } from "semantic-ui-react";
+import { FormattedMessage, useIntl } from "react-intl";
+import { useForm, useWatch } from "react-hook-form";
+import TrueModal from "@truedat/core/components/TrueModal";
+import { updatePassword } from "../routines";
+import useUserModalOperation from "../hooks/useUserModalOperation";
+
+import UserPasswordField from "./UserPasswordField";
+
+const MIN_LENGTH = 6;
+const EMPTY_PASSWORDS = {
+  currentPassword: "",
+  password: "",
+  passwordConfirmation: "",
+};
+
+const getInitials = (fullName, userName) => {
+  const normalized = fullName?.trim() || "";
+  if (normalized) {
+    const parts = normalized.split(/\s+/);
+    return parts.length >= 2
+      ? (parts[0][0] + parts[parts.length - 1][0]).toUpperCase()
+      : parts[0][0].toUpperCase();
+  }
+  return userName ? userName[0].toUpperCase() : "?";
+};
+
+export const UserPasswordModal = ({ user, authUserName, onClose }) => {
+  const { formatMessage } = useIntl();
+  const discardTimer = useRef(null);
+  useEffect(() => () => clearTimeout(discardTimer.current), []);
+  const {
+    handleSubmit,
+    control,
+    reset,
+    getValues,
+    trigger,
+    formState: { isValid },
+  } = useForm({ mode: "all", defaultValues: EMPTY_PASSWORDS });
+  const password = useWatch({ control, name: "password" });
+  const discardAndClose = () => {
+    if (discardTimer.current !== null) return;
+    // Chrome retains typed passwords after value assignments. Native editing
+    // clears that state too; allow it to settle before removing the form/routing.
+    if (document.execCommand) {
+      document
+        .getElementById("password-modal-form")
+        ?.querySelectorAll('input[type="password"]')
+        .forEach((input) => {
+          if (!input.value) return;
+          input.focus({ preventScroll: true });
+          input.select();
+          document.execCommand("delete");
+        });
+    }
+    flushSync(() => reset(EMPTY_PASSWORDS));
+    discardTimer.current = setTimeout(() => {
+      discardTimer.current = null;
+      onClose();
+    }, 0);
+  };
+  const {
+    submit,
+    isSubmitting,
+    onClose: closeModal,
+    error,
+  } = useUserModalOperation(updatePassword, discardAndClose, onClose);
+
+  useEffect(() => {
+    if (getValues("passwordConfirmation")) void trigger("passwordConfirmation");
+  }, [password, getValues, trigger]);
+
+  const needsCurrentPassword =
+    !!authUserName && user?.user_name === authUserName;
+
+  if (!user?.id && !(authUserName && needsCurrentPassword)) return null;
+  const passwordRules = {
+    required: formatMessage({ id: "user.password.required" }),
+    minLength: {
+      value: MIN_LENGTH,
+      message: formatMessage(
+        { id: "user.password.min_length" },
+        { count: MIN_LENGTH },
+      ),
+    },
+  };
+
+  const onSubmit = ({ currentPassword, password }) => {
+    if (discardTimer.current !== null) return;
+    const userData = needsCurrentPassword
+      ? { new_password: password, old_password: currentPassword }
+      : { id: user.id, new_password: password };
+    submit({ user: userData });
+  };
+
+  const initials = getInitials(user.full_name, user.user_name);
+
+  return (
+    <TrueModal
+      open
+      title={formatMessage({ id: "user.password.change" })}
+      icon="lock"
+      actions={[
+        {
+          key: "cancel",
+          content: formatMessage({ id: "actions.cancel" }),
+          secondary: true,
+          onClick: closeModal,
+          disabled: isSubmitting,
+        },
+        {
+          key: "save",
+          content: formatMessage({ id: "user.password.change" }),
+          primary: true,
+          type: "submit",
+          form: "password-modal-form",
+          disabled: !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--password"
+    >
+      <div className="um-password-user">
+        <div className="um-avatar um-avatar--sm">{initials}</div>
+        <div>
+          <h2 className="um-profile-name">
+            {user.full_name?.trim() || user.user_name}
+          </h2>
+          <div className="um-password-email">
+            {user.email || (
+              <em className="um-unavailable">
+                <FormattedMessage id="user.info.unavailable" />
+              </em>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <Form
+        id="password-modal-form"
+        noValidate
+        onSubmit={handleSubmit(onSubmit)}
+      >
+        <input
+          className="um-accessible-field"
+          type="text"
+          name="username"
+          autoComplete="username"
+          value={user.user_name || authUserName || ""}
+          readOnly
+          tabIndex={-1}
+          aria-hidden="true"
+        />
+        {needsCurrentPassword && (
+          <UserPasswordField
+            control={control}
+            name="currentPassword"
+            label={formatMessage({ id: "user.password.current" })}
+            rules={passwordRules}
+            disabled={isSubmitting}
+            autoComplete="current-password"
+          />
+        )}
+        <UserPasswordField
+          control={control}
+          name="password"
+          label={formatMessage({ id: "user.password.new_password" })}
+          rules={passwordRules}
+          disabled={isSubmitting}
+        />
+        <UserPasswordField
+          control={control}
+          name="passwordConfirmation"
+          label={formatMessage({ id: "user.form.password_confirmation" })}
+          rules={{
+            required: formatMessage({ id: "user.password.required" }),
+            validate: (value) =>
+              value === getValues("password") ||
+              formatMessage({ id: "user.password.mismatch" }),
+          }}
+          disabled={isSubmitting}
+        />
+      </Form>
+    </TrueModal>
+  );
+};
+
+UserPasswordModal.propTypes = {
+  user: PropTypes.object,
+  authUserName: PropTypes.string,
+  onClose: PropTypes.func.isRequired,
+};
+
+const mapStateToProps = ({ user, authentication }) => ({
+  user,
+  authUserName: authentication?.user_name,
+});
+
+export default connect(mapStateToProps)(UserPasswordModal);

package/src/users/components/UserRoutes.js

@@ -1,15 +1,9 @@
 import { Routes, Route, Outlet } from "react-router";
 import { ProtectedRoute, Loader } from "@truedat/core/router";
 import GroupRouteModal from "../../groups/components/GroupRouteModal";
-
 import Password from "./Password";
-import EditUser from "./EditUser";
-import NewUser from "./NewUser";
-import User from "./User";
-import UserLoader from "./UserLoader";
 import UsersAndGroups from "./UsersAndGroups";
 import UsersLoader from "./UsersLoader";
-import UserPassword from "./UserPassword";
 
 export const UserRoutes = () => (
   <Routes>
@@ -22,13 +16,10 @@ export const UserRoutes = () => (
       }
     >
       <Route index element={<UsersAndGroups />} />
-      <Route path={"new"} element={<NewUser />} />
-
-      <Route path={":id"} element={<Loader loaders={<UserLoader />} />}>
-        <Route index element={<User />} />
-        <Route path={"edit"} element={<EditUser />} />
-        <Route path={"password"} element={<UserPassword />} />
-      </Route>
+      <Route path={"new"} element={<UsersAndGroups />} />
+      <Route path={":id"} element={<UsersAndGroups />} />
+      <Route path={":id/edit"} element={<UsersAndGroups />} />
+      <Route path={":id/password"} element={<UsersAndGroups />} />
     </Route>
     <Route
       path={"groups"}

package/src/users/components/UserTabs.js

@@ -6,12 +6,15 @@ import { GROUPS, USERS } from "@truedat/core/routes";
 
 const UserTabs = () => {
   const path = usePath();
+  const isUsersPath = path === USERS || path.startsWith(USERS + "/");
+  const isGroupsPath = path === GROUPS || path.startsWith(GROUPS + "/");
+
   return (
     <Menu attached="top" secondary pointing tabular>
-      <Menu.Item active={path === USERS} as={Link} to={USERS}>
+      <Menu.Item active={isUsersPath} as={Link} to={USERS}>
         <FormattedMessage id="tabs.users" />
       </Menu.Item>
-      <Menu.Item active={path === GROUPS} as={Link} to={GROUPS}>
+      <Menu.Item active={isGroupsPath} as={Link} to={GROUPS}>
         <FormattedMessage id="tabs.groups" />
       </Menu.Item>
     </Menu>