@truedat/auth 8.14.2 → 8.14.4

package/src/styles/Users.less

@@ -0,0 +1,280 @@
+.users-role-accordion.ui.styled.accordion {
+  clear: both;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  margin-top: 0.8rem;
+  background: transparent;
+}
+
+.users-role-accordion.ui.styled.accordion .title.users-role-title {
+  margin-bottom: 0.28rem;
+  border: 0;
+  border-bottom: 1px solid #d1d5db;
+  border-radius: 0;
+  background: transparent;
+  padding: 0.2rem 0.52rem 0.2rem 0.7rem;
+  box-shadow: none;
+}
+
+.users-role-toggle {
+  display: block;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: 2px solid #1d4ed8;
+    outline-offset: 2px;
+    border-radius: 2px;
+  }
+}
+
+.users-role-title-content {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.3rem;
+}
+
+.users-role-title-header.ui.header {
+  margin: 0;
+  display: flex;
+  align-items: center;
+  color: #0f172a;
+  min-height: 0.92rem;
+}
+
+.users-role-title-header.ui.header .content {
+  display: inline-flex;
+  align-items: center;
+  min-height: 0.9rem;
+  font-size: 1.34rem;
+  font-weight: 800;
+  letter-spacing: 0.01em;
+  line-height: 1;
+}
+
+.users-role-accordion.ui.styled.accordion
+  .users-role-title-header.ui.header
+  .content {
+  padding: 1rem 0 !important;
+}
+
+.users-role-count.ui.circular.label {
+  min-width: 1.34rem;
+  height: 1.34rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  font-size: 0.68rem;
+  font-weight: 800;
+  background: #0f172a;
+  color: #ffffff;
+}
+
+.users-role-chevron.icon {
+  margin: 0;
+  color: #334155;
+  font-size: 1.15rem;
+  line-height: 1;
+}
+
+.users-role-accordion.ui.styled.accordion .content.users-role-content {
+  margin: 0 0 0.55rem;
+  padding: 0 0.14rem 0.12rem;
+  border: 0;
+  background: transparent;
+}
+
+.users-role-card-group.ui.cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
+  gap: 1.75em 1rem;
+  margin: 0;
+  padding-block: 0.875em;
+
+  &::before,
+  &::after {
+    display: none;
+  }
+
+  > .ui.card.td-card-base.td-card--user {
+    width: 100%;
+    max-width: none;
+    min-width: 0;
+    margin: 0;
+  }
+}
+
+@media (min-width: 1600px) {
+  .users-role-card-group.ui.cards {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+}
+
+.users-role-title.users-role-title--admin {
+  border-bottom-color: #93c5fd;
+}
+
+.users-role-title.users-role-title--user {
+  border-bottom-color: #86efac;
+}
+
+.users-role-title.users-role-title--agent {
+  border-bottom-color: #c4b5fd;
+}
+
+.users-role-title.users-role-title--service {
+  border-bottom-color: #fdba74;
+}
+
+@media (max-width: 767px) {
+  .users-role-accordion.ui.styled.accordion .title.users-role-title {
+    padding: 0.18rem 0.42rem;
+  }
+
+  .users-role-title-header.ui.header .content {
+    font-size: 1.16rem;
+  }
+}
+
+.users-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+
+  > .ui.input {
+    flex: 1 1 12rem;
+    min-width: 0;
+
+    > input {
+      min-width: 0;
+      width: 0;
+      flex: 1 1 0;
+    }
+  }
+
+  > .ui.button,
+  .users-toolbar-actions .ui.button {
+    margin: 0;
+  }
+}
+
+.users-filters {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.users-toolbar-actions,
+.users-view-buttons {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.users-toolbar-actions {
+  margin-left: auto;
+  flex-wrap: wrap;
+}
+
+.users-results {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 0.75rem;
+
+  > .ui.label {
+    margin: 0;
+    font-weight: 400;
+  }
+}
+
+.users-table-scroll {
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+.ui.table.users-table {
+  min-width: 850px;
+  box-shadow: none;
+
+  td {
+    overflow-wrap: anywhere;
+    max-width: 22rem;
+  }
+  .users-table-actions {
+    white-space: nowrap;
+    .ui.button {
+      margin: 0 0 0 0.5rem;
+    }
+  }
+  .users-table-type .icon {
+    margin: 0;
+  }
+  .users-sort-hidden {
+    visibility: hidden;
+  }
+  .users-table-name {
+    font-weight: 700;
+  }
+  .users-table-username {
+    display: block;
+    color: #6b7280;
+    font-size: 0.875rem;
+  }
+}
+
+.users-table-sort {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.users-table-scroll:focus-visible,
+.users-table-sort:focus-visible,
+.users-table a:focus-visible,
+.users-table button:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+.users-toolbar .ui.input input::placeholder {
+  color: #6b7280;
+  font-weight: 400;
+  opacity: 1;
+}
+
+@media (max-width: 767px) {
+  .users-filters {
+    position: relative;
+
+    > .ui.dropdown {
+      position: static;
+
+      > .menu {
+        left: 0;
+        right: auto;
+        min-width: min(16rem, 100%);
+        max-width: 100%;
+      }
+    }
+  }
+}

package/src/users/components/AdminUserRoutes.js

@@ -1,42 +1,29 @@
-import React from "react";
 import { Route, Routes } from "react-router";
 import { Divider, Segment } from "semantic-ui-react";
-import Unauthorized from "@truedat/core/components/Unauthorized";
 import { useActiveRoute, useAuthorized } from "@truedat/core/hooks";
-import { ProtectedRoute, Loader } from "@truedat/core/router";
+import { ProtectedRoute } from "@truedat/core/router";
 import {
   GROUP,
   GROUP_CREATE,
   GROUP_EDIT,
   GROUPS,
-  USER,
-  USER_EDIT,
   USERS,
-  USERS_NEW,
-  USER_EDIT_PASSWORD,
 } from "@truedat/core/routes";
 import Group from "../../groups/components/Group";
 import GroupUsers from "../../groups/components/GroupUsers";
 import NewGroup from "../../groups/components/NewGroup";
 import EditGroup from "../../groups/components/EditGroup";
-import EditUser from "./EditUser";
 import GroupUserCrumbs from "./GroupUserCrumbs";
-import NewUser from "./NewUser";
-import User from "./User";
-import UserLoader from "./UserLoader";
 import UsersAndGroups from "./UsersAndGroups";
 import UsersLoader from "./UsersLoader";
-import UserPassword from "./UserPassword";
 
 const UserRoutes = () => (
   <Routes>
     <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 />} />
   </Routes>
 );
 
@@ -71,13 +58,13 @@ const GroupRoutes = () => (
 
 export const AdminUserRoutes = () => {
   const authorized = useAuthorized();
-  const usersActive = useActiveRoute(USERS);
+  const usersActive = useActiveRoute(`${USERS}/*`);
   return (
     <>
       {authorized && usersActive && <UsersLoader />}
       <Routes>
         <Route
-          path={USERS}
+          path={`${USERS}/*`}
           element={
             <ProtectedRoute>
               <UserRoutes />

package/src/users/components/EditUser.js

@@ -1,37 +1,10 @@
-import _ from "lodash/fp";
-import PropTypes from "prop-types";
-import { Header, Container, Segment } from "semantic-ui-react";
-import { connect } from "react-redux";
-import { useIntl } from "react-intl";
-import { updateUser } from "../routines";
-import UserBreadcrumbs from "./UserBreadcrumbs";
-import UserForm from "./UserForm";
+import { useNavigate } from "react-router";
+import { USERS } from "@truedat/core/routes";
+import EditUserModal from "./EditUserModal";
 
-const EditUser = ({ updateUser, user }) => {
-  const { formatMessage } = useIntl();
-  return _.isEmpty(user) ? null : (
-    <>
-      <UserBreadcrumbs name={formatMessage({ id: "users.actions.edit" })} />
-      <Container text as={Segment}>
-        <Header
-          as="h2"
-          icon="user"
-          content={formatMessage({ id: "users.actions.edit" })}
-        />
-        <UserForm
-          onSubmit={(props) => updateUser({ ...props, id: user?.id })}
-          user={user}
-        />
-      </Container>
-    </>
-  );
+const EditUser = () => {
+  const navigate = useNavigate();
+  return <EditUserModal onClose={() => navigate(USERS)} />;
 };
 
-EditUser.propTypes = {
-  user: PropTypes.object,
-  updateUser: PropTypes.func,
-};
-
-const mapStateToProps = ({ user }) => ({ user });
-
-export default connect(mapStateToProps, { updateUser })(EditUser);
+export default EditUser;

package/src/users/components/EditUserModal.js

@@ -0,0 +1,150 @@
+import { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { Form } from "semantic-ui-react";
+import { useIntl } from "react-intl";
+import { useForm } from "react-hook-form";
+import TrueModal from "@truedat/core/components/TrueModal";
+import { updateUser } from "../routines";
+import useUserModalOperation from "../hooks/useUserModalOperation";
+import useSortedGroups from "../hooks/useSortedGroups";
+import UserFormFields from "./UserFormFields";
+import { DeleteUserModal } from "./UserActions";
+
+const getDefaultValues = (user = {}) => ({
+  full_name: user.full_name || "",
+  email: user.email || "",
+  user_name: user.user_name || "",
+  external_id: user.external_id || "",
+  role: user.role || "user",
+  groups: user.groups || [],
+});
+
+export const EditUserModal = ({ user, groups, onClose }) => {
+  const { formatMessage } = useIntl();
+  const [deleteModalOpen, setDeleteModalOpen] = useState(false);
+  const {
+    submit,
+    isSubmitting,
+    onClose: closeModal,
+    error,
+  } = useUserModalOperation(updateUser, onClose);
+
+  const {
+    handleSubmit,
+    control,
+    reset,
+    formState: { errors, isDirty, isValid },
+  } = useForm({
+    mode: "all",
+    defaultValues: getDefaultValues(user),
+  });
+
+  useEffect(() => {
+    if (user?.id) {
+      reset(getDefaultValues(user));
+    }
+  }, [
+    reset,
+    user?.id,
+    user?.full_name,
+    user?.email,
+    user?.user_name,
+    user?.external_id,
+    user?.role,
+    user?.groups,
+  ]);
+
+  if (!user?.id) return null;
+
+  if (deleteModalOpen) {
+    return (
+      <DeleteUserModal
+        id={user.id}
+        name={user.full_name || user.user_name}
+        onClose={() => setDeleteModalOpen(false)}
+        onDeleted={onClose}
+      />
+    );
+  }
+
+  const onSubmitForm = (data) => {
+    submit({ ...data, id: user.id });
+  };
+
+  return (
+    <TrueModal
+      open
+      title={formatMessage({ id: "users.actions.edit" })}
+      icon="user"
+      subtitle={user.full_name || user.user_name}
+      actions={[
+        {
+          key: "delete",
+          content: formatMessage({
+            id: "user.actions.delete.confirmation.header",
+            defaultMessage: "Eliminar usuario",
+          }),
+          icon: "trash alternate",
+          basic: true,
+          negative: true,
+          className: "um-delete-user",
+          onClick: () => setDeleteModalOpen(true),
+          disabled: isSubmitting,
+        },
+        {
+          key: "cancel",
+          content: formatMessage({ id: "actions.cancel" }),
+          secondary: true,
+          onClick: closeModal,
+          disabled: isSubmitting,
+        },
+        {
+          key: "save",
+          content: formatMessage({ id: "user.edit.submit" }),
+          primary: true,
+          type: "submit",
+          form: "edit-user-form",
+          disabled: !isDirty || !isValid || isSubmitting,
+          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--edit"
+    >
+      <Form
+        id="edit-user-form"
+        noValidate
+        onSubmit={handleSubmit(onSubmitForm)}
+      >
+        <UserFormFields
+          control={control}
+          errors={errors}
+          isSubmitting={isSubmitting}
+          groups={groups}
+        />
+      </Form>
+    </TrueModal>
+  );
+};
+
+EditUserModal.propTypes = {
+  user: PropTypes.object,
+  groups: PropTypes.array,
+  onClose: PropTypes.func.isRequired,
+};
+
+const EditUserModalWithGroups = (props) => {
+  const groups = useSortedGroups();
+  return <EditUserModal {...props} groups={groups} />;
+};
+
+const mapStateToProps = ({ user }) => ({ user });
+
+export default connect(mapStateToProps)(EditUserModalWithGroups);

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;