@strapi/plugin-users-permissions 0.0.0-next.ff946d2c25a3e577b47132a357cac2932eb8e635 → 0.0.0-next.ffc36acb308febe288f1a31b62cbbb75b286585c

package/admin/src/pages/EmailTemplates/components/{EmailTable.js → EmailTable.jsx}

@@ -1,20 +1,21 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
+import * as React from 'react';
+
 import {
+  IconButton,
   Table,
-  Thead,
   Tbody,
-  Tr,
   Td,
   Th,
+  Thead,
+  Tr,
   Typography,
-  IconButton,
-  Icon,
   VisuallyHidden,
+  Box,
 } from '@strapi/design-system';
-import { Pencil, Refresh, Check } from '@strapi/icons';
-import { onRowClick, stopPropagation } from '@strapi/helper-plugin';
+import { Check, Pencil, ArrowClockwise as Refresh } from '@strapi/icons';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+
 import { getTrad } from '../../../utils';
 
 const EmailTable = ({ canUpdate, onEditClick }) => {
@@ -51,16 +52,16 @@ const EmailTable = ({ canUpdate, onEditClick }) => {
         </Tr>
       </Thead>
       <Tbody>
-        <Tr {...onRowClick({ fn: () => onEditClick('reset_password') })}>
+        <Tr cursor="pointer" onClick={() => onEditClick('reset_password')}>
           <Td>
-            <Icon>
+            <Box width="3.2rem" height="3.2rem" padding="0.8rem">
               <Refresh
                 aria-label={formatMessage({
                   id: 'global.reset-password',
                   defaultMessage: 'Reset password',
                 })}
               />
-            </Icon>
+            </Box>
           </Td>
           <Td>
             <Typography>
@@ -70,28 +71,30 @@ const EmailTable = ({ canUpdate, onEditClick }) => {
               })}
             </Typography>
           </Td>
-          <Td {...stopPropagation}>
+          <Td onClick={(e) => e.stopPropagation()}>
             <IconButton
               onClick={() => onEditClick('reset_password')}
               label={formatMessage({
                 id: getTrad('Email.template.form.edit.label'),
                 defaultMessage: 'Edit a template',
               })}
-              noBorder
-              icon={canUpdate && <Pencil />}
-            />
+              variant="ghost"
+              disabled={!canUpdate}
+            >
+              <Pencil />
+            </IconButton>
           </Td>
         </Tr>
-        <Tr {...onRowClick({ fn: () => onEditClick('email_confirmation') })}>
+        <Tr cursor="pointer" onClick={() => onEditClick('email_confirmation')}>
           <Td>
-            <Icon>
+            <Box width="3.2rem" height="3.2rem" padding="0.8rem">
               <Check
                 aria-label={formatMessage({
                   id: getTrad('Email.template.email_confirmation'),
                   defaultMessage: 'Email address confirmation',
                 })}
               />
-            </Icon>
+            </Box>
           </Td>
           <Td>
             <Typography>
@@ -101,16 +104,18 @@ const EmailTable = ({ canUpdate, onEditClick }) => {
               })}
             </Typography>
           </Td>
-          <Td {...stopPropagation}>
+          <Td onClick={(e) => e.stopPropagation()}>
             <IconButton
               onClick={() => onEditClick('email_confirmation')}
               label={formatMessage({
                 id: getTrad('Email.template.form.edit.label'),
                 defaultMessage: 'Edit a template',
               })}
-              noBorder
-              icon={canUpdate && <Pencil />}
-            />
+              variant="ghost"
+              disabled={!canUpdate}
+            >
+              <Pencil />
+            </IconButton>
           </Td>
         </Tr>
       </Tbody>

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

