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

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

@@ -0,0 +1,222 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { useIntl } from 'react-intl';
+import { Header, List } from '@buffetjs/custom';
+import { Pencil } from '@buffetjs/icons';
+import { get } from 'lodash';
+import {
+  SettingsPageTitle,
+  SizedInput,
+  useGlobalContext,
+  request,
+  getYupInnerErrors,
+} from 'strapi-helper-plugin';
+import { Row } from 'reactstrap';
+import pluginPermissions from '../../permissions';
+import { useForm } from '../../hooks';
+import ListBaselineAlignment from '../../components/ListBaselineAlignment';
+import ListRow from '../../components/ListRow';
+import ModalForm from '../../components/ModalForm';
+import { getRequestURL, getTrad } from '../../utils';
+import forms from './utils/forms';
+import schema from './utils/schema';
+
+const EmailTemplatesPage = () => {
+  const { formatMessage } = useIntl();
+  const { emitEvent } = useGlobalContext();
+  const emitEventRef = useRef(emitEvent);
+  const buttonSubmitRef = useRef(null);
+  const pageTitle = formatMessage({ id: getTrad('HeaderNav.link.emailTemplates') });
+  const updatePermissions = useMemo(() => {
+    return { update: pluginPermissions.updateEmailTemplates };
+  }, []);
+  const [isOpen, setIsOpen] = useState(false);
+  const [isSubmiting, setIsSubmiting] = useState(false);
+  const [showForm, setShowForm] = useState(false);
+  const [templateToEdit, setTemplateToEdit] = useState(null);
+
+  const {
+    allowedActions: { canUpdate },
+    dispatchResetForm,
+    dispatchSetFormErrors,
+    dispatchSubmitSucceeded,
+    formErrors,
+    handleChange,
+    isLoading,
+    isLoadingForPermissions,
+    modifiedData,
+  } = useForm('email-templates', updatePermissions);
+
+  const emailTemplates = useMemo(() => {
+    return Object.keys(modifiedData).reduce((acc, current) => {
+      const { display, icon } = modifiedData[current];
+
+      acc.push({
+        id: current,
+        name: formatMessage({ id: getTrad(display) }),
+        icon: ['fas', icon],
+      });
+
+      return acc;
+    }, []);
+  }, [modifiedData, formatMessage]);
+
+  const listTitle = useMemo(() => {
+    const count = emailTemplates.length;
+
+    return formatMessage(
+      {
+        id: getTrad(`List.title.emailTemplates.${count > 1 ? 'plural' : 'singular'}`),
+      },
+      { number: count }
+    );
+  }, [emailTemplates.length, formatMessage]);
+
+  const handleClosed = useCallback(() => {
+    setTemplateToEdit(null);
+    setShowForm(false);
+    dispatchResetForm();
+  }, [dispatchResetForm]);
+
+  const handleToggle = useCallback(() => {
+    setIsOpen(prev => !prev);
+  }, []);
+
+  const handleClickEdit = useCallback(
+    template => {
+      setTemplateToEdit(template);
+      handleToggle();
+    },
+    [handleToggle]
+  );
+
+  const handleSubmit = useCallback(
+    async e => {
+      e.preventDefault();
+
+      let errors = {};
+
+      try {
+        setIsSubmiting(true);
+        await schema.validate(modifiedData[templateToEdit.id], { abortEarly: false });
+
+        strapi.lockAppWithOverlay();
+
+        try {
+          emitEventRef.current('willEditEmailTemplates');
+
+          await request(getRequestURL('email-templates'), {
+            method: 'PUT',
+            body: { 'email-templates': modifiedData },
+          });
+
+          emitEventRef.current('didEditEmailTemplates');
+
+          strapi.notification.toggle({
+            type: 'success',
+            message: { id: getTrad('notification.success.submit') },
+          });
+
+          dispatchSubmitSucceeded();
+
+          handleToggle();
+        } catch (err) {
+          console.error(err);
+
+          strapi.notification.toggle({
+            type: 'warning',
+            message: { id: 'notification.error' },
+          });
+        }
+      } catch (err) {
+        errors = getYupInnerErrors(err);
+      } finally {
+        setIsSubmiting(false);
+        strapi.unlockApp();
+      }
+
+      dispatchSetFormErrors(errors);
+    },
+    [dispatchSetFormErrors, dispatchSubmitSucceeded, modifiedData, templateToEdit, handleToggle]
+  );
+
+  const handleClick = useCallback(() => {
+    buttonSubmitRef.current.click();
+  }, []);
+
+  const handleOpened = useCallback(() => {
+    setShowForm(true);
+  }, []);
+
+  return (
+    <>
+      <SettingsPageTitle name={pageTitle} />
+      <div>
+        <Header title={{ label: pageTitle }} isLoading={isLoadingForPermissions || isLoading} />
+        <ListBaselineAlignment />
+        <List
+          title={listTitle}
+          items={emailTemplates}
+          isLoading={isLoadingForPermissions || isLoading}
+          customRowComponent={template => (
+            <ListRow
+              {...template}
+              onClick={() => {
+                if (canUpdate) {
+                  handleClickEdit(template);
+                }
+              }}
+              links={[
+                {
+                  icon: canUpdate ? <Pencil fill="#0e1622" /> : null,
+                  onClick: e => {
+                    e.stopPropagation();
+                    handleClickEdit(template);
+                  },
+                },
+              ]}
+            />
+          )}
+        />
+      </div>
+      <ModalForm
+        isOpen={isOpen}
+        onOpened={handleOpened}
+        onToggle={handleToggle}
+        onClosed={handleClosed}
+        headerBreadcrumbs={[
+          getTrad('PopUpForm.header.edit.email-templates'),
+          get(templateToEdit, 'name', ''),
+        ]}
+        onClick={handleClick}
+        onCancel={handleToggle}
+        isLoading={isSubmiting}
+      >
+        {showForm && (
+          <form onSubmit={handleSubmit}>
+            <Row>
+              {forms.map(input => {
+                const id = get(templateToEdit, 'id');
+
+                return (
+                  <SizedInput
+                    key={input.name}
+                    {...input}
+                    error={formErrors[input.name]}
+                    name={`${id}.${input.name}`}
+                    onChange={handleChange}
+                    value={get(modifiedData, [id, ...input.name.split('.')], '')}
+                  />
+                );
+              })}
+            </Row>
+            <button type="submit" style={{ display: 'none' }} ref={buttonSubmitRef}>
+              hidden button to use the native form event
+            </button>
+          </form>
+        )}
+      </ModalForm>
+    </>
+  );
+};
+
+export default EmailTemplatesPage;

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

