@strapi/plugin-users-permissions 0.0.0-next.f5107c72369ee86a8ec1b6782f2e890925033ca3 → 0.0.0-next.f5312617ca16b870c2bf1adcea2c69b676979e29

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

@@ -0,0 +1,214 @@
+import 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 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;

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

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import {
-  Icon,
   IconButton,
   Table,
   Tbody,
@@ -11,9 +10,9 @@ import {
   Tr,
   Typography,
   VisuallyHidden,
+  Box,
 } from '@strapi/design-system';
-import { onRowClick, stopPropagation } from '@strapi/helper-plugin';
-import { Check, Pencil, Refresh } from '@strapi/icons';
+import { Check, Pencil, ArrowClockwise as Refresh } from '@strapi/icons';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
@@ -53,16 +52,16 @@ const EmailTable = ({ canUpdate, onEditClick }) => {
         </Tr>
       </Thead>
       <Tbody>
-        <Tr {...onRowClick({ fn: () => onEditClick('reset_password') })}>
+        <Tr 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>
@@ -72,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 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>
@@ -103,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>