@akemona-org/strapi-plugin-users-permissions 3.7.0

package/admin/src/containers/Roles/ListPage/index.js

@@ -0,0 +1,188 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { List, Header } from '@buffetjs/custom';
+import { Helmet } from 'react-helmet';
+import { useIntl } from 'react-intl';
+import { useHistory } from 'react-router-dom';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useUserPermissions, PopUpWarning, request, useGlobalContext } from 'strapi-helper-plugin';
+
+import permissions from '../../../permissions';
+import { EmptyRole, RoleListWrapper, RoleRow } from '../../../components/Roles';
+import { useRolesList } from '../../../hooks';
+import BaselineAlignment from './BaselineAlignment';
+import pluginId from '../../../pluginId';
+import { getTrad } from '../../../utils';
+
+const RoleListPage = () => {
+  const { formatMessage } = useIntl();
+  const { emitEvent } = useGlobalContext();
+  const { push } = useHistory();
+
+  const [modalToDelete, setModalDelete] = useState();
+  const [shouldRefetchData, setShouldRefetchData] = useState(false);
+  const [showModalConfirmButtonLoading, setModalButtonLoading] = useState(false);
+
+  const updatePermissions = useMemo(() => {
+    return {
+      update: permissions.updateRole,
+      create: permissions.createRole,
+      delete: permissions.deleteRole,
+      read: permissions.readRoles,
+    };
+  }, []);
+  const {
+    isLoading: isLoadingForPermissions,
+    allowedActions: { canCreate, canUpdate, canDelete, canRead },
+  } = useUserPermissions(updatePermissions);
+  const shouldFetchData = !isLoadingForPermissions && canRead;
+
+  const { roles, getData, isLoading } = useRolesList(shouldFetchData);
+
+  const handleGoTo = id => {
+    if (canUpdate) {
+      push(`/settings/${pluginId}/roles/${id}`);
+    }
+  };
+
+  const handleDelete = () => {
+    strapi.lockAppWithOverlay();
+
+    setModalButtonLoading(true);
+
+    Promise.resolve(
+      request(`/${pluginId}/roles/${modalToDelete}`, {
+        method: 'DELETE',
+      })
+    )
+      .then(() => {
+        setShouldRefetchData(true);
+        strapi.notification.toggle({
+          type: 'success',
+          message: { id: getTrad('Settings.roles.deleted') },
+        });
+      })
+      .catch(err => {
+        console.error(err);
+        strapi.notification.toggle({
+          type: 'warning',
+          message: { id: 'notification.error' },
+        });
+      })
+      .finally(() => {
+        setModalDelete(null);
+        strapi.unlockApp();
+      });
+  };
+
+  const handleClosedModalDelete = () => {
+    if (shouldRefetchData) {
+      getData();
+    }
+    setModalButtonLoading(false);
+    setShouldRefetchData(false);
+  };
+
+  const handleNewRoleClick = () => {
+    emitEvent('willCreateRole');
+    push(`/settings/${pluginId}/roles/new`);
+  };
+
+  /* eslint-disable indent */
+  const headerActions = canCreate
+    ? [
+        {
+          label: formatMessage({
+            id: getTrad('List.button.roles'),
+            defaultMessage: 'Add new role',
+          }),
+          onClick: handleNewRoleClick,
+          color: 'primary',
+          type: 'button',
+          icon: true,
+        },
+      ]
+    : [];
+  /* eslint-enable indent */
+
+  const checkCanDeleteRole = useCallback(
+    role => {
+      return canDelete && !['public', 'authenticated'].includes(role.type);
+    },
+    [canDelete]
+  );
+
+  const getLinks = role => {
+    const links = [];
+
+    if (canUpdate) {
+      links.push({
+        icon: <FontAwesomeIcon icon="pencil-alt" />,
+        onClick: () => handleGoTo(role.id),
+      });
+    }
+    if (checkCanDeleteRole(role)) {
+      links.push({
+        icon: <FontAwesomeIcon icon="trash-alt" />,
+        onClick: e => {
+          e.preventDefault();
+          setModalDelete(role.id);
+          e.stopPropagation();
+        },
+      });
+    }
+
+    return links;
+  };
+
+  return (
+    <>
+      <Helmet title={formatMessage({ id: getTrad('page.title') })} />
+
+      <Header
+        icon
+        title={{
+          label: formatMessage({
+            id: getTrad('Settings.roles.title'),
+            defaultMessage: 'Roles & Permissions',
+          }),
+        }}
+        content={formatMessage({
+          id: getTrad('Settings.roles.list.description'),
+          defaultMessage: 'Define the roles and permissions for your users.',
+        })}
+        actions={headerActions}
+        // Show a loader in the header while requesting data
+        isLoading={isLoading || isLoadingForPermissions}
+      />
+
+      <BaselineAlignment />
+      {canRead && (
+        <RoleListWrapper>
+          <List
+            title={formatMessage(
+              {
+                id: `Settings.roles.list.title${roles.length > 1 ? '.plural' : '.singular'}`,
+              },
+              { number: roles.length }
+            )}
+            items={roles}
+            isLoading={isLoading || isLoadingForPermissions}
+            customRowComponent={role => (
+              <RoleRow onClick={() => handleGoTo(role.id)} links={getLinks(role)} role={role} />
+            )}
+          />
+          {!roles && !isLoading && !isLoadingForPermissions && <EmptyRole />}
+          <PopUpWarning
+            isOpen={Boolean(modalToDelete)}
+            onConfirm={handleDelete}
+            onClosed={handleClosedModalDelete}
+            toggleModal={() => setModalDelete(null)}
+            isConfirmButtonLoading={showModalConfirmButtonLoading}
+          />
+        </RoleListWrapper>
+      )}
+    </>
+  );
+};
+
+export default RoleListPage;