@@ -0,0 +1,58 @@
+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;
+        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/containers/EmailTemplates/utils/forms.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { getTrad } from '../../../utils';
+import CustomTextInput from '../CustomTextInput';
+
+const forms = [
+  {
+    autoFocus: true,
+    label: getTrad('PopUpForm.Email.options.from.name.label'),
+    name: 'options.from.name',
+    type: 'text',
+    placeholder: getTrad('PopUpForm.Email.options.from.name.placeholder'),
+    size: { xs: 6 },
+    validations: {
+      required: true,
+    },
+  },
+  {
+    autoFocus: false,
+    label: getTrad('PopUpForm.Email.options.from.email.label'),
+    name: 'options.from.email',
+    type: 'email',
+    placeholder: getTrad('PopUpForm.Email.options.from.email.placeholder'),
+    size: { xs: 6 },
+    validations: {
+      required: true,
+    },
+  },
+  {
+    autoFocus: false,
+    label: getTrad('PopUpForm.Email.options.response_email.label'),
+    name: 'options.response_email',
+    type: 'email',
+    placeholder: getTrad('PopUpForm.Email.options.response_email.placeholder'),
+    size: { xs: 6 },
+    validations: {
+      required: true,
+    },
+  },
+  {
+    autoFocus: false,
+    label: getTrad('PopUpForm.Email.options.object.label'),
+    name: 'options.object',
+    type: 'customText',
+    placeholder: getTrad('PopUpForm.Email.options.object.placeholder'),
+    customInputs: { customText: CustomTextInput },
+    descriptione: () => (
+      <FormattedMessage
+        id={getTrad('PopUpForm.Email.email_templates.inputDescription')}
+        values={{
+          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={getTrad('PopUpForm.Email.link.documentation')} />
+            </a>
+          ),
+        }}
+      />
+    ),
+    size: { xs: 6 },
+    validations: {
+      required: true,
+    },
+  },
+  {
+    autoFocus: false,
+    label: getTrad('PopUpForm.Email.options.message.label'),
+    name: 'options.message',
+    type: 'textarea',
+    style: { height: '15.6rem' },
+    size: { xs: 12 },
+    validations: {
+      required: true,
+    },
+  },
+];
+
+export default forms;

package/admin/src/containers/EmailTemplates/utils/schema.js

