@punch-in/strapi-admin 3.6.8

package/ee/admin/containers/Roles/ListPage/RoleRow.js

@@ -0,0 +1,99 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { useGlobalContext } from 'strapi-helper-plugin';
+import { useHistory } from 'react-router-dom';
+import { Pencil, Duplicate } from '@buffetjs/icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { RoleRow as RoleRowBase } from '../../../../../admin/src/components/Roles';
+import Checkbox from './CustomCheckbox';
+
+const RoleRow = ({
+  canCreate,
+  canDelete,
+  canUpdate,
+  role,
+  onRoleToggle,
+  onRoleDuplicate,
+  onRoleRemove,
+  selectedRoles,
+}) => {
+  const { push } = useHistory();
+  const { settingsBaseURL } = useGlobalContext();
+
+  const handleRoleSelection = e => {
+    e.stopPropagation();
+
+    onRoleToggle(role.id);
+  };
+
+  const handleClickDelete = e => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (role.usersCount) {
+      strapi.notification.toggle({
+        type: 'info',
+        message: { id: 'Roles.ListPage.notification.delete-not-allowed' },
+      });
+    } else {
+      onRoleRemove(role.id);
+    }
+  };
+
+  const handleGoTo = useCallback(() => {
+    push(`${settingsBaseURL}/roles/${role.id}`);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [role.id, settingsBaseURL]);
+
+  const prefix = canDelete ? (
+    <Checkbox
+      value={selectedRoles.findIndex(selectedRoleId => selectedRoleId === role.id) !== -1}
+      onClick={handleRoleSelection}
+      name="role-checkbox"
+    />
+  ) : null;
+
+  return (
+    <RoleRowBase
+      onClick={handleGoTo}
+      selectedRoles={selectedRoles}
+      prefix={prefix}
+      role={role}
+      links={[
+        {
+          icon: canCreate ? <Duplicate fill="#0e1622" /> : null,
+          onClick: e => {
+            e.preventDefault();
+            e.stopPropagation();
+            onRoleDuplicate(role.id);
+          },
+        },
+        {
+          icon: canUpdate ? <Pencil fill="#0e1622" /> : null,
+          onClick: handleGoTo,
+        },
+        {
+          icon: canDelete ? <FontAwesomeIcon icon="trash-alt" /> : null,
+          onClick: handleClickDelete,
+        },
+      ]}
+    />
+  );
+};
+
+RoleRow.defaultProps = {
+  selectedRoles: [],
+};
+
+RoleRow.propTypes = {
+  canCreate: PropTypes.bool.isRequired,
+  canDelete: PropTypes.bool.isRequired,
+  canUpdate: PropTypes.bool.isRequired,
+  onRoleToggle: PropTypes.func.isRequired,
+  onRoleDuplicate: PropTypes.func.isRequired,
+  onRoleRemove: PropTypes.func.isRequired,
+  role: PropTypes.object.isRequired,
+  selectedRoles: PropTypes.arrayOf(PropTypes.number),
+};
+
+export default RoleRow;

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

