@strapi/plugin-users-permissions 0.0.0-next.f7babb775ed9a7e18d8351cb7f74c63e016323c4 → 0.0.0-next.f93d6eabe52aa7681655cfa08eedbc3708dbb90d

package/admin/src/index.js

@@ -1,25 +1,17 @@
-// NOTE TO PLUGINS DEVELOPERS:
-// If you modify this file by adding new options to the plugin entry point
-// Here's the file: strapi/docs/3.0.0-beta.x/plugin-development/frontend-field-api.md
-// Here's the file: strapi/docs/3.0.0-beta.x/guides/registering-a-field-in-admin.md
-// Also the strapi-generate-plugins/files/admin/src/index.js needs to be updated
-// IF THE DOC IS NOT UPDATED THE PULL REQUEST WILL NOT BE MERGED
-import { prefixPluginTranslations } from '@strapi/helper-plugin';
-
-import pluginPkg from '../../package.json';
+import { strapi as pkgStrapi } from '../../package.json';
 
 import { PERMISSIONS } from './constants';
-import pluginId from './pluginId';
 import getTrad from './utils/getTrad';
+import { prefixPluginTranslations } from './utils/prefixPluginTranslations';
 
-const name = pluginPkg.strapi.name;
+const name = pkgStrapi.name;
 
 export default {
   register(app) {
     // Create the plugin's settings section
     app.createSettingSection(
       {
-        id: pluginId,
+        id: 'users-permissions',
         intlLabel: {
           id: getTrad('Settings.section-label'),
           defaultMessage: 'Users & Permissions plugin',
@@ -32,14 +24,8 @@ export default {
             defaultMessage: 'Roles',
           },
           id: 'roles',
-          to: `/settings/${pluginId}/roles`,
-          async Component() {
-            const component = await import(
-              /* webpackChunkName: "users-roles-settings-page" */ './pages/Roles'
-            );
-
-            return component;
-          },
+          to: `users-permissions/roles`,
+          Component: () => import('./pages/Roles'),
           permissions: PERMISSIONS.accessRoles,
         },
         {
@@ -48,14 +34,8 @@ export default {
             defaultMessage: 'Providers',
           },
           id: 'providers',
-          to: `/settings/${pluginId}/providers`,
-          async Component() {
-            const component = await import(
-              /* webpackChunkName: "users-providers-settings-page" */ './pages/Providers'
-            );
-
-            return component;
-          },
+          to: `users-permissions/providers`,
+          Component: () => import('./pages/Providers'),
           permissions: PERMISSIONS.readProviders,
         },
         {
@@ -64,14 +44,11 @@ export default {
             defaultMessage: 'Email templates',
           },
           id: 'email-templates',
-          to: `/settings/${pluginId}/email-templates`,
-          async Component() {
-            const component = await import(
-              /* webpackChunkName: "users-email-settings-page" */ './pages/EmailTemplates'
-            );
-
-            return component;
-          },
+          to: `users-permissions/email-templates`,
+          Component: () =>
+            import('./pages/EmailTemplates').then((mod) => ({
+              default: mod.ProtectedEmailTemplatesPage,
+            })),
           permissions: PERMISSIONS.readEmailTemplates,
         },
         {
@@ -80,21 +57,18 @@ export default {
             defaultMessage: 'Advanced Settings',
           },
           id: 'advanced-settings',
-          to: `/settings/${pluginId}/advanced-settings`,
-          async Component() {
-            const component = await import(
-              /* webpackChunkName: "users-advanced-settings-page" */ './pages/AdvancedSettings'
-            );
-
-            return component;
-          },
+          to: `users-permissions/advanced-settings`,
+          Component: () =>
+            import('./pages/AdvancedSettings').then((mod) => ({
+              default: mod.ProtectedAdvancedSettingsPage,
+            })),
           permissions: PERMISSIONS.readAdvancedSettings,
         },
       ]
     );
 
     app.registerPlugin({
-      id: pluginId,
+      id: 'users-permissions',
       name,
     });
   },
@@ -102,12 +76,10 @@ export default {
   async registerTrads({ locales }) {
     const importedTrads = await Promise.all(
       locales.map((locale) => {
-        return import(
-          /* webpackChunkName: "users-permissions-translation-[request]" */ `./translations/${locale}.json`
-        )
+        return import(`./translations/${locale}.json`)
           .then(({ default: data }) => {
             return {
-              data: prefixPluginTranslations(data, pluginId),
+              data: prefixPluginTranslations(data, 'users-permissions'),
               locale,
             };
           })

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

@@ -0,0 +1,214 @@
+import * as React from 'react';
+
+import { Box, Button, Flex, Grid, Typography, useNotifyAT } from '@strapi/design-system';
+import { Check } from '@strapi/icons';
+import {
+  useAPIErrorHandler,
+  Page,
+  Form,
+  InputRenderer,
+  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 layout from './utils/layout';
+import schema from './utils/schema';
+
+const ProtectedAdvancedSettingsPage = () => (
+  <Page.Protect permissions={PERMISSIONS.readAdvancedSettings}>
+    <AdvancedSettingsPage />
+  </Page.Protect>
+);
+
+const AdvancedSettingsPage = () => {
+  const { formatMessage } = useIntl();
+  const { toggleNotification } = useNotification();
+  const { notifyStatus } = useNotifyAT();
+  const queryClient = useQueryClient();
+  const { get, put } = useFetchClient();
+  const { formatAPIError } = useAPIErrorHandler();
+
+  const {
+    isLoading: isLoadingForPermissions,
+    allowedActions: { canUpdate },
+  } = useRBAC({ update: PERMISSIONS.updateAdvancedSettings });
+
+  const { isLoading: isLoadingData, data } = useQuery(
+    ['users-permissions', 'advanced'],
+    async () => {
+      const { data } = await get('/users-permissions/advanced');
+
+      return data;
+    },
+    {
+      onSuccess() {
+        notifyStatus(
+          formatMessage({
+            id: getTrad('Form.advancedSettings.data.loaded'),
+            defaultMessage: 'Advanced settings data has been loaded',
+          })
+        );
+      },
+      onError() {
+        toggleNotification({
+          type: 'danger',
+          message: formatMessage({
+            id: getTrad('notification.error'),
+            defaultMessage: 'An error occured',
+          }),
+        });
+      },
+    }
+  );
+
+  const isLoading = isLoadingForPermissions || isLoadingData;
+
+  const submitMutation = useMutation((body) => put('/users-permissions/advanced', body), {
+    async onSuccess() {
+      await queryClient.invalidateQueries(['users-permissions', 'advanced']);
+
+      toggleNotification({
+        type: 'success',
+        message: formatMessage({
+          id: getTrad('notification.success.saved'),
+          defaultMessage: 'Saved',
+        }),
+      });
+    },
+    onError(error) {
+      toggleNotification({
+        type: 'danger',
+        message: formatAPIError(error),
+      });
+    },
+    refetchActive: true,
+  });
+
+  const { isLoading: isSubmittingForm } = submitMutation;
+
+  const handleSubmit = async (body) => {
+    submitMutation.mutate({
+      ...body,
+      email_confirmation_redirection: body.email_confirmation
+        ? body.email_confirmation_redirection
+        : '',
+    });
+  };
+
+  if (isLoading) {
+    return <Page.Loading />;
+  }
+
+  return (
+    <Page.Main aria-busy={isSubmittingForm}>
+      <Page.Title>
+        {formatMessage(
+          { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },
+          {
+            name: formatMessage({
+              id: getTrad('HeaderNav.link.advancedSettings'),
+              defaultMessage: 'Advanced Settings',
+            }),
+          }
+        )}
+      </Page.Title>
+      <Form onSubmit={handleSubmit} initialValues={data.settings} validationSchema={schema}>
+        {({ values, isSubmitting, modified }) => {
+          return (
+            <>
+              <Layouts.Header
+                title={formatMessage({
+                  id: getTrad('HeaderNav.link.advancedSettings'),
+                  defaultMessage: 'Advanced Settings',
+                })}
+                primaryAction={
+                  <Button
+                    loading={isSubmitting}
+                    type="submit"
+                    disabled={!modified || !canUpdate}
+                    startIcon={<Check />}
+                    size="S"
+                  >
+                    {formatMessage({ id: 'global.save', defaultMessage: 'Save' })}
+                  </Button>
+                }
+              />
+              <Layouts.Content>
+                <Box
+                  background="neutral0"
+                  hasRadius
+                  shadow="filterShadow"
+                  paddingTop={6}
+                  paddingBottom={6}
+                  paddingLeft={7}
+                  paddingRight={7}
+                >
+                  <Flex direction="column" alignItems="stretch" gap={4}>
+                    <Typography variant="delta" tag="h2">
+                      {formatMessage({
+                        id: 'global.settings',
+                        defaultMessage: 'Settings',
+                      })}
+                    </Typography>
+                    <Grid.Root gap={6}>
+                      {[
+                        {
+                          label: {
+                            id: getTrad('EditForm.inputSelect.label.role'),
+                            defaultMessage: 'Default role for authenticated users',
+                          },
+                          hint: {
+                            id: getTrad('EditForm.inputSelect.description.role'),
+                            defaultMessage:
+                              'It will attach the new authenticated user to the selected role.',
+                          },
+                          options: data.roles.map((role) => ({
+                            label: role.name,
+                            value: role.type,
+                          })),
+                          name: 'default_role',
+                          size: 6,
+                          type: 'enumeration',
+                        },
+                        ...layout,
+                      ].map(({ size, ...field }) => (
+                        <Grid.Item
+                          key={field.name}
+                          col={size}
+                          direction="column"
+                          alignItems="stretch"
+                        >
+                          <InputRenderer
+                            {...field}
+                            disabled={
+                              field.name === 'email_confirmation_redirection' &&
+                              values.email_confirmation === false
+                            }
+                            label={formatMessage(field.label)}
+                            hint={field.hint ? formatMessage(field.hint) : undefined}
+                            placeholder={
+                              field.placeholder ? formatMessage(field.placeholder) : undefined
+                            }
+                          />
+                        </Grid.Item>
+                      ))}
+                    </Grid.Root>
+                  </Flex>
+                </Box>
+              </Layouts.Content>
+            </>
+          );
+        }}
+      </Form>
+    </Page.Main>
+  );
+};
+
+export { ProtectedAdvancedSettingsPage, AdvancedSettingsPage };

package/admin/src/pages/AdvancedSettings/utils/layout.js

@@ -2,45 +2,39 @@ import { getTrad } from '../../../utils';
 
 const layout = [
   {
-    intlLabel: {
+    label: {
       id: getTrad('EditForm.inputToggle.label.email'),
       defaultMessage: 'One account per email address',
     },
-    description: {
+    hint: {
       id: getTrad('EditForm.inputToggle.description.email'),
       defaultMessage:
         'Disallow the user to create multiple accounts using the same email address with different authentication providers.',
     },
     name: 'unique_email',
-    type: 'bool',
-    size: {
-      col: 12,
-      xs: 12,
-    },
+    type: 'boolean',
+    size: 12,
   },
   {
-    intlLabel: {
+    label: {
       id: getTrad('EditForm.inputToggle.label.sign-up'),
       defaultMessage: 'Enable sign-ups',
     },
-    description: {
+    hint: {
       id: getTrad('EditForm.inputToggle.description.sign-up'),
       defaultMessage:
         'When disabled (OFF), the registration process is forbidden. No one can subscribe anymore no matter the used provider.',
     },
     name: 'allow_register',
-    type: 'bool',
-    size: {
-      col: 12,
-      xs: 12,
-    },
+    type: 'boolean',
+    size: 12,
   },
   {
-    intlLabel: {
+    label: {
       id: getTrad('EditForm.inputToggle.label.email-reset-password'),
       defaultMessage: 'Reset password page',
     },
-    description: {
+    hint: {
       id: getTrad('EditForm.inputToggle.description.email-reset-password'),
       defaultMessage: "URL of your application's reset password page.",
     },
@@ -49,34 +43,28 @@ const layout = [
       defaultMessage: 'ex: https://youtfrontend.com/reset-password',
     },
     name: 'email_reset_password',
-    type: 'text',
-    size: {
-      col: 6,
-      xs: 12,
-    },
+    type: 'string',
+    size: 12,
   },
   {
-    intlLabel: {
+    label: {
       id: getTrad('EditForm.inputToggle.label.email-confirmation'),
       defaultMessage: 'Enable email confirmation',
     },
-    description: {
+    hint: {
       id: getTrad('EditForm.inputToggle.description.email-confirmation'),
       defaultMessage: 'When enabled (ON), new registered users receive a confirmation email.',
     },
     name: 'email_confirmation',
-    type: 'bool',
-    size: {
-      col: 12,
-      xs: 12,
-    },
+    type: 'boolean',
+    size: 12,
   },
   {
-    intlLabel: {
+    label: {
       id: getTrad('EditForm.inputToggle.label.email-confirmation-redirection'),
       defaultMessage: 'Redirection url',
     },
-    description: {
+    hint: {
       id: getTrad('EditForm.inputToggle.description.email-confirmation-redirection'),
       defaultMessage: 'After you confirmed your email, choose where you will be redirected.',
     },
@@ -85,11 +73,8 @@ const layout = [
       defaultMessage: 'ex: https://youtfrontend.com/email-confirmation',
     },
     name: 'email_confirmation_redirection',
-    type: 'text',
-    size: {
-      col: 6,
-      xs: 12,
-    },
+    type: 'string',
+    size: 12,
   },
 ];
 

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

@@ -1,4 +1,4 @@
-import { translatedErrors } from '@strapi/helper-plugin';
+import { translatedErrors } from '@strapi/strapi/admin';
 import * as yup from 'yup';
 
 // eslint-disable-next-line prefer-regex-literals
@@ -12,7 +12,10 @@ const schema = yup.object().shape({
   }),
   email_reset_password: yup
     .string(translatedErrors.string)
-    .matches(URL_REGEX, translatedErrors.regex)
+    .matches(URL_REGEX, {
+      id: translatedErrors.regex.id,
+      defaultMessage: 'This is not a valid URL',
+    })
     .nullable(),
 });
 

package/admin/src/pages/EmailTemplates/components/EmailForm.jsx

@@ -0,0 +1,156 @@
+import * as React from 'react';
+
+import { Button, Grid, Modal, Breadcrumbs, Crumb, VisuallyHidden } from '@strapi/design-system';
+import { Form, InputRenderer } from '@strapi/strapi/admin';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+
+import { getTrad } from '../../../utils';
+import schema from '../utils/schema';
+
+const EmailForm = ({ template = {}, onToggle, open, onSubmit }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Modal.Root open={open} onOpenChange={onToggle}>
+      <Modal.Content>
+        <Modal.Header>
+          <Breadcrumbs
+            label={`${formatMessage({
+              id: getTrad('PopUpForm.header.edit.email-templates'),
+              defaultMessage: 'Edit email template',
+            })}, ${
+              template.display
+                ? formatMessage({
+                    id: getTrad(template.display),
+                    defaultMessage: template.display,
+                  })
+                : ''
+            }`}
+          >
+            <Crumb>
+              {formatMessage({
+                id: getTrad('PopUpForm.header.edit.email-templates'),
+                defaultMessage: 'Edit email template',
+              })}
+            </Crumb>
+            <Crumb isCurrent>
+              {template.display
+                ? formatMessage({ id: getTrad(template.display), defaultMessage: template.display })
+                : ''}
+            </Crumb>
+          </Breadcrumbs>
+          <VisuallyHidden>
+            <Modal.Title>
+              {`${formatMessage({
+                id: getTrad('PopUpForm.header.edit.email-templates'),
+                defaultMessage: 'Edit email template',
+              })}, ${template.display ? formatMessage({ id: getTrad(template.display), defaultMessage: template.display }) : ''}`}
+            </Modal.Title>
+          </VisuallyHidden>
+        </Modal.Header>
+        <Form onSubmit={onSubmit} initialValues={template} validationSchema={schema}>
+          {({ isSubmitting }) => {
+            return (
+              <>
+                <Modal.Body>
+                  <Grid.Root gap={5}>
+                    {[
+                      {
+                        label: formatMessage({
+                          id: getTrad('PopUpForm.Email.options.from.name.label'),
+                          defaultMessage: 'Shipper name',
+                        }),
+                        name: 'options.from.name',
+                        size: 6,
+                        type: 'string',
+                      },
+                      {
+                        label: formatMessage({
+                          id: getTrad('PopUpForm.Email.options.from.email.label'),
+                          defaultMessage: 'Shipper email',
+                        }),
+                        name: 'options.from.email',
+                        size: 6,
+                        type: 'string',
+                      },
+                      {
+                        label: formatMessage({
+                          id: getTrad('PopUpForm.Email.options.response_email.label'),
+                          defaultMessage: 'Response email',
+                        }),
+                        name: 'options.response_email',
+                        size: 6,
+                        type: 'string',
+                      },
+                      {
+                        label: formatMessage({
+                          id: getTrad('PopUpForm.Email.options.object.label'),
+                          defaultMessage: 'Subject',
+                        }),
+                        name: 'options.object',
+                        size: 6,
+                        type: 'string',
+                      },
+                      {
+                        label: formatMessage({
+                          id: getTrad('PopUpForm.Email.options.message.label'),
+                          defaultMessage: 'Message',
+                        }),
+                        name: 'options.message',
+                        size: 12,
+                        type: 'text',
+                      },
+                    ].map(({ size, ...field }) => (
+                      <Grid.Item
+                        key={field.name}
+                        col={size}
+                        direction="column"
+                        alignItems="stretch"
+                      >
+                        <InputRenderer {...field} />
+                      </Grid.Item>
+                    ))}
+                  </Grid.Root>
+                </Modal.Body>
+                <Modal.Footer>
+                  <Modal.Close>
+                    <Button variant="tertiary">Cancel</Button>
+                  </Modal.Close>
+                  <Button loading={isSubmitting} type="submit">
+                    Finish
+                  </Button>
+                </Modal.Footer>
+              </>
+            );
+          }}
+        </Form>
+      </Modal.Content>
+    </Modal.Root>
+  );
+};
+
+EmailForm.defaultProps = {
+  template: {},
+};
+
+EmailForm.propTypes = {
+  template: PropTypes.shape({
+    display: PropTypes.string,
+    icon: PropTypes.string,
+    options: PropTypes.shape({
+      from: PropTypes.shape({
+        name: PropTypes.string,
+        email: PropTypes.string,
+      }),
+      message: PropTypes.string,
+      object: PropTypes.string,
+      response_email: PropTypes.string,
+    }),
+  }),
+  open: PropTypes.bool.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  onToggle: PropTypes.func.isRequired,
+};
+
+export default EmailForm;