@strapi/plugin-users-permissions 0.0.0-experimental.abc → 0.0.0-experimental.ac0b37f438d80d7bc0aac7a959887e09309ac752

package/.eslintrc.cjs

@@ -0,0 +1,29 @@
+// @ts-check
+
+/** @type {import('eslint').Linter.Config} */
+const config = {
+  root: true,
+  ignorePatterns: [
+    'dist',
+    '.eslintrc.cjs',
+    'rollup.config.mjs',
+    'coverage/',
+    'lint-staged.config.mjs',
+  ],
+  overrides: [
+    {
+      files: ['admin/**/*'],
+      extends: ['eslint-config-custom/front'],
+      rules: {
+        'import/extensions': 'off',
+      },
+    },
+    {
+      files: ['**/*'],
+      excludedFiles: ['admin/**/*'],
+      extends: ['eslint-config-custom/back'],
+    },
+  ],
+};
+
+module.exports = config;

package/admin/src/components/BoundRoute/index.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import { Box, Flex, Typography } from '@strapi/design-system';
 import map from 'lodash/map';

package/admin/src/components/FormModal/Input/index.jsx

@@ -4,7 +4,7 @@
  *
  */
 
-import React from 'react';
+import * as React from 'react';
 
 import { TextInput, Toggle, Field } from '@strapi/design-system';
 import PropTypes from 'prop-types';

package/admin/src/components/FormModal/index.jsx

@@ -4,7 +4,7 @@
  *
  */
 
-import React from 'react';
+import * as React from 'react';
 
 import { Button, Flex, Grid, Modal, Breadcrumbs, Crumb } from '@strapi/design-system';
 import { Form, Formik } from 'formik';

package/admin/src/components/Permissions/PermissionRow/SubCategory.jsx

@@ -78,7 +78,14 @@ const SubCategory = ({ subCategory }) => {
             const name = `${action.name}.enabled`;
 
             return (
-              <Grid.Item col={6} key={action.name} direction="column" alignItems="stretch">
+              <Grid.Item
+                col={4}
+                xs={12}
+                s={6}
+                key={action.name}
+                direction="column"
+                alignItems="stretch"
+              >
                 <CheckboxWrapper isActive={isActionSelected(action.name)} padding={2} hasRadius>
                   <Checkbox
                     checked={get(modifiedData, name, false)}
@@ -103,7 +110,7 @@ const SubCategory = ({ subCategory }) => {
                         }
                       )}
                     </VisuallyHidden>
-                    <Cog id="cog" />
+                    <Cog id="cog" cursor="pointer" />
                   </button>
                 </CheckboxWrapper>
               </Grid.Item>

package/admin/src/components/Policies/index.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import { Flex, Grid, Typography } from '@strapi/design-system';
 import get from 'lodash/get';
