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

package/admin/src/index.js

@@ -0,0 +1,123 @@
+// 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 pluginPermissions from './permissions';
+import pluginId from './pluginId';
+import getTrad from './utils/getTrad';
+
+const name = pluginPkg.strapi.name;
+
+export default {
+  register(app) {
+    // Create the plugin's settings section
+    app.createSettingSection(
+      {
+        id: pluginId,
+        intlLabel: {
+          id: getTrad('Settings.section-label'),
+          defaultMessage: 'Users & Permissions plugin',
+        },
+      },
+      [
+        {
+          intlLabel: {
+            id: 'global.roles',
+            defaultMessage: 'Roles',
+          },
+          id: 'roles',
+          to: `/settings/${pluginId}/roles`,
+          async Component() {
+            const component = await import(
+              /* webpackChunkName: "users-roles-settings-page" */ './pages/Roles'
+            );
+
+            return component;
+          },
+          permissions: pluginPermissions.accessRoles,
+        },
+        {
+          intlLabel: {
+            id: getTrad('HeaderNav.link.providers'),
+            defaultMessage: 'Providers',
+          },
+          id: 'providers',
+          to: `/settings/${pluginId}/providers`,
+          async Component() {
+            const component = await import(
+              /* webpackChunkName: "users-providers-settings-page" */ './pages/Providers'
+            );
+
+            return component;
+          },
+          permissions: pluginPermissions.readProviders,
+        },
+        {
+          intlLabel: {
+            id: getTrad('HeaderNav.link.emailTemplates'),
+            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;
+          },
+          permissions: pluginPermissions.readEmailTemplates,
+        },
+        {
+          intlLabel: {
+            id: getTrad('HeaderNav.link.advancedSettings'),
+            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;
+          },
+          permissions: pluginPermissions.readAdvancedSettings,
+        },
+      ]
+    );
+
+    app.registerPlugin({
+      id: pluginId,
+      name,
+    });
+  },
+  bootstrap() {},
+  async registerTrads({ locales }) {
+    const importedTrads = await Promise.all(
+      locales.map((locale) => {
+        return import(
+          /* webpackChunkName: "users-permissions-translation-[request]" */ `./translations/${locale}.json`
+        )
+          .then(({ default: data }) => {
+            return {
+              data: prefixPluginTranslations(data, pluginId),
+              locale,
+            };
+          })
+          .catch(() => {
+            return {
+              data: {},
+              locale,
+            };
+          });
+      })
+    );
+
+    return Promise.resolve(importedTrads);
+  },
+};

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

