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

package/admin/src/components/UsersPermissions/reducer.js

@@ -0,0 +1,60 @@
+/* eslint-disable consistent-return */
+import produce from 'immer';
+import { set, get, take } from 'lodash';
+
+export const initialState = {
+  initialData: {},
+  modifiedData: {},
+  routes: {},
+  selectedAction: '',
+  policies: [],
+};
+
+const reducer = (state, action) =>
+  produce(state, draftState => {
+    switch (action.type) {
+      case 'ON_CHANGE': {
+        const keysLength = action.keys.length;
+        const isChangingCheckbox = action.keys[keysLength - 1] === 'enabled';
+
+        if (action.value && isChangingCheckbox) {
+          const selectedAction = take(action.keys, keysLength - 1).join('.');
+          draftState.selectedAction = selectedAction;
+        }
+
+        set(draftState, ['modifiedData', ...action.keys], action.value);
+        break;
+      }
+      case 'ON_CHANGE_SELECT_ALL': {
+        const pathToValue = ['modifiedData', ...action.keys];
+        const oldValues = get(state, pathToValue, {});
+        const updatedValues = Object.keys(oldValues).reduce((acc, current) => {
+          acc[current] = { ...oldValues[current], enabled: action.value };
+
+          return acc;
+        }, {});
+
+        set(draftState, pathToValue, updatedValues);
+
+        break;
+      }
+      case 'ON_RESET': {
+        draftState.modifiedData = state.initialData;
+        break;
+      }
+      case 'ON_SUBMIT_SUCCEEDED': {
+        draftState.initialData = state.modifiedData;
+        break;
+      }
+
+      case 'SELECT_ACTION': {
+        const { actionToSelect } = action;
+        draftState.selectedAction = actionToSelect === state.selectedAction ? '' : actionToSelect;
+        break;
+      }
+      default:
+        return draftState;
+    }
+  });
+
+export default reducer;

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

@@ -0,0 +1,218 @@
+import React, { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
+import { useIntl } from 'react-intl';
+import { Header } from '@buffetjs/custom';
+import { isEqual } from 'lodash';
+import {
+  FormBloc,
+  PopUpWarning,
+  SettingsPageTitle,
+  SizedInput,
+  useUserPermissions,
+  request,
+} from 'strapi-helper-plugin';
+import pluginPermissions from '../../permissions';
+import { getTrad, getRequestURL } from '../../utils';
+import ListBaselineAlignment from '../../components/ListBaselineAlignment';
+import form from './utils/form';
+import reducer, { initialState } from './reducer';
+
+const AdvancedSettingsPage = () => {
+  const { formatMessage } = useIntl();
+  const [showModalWarning, setShowModalWarning] = useState(false);
+  const pageTitle = formatMessage({
+    id: getTrad('HeaderNav.link.advancedSettings'),
+    defaultMessage: 'Advanced Settings',
+  });
+  const formTitle = formatMessage({
+    id: getTrad('Settings.advancedSettings.title'),
+    defaultMessage: 'Settings',
+  });
+  const updatePermissions = useMemo(() => {
+    return { update: pluginPermissions.updateAdvancedSettings };
+  }, []);
+  const {
+    isLoading: isLoadingForPermissions,
+    allowedActions: { canUpdate },
+  } = useUserPermissions(updatePermissions);
+  const [
+    { initialData, isConfirmButtonLoading, isLoading, modifiedData, roles },
+    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('advanced'), { method: 'GET', signal });
+
+        dispatch({
+          type: 'GET_DATA_SUCCEEDED',
+          data,
+        });
+      } catch (err) {
+        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]);
+
+  const handleChange = useCallback(({ target }) => {
+    dispatch({
+      type: 'ON_CHANGE',
+      keys: target.name,
+      value: target.value,
+    });
+  }, []);
+
+  const handleSubmit = useCallback(
+    async e => {
+      e.preventDefault();
+
+      try {
+        dispatch({
+          type: 'ON_SUBMIT',
+        });
+
+        strapi.lockAppWithOverlay();
+        await request(getRequestURL('advanced'), { method: 'PUT', body: modifiedData });
+
+        dispatch({
+          type: 'ON_SUBMIT_SUCCEEDED',
+        });
+
+        strapi.notification.toggle({
+          type: 'success',
+          message: { id: getTrad('notification.success.submit') },
+        });
+      } catch (err) {
+        dispatch({
+          type: 'ON_SUBMIT_ERROR',
+        });
+        console.error(err);
+        strapi.notification.toggle({
+          type: 'warning',
+          message: { id: 'notification.error' },
+        });
+      }
+
+      strapi.unlockApp();
+    },
+    [modifiedData]
+  );
+
+  const handleConfirmReset = useCallback(() => {
+    dispatch({
+      type: 'ON_RESET',
+    });
+
+    setShowModalWarning(false);
+  }, []);
+
+  const handleToggleModal = useCallback(() => {
+    setShowModalWarning(prev => !prev);
+  }, []);
+
+  const headerActions = useMemo(() => {
+    const isDisabled = isEqual(initialData, modifiedData);
+
+    return [
+      {
+        disabled: isDisabled,
+        onClick: () => {
+          handleToggleModal();
+        },
+        color: 'cancel',
+        label: formatMessage({
+          id: 'app.components.Button.reset',
+        }),
+
+        type: 'button',
+        style: {
+          paddingLeft: 15,
+          paddingRight: 15,
+          fontWeight: 600,
+        },
+      },
+      {
+        disabled: isDisabled,
+        color: 'success',
+        label: formatMessage({
+          id: 'app.components.Button.save',
+        }),
+        isLoading: isConfirmButtonLoading,
+        type: 'submit',
+        style: {
+          minWidth: 150,
+          fontWeight: 600,
+        },
+      },
+    ];
+  }, [initialData, isConfirmButtonLoading, modifiedData, formatMessage, handleToggleModal]);
+
+  const showLoader = isLoadingForPermissions || isLoading;
+
+  return (
+    <>
+      <SettingsPageTitle name={pageTitle} />
+      <div>
+        <form onSubmit={handleSubmit}>
+          <Header actions={headerActions} title={{ label: pageTitle }} isLoading={showLoader} />
+          <ListBaselineAlignment />
+          <FormBloc title={formTitle} isLoading={showLoader}>
+            {form.map(input => {
+              return (
+                <SizedInput
+                  key={input.name}
+                  {...input}
+                  disabled={!canUpdate}
+                  onChange={handleChange}
+                  options={roles}
+                  value={modifiedData[input.name]}
+                />
+              );
+            })}
+          </FormBloc>
+        </form>
+      </div>
+      <PopUpWarning
+        isOpen={showModalWarning}
+        toggleModal={handleToggleModal}
+        content={{
+          title: getTrad('popUpWarning.title'),
+          message: getTrad('popUpWarning.warning.cancel'),
+          cancel: getTrad('popUpWarning.button.cancel'),
+          confirm: getTrad('popUpWarning.button.confirm'),
+        }}
+        popUpWarningType="danger"
+        onConfirm={handleConfirmReset}
+      />
+    </>
+  );
+};
+
+export default AdvancedSettingsPage;