@@ -0,0 +1,148 @@
+import * as React from 'react';
+
+import { useTracking } from '@strapi/admin/strapi-admin';
+import { useNotifyAT } from '@strapi/design-system';
+import {
+  Page,
+  useAPIErrorHandler,
+  useNotification,
+  useFetchClient,
+  useRBAC,
+  Layouts,
+} from '@strapi/strapi/admin';
+import { useIntl } from 'react-intl';
+import { useMutation, useQuery, useQueryClient } from 'react-query';
+
+import { PERMISSIONS } from '../../constants';
+import { getTrad } from '../../utils';
+
+import EmailForm from './components/EmailForm';
+import EmailTable from './components/EmailTable';
+
+const ProtectedEmailTemplatesPage = () => (
+  <Page.Protect permissions={PERMISSIONS.readEmailTemplates}>
+    <EmailTemplatesPage />
+  </Page.Protect>
+);
+const EmailTemplatesPage = () => {
+  const { formatMessage } = useIntl();
+  const { trackUsage } = useTracking();
+  const { notifyStatus } = useNotifyAT();
+  const { toggleNotification } = useNotification();
+  const queryClient = useQueryClient();
+  const { get, put } = useFetchClient();
+  const { formatAPIError } = useAPIErrorHandler();
+
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [templateToEdit, setTemplateToEdit] = React.useState(null);
+
+  const {
+    isLoading: isLoadingForPermissions,
+    allowedActions: { canUpdate },
+  } = useRBAC({ update: PERMISSIONS.updateEmailTemplates });
+
+  const { isLoading: isLoadingData, data } = useQuery(
+    ['users-permissions', 'email-templates'],
+    async () => {
+      const { data } = await get('/users-permissions/email-templates');
+
+      return data;
+    },
+    {
+      onSuccess() {
+        notifyStatus(
+          formatMessage({
+            id: getTrad('Email.template.data.loaded'),
+            defaultMessage: 'Email templates has been loaded',
+          })
+        );
+      },
+      onError(error) {
+        toggleNotification({
+          type: 'danger',
+          message: formatAPIError(error),
+        });
+      },
+    }
+  );
+
+  const isLoading = isLoadingForPermissions || isLoadingData;
+
+  const handleToggle = () => {
+    setIsModalOpen((prev) => !prev);
+  };
+
+  const handleEditClick = (template) => {
+    setTemplateToEdit(template);
+    handleToggle();
+  };
+
+  const submitMutation = useMutation(
+    (body) => put('/users-permissions/email-templates', { 'email-templates': body }),
+    {
+      async onSuccess() {
+        await queryClient.invalidateQueries(['users-permissions', 'email-templates']);
+
+        toggleNotification({
+          type: 'success',
+          message: formatMessage({ id: 'notification.success.saved', defaultMessage: 'Saved' }),
+        });
+
+        trackUsage('didEditEmailTemplates');
+
+        handleToggle();
+      },
+      onError(error) {
+        toggleNotification({
+          type: 'danger',
+          message: formatAPIError(error),
+        });
+      },
+      refetchActive: true,
+    }
+  );
+
+  const handleSubmit = (body) => {
+    trackUsage('willEditEmailTemplates');
+
+    const editedTemplates = { ...data, [templateToEdit]: body };
+    submitMutation.mutate(editedTemplates);
+  };
+
+  if (isLoading) {
+    return <Page.Loading />;
+  }
+
+  return (
+    <Page.Main aria-busy={submitMutation.isLoading}>
+      <Page.Title>
+        {formatMessage(
+          { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },
+          {
+            name: formatMessage({
+              id: getTrad('HeaderNav.link.emailTemplates'),
+              defaultMessage: 'Email templates',
+            }),
+          }
+        )}
+      </Page.Title>
+      <Layouts.Header
+        title={formatMessage({
+          id: getTrad('HeaderNav.link.emailTemplates'),
+          defaultMessage: 'Email templates',
+        })}
+      />
+      <Layouts.Content>
+        <EmailTable onEditClick={handleEditClick} canUpdate={canUpdate} />
+        <EmailForm
+          template={data[templateToEdit]}
+          onToggle={handleToggle}
+          open={isModalOpen}
+          onSubmit={handleSubmit}
+        />
+      </Layouts.Content>
+    </Page.Main>
+  );
+};
+
+export { ProtectedEmailTemplatesPage, EmailTemplatesPage };

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

@@ -1,5 +1,5 @@
+import { translatedErrors } from '@strapi/strapi/admin';
 import * as yup from 'yup';
-import { translatedErrors } from '@strapi/helper-plugin';
 
 const schema = yup.object().shape({
   options: yup
@@ -8,15 +8,27 @@ const schema = yup.object().shape({
       from: yup
         .object()
         .shape({
-          name: yup.string().required(translatedErrors.required),
-          email: yup.string().email(translatedErrors.email).required(translatedErrors.required),
+          name: yup.string().required({
+            id: translatedErrors.required.id,
+            defaultMessage: 'This field is required',
+          }),
+          email: yup.string().email(translatedErrors.email).required({
+            id: translatedErrors.required.id,
+            defaultMessage: 'This field is required',
+          }),
         })
         .required(),
       response_email: yup.string().email(translatedErrors.email),
-      object: yup.string().required(translatedErrors.required),
-      message: yup.string().required(translatedErrors.required),
+      object: yup.string().required({
+        id: translatedErrors.required.id,
+        defaultMessage: 'This field is required',
+      }),
+      message: yup.string().required({
+        id: translatedErrors.required.id,
+        defaultMessage: 'This field is required',
+      }),
     })
-    .required(translatedErrors.required),
+    .required(translatedErrors.required.id),
 });
 
 export default schema;

