@strapi/plugin-users-permissions 0.0.0-4fc90398602f

package/admin/src/pages/EmailTemplates/components/EmailTable.js

@@ -0,0 +1,121 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { Table, Thead, Tbody, Tr, Td, Th } from '@strapi/design-system/Table';
+import { VisuallyHidden } from '@strapi/design-system/VisuallyHidden';
+import { Typography } from '@strapi/design-system/Typography';
+import { IconButton } from '@strapi/design-system/IconButton';
+import { Icon } from '@strapi/design-system/Icon';
+import Pencil from '@strapi/icons/Pencil';
+import Reload from '@strapi/icons/Refresh';
+import { onRowClick, stopPropagation } from '@strapi/helper-plugin';
+import Check from '@strapi/icons/Check';
+import { getTrad } from '../../../utils';
+
+const EmailTable = ({ canUpdate, onEditClick }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Table colCount={3} rowCount={3}>
+      <Thead>
+        <Tr>
+          <Th width="1%">
+            <VisuallyHidden>
+              {formatMessage({
+                id: getTrad('Email.template.table.icon.label'),
+                defaultMessage: 'icon',
+              })}
+            </VisuallyHidden>
+          </Th>
+          <Th>
+            <Typography variant="sigma" textColor="neutral600">
+              {formatMessage({
+                id: getTrad('Email.template.table.name.label'),
+                defaultMessage: 'name',
+              })}
+            </Typography>
+          </Th>
+          <Th width="1%">
+            <VisuallyHidden>
+              {formatMessage({
+                id: getTrad('Email.template.table.action.label'),
+                defaultMessage: 'action',
+              })}
+            </VisuallyHidden>
+          </Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        <Tr {...onRowClick({ fn: () => onEditClick('reset_password') })}>
+          <Td>
+            <Icon>
+              <Reload
+                aria-label={formatMessage({
+                  id: 'global.reset-password',
+                  defaultMessage: 'Reset password',
+                })}
+              />
+            </Icon>
+          </Td>
+          <Td>
+            <Typography>
+              {formatMessage({
+                id: 'global.reset-password',
+                defaultMessage: 'Reset password',
+              })}
+            </Typography>
+          </Td>
+          <Td {...stopPropagation}>
+            <IconButton
+              onClick={() => onEditClick('reset_password')}
+              label={formatMessage({
+                id: getTrad('Email.template.form.edit.label'),
+                defaultMessage: 'Edit a template',
+              })}
+              noBorder
+              icon={canUpdate && <Pencil />}
+            />
+          </Td>
+        </Tr>
+        <Tr {...onRowClick({ fn: () => onEditClick('email_confirmation') })}>
+          <Td>
+            <Icon>
+              <Check
+                aria-label={formatMessage({
+                  id: getTrad('Email.template.email_confirmation'),
+                  defaultMessage: 'Email address confirmation',
+                })}
+              />
+            </Icon>
+          </Td>
+          <Td>
+            <Typography>
+              {formatMessage({
+                id: getTrad('Email.template.email_confirmation'),
+                defaultMessage: 'Email address confirmation',
+              })}
+            </Typography>
+          </Td>
+          <Td {...stopPropagation}>
+            <IconButton
+              onClick={() => onEditClick('email_confirmation')}
+              label={formatMessage({
+                id: getTrad('Email.template.form.edit.label'),
+                defaultMessage: 'Edit a template',
+              })}
+              noBorder
+              icon={canUpdate && <Pencil />}
+            />
+          </Td>
+        </Tr>
+      </Tbody>
+    </Table>
+  );
+};
+
+EmailTable.propTypes = {
+  canUpdate: PropTypes.bool.isRequired,
+  onEditClick: PropTypes.func.isRequired,
+};
+
+export default EmailTable;

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