package/admin/src/containers/Roles/ProtectedCreatePage/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { CheckPagePermissions } from 'strapi-helper-plugin';
+import pluginPermissions from '../../../permissions';
+import RolesCreatePage from '../CreatePage';
+
+const ProtectedRolesCreatePage = () => (
+  <CheckPagePermissions permissions={pluginPermissions.createRole}>
+    <RolesCreatePage />
+  </CheckPagePermissions>
+);
+
+export default ProtectedRolesCreatePage;

package/admin/src/containers/Roles/ProtectedEditPage/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { CheckPagePermissions } from 'strapi-helper-plugin';
+import pluginPermissions from '../../../permissions';
+import RolesEditPage from '../EditPage';
+
+const ProtectedRolesEditPage = () => (
+  <CheckPagePermissions permissions={pluginPermissions.updateRole}>
+    <RolesEditPage />
+  </CheckPagePermissions>
+);
+
+export default ProtectedRolesEditPage;

package/admin/src/containers/Roles/ProtectedListPage/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { CheckPagePermissions } from 'strapi-helper-plugin';
+import pluginPermissions from '../../../permissions';
+
+import RolesListPage from '../ListPage';
+
+const ProtectedRolesListPage = () => {
+  return (
+    <CheckPagePermissions permissions={pluginPermissions.accessRoles}>
+      <RolesListPage />
+    </CheckPagePermissions>
+  );
+};
+
+export default ProtectedRolesListPage;

package/admin/src/containers/Roles/index.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Switch, Route } from 'react-router-dom';
+import { useGlobalContext, NotFound } from 'strapi-helper-plugin';
+import pluginId from '../../pluginId';
+
+import ProtectedRolesListPage from './ProtectedListPage';
+import ProtectedRolesEditPage from './ProtectedEditPage';
+import ProtectedRolesCreatePage from './ProtectedCreatePage';
+
+const Roles = () => {
+  const { settingsBaseURL } = useGlobalContext();
+
+  return (
+    <Switch>
+      <Route
+        path={`${settingsBaseURL}/${pluginId}/roles/new`}
+        component={ProtectedRolesCreatePage}
+        exact
+      />
+      <Route
+        path={`${settingsBaseURL}/${pluginId}/roles/:id`}
+        component={ProtectedRolesEditPage}
+        exact
+      />
+      <Route
+        path={`${settingsBaseURL}/${pluginId}/roles`}
+        component={ProtectedRolesListPage}
+        exact
+      />
+      <Route path="" component={NotFound} />
+    </Switch>
+  );
+};
+
+export default Roles;