package/admin/src/pages/Providers/index.jsx

@@ -0,0 +1,262 @@
+import * as React from 'react';
+
+import { useTracking, Layouts } from '@strapi/admin/strapi-admin';
+import {
+  IconButton,
+  Table,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+  Typography,
+  VisuallyHidden,
+  useCollator,
+} from '@strapi/design-system';
+import { Pencil } from '@strapi/icons';
+import {
+  Page,
+  useAPIErrorHandler,
+  useNotification,
+  useFetchClient,
+  useRBAC,
+} from '@strapi/strapi/admin';
+import upperFirst from 'lodash/upperFirst';
+import { useIntl } from 'react-intl';
+import { useMutation, useQuery, useQueryClient } from 'react-query';
+
+import FormModal from '../../components/FormModal';
+import { PERMISSIONS } from '../../constants';
+import { getTrad } from '../../utils';
+
+import forms from './utils/forms';
+
+export const ProvidersPage = () => {
+  const { formatMessage, locale } = useIntl();
+  const queryClient = useQueryClient();
+  const { trackUsage } = useTracking();
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [providerToEditName, setProviderToEditName] = React.useState(null);
+  const { toggleNotification } = useNotification();
+  const { get, put } = useFetchClient();
+  const { formatAPIError } = useAPIErrorHandler();
+  const formatter = useCollator(locale, {
+    sensitivity: 'base',
+  });
+
+  const {
+    isLoading: isLoadingPermissions,
+    allowedActions: { canUpdate },
+  } = useRBAC({ update: PERMISSIONS.updateProviders });
+
+  const { isLoading: isLoadingData, data } = useQuery(
+    ['users-permissions', 'get-providers'],
+    async () => {
+      const { data } = await get('/users-permissions/providers');
+
+      return data;
+    },
+    {
+      initialData: {},
+    }
+  );
+
+  const submitMutation = useMutation((body) => put('/users-permissions/providers', body), {
+    async onSuccess() {
+      await queryClient.invalidateQueries(['users-permissions', 'get-providers']);
+
+      toggleNotification({
+        type: 'success',
+        message: formatMessage({ id: getTrad('notification.success.submit') }),
+      });
+
+      trackUsage('didEditAuthenticationProvider');
+
+      handleToggleModal();
+    },
+    onError(error) {
+      toggleNotification({
+        type: 'danger',
+        message: formatAPIError(error),
+      });
+    },
+    refetchActive: false,
+  });
+
+  const providers = Object.entries(data)
+    .reduce((acc, [name, provider]) => {
+      const { icon, enabled, subdomain } = provider;
+
+      acc.push({
+        name,
+        icon: icon === 'envelope' ? ['fas', 'envelope'] : ['fab', icon],
+        enabled,
+        subdomain,
+      });
+
+      return acc;
+    }, [])
+    .sort((a, b) => formatter.compare(a.name, b.name));
+
+  const isLoading = isLoadingData || isLoadingPermissions;
+
+  const isProviderWithSubdomain = React.useMemo(() => {
+    if (!providerToEditName) {
+      return false;
+    }
+
+    const providerToEdit = providers.find((obj) => obj.name === providerToEditName);
+
+    return !!providerToEdit?.subdomain;
+  }, [providers, providerToEditName]);
+
+  const layoutToRender = React.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) => {
+    trackUsage('willEditAuthenticationProvider');
+
+    submitMutation.mutate({ providers: { ...data, [providerToEditName]: values } });
+  };
+
+  if (isLoading) {
+    return <Page.Loading />;
+  }
+
+  return (
+    <Layouts.Root>
+      <Page.Title>
+        {formatMessage(
+          { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },
+          {
+            name: formatMessage({
+              id: getTrad('HeaderNav.link.providers'),
+              defaultMessage: 'Providers',
+            }),
+          }
+        )}
+      </Page.Title>
+      <Page.Main>
+        <Layouts.Header
+          title={formatMessage({
+            id: getTrad('HeaderNav.link.providers'),
+            defaultMessage: 'Providers',
+          })}
+        />
+        <Layouts.Content>
+          <Table colCount={3} rowCount={providers.length + 1}>
+            <Thead>
+              <Tr>
+                <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}
+                  onClick={() => (canUpdate ? handleClickEdit(provider) : undefined)}
+                >
+                  <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 onClick={(e) => e.stopPropagation()}>
+                    {canUpdate && (
+                      <IconButton
+                        onClick={() => handleClickEdit(provider)}
+                        variant="ghost"
+                        label="Edit"
+                      >
+                        <Pencil />
+                      </IconButton>
+                    )}
+                  </Td>
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
+        </Layouts.Content>
+      </Page.Main>
+      <FormModal
+        initialData={data[providerToEditName]}
+        isOpen={isOpen}
+        isSubmiting={submitMutation.isLoading}
+        layout={layoutToRender}
+        headerBreadcrumbs={[
+          formatMessage({
+            id: getTrad('PopUpForm.header.edit.providers'),
+            defaultMessage: 'Edit Provider',
+          }),
+          upperFirst(providerToEditName),
+        ]}
+        onToggle={handleToggleModal}
+        onSubmit={handleSubmit}
+        providerToEditName={providerToEditName}
+      />
+    </Layouts.Root>
+  );
+};
+
+const ProtectedProvidersPage = () => (
+  <Page.Protect permissions={PERMISSIONS.readProviders}>
+    <ProvidersPage />
+  </Page.Protect>
+);
+
+export default ProtectedProvidersPage;

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