@@ -0,0 +1,162 @@
+import React, { useMemo, useRef, useState } from 'react';
+import { useQuery, useMutation, useQueryClient } from 'react-query';
+import { useIntl } from 'react-intl';
+import {
+  SettingsPageTitle,
+  useTracking,
+  useNotification,
+  useOverlayBlocker,
+  CheckPagePermissions,
+  useRBAC,
+  useFocusWhenNavigate,
+  LoadingIndicatorPage,
+} from '@strapi/helper-plugin';
+import { useNotifyAT } from '@strapi/design-system/LiveRegions';
+import { Main } from '@strapi/design-system/Main';
+import { ContentLayout, HeaderLayout } from '@strapi/design-system/Layout';
+import pluginPermissions from '../../permissions';
+import { getTrad } from '../../utils';
+import { fetchData, putEmailTemplate } from './utils/api';
+import EmailTable from './components/EmailTable';
+import EmailForm from './components/EmailForm';
+
+const ProtectedEmailTemplatesPage = () => (
+  <CheckPagePermissions permissions={pluginPermissions.readEmailTemplates}>
+    <EmailTemplatesPage />
+  </CheckPagePermissions>
+);
+
+const EmailTemplatesPage = () => {
+  const { formatMessage } = useIntl();
+  const { trackUsage } = useTracking();
+  const { notifyStatus } = useNotifyAT();
+  const toggleNotification = useNotification();
+  const { lockApp, unlockApp } = useOverlayBlocker();
+  const trackUsageRef = useRef(trackUsage);
+  const queryClient = useQueryClient();
+  useFocusWhenNavigate();
+
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [templateToEdit, setTemplateToEdit] = useState(null);
+
+  const updatePermissions = useMemo(() => {
+    return { update: pluginPermissions.updateEmailTemplates };
+  }, []);
+
+  const {
+    isLoading: isLoadingForPermissions,
+    allowedActions: { canUpdate },
+  } = useRBAC(updatePermissions);
+
+  const { status: isLoadingData, data } = useQuery('email-templates', () => fetchData(), {
+    onSuccess() {
+      notifyStatus(
+        formatMessage({
+          id: getTrad('Email.template.data.loaded'),
+          defaultMessage: 'Email templates has been loaded',
+        })
+      );
+    },
+    onError() {
+      toggleNotification({
+        type: 'warning',
+        message: { id: 'notification.error', defaultMessage: 'An error occured' },
+      });
+    },
+  });
+
+  const isLoading = isLoadingForPermissions || isLoadingData !== 'success';
+
+  const handleToggle = () => {
+    setIsModalOpen((prev) => !prev);
+  };
+
+  const handleEditClick = (template) => {
+    setTemplateToEdit(template);
+    handleToggle();
+  };
+
+  const submitMutation = useMutation((body) => putEmailTemplate({ 'email-templates': body }), {
+    async onSuccess() {
+      await queryClient.invalidateQueries('email-templates');
+
+      toggleNotification({
+        type: 'success',
+        message: { id: 'notification.success.saved', defaultMessage: 'Saved' },
+      });
+
+      trackUsageRef.current('didEditEmailTemplates');
+
+      unlockApp();
+      handleToggle();
+    },
+    onError() {
+      toggleNotification({
+        type: 'warning',
+        message: { id: 'notification.error', defaultMessage: 'An error occured' },
+      });
+      unlockApp();
+    },
+    refetchActive: true,
+  });
+  const { isLoading: isSubmittingForm } = submitMutation;
+
+  const handleSubmit = (body) => {
+    lockApp();
+    trackUsageRef.current('willEditEmailTemplates');
+
+    const editedTemplates = { ...data, [templateToEdit]: body };
+    submitMutation.mutate(editedTemplates);
+  };
+
+  if (isLoading) {
+    return (
+      <Main aria-busy="true">
+        <SettingsPageTitle
+          name={formatMessage({
+            id: getTrad('HeaderNav.link.emailTemplates'),
+            defaultMessage: 'Email templates',
+          })}
+        />
+        <HeaderLayout
+          title={formatMessage({
+            id: getTrad('HeaderNav.link.emailTemplates'),
+            defaultMessage: 'Email templates',
+          })}
+        />
+        <ContentLayout>
+          <LoadingIndicatorPage />
+        </ContentLayout>
+      </Main>
+    );
+  }
+
+  return (
+    <Main aria-busy={isSubmittingForm}>
+      <SettingsPageTitle
+        name={formatMessage({
+          id: getTrad('HeaderNav.link.emailTemplates'),
+          defaultMessage: 'Email templates',
+        })}
+      />
+      <HeaderLayout
+        title={formatMessage({
+          id: getTrad('HeaderNav.link.emailTemplates'),
+          defaultMessage: 'Email templates',
+        })}
+      />
+      <ContentLayout>
+        <EmailTable onEditClick={handleEditClick} canUpdate={canUpdate} />
+        {isModalOpen && (
+          <EmailForm
+            template={data[templateToEdit]}
+            onToggle={handleToggle}
+            onSubmit={handleSubmit}
+          />
+        )}
+      </ContentLayout>
+    </Main>
+  );
+};
+
+export default ProtectedEmailTemplatesPage;