package/admin/src/contexts/EditPage/index.js

@@ -0,0 +1,26 @@
+import React, { createContext, useContext } from 'react';
+import PropTypes from 'prop-types';
+
+const EditPageContext = createContext({});
+
+const EditPageContextProvider = ({ children, ...rest }) => {
+  return <EditPageContext.Provider value={rest}>{children}</EditPageContext.Provider>;
+};
+
+const useEditPageContext = () => useContext(EditPageContext);
+
+EditPageContextProvider.defaultProps = {
+  emitEvent: () => {},
+};
+
+EditPageContextProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+  emitEvent: PropTypes.func,
+  onChange: PropTypes.func.isRequired,
+  selectAllActions: PropTypes.func.isRequired,
+  setInputPoliciesPath: PropTypes.func.isRequired,
+  setShouldDisplayPolicieshint: PropTypes.func.isRequired,
+  resetShouldDisplayPoliciesHint: PropTypes.func.isRequired,
+};
+
+export { EditPageContext, EditPageContextProvider, useEditPageContext };

package/admin/src/contexts/HomePage/index.js

@@ -0,0 +1,27 @@
+import React, { createContext, useContext } from 'react';
+import PropTypes from 'prop-types';
+
+const HomePageContext = createContext({});
+
+const HomePageContextProvider = ({ children, ...rest }) => {
+  return <HomePageContext.Provider value={rest}>{children}</HomePageContext.Provider>;
+};
+
+const useHomePageContext = () => useContext(HomePageContext);
+
+HomePageContextProvider.defaultProps = {
+  pathname: '',
+  push: () => {},
+  setDataToEdit: () => {},
+  unsetDataToEdit: () => {},
+};
+
+HomePageContextProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+  pathname: PropTypes.string,
+  push: PropTypes.func,
+  setDataToEdit: PropTypes.func,
+  unsetDataToEdit: PropTypes.func,
+};
+
+export { HomePageContext, HomePageContextProvider, useHomePageContext };

package/admin/src/contexts/UsersPermissionsContext/index.js

@@ -0,0 +1,17 @@
+import React, { createContext, useContext } from 'react';
+import PropTypes from 'prop-types';
+
+const UsersPermissions = createContext({});
+
+const UsersPermissionsProvider = ({ children, value }) => {
+  return <UsersPermissions.Provider value={value}>{children}</UsersPermissions.Provider>;
+};
+
+const useUsersPermissions = () => useContext(UsersPermissions);
+
+UsersPermissionsProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+  value: PropTypes.object.isRequired,
+};
+
+export { UsersPermissions, UsersPermissionsProvider, useUsersPermissions };

package/admin/src/hooks/index.js

@@ -0,0 +1,5 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as useForm } from './useForm';
+export { default as useRolesList } from './useRolesList';
+export { default as usePlugins } from './usePlugins';
+export { default as useFetchRole } from './useFetchRole';

package/admin/src/hooks/useFetchRole/index.js