@@ -0,0 +1,260 @@
+import React, { useEffect, useReducer, useRef, useState } from 'react';
+import { useHistory } from 'react-router-dom';
+import { Button } from '@buffetjs/core';
+import { List, Header } from '@buffetjs/custom';
+import { Plus } from '@buffetjs/icons';
+import matchSorter from 'match-sorter';
+import { get } from 'lodash';
+import {
+  useGlobalContext,
+  useQuery,
+  ListButton,
+  PopUpWarning,
+  request,
+  useUserPermissions,
+  LoadingIndicatorPage,
+} from 'strapi-helper-plugin';
+import { useIntl } from 'react-intl';
+import adminPermissions from '../../../../../admin/src/permissions';
+import PageTitle from '../../../../../admin/src/components/SettingsPageTitle';
+import useSettingsHeaderSearchContext from '../../../../../admin/src/hooks/useSettingsHeaderSearchContext';
+import { EmptyRole, RoleListWrapper } from '../../../../../admin/src/components/Roles';
+import { useRolesList } from '../../../../../admin/src/hooks';
+import RoleRow from './RoleRow';
+import BaselineAlignment from './BaselineAlignment';
+import reducer, { initialState } from './reducer';
+
+const RoleListPage = () => {
+  const { settingsBaseURL } = useGlobalContext();
+  const [isWarningDeleteAllOpened, setIsWarningDeleteAllOpenend] = useState(false);
+  const { formatMessage } = useIntl();
+  const { push } = useHistory();
+  const [{ selectedRoles, showModalConfirmButtonLoading, shouldRefetchData }, dispath] = useReducer(
+    reducer,
+    initialState
+  );
+  const {
+    isLoading: isLoadingForPermissions,
+    allowedActions: { canCreate, canDelete, canRead, canUpdate },
+  } = useUserPermissions(adminPermissions.settings.roles);
+  const { getData, roles, isLoading } = useRolesList(false);
+  const getDataRef = useRef(getData);
+  const { toggleHeaderSearch } = useSettingsHeaderSearchContext();
+  const query = useQuery();
+  const _q = decodeURIComponent(query.get('_q') || '');
+  const results = matchSorter(roles, _q, { keys: ['name', 'description'] });
+
+  useEffect(() => {
+    // Show the search bar only if the user is allowed to read
+    if (canRead) {
+      toggleHeaderSearch({ id: 'Settings.permissions.menu.link.roles.label' });
+    }
+
+    return () => {
+      if (canRead) {
+        toggleHeaderSearch();
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [canRead]);
+
+  useEffect(() => {
+    if (!isLoadingForPermissions && canRead) {
+      getDataRef.current();
+    }
+  }, [isLoadingForPermissions, canRead]);
+
+  const handleClosedModal = () => {
+    if (shouldRefetchData) {
+      getData();
+    }
+
+    // Empty the selected ids when the modal closes
+    dispath({
+      type: 'RESET_DATA_TO_DELETE',
+    });
+  };
+
+  const handleConfirmDeleteData = async () => {
+    try {
+      dispath({
+        type: 'ON_REMOVE_ROLES',
+      });
+      const filteredRoles = selectedRoles.filter(currentId => {
+        const currentRole = roles.find(role => role.id === currentId);
+
+        return currentRole.usersCount === 0;
+      });
+
+      if (selectedRoles.length !== filteredRoles.length) {
+        strapi.notification.toggle({
+          type: 'info',
+          message: { id: 'Roles.ListPage.notification.delete-all-not-allowed' },
+        });
+      }
+
+      if (filteredRoles.length) {
+        await request('/admin/roles/batch-delete', {
+          method: 'POST',
+          body: {
+            ids: filteredRoles,
+          },
+        });
+
+        // Empty the selectedRolesId and set the shouldRefetchData to true so the
+        // list is updated when closing the modal
+        dispath({
+          type: 'ON_REMOVE_ROLES_SUCCEEDED',
+        });
+      }
+    } catch (err) {
+      console.error(err);
+      const errorIds = get(err, ['response', 'payload', 'data', 'ids'], null);
+
+      if (errorIds && Array.isArray(errorIds)) {
+        const errorsMsg = errorIds.join('\n');
+        strapi.notification.toggle({
+          type: 'warning',
+          message: errorsMsg,
+        });
+      } else {
+        strapi.notification.toggle({
+          type: 'warning',
+          message: { id: 'notification.error' },
+        });
+      }
+    } finally {
+      handleToggleModal();
+    }
+  };
+
+  const handleDuplicateRole = id => {
+    push(`${settingsBaseURL}/roles/duplicate/${id}`);
+  };
+
+  const handleNewRoleClick = () => push(`${settingsBaseURL}/roles/new`);
+
+  const handleRemoveRole = roleId => {
+    dispath({
+      type: 'SET_ROLE_TO_DELETE',
+      id: roleId,
+    });
+
+    handleToggleModal();
+  };
+
+  const handleRoleToggle = roleId => {
+    dispath({
+      type: 'ON_SELECTION',
+      id: roleId,
+    });
+  };
+
+  const handleToggleModal = () => setIsWarningDeleteAllOpenend(prev => !prev);
+
+  /* eslint-disable indent */
+  const headerActions = canCreate
+    ? [
+        {
+          label: formatMessage({
+            id: 'Settings.roles.list.button.add',
+            defaultMessage: 'Add new role',
+          }),
+          onClick: handleNewRoleClick,
+          color: 'primary',
+          type: 'button',
+          icon: true,
+        },
+      ]
+    : [];
+  /* eslint-enable indent */
+
+  const resultsCount = results.length;
+
+  if (isLoadingForPermissions) {
+    return <LoadingIndicatorPage />;
+  }
+
+  return (
+    <>
+      <PageTitle name="Roles" />
+      <Header
+        title={{
+          label: formatMessage({
+            id: 'Settings.roles.title',
+            defaultMessage: 'roles',
+          }),
+        }}
+        content={formatMessage({
+          id: 'Settings.roles.list.description',
+          defaultMessage: 'List of roles',
+        })}
+        actions={headerActions}
+        isLoading={isLoading}
+      />
+      <BaselineAlignment />
+      {canRead && (
+        <RoleListWrapper>
+          <List
+            title={formatMessage(
+              {
+                id: `Settings.roles.list.title${resultsCount > 1 ? '.plural' : '.singular'}`,
+                defaultMessage: `{number} ${resultsCount > 1 ? 'roles' : 'role'}`,
+              },
+              { number: resultsCount }
+            )}
+            isLoading={isLoading}
+            /* eslint-disable indent */
+            button={
+              canDelete
+                ? {
+                    color: 'delete',
+                    disabled: selectedRoles.length === 0,
+                    label: formatMessage({ id: 'app.utils.delete', defaultMessage: 'Delete' }),
+                    onClick: handleToggleModal,
+                    type: 'button',
+                  }
+                : null
+            }
+            /* eslint-enable indent */
+            items={results}
+            customRowComponent={role => (
+              <RoleRow
+                canCreate={canCreate}
+                canDelete={canDelete}
+                canUpdate={canUpdate}
+                selectedRoles={selectedRoles}
+                onRoleDuplicate={handleDuplicateRole}
+                onRoleRemove={handleRemoveRole}
+                onRoleToggle={handleRoleToggle}
+                role={role}
+              />
+            )}
+          />
+          {!resultsCount && !isLoading && <EmptyRole />}
+          {canCreate && (
+            <ListButton>
+              <Button
+                onClick={handleNewRoleClick}
+                icon={<Plus fill="#007eff" width="11px" height="11px" />}
+                label={formatMessage({
+                  id: 'Settings.roles.list.button.add',
+                  defaultMessage: 'Add new role',
+                })}
+              />
+            </ListButton>
+          )}
+        </RoleListWrapper>
+      )}
+      <PopUpWarning
+        isOpen={isWarningDeleteAllOpened}
+        onClosed={handleClosedModal}
+        onConfirm={handleConfirmDeleteData}
+        toggleModal={handleToggleModal}
+        isConfirmButtonLoading={showModalConfirmButtonLoading}
+      />
+    </>
+  );
+};
+
+export default RoleListPage;

package/ee/admin/containers/Roles/ListPage/reducer.js

@@ -0,0 +1,60 @@
+/* eslint-disable consistent-return */
+import produce from 'immer';
+
+export const initialState = {
+  selectedRoles: [],
+  showModalConfirmButtonLoading: false,
+  shouldRefetchData: false,
+};
+
+const reducer = (state, action) =>
+  produce(state, draftState => {
+    switch (action.type) {
+      case 'ON_SELECTION': {
+        const { id } = action;
+        const roleIndex = state.selectedRoles.findIndex(roleId => roleId === id);
+
+        if (roleIndex === -1) {
+          draftState.selectedRoles.push(id);
+        } else {
+          draftState.selectedRoles = state.selectedRoles.filter(roleId => roleId !== id);
+        }
+        break;
+      }
+      case 'ON_REMOVE_ROLES': {
+        draftState.showModalConfirmButtonLoading = true;
+        break;
+      }
+      case 'ON_REMOVE_ROLES_SUCCEEDED': {
+        draftState.shouldRefetchData = true;
+        break;
+      }
+      case 'RESET_DATA_TO_DELETE': {
+        draftState.shouldRefetchData = false;
+        draftState.selectedRoles = [];
+        draftState.showModalConfirmButtonLoading = false;
+        break;
+      }
+      case 'SET_ROLE_TO_DELETE': {
+        draftState.selectedRoles = [action.id];
+
+        break;
+      }
+      // Leaving this code for the moment
+      // case 'ON_DUPLICATION': {
+      //   const { id } = action;
+      //   draftState.roles = state.roles.reduce((acc, c) => {
+      //     if (c.id === id) {
+      //       return acc.concat([c, { ...c, id: state.roles.length + 1 }]);
+      //     }
+
+      //     return [...acc, c];
+      //   }, []);
+      //   break;
+      // }
+      default:
+        return draftState;
+    }
+  });
+
+export default reducer;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { CheckPagePermissions } from 'strapi-helper-plugin';
+import adminPermissions from '../../../../../admin/src/permissions';
+import ListPage from '../ListPage';
+
+const ProtectedListPage = () => (
+  <CheckPagePermissions permissions={adminPermissions.settings.roles.main}>
+    <ListPage />
+  </CheckPagePermissions>
+);
+
+export default ProtectedListPage;

package/ee/admin/containers/SettingsPage/SingleSignOn/index.js

@@ -0,0 +1,113 @@
+import React, { memo, useMemo } from 'react';
+import {
+  BaselineAlignment,
+  CheckPagePermissions,
+  NotAllowedInput,
+  SizedInput,
+  useUserPermissions,
+} from 'strapi-helper-plugin';
+import { useIntl } from 'react-intl';
+import { getRequestUrl } from '../../../../../admin/src/utils';
+import PageTitle from '../../../../../admin/src/components/SettingsPageTitle';
+import ContainerFluid from '../../../../../admin/src/components/ContainerFluid';
+import FormBloc from '../../../../../admin/src/components/FormBloc';
+import { Header } from '../../../../../admin/src/components/Settings';
+import { useRolesList, useSettingsForm } from '../../../../../admin/src/hooks';
+import adminPermissions from '../../../../../admin/src/permissions';
+import { form, schema } from './utils';
+
+const ssoPermissions = {
+  ...adminPermissions.settings.sso,
+  readRoles: adminPermissions.settings.roles.read,
+};
+
+const SingleSignOn = () => {
+  const { formatMessage } = useIntl();
+  const {
+    isLoading: isLoadingForPermissions,
+    allowedActions: { canUpdate, canReadRoles },
+  } = useUserPermissions(ssoPermissions);
+
+  const [
+    { formErrors, initialData, isLoading, modifiedData, showHeaderButtonLoader },
+    // eslint-disable-next-line no-unused-vars
+    dispatch,
+    { handleCancel, handleChange, handleSubmit },
+  ] = useSettingsForm(getRequestUrl('providers/options'), schema, () => {}, [
+    'autoRegister',
+    'defaultRole',
+  ]);
+  const { roles } = useRolesList(canReadRoles);
+
+  const showLoader = useMemo(() => isLoadingForPermissions || isLoading, [
+    isLoading,
+    isLoadingForPermissions,
+  ]);
+
+  const options = useMemo(() => {
+    return [
+      <option key="placeholder" disabled value="">
+        {formatMessage({ id: 'components.InputSelect.option.placeholder' })}
+      </option>,
+      ...roles.map(({ id, name }) => (
+        <option key={id} value={id}>
+          {name}
+        </option>
+      )),
+    ];
+  }, [roles, formatMessage]);
+
+  return (
+    <>
+      <PageTitle name="SSO" />
+      <form onSubmit={handleSubmit}>
+        <ContainerFluid padding="0">
+          <Header
+            isLoading={showLoader}
+            initialData={initialData}
+            label={formatMessage({ id: 'Settings.sso.title' })}
+            modifiedData={modifiedData}
+            onCancel={handleCancel}
+            content={formatMessage({ id: 'Settings.sso.description' })}
+            showHeaderButtonLoader={showHeaderButtonLoader}
+          />
+          <BaselineAlignment top size="3px" />
+          <FormBloc isLoading={showLoader}>
+            {Object.keys(form).map(key => {
+              // TODO: at some point it would be great to handle this in the upcoming input layout
+              const type = key === 'defaultRole' && !canReadRoles ? 'notAllowed' : form[key].type;
+              const description =
+                key === 'defaultRole' && !canReadRoles
+                  ? form[key].notAllowedDescription
+                  : form[key].description;
+
+              return (
+                <SizedInput
+                  {...form[key]}
+                  customInputs={{ notAllowed: NotAllowedInput }}
+                  description={description}
+                  key={key}
+                  disabled={!canUpdate}
+                  error={formErrors[key]}
+                  name={key}
+                  onChange={handleChange}
+                  options={options}
+                  value={modifiedData[key]}
+                  type={type}
+                />
+              );
+            })}
+          </FormBloc>
+        </ContainerFluid>
+      </form>
+    </>
+  );
+};
+
+const ProtectedSSO = () => (
+  <CheckPagePermissions permissions={ssoPermissions.main}>
+    <SingleSignOn />
+  </CheckPagePermissions>
+);
+
+export default memo(ProtectedSSO);

package/ee/admin/containers/SettingsPage/SingleSignOn/utils/form.js

@@ -0,0 +1,28 @@
+const form = {
+  autoRegister: {
+    autoFocus: false,
+    label: 'Settings.sso.form.registration.label',
+    description: { id: 'Settings.sso.form.registration.description' },
+    type: 'bool',
+    validations: {},
+    size: {
+      xs: '12',
+      md: '6',
+    },
+  },
+  defaultRole: {
+    autoFocus: false,
+    label: 'Settings.sso.form.defaultRole.label',
+    description: { id: 'Settings.sso.form.defaultRole.description' },
+    notAllowedDescription: { id: 'Settings.sso.form.defaultRole.description-not-allowed' },
+    type: 'select',
+    validations: {},
+    options: [],
+    size: {
+      xs: '12',
+      md: '6',
+    },
+  },
+};
+
+export default form;

package/ee/admin/containers/SettingsPage/SingleSignOn/utils/index.js

@@ -0,0 +1,2 @@
+export { default as form } from './form';
+export { default as schema } from './schema';

package/ee/admin/containers/SettingsPage/SingleSignOn/utils/schema.js

@@ -0,0 +1,11 @@
+import { translatedErrors } from 'strapi-helper-plugin';
+import * as yup from 'yup';
+
+const schema = yup.object().shape({
+  autoRegister: yup.bool().required(translatedErrors.required),
+  defaultRole: yup.mixed().when('autoRegister', (value, initSchema) => {
+    return value ? initSchema.required(translatedErrors.required) : initSchema.nullable();
+  }),
+});
+
+export default schema;

package/ee/admin/containers/SettingsPage/utils/customRoutes.js

@@ -0,0 +1,16 @@
+import { SETTINGS_BASE_URL } from '../../../../../admin/src/config';
+import SingleSignOn from '../SingleSignOn';
+
+const ssoRoutes = ENABLED_EE_FEATURES.includes('sso')
+  ? [
+      {
+        Component: SingleSignOn,
+        to: `${SETTINGS_BASE_URL}/single-sign-on`,
+        exact: true,
+      },
+    ]
+  : [];
+
+const customRoutes = [...ssoRoutes];
+
+export default customRoutes;

package/ee/admin/hooks/index.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as useAuthProviders } from './useAuthProviders';

package/ee/admin/hooks/useAuthProviders/index.js

@@ -0,0 +1,51 @@
+import { useReducer, useEffect } from 'react';
+import { request } from 'strapi-helper-plugin';
+
+import { getRequestUrl } from '../../../../admin/src/utils';
+import reducer, { initialState } from './reducer';
+
+const useAuthProviders = ({ ssoEnabled }) => {
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  useEffect(() => {
+    fetchAuthProviders();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const fetchAuthProviders = async () => {
+    try {
+      if (!ssoEnabled) {
+        dispatch({
+          type: 'GET_DATA_SUCCEEDED',
+          data: [],
+        });
+
+        return;
+      }
+
+      const requestUrl = getRequestUrl('providers');
+      const data = await request(requestUrl, { method: 'GET' });
+
+      dispatch({
+        type: 'GET_DATA_SUCCEEDED',
+        data,
+      });
+    } catch (err) {
+      console.error(err);
+
+      dispatch({
+        type: 'GET_DATA_ERROR',
+      });
+
+      strapi.notification.toggle({
+        type: 'warning',
+        message: { id: 'notification.error' },
+        centered: true,
+      });
+    }
+  };
+
+  return state;
+};
+
+export default useAuthProviders;

package/ee/admin/hooks/useAuthProviders/reducer.js

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