package/admin/src/pages/EmailTemplates/utils/api.js

@@ -0,0 +1,13 @@
+import { axiosInstance, getRequestURL } from '../../../utils';
+
+const fetchData = async () => {
+  const { data } = await axiosInstance.get(getRequestURL('email-templates'));
+
+  return data;
+};
+
+const putEmailTemplate = (body) => {
+  return axiosInstance.put(getRequestURL('email-templates'), body);
+};
+
+export { fetchData, putEmailTemplate };

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

@@ -0,0 +1,22 @@
+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/pages/Providers/index.js

@@ -0,0 +1,274 @@
+import React, { useMemo, useRef, useState } from 'react';
+import { useIntl } from 'react-intl';
+import {
+  SettingsPageTitle,
+  LoadingIndicatorPage,
+  useTracking,
+  useNotification,
+  useOverlayBlocker,
+  CheckPagePermissions,
+  useRBAC,
+  useFocusWhenNavigate,
+  onRowClick,
+  stopPropagation,
+} from '@strapi/helper-plugin';
+import has from 'lodash/has';
+import upperFirst from 'lodash/upperFirst';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { HeaderLayout, Layout, ContentLayout } from '@strapi/design-system/Layout';
+import { Main } from '@strapi/design-system/Main';
+import { useNotifyAT } from '@strapi/design-system/LiveRegions';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@strapi/design-system/Table';
+import { Typography } from '@strapi/design-system/Typography';
+import { VisuallyHidden } from '@strapi/design-system/VisuallyHidden';
+import { IconButton } from '@strapi/design-system/IconButton';
+import Pencil from '@strapi/icons/Pencil';
+import { useQuery, useMutation, useQueryClient } from 'react-query';
+import forms from './utils/forms';
+import { fetchData, putProvider } from './utils/api';
+import createProvidersArray from './utils/createProvidersArray';
+import { getTrad } from '../../utils';
+import pluginPermissions from '../../permissions';
+import FormModal from '../../components/FormModal';
+
+export const ProvidersPage = () => {
+  const { formatMessage } = useIntl();
+  useFocusWhenNavigate();
+  const { notifyStatus } = useNotifyAT();
+  const queryClient = useQueryClient();
+  const { trackUsage } = useTracking();
+  const trackUsageRef = useRef(trackUsage);
+  const [isOpen, setIsOpen] = useState(false);
+  const [isSubmiting, setIsSubmiting] = useState(false);
+  const [providerToEditName, setProviderToEditName] = useState(null);
+  const toggleNotification = useNotification();
+  const { lockApp, unlockApp } = useOverlayBlocker();
+
+  const updatePermissions = useMemo(() => {
+    return { update: pluginPermissions.updateProviders };
+  }, []);
+
+  const {
+    isLoading: isLoadingForPermissions,
+    allowedActions: { canUpdate },
+  } = useRBAC(updatePermissions);
+
+  const {
+    isLoading: isLoadingForData,
+    data: modifiedData,
+    isFetching,
+  } = useQuery('get-providers', () => fetchData(toggleNotification), {
+    onSuccess() {
+      notifyStatus(
+        formatMessage({
+          id: getTrad('Providers.data.loaded'),
+          defaultMessage: 'Providers have been loaded',
+        })
+      );
+    },
+    initialData: {},
+  });
+
+  const isLoading = isLoadingForData || isFetching;
+
+  const submitMutation = useMutation(putProvider, {
+    async onSuccess() {
+      await queryClient.invalidateQueries('get-providers');
+      toggleNotification({
+        type: 'info',
+        message: { id: getTrad('notification.success.submit') },
+      });
+
+      trackUsageRef.current('didEditAuthenticationProvider');
+      setIsSubmiting(false);
+      handleToggleModal();
+      unlockApp();
+    },
+    onError() {
+      toggleNotification({
+        type: 'warning',
+        message: { id: 'notification.error' },
+      });
+      unlockApp();
+      setIsSubmiting(false);
+    },
+    refetchActive: false,
+  });
+
+  const providers = useMemo(() => createProvidersArray(modifiedData), [modifiedData]);
+
+  const rowCount = providers.length;
+
+  const isProviderWithSubdomain = useMemo(() => {
+    if (!providerToEditName) {
+      return false;
+    }
+
+    const providerToEdit = providers.find((obj) => obj.name === providerToEditName);
+
+    return has(providerToEdit, 'subdomain');
+  }, [providers, providerToEditName]);
+
+  const pageTitle = formatMessage({
+    id: getTrad('HeaderNav.link.providers'),
+    defaultMessage: 'Providers',
+  });
+
+  const layoutToRender = useMemo(() => {
+    if (providerToEditName === 'email') {
+      return forms.email;
+    }
+
+    if (isProviderWithSubdomain) {
+      return forms.providersWithSubdomain;
+    }
+
+    return forms.providers;
+  }, [providerToEditName, isProviderWithSubdomain]);
+
+  const handleToggleModal = () => {
+    setIsOpen((prev) => !prev);
+  };
+
+  const handleClickEdit = (provider) => {
+    if (canUpdate) {
+      setProviderToEditName(provider.name);
+      handleToggleModal();
+    }
+  };
+
+  const handleSubmit = async (values) => {
+    setIsSubmiting(true);
+
+    lockApp();
+
+    trackUsageRef.current('willEditAuthenticationProvider');
+
+    const body = { ...modifiedData, [providerToEditName]: values };
+
+    submitMutation.mutate({ providers: body });
+  };
+
+  return (
+    <Layout>
+      <SettingsPageTitle name={pageTitle} />
+      <Main>
+        <HeaderLayout
+          title={formatMessage({
+            id: getTrad('HeaderNav.link.providers'),
+            defaultMessage: 'Providers',
+          })}
+        />
+        {isLoading || isLoadingForPermissions ? (
+          <LoadingIndicatorPage />
+        ) : (
+          <ContentLayout>
+            <Table colCount={4} rowCount={rowCount + 1}>
+              <Thead>
+                <Tr>
+                  <Th>
+                    <Typography variant="sigma" textColor="neutral600">
+                      <VisuallyHidden>
+                        {formatMessage({ id: getTrad('Providers.image'), defaultMessage: 'Image' })}
+                      </VisuallyHidden>
+                    </Typography>
+                  </Th>
+                  <Th>
+                    <Typography variant="sigma" textColor="neutral600">
+                      {formatMessage({ id: 'global.name', defaultMessage: 'Name' })}
+                    </Typography>
+                  </Th>
+                  <Th>
+                    <Typography variant="sigma" textColor="neutral600">
+                      {formatMessage({ id: getTrad('Providers.status'), defaultMessage: 'Status' })}
+                    </Typography>
+                  </Th>
+                  <Th>
+                    <Typography variant="sigma">
+                      <VisuallyHidden>
+                        {formatMessage({
+                          id: 'global.settings',
+                          defaultMessage: 'Settings',
+                        })}
+                      </VisuallyHidden>
+                    </Typography>
+                  </Th>
+                </Tr>
+              </Thead>
+              <Tbody>
+                {providers.map((provider) => (
+                  <Tr
+                    key={provider.name}
+                    {...onRowClick({
+                      fn: () => handleClickEdit(provider),
+                      condition: canUpdate,
+                    })}
+                  >
+                    <Td width="">
+                      <FontAwesomeIcon icon={provider.icon} />
+                    </Td>
+                    <Td width="45%">
+                      <Typography fontWeight="semiBold" textColor="neutral800">
+                        {provider.name}
+                      </Typography>
+                    </Td>
+                    <Td width="65%">
+                      <Typography
+                        textColor={provider.enabled ? 'success600' : 'danger600'}
+                        data-testid={`enable-${provider.name}`}
+                      >
+                        {provider.enabled
+                          ? formatMessage({
+                              id: 'global.enabled',
+                              defaultMessage: 'Enabled',
+                            })
+                          : formatMessage({
+                              id: 'global.disabled',
+                              defaultMessage: 'Disabled',
+                            })}
+                      </Typography>
+                    </Td>
+                    <Td {...stopPropagation}>
+                      {canUpdate && (
+                        <IconButton
+                          onClick={() => handleClickEdit(provider)}
+                          noBorder
+                          icon={<Pencil />}
+                          label="Edit"
+                        />
+                      )}
+                    </Td>
+                  </Tr>
+                ))}
+              </Tbody>
+            </Table>
+          </ContentLayout>
+        )}
+      </Main>
+      <FormModal
+        initialData={modifiedData[providerToEditName]}
+        isOpen={isOpen}
+        isSubmiting={isSubmiting}
+        layout={layoutToRender}
+        headerBreadcrumbs={[
+          formatMessage({
+            id: getTrad('PopUpForm.header.edit.providers'),
+            defaultMessage: 'Edit Provider',
+          }),
+          upperFirst(providerToEditName),
+        ]}
+        onToggle={handleToggleModal}
+        onSubmit={handleSubmit}
+        providerToEditName={providerToEditName}
+      />
+    </Layout>
+  );
+};
+
+const ProtectedProvidersPage = () => (
+  <CheckPagePermissions permissions={pluginPermissions.readProviders}>
+    <ProvidersPage />
+  </CheckPagePermissions>
+);
+
+export default ProtectedProvidersPage;