@@ -1,5 +1,5 @@
+import { translatedErrors } from '@strapi/strapi/admin';
 import * as yup from 'yup';
-import { translatedErrors } from '@strapi/helper-plugin';
 
 import { getTrad } from '../../../utils';
 
@@ -34,6 +34,9 @@ const secretLabel = {
   defaultMessage: 'Client Secret',
 };
 
+const CALLBACK_REGEX = /^$|^[a-z][a-z0-9+.-]*:\/\/[^\s/$.?#](?:[^\s]*[^\s/$.?#])?$/i;
+const SUBDOMAIN_REGEX = /^(([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+)(:\d+)?(\/\S*)?$/i;
+
 const forms = {
   email: {
     form: [
@@ -52,7 +55,7 @@ const forms = {
       ],
     ],
     schema: yup.object().shape({
-      enabled: yup.bool().required(translatedErrors.required),
+      enabled: yup.bool().required(translatedErrors.required.id),
     }),
   },
   providers: {
@@ -117,20 +120,23 @@ const forms = {
       ],
     ],
     schema: yup.object().shape({
-      enabled: yup.bool().required(translatedErrors.required),
+      enabled: yup.bool().required(translatedErrors.required.id),
       key: yup.string().when('enabled', {
         is: true,
-        then: yup.string().required(translatedErrors.required),
+        then: yup.string().required(translatedErrors.required.id),
         otherwise: yup.string(),
       }),
       secret: yup.string().when('enabled', {
         is: true,
-        then: yup.string().required(translatedErrors.required),
+        then: yup.string().required(translatedErrors.required.id),
         otherwise: yup.string(),
       }),
       callback: yup.string().when('enabled', {
         is: true,
-        then: yup.string().required(translatedErrors.required),
+        then: yup
+          .string()
+          .matches(CALLBACK_REGEX, translatedErrors.regex.id)
+          .required(translatedErrors.required.id),
         otherwise: yup.string(),
       }),
     }),
@@ -231,25 +237,31 @@ const forms = {
       ],
     ],
     schema: yup.object().shape({
-      enabled: yup.bool().required(translatedErrors.required),
+      enabled: yup.bool().required(translatedErrors.required.id),
       key: yup.string().when('enabled', {
         is: true,
-        then: yup.string().required(translatedErrors.required),
+        then: yup.string().required(translatedErrors.required.id),
         otherwise: yup.string(),
       }),
       secret: yup.string().when('enabled', {
         is: true,
-        then: yup.string().required(translatedErrors.required),
+        then: yup.string().required(translatedErrors.required.id),
         otherwise: yup.string(),
       }),
       subdomain: yup.string().when('enabled', {
         is: true,
-        then: yup.string().required(translatedErrors.required),
+        then: yup
+          .string()
+          .matches(SUBDOMAIN_REGEX, translatedErrors.regex.id)
+          .required(translatedErrors.required.id),
         otherwise: yup.string(),
       }),
       callback: yup.string().when('enabled', {
         is: true,
-        then: yup.string().required(translatedErrors.required),
+        then: yup
+          .string()
+          .matches(CALLBACK_REGEX, translatedErrors.regex.id)
+          .required(translatedErrors.required.id),
         otherwise: yup.string(),
       }),
     }),

package/admin/src/pages/Roles/constants.js

@@ -0,0 +1,7 @@
+import { translatedErrors } from '@strapi/strapi/admin';
+import * as yup from 'yup';
+
+export const createRoleSchema = yup.object().shape({
+  name: yup.string().required(translatedErrors.required.id),
+  description: yup.string().required(translatedErrors.required.id),
+});