@@ -24,6 +24,7 @@ const Policies = () => {
   return (
     <Grid.Item
       col={5}
+      xs={12}
       background="neutral150"
       paddingTop={6}
       paddingBottom={6}

package/admin/src/components/UsersPermissions/index.jsx

@@ -64,6 +64,7 @@ const UsersPermissions = forwardRef(({ permissions, routes }, ref) => {
       <Grid.Root gap={0} shadow="filterShadow" hasRadius background="neutral0">
         <Grid.Item
           col={7}
+          xs={12}
           paddingTop={6}
           paddingBottom={6}
           paddingLeft={7}

package/admin/src/index.js

@@ -1,10 +1,10 @@
-import pluginPkg from '../../package.json';
+import { strapi as pkgStrapi } from '../../package.json';
 
 import { PERMISSIONS } from './constants';
 import getTrad from './utils/getTrad';
 import { prefixPluginTranslations } from './utils/prefixPluginTranslations';
 
-const name = pluginPkg.strapi.name;
+const name = pkgStrapi.name;
 
 export default {
   register(app) {

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import { Box, Button, Flex, Grid, Typography, useNotifyAT } from '@strapi/design-system';
 import { Check } from '@strapi/icons';
@@ -61,7 +61,7 @@ const AdvancedSettingsPage = () => {
           type: 'danger',
           message: formatMessage({
             id: getTrad('notification.error'),
-            defaultMessage: 'An error occured',
+            defaultMessage: 'An error occurred',
           }),
         });
       },
@@ -135,6 +135,7 @@ const AdvancedSettingsPage = () => {
                     disabled={!modified || !canUpdate}
                     startIcon={<Check />}
                     size="S"
+                    fullWidth
                   >
                     {formatMessage({ id: 'global.save', defaultMessage: 'Save' })}
                   </Button>

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import { Button, Grid, Modal, Breadcrumbs, Crumb, VisuallyHidden } from '@strapi/design-system';
 import { Form, InputRenderer } from '@strapi/strapi/admin';
@@ -104,7 +104,8 @@ const EmailForm = ({ template = {}, onToggle, open, onSubmit }) => {
                     ].map(({ size, ...field }) => (
                       <Grid.Item
                         key={field.name}
-                        col={size}
+                        m={size}
+                        xs={12}
                         direction="column"
                         alignItems="stretch"
                       >

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import {
   IconButton,
@@ -52,7 +52,7 @@ const EmailTable = ({ canUpdate, onEditClick }) => {
         </Tr>
       </Thead>
       <Tbody>
-        <Tr onClick={() => onEditClick('reset_password')}>
+        <Tr cursor="pointer" onClick={() => onEditClick('reset_password')}>
           <Td>
             <Box width="3.2rem" height="3.2rem" padding="0.8rem">
               <Refresh
@@ -85,7 +85,7 @@ const EmailTable = ({ canUpdate, onEditClick }) => {
             </IconButton>
           </Td>
         </Tr>
-        <Tr onClick={() => onEditClick('email_confirmation')}>
+        <Tr cursor="pointer" onClick={() => onEditClick('email_confirmation')}>
           <Td>
             <Box width="3.2rem" height="3.2rem" padding="0.8rem">
               <Check

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

@@ -144,7 +144,7 @@ export const ProvidersPage = () => {
   }
 
   return (
-    <Layouts.Root>
+    <Page.Main>
       <Page.Title>
         {formatMessage(
           { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },
@@ -156,83 +156,81 @@ export const ProvidersPage = () => {
           }
         )}
       </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' })}
+      <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>
-                </Th>
-                <Th>
-                  <Typography variant="sigma">
-                    <VisuallyHidden>
-                      {formatMessage({
-                        id: 'global.settings',
-                        defaultMessage: 'Settings',
-                      })}
-                    </VisuallyHidden>
+                </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>
-                </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}`}
+                </Td>
+                <Td onClick={(e) => e.stopPropagation()}>
+                  {canUpdate && (
+                    <IconButton
+                      onClick={() => handleClickEdit(provider)}
+                      variant="ghost"
+                      label="Edit"
                     >
-                      {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>
+                      <Pencil />
+                    </IconButton>
+                  )}
+                </Td>
+              </Tr>
+            ))}
+          </Tbody>
+        </Table>
+      </Layouts.Content>
       <FormModal
         initialData={data[providerToEditName]}
         isOpen={isOpen}
@@ -249,7 +247,7 @@ export const ProvidersPage = () => {
         onSubmit={handleSubmit}
         providerToEditName={providerToEditName}
       />
-    </Layouts.Root>
+    </Page.Main>
   );
 };
 

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

@@ -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: [
@@ -130,7 +133,10 @@ const forms = {
       }),
       callback: yup.string().when('enabled', {
         is: true,
-        then: yup.string().required(translatedErrors.required.id),
+        then: yup
+          .string()
+          .matches(CALLBACK_REGEX, translatedErrors.regex.id)
+          .required(translatedErrors.required.id),
         otherwise: yup.string(),
       }),
     }),
@@ -244,12 +250,18 @@ const forms = {
       }),
       subdomain: yup.string().when('enabled', {
         is: true,
-        then: yup.string().required(translatedErrors.required.id),
+        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.id),
+        then: yup
+          .string()
+          .matches(CALLBACK_REGEX, translatedErrors.regex.id)
+          .required(translatedErrors.required.id),
         otherwise: yup.string(),
       }),
     }),

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import { Page } from '@strapi/strapi/admin';
 import { Route, Routes } from 'react-router-dom';

package/admin/src/pages/Roles/pages/CreatePage.jsx

@@ -4,14 +4,21 @@ import {
   Button,
   Flex,
   Grid,
-  Main,
   Textarea,
   TextInput,
   Typography,
   Field,
+  Box,
 } from '@strapi/design-system';
 import { Check } from '@strapi/icons';
-import { Page, useTracking, useNotification, useFetchClient, Layouts } from '@strapi/strapi/admin';
+import {
+  Page,
+  useTracking,
+  useNotification,
+  useFetchClient,
+  Layouts,
+  BackButton,
+} from '@strapi/strapi/admin';
 import { Formik, Form } from 'formik';
 import { useIntl } from 'react-intl';
 import { useMutation } from 'react-query';
@@ -68,7 +75,7 @@ export const CreatePage = () => {
   };
 
   return (
-    <Main>
+    <Page.Main>
       <Page.Title>
         {formatMessage(
           { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },
@@ -86,7 +93,12 @@ export const CreatePage = () => {
             <Layouts.Header
               primaryAction={
                 !isLoadingPlugins && (
-                  <Button type="submit" loading={mutation.isLoading} startIcon={<Check />}>
+                  <Button
+                    type="submit"
+                    loading={mutation.isLoading}
+                    startIcon={<Check />}
+                    fullWidth
+                  >
                     {formatMessage({
                       id: 'global.save',
                       defaultMessage: 'Save',
@@ -102,6 +114,12 @@ export const CreatePage = () => {
                 id: 'Settings.roles.create.description',
                 defaultMessage: 'Define the rights given to the role',
               })}
+              navigationAction={
+                // The back link for mobile works differently; it is placed higher up in the DOM.
+                <Box display={{ initial: 'none', medium: 'block' }}>
+                  <BackButton fallback=".." />
+                </Box>
+              }
             />
             <Layouts.Content>
               <Flex
@@ -125,7 +143,7 @@ export const CreatePage = () => {
                   </Typography>
 
                   <Grid.Root gap={4}>
-                    <Grid.Item col={6} direction="column" alignItems="stretch">
+                    <Grid.Item col={6} xs={12} direction="column" alignItems="stretch">
                       <Field.Root
                         name="name"
                         error={
@@ -141,11 +159,11 @@ export const CreatePage = () => {
                             defaultMessage: 'Name',
                           })}
                         </Field.Label>
-                        <TextInput value={values.name || ''} onChange={handleChange} />
+                        <TextInput type="text" value={values.name || ''} onChange={handleChange} />
                         <Field.Error />
                       </Field.Root>
                     </Grid.Item>
-                    <Grid.Item col={6} direction="column" alignItems="stretch">
+                    <Grid.Item col={6} xs={12} direction="column" alignItems="stretch">
                       <Field.Root
                         name="description"
                         error={
@@ -183,7 +201,7 @@ export const CreatePage = () => {
           </Form>
         )}
       </Formik>
-    </Main>
+    </Page.Main>
   );
 };
 

package/admin/src/pages/Roles/pages/EditPage.jsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 
 import {
-  Main,
   Button,
   Flex,
   TextInput,
@@ -9,6 +8,7 @@ import {
   Typography,
   Grid,
   Field,
+  Box,
 } from '@strapi/design-system';
 import { Check } from '@strapi/icons';
 import {
@@ -66,7 +66,7 @@ export const EditPage = () => {
       toggleNotification({
         type: 'success',
         message: formatMessage({
-          id: getTrad('Settings.roles.created'),
+          id: getTrad('Settings.roles.edited'),
           defaultMessage: 'Role edited',
         }),
       });
@@ -86,7 +86,7 @@ export const EditPage = () => {
   }
 
   return (
-    <Main>
+    <Page.Main>
       <Page.Title>
         {formatMessage(
           { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },
@@ -109,6 +109,7 @@ export const EditPage = () => {
                     type="submit"
                     loading={mutation.isLoading}
                     startIcon={<Check />}
+                    fullWidth
                   >
                     {formatMessage({
                       id: 'global.save',
@@ -119,7 +120,12 @@ export const EditPage = () => {
               }
               title={role.name}
               subtitle={role.description}
-              navigationAction={<BackButton />}
+              navigationAction={
+                // The back link for mobile works differently; it is placed higher up in the DOM.
+                <Box display={{ initial: 'none', medium: 'block' }}>
+                  <BackButton fallback=".." />
+                </Box>
+              }
             />
             <Layouts.Content>
               <Flex
@@ -143,7 +149,7 @@ export const EditPage = () => {
                   </Typography>
 
                   <Grid.Root gap={4}>
-                    <Grid.Item col={6} direction="column" alignItems="stretch">
+                    <Grid.Item col={6} xs={12} direction="column" alignItems="stretch">
                       <Field.Root
                         name="name"
                         error={
@@ -162,11 +168,11 @@ export const EditPage = () => {
                             defaultMessage: 'Name',
                           })}
                         </Field.Label>
-                        <TextInput value={values.name || ''} onChange={handleChange} />
+                        <TextInput type="text" value={values.name || ''} onChange={handleChange} />
                         <Field.Error />
                       </Field.Root>
                     </Grid.Item>
-                    <Grid.Item col={6} direction="column" alignItems="stretch">
+                    <Grid.Item col={6} xs={12} direction="column" alignItems="stretch">
                       <Field.Root
                         name="description"
                         error={
@@ -204,7 +210,7 @@ export const EditPage = () => {
           </Form>
         )}
       </Formik>
-    </Main>
+    </Page.Main>
   );
 };
 

package/admin/src/pages/Roles/pages/ListPage/components/TableBody.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import { Flex, IconButton, Link, Tbody, Td, Tr, Typography } from '@strapi/design-system';
 import { Pencil, Trash } from '@strapi/icons';
@@ -50,7 +50,7 @@ const TableBody = ({ sortedRoles, canDelete, canUpdate, setRoleToDelete, onDelet
   return (
     <Tbody>
       {sortedRoles?.map((role) => (
-        <Tr key={role.name} onClick={() => navigate(role.id.toString())}>
+        <Tr cursor="pointer" key={role.name} onClick={() => navigate(role.id.toString())}>
           <Td width="20%">
             <Typography>{role.name}</Typography>
           </Td>