package/admin/src/containers/AdvancedSettings/reducer.js

@@ -0,0 +1,65 @@
+import produce from 'immer';
+import { set } from 'lodash';
+
+const initialState = {
+  isLoading: true,
+  isConfirmButtonLoading: false,
+  initialData: {},
+  modifiedData: {},
+  roles: [],
+};
+
+const reducer = (state, action) =>
+  // eslint-disable-next-line consistent-return
+  produce(state, draftState => {
+    switch (action.type) {
+      case 'GET_DATA': {
+        draftState.isLoading = true;
+        draftState.isConfirmButtonLoading = false;
+        draftState.initialData = {};
+        draftState.modifiedData = {};
+
+        break;
+      }
+
+      case 'GET_DATA_SUCCEEDED': {
+        draftState.isLoading = false;
+        draftState.initialData = action.data.settings;
+        draftState.modifiedData = action.data.settings;
+        draftState.roles = action.data.roles.map(role => ({ label: role.name, value: role.type }));
+
+        break;
+      }
+      case 'GET_DATA_ERROR': {
+        draftState.isLoading = true;
+        break;
+      }
+      case 'ON_CHANGE': {
+        set(draftState.modifiedData, action.keys.split('.'), action.value);
+        break;
+      }
+      case 'ON_RESET': {
+        draftState.modifiedData = state.initialData;
+        break;
+      }
+      case 'ON_SUBMIT': {
+        draftState.isConfirmButtonLoading = true;
+        break;
+      }
+      case 'ON_SUBMIT_SUCCEEDED': {
+        draftState.initialData = state.modifiedData;
+        draftState.isConfirmButtonLoading = false;
+        break;
+      }
+      case 'ON_SUBMIT_ERROR': {
+        draftState.isConfirmButtonLoading = false;
+        break;
+      }
+      default: {
+        return draftState;
+      }
+    }
+  });
+
+export default reducer;
+export { initialState };

package/admin/src/containers/AdvancedSettings/utils/form.js