@@ -0,0 +1,55 @@
+import { useCallback, useReducer, useEffect } from 'react';
+import { request } from 'strapi-helper-plugin';
+
+import reducer, { initialState } from './reducer';
+
+import pluginId from '../../pluginId';
+
+const useFetchRole = id => {
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  useEffect(() => {
+    if (id) {
+      fetchRole(id);
+    } else {
+      dispatch({
+        type: 'GET_DATA_SUCCEEDED',
+        role: {},
+      });
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id]);
+
+  const fetchRole = async roleId => {
+    try {
+      const { role } = await request(`/${pluginId}/roles/${roleId}`, { method: 'GET' });
+
+      dispatch({
+        type: 'GET_DATA_SUCCEEDED',
+        role,
+      });
+    } catch (err) {
+      console.error(err);
+
+      dispatch({
+        type: 'GET_DATA_ERROR',
+      });
+      strapi.notification.toggle({
+        type: 'warning',
+        message: { id: 'notification.error' },
+      });
+    }
+  };
+
+  const handleSubmitSucceeded = useCallback(data => {
+    dispatch({
+      type: 'ON_SUBMIT_SUCCEEDED',
+      ...data,
+    });
+  }, []);
+
+  return { ...state, onSubmitSucceeded: handleSubmitSucceeded };
+};
+
+export default useFetchRole;

package/admin/src/hooks/useFetchRole/reducer.js

@@ -0,0 +1,31 @@
+/* eslint-disable consistent-return */
+import produce from 'immer';
+
+export const initialState = {
+  role: {},
+  isLoading: true,
+};
+
+const reducer = (state, action) =>
+  produce(state, draftState => {
+    switch (action.type) {
+      case 'GET_DATA_SUCCEEDED': {
+        draftState.role = action.role;
+        draftState.isLoading = false;
+        break;
+      }
+      case 'GET_DATA_ERROR': {
+        draftState.isLoading = false;
+        break;
+      }
+      case 'ON_SUBMIT_SUCCEEDED': {
+        draftState.role.name = action.name;
+        draftState.role.description = action.description;
+        break;
+      }
+      default:
+        return draftState;
+    }
+  });
+
+export default reducer;

package/admin/src/hooks/useForm/index.js

@@ -0,0 +1,96 @@
+import { useCallback, useEffect, useReducer, useRef } from 'react';
+import { useUserPermissions, request } from 'strapi-helper-plugin';
+import { getRequestURL } from '../../utils';
+import reducer, { initialState } from './reducer';
+
+const useUserForm = (endPoint, permissions) => {
+  const { isLoading: isLoadingForPermissions, allowedActions } = useUserPermissions(permissions);
+  const [{ formErrors, initialData, isLoading, modifiedData }, dispatch] = useReducer(
+    reducer,
+    initialState
+  );
+
+  const isMounted = useRef(true);
+
+  const abortController = new AbortController();
+  const { signal } = abortController;
+
+  useEffect(() => {
+    const getData = async () => {
+      try {
+        dispatch({
+          type: 'GET_DATA',
+        });
+
+        const data = await request(getRequestURL(endPoint), { method: 'GET', signal });
+
+        dispatch({
+          type: 'GET_DATA_SUCCEEDED',
+          data,
+        });
+      } catch (err) {
+        // The user aborted the request
+        if (isMounted.current) {
+          dispatch({
+            type: 'GET_DATA_ERROR',
+          });
+          console.error(err);
+          strapi.notification.toggle({
+            type: 'warning',
+            message: { id: 'notification.error' },
+          });
+        }
+      }
+    };
+
+    if (!isLoadingForPermissions) {
+      getData();
+    }
+
+    return () => {
+      abortController.abort();
+      isMounted.current = false;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isLoadingForPermissions, endPoint]);
+
+  const handleChange = useCallback(({ target: { name, value } }) => {
+    dispatch({
+      type: 'ON_CHANGE',
+      keys: name,
+      value,
+    });
+  }, []);
+
+  const dispatchResetForm = useCallback(() => {
+    dispatch({
+      type: 'RESET_FORM',
+    });
+  }, []);
+
+  const dispatchSetFormErrors = useCallback(errors => {
+    dispatch({ type: 'SET_ERRORS', errors });
+  }, []);
+
+  const dispatchSubmitSucceeded = useCallback(() => {
+    dispatch({
+      type: 'ON_SUBMIT_SUCCEEDED',
+    });
+  }, []);
+
+  return {
+    allowedActions,
+    dispatch,
+    dispatchResetForm,
+    dispatchSetFormErrors,
+    dispatchSubmitSucceeded,
+    formErrors,
+    handleChange,
+    initialData,
+    isLoading,
+    isLoadingForPermissions,
+    modifiedData,
+  };
+};
+
+export default useUserForm;

package/admin/src/hooks/useForm/reducer.js

@@ -0,0 +1,59 @@
+import produce from 'immer';
+import { set } from 'lodash';
+
+const initialState = {
+  formErrors: {},
+  isLoading: true,
+  initialData: {},
+  modifiedData: {},
+};
+
+const reducer = (state, action) =>
+  // eslint-disable-next-line consistent-return
+  produce(state, draftState => {
+    switch (action.type) {
+      case 'GET_DATA': {
+        draftState.isLoading = true;
+        draftState.initialData = {};
+        draftState.modifiedData = {};
+
+        break;
+      }
+
+      case 'GET_DATA_SUCCEEDED': {
+        draftState.isLoading = false;
+        draftState.initialData = action.data;
+        draftState.modifiedData = action.data;
+
+        break;
+      }
+      case 'GET_DATA_ERROR': {
+        draftState.isLoading = true;
+        break;
+      }
+      case 'ON_CHANGE': {
+        set(draftState, ['modifiedData', ...action.keys.split('.')], action.value);
+        break;
+      }
+      case 'ON_SUBMIT_SUCCEEDED': {
+        draftState.initialData = state.modifiedData;
+        draftState.formErrors = {};
+        break;
+      }
+      case 'RESET_FORM': {
+        draftState.modifiedData = state.initialData;
+        draftState.formErrors = {};
+        break;
+      }
+      case 'SET_ERRORS': {
+        draftState.formErrors = action.errors;
+        break;
+      }
+      default: {
+        return draftState;
+      }
+    }
+  });
+
+export default reducer;
+export { initialState };

package/admin/src/hooks/usePlugins/index.js

@@ -0,0 +1,73 @@
+import { useCallback, useEffect, useReducer } from 'react';
+import { request } from 'strapi-helper-plugin';
+import { useIntl } from 'react-intl';
+import { get } from 'lodash';
+import init from './init';
+import pluginId from '../../pluginId';
+import { cleanPermissions, formatPolicies, getTrad } from '../../utils';
+import reducer, { initialState } from './reducer';
+
+const usePlugins = (shouldFetchData = true) => {
+  const { formatMessage } = useIntl();
+  const [{ permissions, routes, policies, isLoading }, dispatch] = useReducer(
+    reducer,
+    initialState,
+    () => init(initialState, shouldFetchData)
+  );
+
+  const fetchPlugins = useCallback(async () => {
+    try {
+      dispatch({
+        type: 'GET_DATA',
+      });
+
+      const [{ permissions }, { routes }, { policies }] = await Promise.all(
+        [`/${pluginId}/permissions`, `/${pluginId}/routes`, `/${pluginId}/policies`].map(endpoint =>
+          request(endpoint, { method: 'GET' })
+        )
+      );
+
+      dispatch({
+        type: 'GET_DATA_SUCCEEDED',
+        permissions: cleanPermissions(permissions),
+        routes,
+        policies: [
+          {
+            label: formatMessage({ id: getTrad('Policies.InputSelect.empty') }),
+            value: 'empty__string_value',
+          },
+          ...formatPolicies(policies),
+        ],
+      });
+    } catch (err) {
+      const message = get(err, ['response', 'payload', 'message'], 'An error occured');
+
+      dispatch({
+        type: 'GET_DATA_ERROR',
+      });
+
+      if (message !== 'Forbidden') {
+        strapi.notification.toggle({
+          type: 'warning',
+          message,
+        });
+      }
+    }
+  }, [formatMessage]);
+
+  useEffect(() => {
+    if (shouldFetchData) {
+      fetchPlugins();
+    }
+  }, [fetchPlugins, shouldFetchData]);
+
+  return {
+    permissions,
+    routes,
+    policies,
+    getData: fetchPlugins,
+    isLoading,
+  };
+};
+
+export default usePlugins;

package/admin/src/hooks/usePlugins/init.js

@@ -0,0 +1,5 @@
+const init = (initialState, shouldFetchData) => {
+  return { ...initialState, isLoading: shouldFetchData };
+};
+
+export default init;