@@ -0,0 +1,238 @@
+import React, { useMemo } from 'react';
+import { useQuery, useMutation, useQueryClient } from 'react-query';
+import { useIntl } from 'react-intl';
+import { Formik } from 'formik';
+import {
+  CheckPagePermissions,
+  Form,
+  GenericInput,
+  LoadingIndicatorPage,
+  SettingsPageTitle,
+  useFocusWhenNavigate,
+  useNotification,
+  useOverlayBlocker,
+  useRBAC,
+} from '@strapi/helper-plugin';
+import { useNotifyAT } from '@strapi/design-system/LiveRegions';
+import { Main } from '@strapi/design-system/Main';
+import { HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
+import { Button } from '@strapi/design-system/Button';
+import { Box } from '@strapi/design-system/Box';
+import { Stack } from '@strapi/design-system/Stack';
+import { Select, Option } from '@strapi/design-system/Select';
+import { Typography } from '@strapi/design-system/Typography';
+import { Grid, GridItem } from '@strapi/design-system/Grid';
+import Check from '@strapi/icons/Check';
+import pluginPermissions from '../../permissions';
+import { getTrad } from '../../utils';
+import layout from './utils/layout';
+import schema from './utils/schema';
+import { fetchData, putAdvancedSettings } from './utils/api';
+
+const ProtectedAdvancedSettingsPage = () => (
+  <CheckPagePermissions permissions={pluginPermissions.readAdvancedSettings}>
+    <AdvancedSettingsPage />
+  </CheckPagePermissions>
+);
+
+const AdvancedSettingsPage = () => {
+  const { formatMessage } = useIntl();
+  const toggleNotification = useNotification();
+  const { lockApp, unlockApp } = useOverlayBlocker();
+  const { notifyStatus } = useNotifyAT();
+  const queryClient = useQueryClient();
+  useFocusWhenNavigate();
+
+  const updatePermissions = useMemo(
+    () => ({ update: pluginPermissions.updateAdvancedSettings }),
+    []
+  );
+  const {
+    isLoading: isLoadingForPermissions,
+    allowedActions: { canUpdate },
+  } = useRBAC(updatePermissions);
+
+  const { status: isLoadingData, data } = useQuery('advanced', () => fetchData(), {
+    onSuccess() {
+      notifyStatus(
+        formatMessage({
+          id: getTrad('Form.advancedSettings.data.loaded'),
+          defaultMessage: 'Advanced settings data has been loaded',
+        })
+      );
+    },
+    onError() {
+      toggleNotification({
+        type: 'warning',
+        message: { id: getTrad('notification.error'), defaultMessage: 'An error occured' },
+      });
+    },
+  });
+
+  const isLoading = isLoadingForPermissions || isLoadingData !== 'success';
+
+  const submitMutation = useMutation((body) => putAdvancedSettings(body), {
+    async onSuccess() {
+      await queryClient.invalidateQueries('advanced');
+      toggleNotification({
+        type: 'success',
+        message: { id: getTrad('notification.success.saved'), defaultMessage: 'Saved' },
+      });
+
+      unlockApp();
+    },
+    onError() {
+      toggleNotification({
+        type: 'warning',
+        message: { id: getTrad('notification.error'), defaultMessage: 'An error occured' },
+      });
+      unlockApp();
+    },
+    refetchActive: true,
+  });
+
+  const { isLoading: isSubmittingForm } = submitMutation;
+
+  const handleSubmit = async (body) => {
+    lockApp();
+
+    const urlConfirmation = body.email_confirmation ? body.email_confirmation_redirection : '';
+
+    await submitMutation.mutateAsync({ ...body, email_confirmation_redirection: urlConfirmation });
+  };
+
+  if (isLoading) {
+    return (
+      <Main aria-busy="true">
+        <SettingsPageTitle
+          name={formatMessage({
+            id: getTrad('HeaderNav.link.advancedSettings'),
+            defaultMessage: 'Advanced Settings',
+          })}
+        />
+        <HeaderLayout
+          title={formatMessage({
+            id: getTrad('HeaderNav.link.advancedSettings'),
+            defaultMessage: 'Advanced Settings',
+          })}
+        />
+        <ContentLayout>
+          <LoadingIndicatorPage />
+        </ContentLayout>
+      </Main>
+    );
+  }
+
+  return (
+    <Main aria-busy={isSubmittingForm}>
+      <SettingsPageTitle
+        name={formatMessage({
+          id: getTrad('HeaderNav.link.advancedSettings'),
+          defaultMessage: 'Advanced Settings',
+        })}
+      />
+      <Formik
+        onSubmit={handleSubmit}
+        initialValues={data.settings}
+        validateOnChange={false}
+        validationSchema={schema}
+        enableReinitialize
+      >
+        {({ errors, values, handleChange, isSubmitting }) => {
+          return (
+            <Form>
+              <HeaderLayout
+                title={formatMessage({
+                  id: getTrad('HeaderNav.link.advancedSettings'),
+                  defaultMessage: 'Advanced Settings',
+                })}
+                primaryAction={
+                  <Button
+                    loading={isSubmitting}
+                    type="submit"
+                    disabled={!canUpdate}
+                    startIcon={<Check />}
+                    size="L"
+                  >
+                    {formatMessage({ id: 'global.save', defaultMessage: 'Save' })}
+                  </Button>
+                }
+              />
+              <ContentLayout>
+                <Box
+                  background="neutral0"
+                  hasRadius
+                  shadow="filterShadow"
+                  paddingTop={6}
+                  paddingBottom={6}
+                  paddingLeft={7}
+                  paddingRight={7}
+                >
+                  <Stack spacing={4}>
+                    <Typography variant="delta" as="h2">
+                      {formatMessage({
+                        id: 'global.settings',
+                        defaultMessage: 'Settings',
+                      })}
+                    </Typography>
+                    <Grid gap={6}>
+                      <GridItem col={6} s={12}>
+                        <Select
+                          label={formatMessage({
+                            id: getTrad('EditForm.inputSelect.label.role'),
+                            defaultMessage: 'Default role for authenticated users',
+                          })}
+                          value={values.default_role}
+                          hint={formatMessage({
+                            id: getTrad('EditForm.inputSelect.description.role'),
+                            defaultMessage:
+                              'It will attach the new authenticated user to the selected role.',
+                          })}
+                          onChange={(e) =>
+                            handleChange({ target: { name: 'default_role', value: e } })
+                          }
+                        >
+                          {data.roles.map((role) => {
+                            return (
+                              <Option key={role.type} value={role.type}>
+                                {role.name}
+                              </Option>
+                            );
+                          })}
+                        </Select>
+                      </GridItem>
+                      {layout.map((input) => {
+                        let value = values[input.name];
+
+                        if (!value) {
+                          value = input.type === 'bool' ? false : '';
+                        }
+
+                        return (
+                          <GridItem key={input.name} {...input.size}>
+                            <GenericInput
+                              {...input}
+                              value={value}
+                              error={errors[input.name]}
+                              disabled={
+                                input.name === 'email_confirmation_redirection' &&
+                                values.email_confirmation === false
+                              }
+                              onChange={handleChange}
+                            />
+                          </GridItem>
+                        );
+                      })}
+                    </Grid>
+                  </Stack>
+                </Box>
+              </ContentLayout>
+            </Form>
+          );
+        }}
+      </Formik>
+    </Main>
+  );
+};
+
+export default ProtectedAdvancedSettingsPage;

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

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

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

@@ -0,0 +1,96 @@
+import { getTrad } from '../../../utils';
+
+const layout = [
+  {
+    intlLabel: {
+      id: getTrad('EditForm.inputToggle.label.email'),
+      defaultMessage: 'One account per email address',
+    },
+    description: {
+      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,
+    },
+  },
+  {
+    intlLabel: {
+      id: getTrad('EditForm.inputToggle.label.sign-up'),
+      defaultMessage: 'Enable sign-ups',
+    },
+    description: {
+      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,
+    },
+  },
+  {
+    intlLabel: {
+      id: getTrad('EditForm.inputToggle.label.email-reset-password'),
+      defaultMessage: 'Reset password page',
+    },
+    description: {
+      id: getTrad('EditForm.inputToggle.description.email-reset-password'),
+      defaultMessage: "URL of your application's reset password page.",
+    },
+    placeholder: {
+      id: getTrad('EditForm.inputToggle.placeholder.email-reset-password'),
+      defaultMessage: 'ex: https://youtfrontend.com/reset-password',
+    },
+    name: 'email_reset_password',
+    type: 'text',
+    size: {
+      col: 6,
+      xs: 12,
+    },
+  },
+  {
+    intlLabel: {
+      id: getTrad('EditForm.inputToggle.label.email-confirmation'),
+      defaultMessage: 'Enable email confirmation',
+    },
+    description: {
+      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,
+    },
+  },
+  {
+    intlLabel: {
+      id: getTrad('EditForm.inputToggle.label.email-confirmation-redirection'),
+      defaultMessage: 'Redirection url',
+    },
+    description: {
+      id: getTrad('EditForm.inputToggle.description.email-confirmation-redirection'),
+      defaultMessage: 'After you confirmed your email, choose where you will be redirected.',
+    },
+    placeholder: {
+      id: getTrad('EditForm.inputToggle.placeholder.email-confirmation-redirection'),
+      defaultMessage: 'ex: https://youtfrontend.com/email-confirmation',
+    },
+    name: 'email_confirmation_redirection',
+    type: 'text',
+    size: {
+      col: 6,
+      xs: 12,
+    },
+  },
+];
+
+export default layout;

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

@@ -0,0 +1,19 @@
+import * as yup from 'yup';
+import { translatedErrors } from '@strapi/helper-plugin';
+
+// eslint-disable-next-line prefer-regex-literals
+const URL_REGEX = new RegExp('(^$)|((.+:\\/\\/.*)(d*)\\/?(.*))');
+
+const schema = yup.object().shape({
+  email_confirmation_redirection: yup.mixed().when('email_confirmation', {
+    is: true,
+    then: yup.string().matches(URL_REGEX).required(),
+    otherwise: yup.string().nullable(),
+  }),
+  email_reset_password: yup
+    .string(translatedErrors.string)
+    .matches(URL_REGEX, translatedErrors.regex)
+    .nullable(),
+});
+
+export default schema;

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

@@ -0,0 +1,173 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { Form, GenericInput } from '@strapi/helper-plugin';
+import { Formik } from 'formik';
+import {
+  ModalLayout,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+} from '@strapi/design-system/ModalLayout';
+import { Grid, GridItem } from '@strapi/design-system/Grid';
+import { Button } from '@strapi/design-system/Button';
+import { Breadcrumbs, Crumb } from '@strapi/design-system/Breadcrumbs';
+import { Textarea } from '@strapi/design-system/Textarea';
+import { getTrad } from '../../../utils';
+import schema from '../utils/schema';
+
+const EmailForm = ({ template, onToggle, onSubmit }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <ModalLayout
+      onClose={onToggle}
+      labelledBy={`${formatMessage({
+        id: getTrad('PopUpForm.header.edit.email-templates'),
+        defaultMessage: 'Edit email template',
+      })}, ${formatMessage({ id: getTrad(template.display), defaultMessage: template.display })}`}
+    >
+      <ModalHeader>
+        <Breadcrumbs
+          label={`${formatMessage({
+            id: getTrad('PopUpForm.header.edit.email-templates'),
+            defaultMessage: 'Edit email template',
+          })}, ${formatMessage({
+            id: getTrad(template.display),
+            defaultMessage: template.display,
+          })}`}
+        >
+          <Crumb>
+            {formatMessage({
+              id: getTrad('PopUpForm.header.edit.email-templates'),
+              defaultMessage: 'Edit email template',
+            })}
+          </Crumb>
+          <Crumb>
+            {formatMessage({ id: getTrad(template.display), defaultMessage: template.display })}
+          </Crumb>
+        </Breadcrumbs>
+      </ModalHeader>
+      <Formik
+        onSubmit={onSubmit}
+        initialValues={template}
+        validateOnChange={false}
+        validationSchema={schema}
+        enableReinitialize
+      >
+        {({ errors, values, handleChange, isSubmitting }) => {
+          return (
+            <Form>
+              <ModalBody>
+                <Grid gap={5}>
+                  <GridItem col={6} s={12}>
+                    <GenericInput
+                      intlLabel={{
+                        id: getTrad('PopUpForm.Email.options.from.name.label'),
+                        defaultMessage: 'Shipper name',
+                      }}
+                      name="options.from.name"
+                      onChange={handleChange}
+                      value={values.options.from.name}
+                      error={errors?.options?.from?.name}
+                      type="text"
+                    />
+                  </GridItem>
+                  <GridItem col={6} s={12}>
+                    <GenericInput
+                      intlLabel={{
+                        id: getTrad('PopUpForm.Email.options.from.email.label'),
+                        defaultMessage: 'Shipper email',
+                      }}
+                      name="options.from.email"
+                      onChange={handleChange}
+                      value={values.options.from.email}
+                      error={errors?.options?.from?.email}
+                      type="text"
+                    />
+                  </GridItem>
+                  <GridItem col={6} s={12}>
+                    <GenericInput
+                      intlLabel={{
+                        id: getTrad('PopUpForm.Email.options.response_email.label'),
+                        defaultMessage: 'Response email',
+                      }}
+                      name="options.response_email"
+                      onChange={handleChange}
+                      value={values.options.response_email}
+                      error={errors?.options?.response_email}
+                      type="text"
+                    />
+                  </GridItem>
+                  <GridItem col={6} s={12}>
+                    <GenericInput
+                      intlLabel={{
+                        id: getTrad('PopUpForm.Email.options.object.label'),
+                        defaultMessage: 'Subject',
+                      }}
+                      name="options.object"
+                      onChange={handleChange}
+                      value={values.options.object}
+                      error={errors?.options?.object}
+                      type="text"
+                    />
+                  </GridItem>
+                  <GridItem col={12} s={12}>
+                    <Textarea
+                      label={formatMessage({
+                        id: getTrad('PopUpForm.Email.options.message.label'),
+                        defaultMessage: 'Message',
+                      })}
+                      name="options.message"
+                      onChange={handleChange}
+                      value={values.options.message}
+                      error={
+                        errors?.options?.message &&
+                        formatMessage({
+                          id: errors.options.message,
+                          defaultMessage: errors.options.message,
+                        })
+                      }
+                    />
+                  </GridItem>
+                </Grid>
+              </ModalBody>
+              <ModalFooter
+                startActions={
+                  <Button onClick={onToggle} variant="tertiary">
+                    Cancel
+                  </Button>
+                }
+                endActions={
+                  <Button loading={isSubmitting} type="submit">
+                    Finish
+                  </Button>
+                }
+              />
+            </Form>
+          );
+        }}
+      </Formik>
+    </ModalLayout>
+  );
+};
+
+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,
+    }),
+  }).isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  onToggle: PropTypes.func.isRequired,
+};
+
+export default EmailForm;