@@ -0,0 +1,25 @@
+import * as yup from 'yup';
+import { translatedErrors } from 'strapi-helper-plugin';
+
+const schema = yup.object().shape({
+  options: yup
+    .object()
+    .shape({
+      from: yup
+        .object()
+        .shape({
+          name: yup.string().required(translatedErrors.required),
+          email: yup
+            .string()
+            .email(translatedErrors.email)
+            .required(translatedErrors.required),
+        })
+        .required(),
+      response_email: yup.string().email(translatedErrors.email),
+      object: yup.string().required(translatedErrors.required),
+      message: yup.string().required(translatedErrors.required),
+    })
+    .required(translatedErrors.required),
+});
+
+export default schema;

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

@@ -0,0 +1,283 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { useIntl } from 'react-intl';
+import { Header, List } from '@buffetjs/custom';
+import { Text } from '@buffetjs/core';
+import { Pencil } from '@buffetjs/icons';
+import {
+  SettingsPageTitle,
+  SizedInput,
+  useGlobalContext,
+  getYupInnerErrors,
+  request,
+} from 'strapi-helper-plugin';
+import { get, upperFirst, has } from 'lodash';
+import { Row } from 'reactstrap';
+import pluginPermissions from '../../permissions';
+import { useForm } from '../../hooks';
+import { getRequestURL, getTrad } from '../../utils';
+import ListBaselineAlignment from '../../components/ListBaselineAlignment';
+import ListRow from '../../components/ListRow';
+import ModalForm from '../../components/ModalForm';
+import createProvidersArray from './utils/createProvidersArray';
+import forms from './utils/forms';
+
+const ProvidersPage = () => {
+  const { formatMessage } = useIntl();
+  const { emitEvent } = useGlobalContext();
+  const emitEventRef = useRef(emitEvent);
+  const [isOpen, setIsOpen] = useState(false);
+  const [isSubmiting, setIsSubmiting] = useState(false);
+  const buttonSubmitRef = useRef(null);
+  const [showForm, setShowForm] = useState(false);
+  const [providerToEditName, setProviderToEditName] = useState(null);
+
+  const updatePermissions = useMemo(() => {
+    return { update: pluginPermissions.updateProviders };
+  }, []);
+
+  const {
+    allowedActions: { canUpdate },
+    dispatchResetForm,
+    dispatchSetFormErrors,
+    dispatchSubmitSucceeded,
+    formErrors,
+    handleChange,
+    isLoading,
+    isLoadingForPermissions,
+    modifiedData,
+  } = useForm('providers', updatePermissions);
+
+  const providers = useMemo(() => createProvidersArray(modifiedData), [modifiedData]);
+  const enabledProvidersCount = useMemo(
+    () => providers.filter(provider => provider.enabled).length,
+    [providers]
+  );
+  const isProviderWithSubdomain = useMemo(() => {
+    if (!providerToEditName) {
+      return false;
+    }
+
+    const providerToEdit = providers.find(obj => obj.name === providerToEditName);
+
+    return has(providerToEdit, 'subdomain');
+  }, [providers, providerToEditName]);
+  const disabledProvidersCount = useMemo(() => {
+    return providers.length - enabledProvidersCount;
+  }, [providers, enabledProvidersCount]);
+
+  const listTitle = useMemo(() => {
+    const enabledMessage = formatMessage(
+      {
+        id: getTrad(
+          `List.title.providers.enabled.${enabledProvidersCount > 1 ? 'plural' : 'singular'}`
+        ),
+      },
+      { number: enabledProvidersCount }
+    );
+    const disabledMessage = formatMessage(
+      {
+        id: getTrad(
+          `List.title.providers.disabled.${disabledProvidersCount > 1 ? 'plural' : 'singular'}`
+        ),
+      },
+      { number: disabledProvidersCount }
+    );
+
+    return `${enabledMessage} ${disabledMessage}`;
+  }, [formatMessage, enabledProvidersCount, disabledProvidersCount]);
+
+  const pageTitle = formatMessage({ id: getTrad('HeaderNav.link.providers') });
+
+  const formToRender = useMemo(() => {
+    if (providerToEditName === 'email') {
+      return forms.email;
+    }
+
+    if (isProviderWithSubdomain) {
+      return forms.providersWithSubdomain;
+    }
+
+    return forms.providers;
+  }, [providerToEditName, isProviderWithSubdomain]);
+
+  const handleClick = useCallback(() => {
+    buttonSubmitRef.current.click();
+  }, []);
+
+  const handleToggle = useCallback(() => {
+    setIsOpen(prev => !prev);
+  }, []);
+
+  const handleClickEdit = useCallback(
+    provider => {
+      if (canUpdate) {
+        setProviderToEditName(provider.name);
+        handleToggle();
+      }
+    },
+    [canUpdate, handleToggle]
+  );
+
+  const handleClosed = useCallback(() => {
+    setProviderToEditName(null);
+    setShowForm(false);
+    dispatchResetForm();
+  }, [dispatchResetForm]);
+
+  const handleOpened = useCallback(() => {
+    setShowForm(true);
+  }, []);
+
+  const handleSubmit = useCallback(
+    async e => {
+      e.preventDefault();
+      const { schema } = formToRender;
+      let errors = {};
+
+      setIsSubmiting(true);
+
+      try {
+        await schema.validate(modifiedData[providerToEditName], { abortEarly: false });
+        strapi.lockAppWithOverlay();
+
+        try {
+          emitEventRef.current('willEditAuthenticationProvider');
+
+          await request(getRequestURL('providers'), {
+            method: 'PUT',
+            body: { providers: modifiedData },
+          });
+
+          emitEventRef.current('didEditAuthenticationProvider');
+
+          strapi.notification.toggle({
+            type: 'success',
+            message: { id: getTrad('notification.success.submit') },
+          });
+
+          dispatchSubmitSucceeded();
+
+          handleToggle();
+        } catch (err) {
+          console.error(err);
+          strapi.notification.toggle({
+            type: 'warning',
+            message: { id: 'notification.error' },
+          });
+        }
+      } catch (err) {
+        console.error(err);
+        errors = getYupInnerErrors(err);
+        console.log(errors);
+      }
+
+      dispatchSetFormErrors(errors);
+
+      setIsSubmiting(false);
+      strapi.unlockApp();
+    },
+    [
+      dispatchSetFormErrors,
+      dispatchSubmitSucceeded,
+      formToRender,
+      handleToggle,
+      modifiedData,
+      providerToEditName,
+    ]
+  );
+
+  return (
+    <>
+      <SettingsPageTitle name={pageTitle} />
+      <div>
+        <Header title={{ label: pageTitle }} isLoading={isLoadingForPermissions || isLoading} />
+        <ListBaselineAlignment />
+        <List
+          title={listTitle}
+          items={providers}
+          isLoading={isLoadingForPermissions || isLoading}
+          customRowComponent={provider => (
+            <ListRow
+              {...provider}
+              onClick={() => handleClickEdit(provider)}
+              links={[
+                {
+                  icon: canUpdate ? <Pencil fill="#0e1622" /> : null,
+                  onClick: e => {
+                    e.stopPropagation();
+                    handleClickEdit(provider);
+                  },
+                },
+              ]}
+            >
+              <td key="enabled">
+                <Text
+                  fontWeight="semiBold"
+                  lineHeight="18px"
+                  color={provider.enabled ? 'green' : 'lightOrange'}
+                >
+                  {provider.enabled
+                    ? formatMessage({
+                        id: getTrad('List.row.provider.enabled'),
+                        defaultMessage: 'Enabled',
+                      })
+                    : formatMessage({
+                        id: getTrad('List.row.provider.disabled'),
+                        defaultMessage: 'Disabled',
+                      })}
+                </Text>
+              </td>
+            </ListRow>
+          )}
+        />
+      </div>
+      <ModalForm
+        isOpen={isOpen}
+        onClick={handleClick}
+        onCancel={handleToggle}
+        isLoading={isSubmiting}
+        onOpened={handleOpened}
+        onClosed={handleClosed}
+        onToggle={handleToggle}
+        headerBreadcrumbs={[
+          getTrad('PopUpForm.header.edit.providers'),
+          upperFirst(providerToEditName),
+        ]}
+      >
+        {showForm && (
+          <form onSubmit={handleSubmit}>
+            <Row>
+              {formToRender.form.map(input => {
+                const label = input.label.params
+                  ? { ...input.label, params: { provider: upperFirst(providerToEditName) } }
+                  : input.label;
+
+                const value =
+                  input.name === 'noName'
+                    ? `${strapi.backendURL}/connect/${providerToEditName}/callback`
+                    : get(modifiedData, [providerToEditName, ...input.name.split('.')], '');
+
+                return (
+                  <SizedInput
+                    key={input.name}
+                    {...input}
+                    label={label}
+                    error={formErrors[input.name]}
+                    name={`${providerToEditName}.${input.name}`}
+                    onChange={handleChange}
+                    value={value}
+                  />
+                );
+              })}
+            </Row>
+            <button type="submit" style={{ display: 'none' }} ref={buttonSubmitRef}>
+              hidden button to use the native form event
+            </button>
+          </form>
+        )}
+      </ModalForm>
+    </>
+  );
+};
+
+export default ProvidersPage;