@@ -0,0 +1,52 @@
+import { getTrad } from '../../../utils';
+
+const form = [
+  {
+    autoFocus: true,
+    description: getTrad('EditForm.inputSelect.description.role'),
+    label: getTrad('EditForm.inputSelect.label.role'),
+    name: 'default_role',
+    type: 'select',
+    size: { xs: 6 },
+    options: [],
+  },
+  {
+    description: getTrad('EditForm.inputToggle.description.email'),
+    label: getTrad('EditForm.inputToggle.label.email'),
+    name: 'unique_email',
+    type: 'bool',
+    size: { xs: 12 },
+  },
+  {
+    description: getTrad('EditForm.inputToggle.description.sign-up'),
+    label: getTrad('EditForm.inputToggle.label.sign-up'),
+    name: 'allow_register',
+    type: 'bool',
+    size: { xs: 12 },
+  },
+  {
+    description: getTrad('EditForm.inputToggle.description.email-reset-password'),
+    label: getTrad('EditForm.inputToggle.label.email-reset-password'),
+    name: 'email_reset_password',
+    type: 'text',
+    size: { xs: 6 },
+    placeholder: getTrad('EditForm.inputToggle.placeholder.email-reset-password'),
+  },
+  {
+    description: getTrad('EditForm.inputToggle.description.email-confirmation'),
+    label: getTrad('EditForm.inputToggle.label.email-confirmation'),
+    name: 'email_confirmation',
+    type: 'bool',
+    size: { xs: 12 },
+  },
+  {
+    description: getTrad('EditForm.inputToggle.description.email-confirmation-redirection'),
+    label: getTrad('EditForm.inputToggle.label.email-confirmation-redirection'),
+    name: 'email_confirmation_redirection',
+    type: 'text',
+    size: { xs: 6 },
+    placeholder: getTrad('EditForm.inputToggle.placeholder.email-confirmation-redirection'),
+  },
+];
+
+export default form;

package/admin/src/containers/EmailTemplates/CustomTextInput.js

@@ -0,0 +1,105 @@
+/**
+ *
+ * The input is made so we can handle a custom descritption
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Error, Label, InputText } from '@buffetjs/core';
+import { FormattedMessage } from 'react-intl';
+import { Description, ErrorMessage } from '@buffetjs/styles';
+import { getTrad } from '../../utils';
+import Wrapper from './Wrapper';
+
+const CustomTextInput = ({
+  description,
+  error: inputError,
+  label,
+  name,
+  onChange,
+  validations,
+  value,
+  ...rest
+}) => {
+  const inputId = name;
+  const descriptionId = `description-${inputId}`;
+  const errorId = `error-${inputId}`;
+
+  const link = (
+    <a
+      href="https://strapi.akemona.com/documentation/developer-docs/latest/development/plugins/users-permissions.html#templating-emails"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <FormattedMessage id="users-permissions.PopUpForm.Email.link.documentation" />
+    </a>
+  );
+
+  const descriptionCompo = (
+    <Description id={descriptionId}>
+      <FormattedMessage
+        id={getTrad('PopUpForm.Email.email_templates.inputDescription')}
+        values={{ link }}
+      />
+    </Description>
+  );
+
+  return (
+    <Error inputError={inputError} name={name} type="text" validations={validations}>
+      {({ canCheck, onBlur, error, dispatch }) => (
+        <Wrapper error={error}>
+          <Label htmlFor={inputId}>{label}</Label>
+          <InputText
+            {...rest}
+            name={name}
+            id={inputId}
+            aria-invalid={error ? 'true' : 'false'}
+            onBlur={onBlur}
+            onChange={e => {
+              if (!canCheck) {
+                dispatch({
+                  type: 'SET_CHECK',
+                });
+              }
+
+              dispatch({
+                type: 'SET_ERROR',
+                error: null,
+              });
+              onChange(e);
+            }}
+            value={value}
+          />
+          {!error ? descriptionCompo : <ErrorMessage id={errorId}>{error}</ErrorMessage>}
+        </Wrapper>
+      )}
+    </Error>
+  );
+};
+
+CustomTextInput.defaultProps = {
+  description: null,
+  id: null,
+  error: null,
+  label: null,
+  onBlur: null,
+  onChange: () => {},
+  validations: {},
+  value: '',
+};
+
+CustomTextInput.propTypes = {
+  description: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  error: PropTypes.string,
+  id: PropTypes.string,
+  label: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  onBlur: PropTypes.func,
+  onChange: () => {},
+
+  validations: PropTypes.object,
+  value: PropTypes.any,
+};
+
+export default CustomTextInput;

package/admin/src/containers/EmailTemplates/Wrapper.js

@@ -0,0 +1,36 @@
+import styled, { css } from 'styled-components';
+import { colors, sizes } from '@buffetjs/styles';
+
+/* eslint-disable indent */
+const Wrapper = styled.div`
+  position: relative;
+  padding-bottom: ${sizes.margin * 2.7}px;
+  label {
+    display: block;
+    margin-bottom: 1rem;
+  }
+  > p {
+    width: 100%;
+    padding-top: 10px;
+    font-size: 13px;
+    line-height: normal;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-bottom: -8px;
+  }
+  input[type='checkbox'] {
+    margin-bottom: 13px;
+  }
+  ${({ error }) =>
+    !!error &&
+    css`
+      input,
+      textarea,
+      select {
+        border-color: ${colors.darkOrange};
+      }
+    `}
+`;
+
+export default Wrapper;