package/admin/src/pages/Providers/reducer.js

@@ -0,0 +1,54 @@
+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 '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/pages/Providers/utils/api.js

@@ -0,0 +1,21 @@
+import { getRequestURL, axiosInstance } from '../../../utils';
+
+// eslint-disable-next-line import/prefer-default-export
+export const fetchData = async (toggleNotification) => {
+  try {
+    const { data } = await axiosInstance.get(getRequestURL('providers'));
+
+    return data;
+  } catch (err) {
+    toggleNotification({
+      type: 'warning',
+      message: { id: 'notification.error' },
+    });
+
+    throw new Error('error');
+  }
+};
+
+export const putProvider = (body) => {
+  return axiosInstance.put(getRequestURL('providers'), body);
+};

package/admin/src/pages/Providers/utils/createProvidersArray.js

@@ -0,0 +1,21 @@
+import { sortBy } from 'lodash';
+
+const createProvidersArray = (data) => {
+  return sortBy(
+    Object.keys(data).reduce((acc, current) => {
+      const { icon: iconName, enabled, subdomain } = data[current];
+      const icon = iconName === 'envelope' ? ['fas', 'envelope'] : ['fab', iconName];
+
+      if (subdomain !== undefined) {
+        acc.push({ name: current, icon, enabled, subdomain });
+      } else {
+        acc.push({ name: current, icon, enabled });
+      }
+
+      return acc;
+    }, []),
+    'name'
+  );
+};
+
+export default createProvidersArray;