@strapi/plugin-users-permissions 4.9.0-alpha.0 → 4.9.0-beta.1

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

@@ -1,8 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Stack } from '@strapi/design-system/Stack';
-import { Box } from '@strapi/design-system/Box';
-import { Typography } from '@strapi/design-system/Typography';
+import { Flex, Box, Typography } from '@strapi/design-system';
 import map from 'lodash/map';
 import tail from 'lodash/tail';
 import { useIntl } from 'react-intl';
@@ -23,7 +21,7 @@ function BoundRoute({ route }) {
   const colors = getMethodColor(route.method);
 
   return (
-    <Stack spacing={2}>
+    <Flex direction="column" alignItems="stretch" gap={2}>
       <Typography variant="delta" as="h3">
         {formatMessage({
           id: 'users-permissions.BoundRoute.title',
@@ -35,7 +33,7 @@ function BoundRoute({ route }) {
           .{action}
         </Typography>
       </Typography>
-      <Stack horizontal hasRadius background="neutral0" borderColor="neutral200" spacing={0}>
+      <Flex hasRadius background="neutral0" borderColor="neutral200" gap={0}>
         <MethodBox background={colors.background} borderColor={colors.border} padding={2}>
           <Typography fontWeight="bold" textColor={colors.text}>
             {method}
@@ -48,8 +46,8 @@ function BoundRoute({ route }) {
             </Typography>
           ))}
         </Box>
-      </Stack>
-    </Stack>
+      </Flex>
+    </Flex>
   );
 }
 

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

@@ -6,8 +6,7 @@
 
 import React from 'react';
 import { useIntl } from 'react-intl';
-import { ToggleInput } from '@strapi/design-system/ToggleInput';
-import { TextInput } from '@strapi/design-system/TextInput';
+import { ToggleInput, TextInput } from '@strapi/design-system';
 import PropTypes from 'prop-types';
 
 const Input = ({

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

@@ -6,16 +6,18 @@
 
 import React from 'react';
 import { useIntl } from 'react-intl';
-import { Button } from '@strapi/design-system/Button';
-import { Stack } from '@strapi/design-system/Stack';
-import { Breadcrumbs, Crumb } from '@strapi/design-system/Breadcrumbs';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
 import {
+  Button,
+  Flex,
+  Breadcrumbs,
+  Crumb,
+  Grid,
+  GridItem,
   ModalLayout,
   ModalHeader,
   ModalFooter,
   ModalBody,
-} from '@strapi/design-system/ModalLayout';
+} from '@strapi/design-system';
 import PropTypes from 'prop-types';
 import { Formik } from 'formik';
 import { Form } from '@strapi/helper-plugin';
@@ -56,7 +58,7 @@ const FormModal = ({
           return (
             <Form>
               <ModalBody>
-                <Stack spacing={1}>
+                <Flex direction="column" alignItems="stretch" gap={1}>
                   <Grid gap={5}>
                     {layout.form.map((row) => {
                       return row.map((input) => {
@@ -74,7 +76,7 @@ const FormModal = ({
                       });
                     })}
                   </Grid>
-                </Stack>
+                </Flex>
               </ModalBody>
               <ModalFooter
                 startActions={

package/admin/src/components/Permissions/PermissionRow/CheckboxWrapper.js

@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components';
-import { Box } from '@strapi/design-system/Box';
+import { Box } from '@strapi/design-system';
 
 const activeCheckboxWrapperStyles = css`
   background: ${(props) => props.theme.colors.primary100};

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

@@ -1,13 +1,9 @@
 import React, { useCallback, useMemo } from 'react';
-import { get } from 'lodash';
+import get from 'lodash/get';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import { Box } from '@strapi/design-system/Box';
-import { Checkbox } from '@strapi/design-system/Checkbox';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
-import CogIcon from '@strapi/icons/Cog';
+import { Box, Checkbox, Flex, Typography, Grid, GridItem } from '@strapi/design-system';
+import { Cog as CogIcon } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import CheckboxWrapper from './CheckboxWrapper';
 import { useUsersPermissions } from '../../../contexts/UsersPermissionsContext';

package/admin/src/components/Permissions/PermissionRow/index.js

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import sortBy from 'lodash/sortBy';
-import { Box } from '@strapi/design-system/Box';
+import { Box } from '@strapi/design-system';
 import SubCategory from './SubCategory';
 
 const PermissionRow = ({ name, permissions }) => {

package/admin/src/components/Permissions/index.js

@@ -1,8 +1,6 @@
 import React, { useReducer } from 'react';
-import { Accordion, AccordionToggle, AccordionContent } from '@strapi/design-system/Accordion';
+import { Accordion, AccordionToggle, AccordionContent, Box, Flex } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
-import { Box } from '@strapi/design-system/Box';
-import { Stack } from '@strapi/design-system/Stack';
 import { useUsersPermissions } from '../../contexts/UsersPermissionsContext';
 import formatPluginName from '../../utils/formatPluginName';
 import PermissionRow from './PermissionRow';
@@ -23,7 +21,7 @@ const Permissions = () => {
     });
 
   return (
-    <Stack spacing={1}>
+    <Flex direction="column" alignItems="stretch" gap={1}>
       {collapses.map((collapse, index) => (
         <Accordion
           expanded={collapse.isOpen}
@@ -49,7 +47,7 @@ const Permissions = () => {
           </AccordionContent>
         </Accordion>
       ))}
-    </Stack>
+    </Flex>
   );
 };
 

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

@@ -1,9 +1,10 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
-import { Typography } from '@strapi/design-system/Typography';
-import { Stack } from '@strapi/design-system/Stack';
-import { GridItem } from '@strapi/design-system/Grid';
-import { get, isEmpty, without } from 'lodash';
+import { Typography, Flex, GridItem } from '@strapi/design-system';
+import get from 'lodash/get';
+import isEmpty from 'lodash/isEmpty';
+import without from 'lodash/without';
+
 import { useUsersPermissions } from '../../contexts/UsersPermissionsContext';
 import BoundRoute from '../BoundRoute';
 
@@ -30,14 +31,14 @@ const Policies = () => {
       style={{ minHeight: '100%' }}
     >
       {selectedAction ? (
-        <Stack spacing={2}>
+        <Flex direction="column" alignItems="stretch" gap={2}>
           {displayedRoutes.map((route, key) => (
             // eslint-disable-next-line react/no-array-index-key
             <BoundRoute key={key} route={route} />
           ))}
-        </Stack>
+        </Flex>
       ) : (
-        <Stack spacing={2}>
+        <Flex direction="column" alignItems="stretch" gap={2}>
           <Typography variant="delta" as="h3">
             {formatMessage({
               id: 'users-permissions.Policies.header.title',
@@ -51,7 +52,7 @@ const Policies = () => {
                 "Select the application's actions or the plugin's actions and click on the cog icon to display the bound route",
             })}
           </Typography>
-        </Stack>
+        </Flex>
       )}
     </GridItem>
   );

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

@@ -1,8 +1,6 @@
 import React, { memo, useReducer, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
-import { Typography } from '@strapi/design-system/Typography';
-import { Stack } from '@strapi/design-system/Stack';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
+import { Typography, Flex, Grid, GridItem } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 import getTrad from '../../utils/getTrad';
 import Policies from '../Policies';
@@ -62,8 +60,8 @@ const UsersPermissions = forwardRef(({ permissions, routes }, ref) => {
     <UsersPermissionsProvider value={providerValue}>
       <Grid gap={0} shadow="filterShadow" hasRadius background="neutral0">
         <GridItem col={7} paddingTop={6} paddingBottom={6} paddingLeft={7} paddingRight={7}>
-          <Stack spacing={6}>
-            <Stack spacing={2}>
+          <Flex direction="column" alignItems="stretch" gap={6}>
+            <Flex direction="column" alignItems="stretch" gap={2}>
               <Typography variant="delta" as="h2">
                 {formatMessage({
                   id: getTrad('Plugins.header.title'),
@@ -76,9 +74,9 @@ const UsersPermissions = forwardRef(({ permissions, routes }, ref) => {
                   defaultMessage: 'Only actions bound by a route are listed below.',
                 })}
               </Typography>
-            </Stack>
+            </Flex>
             <Permissions />
-          </Stack>
+          </Flex>
         </GridItem>
         <Policies />
       </Grid>

package/admin/src/components/UsersPermissions/reducer.js

@@ -1,6 +1,8 @@
 /* eslint-disable consistent-return */
 import produce from 'immer';
-import { set, get, take } from 'lodash';
+import get from 'lodash/get';
+import set from 'lodash/set';
+import take from 'lodash/take';
 
 export const initialState = {
   initialData: {},

package/admin/src/hooks/usePlugins/index.js

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useReducer } from 'react';
 import { useNotification, useFetchClient } from '@strapi/helper-plugin';
-import { get } from 'lodash';
+import get from 'lodash/get';
 import init from './init';
 import pluginId from '../../pluginId';
 import { cleanPermissions } from '../../utils';

package/admin/src/hooks/useRolesList/index.js

@@ -1,6 +1,6 @@
 import { useEffect, useReducer, useRef } from 'react';
 import { request, useNotification } from '@strapi/helper-plugin';
-import { get } from 'lodash';
+import get from 'lodash/get';
 import init from './init';
 import pluginId from '../../pluginId';
 import reducer, { initialState } from './reducer';

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

@@ -13,16 +13,21 @@ import {
   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 {
+  useNotifyAT,
+  Main,
+  HeaderLayout,
+  ContentLayout,
+  Button,
+  Box,
+  Flex,
+  Select,
+  Option,
+  Typography,
+  Grid,
+  GridItem,
+} from '@strapi/design-system';
+import { Check } from '@strapi/icons';
 import pluginPermissions from '../../permissions';
 import { getTrad } from '../../utils';
 import layout from './utils/layout';
@@ -168,7 +173,7 @@ const AdvancedSettingsPage = () => {
                   paddingLeft={7}
                   paddingRight={7}
                 >
-                  <Stack spacing={4}>
+                  <Flex direction="column" alignItems="stretch" gap={4}>
                     <Typography variant="delta" as="h2">
                       {formatMessage({
                         id: 'global.settings',
@@ -224,7 +229,7 @@ const AdvancedSettingsPage = () => {
                         );
                       })}
                     </Grid>
-                  </Stack>
+                  </Flex>
                 </Box>
               </ContentLayout>
             </Form>

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

@@ -8,11 +8,13 @@ import {
   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';
+  Grid,
+  GridItem,
+  Button,
+  Breadcrumbs,
+  Crumb,
+  Textarea,
+} from '@strapi/design-system';
 import { getTrad } from '../../../utils';
 import schema from '../utils/schema';
 

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

@@ -1,15 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Table, Thead, Tbody, Tr, Td, Th } from '@strapi/design-system/Table';
-import { VisuallyHidden } from '@strapi/design-system/VisuallyHidden';
-import { Typography } from '@strapi/design-system/Typography';
-import { IconButton } from '@strapi/design-system/IconButton';
-import { Icon } from '@strapi/design-system/Icon';
-import Pencil from '@strapi/icons/Pencil';
-import Reload from '@strapi/icons/Refresh';
+import {
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Td,
+  Th,
+  Typography,
+  IconButton,
+  Icon,
+  VisuallyHidden,
+} from '@strapi/design-system';
+import { Pencil, Refresh, Check } from '@strapi/icons';
 import { onRowClick, stopPropagation } from '@strapi/helper-plugin';
-import Check from '@strapi/icons/Check';
 import { getTrad } from '../../../utils';
 
 const EmailTable = ({ canUpdate, onEditClick }) => {
@@ -49,7 +54,7 @@ const EmailTable = ({ canUpdate, onEditClick }) => {
         <Tr {...onRowClick({ fn: () => onEditClick('reset_password') })}>
           <Td>
             <Icon>
-              <Reload
+              <Refresh
                 aria-label={formatMessage({
                   id: 'global.reset-password',
                   defaultMessage: 'Reset password',

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

@@ -11,9 +11,7 @@ import {
   useFocusWhenNavigate,
   LoadingIndicatorPage,
 } from '@strapi/helper-plugin';
-import { useNotifyAT } from '@strapi/design-system/LiveRegions';
-import { Main } from '@strapi/design-system/Main';
-import { ContentLayout, HeaderLayout } from '@strapi/design-system/Layout';
+import { useNotifyAT, Main, ContentLayout, HeaderLayout } from '@strapi/design-system';
 import pluginPermissions from '../../permissions';
 import { getTrad } from '../../utils';
 import { fetchData, putEmailTemplate } from './utils/api';

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

@@ -14,14 +14,23 @@ import {
 } from '@strapi/helper-plugin';
 import has from 'lodash/has';
 import upperFirst from 'lodash/upperFirst';
-import { HeaderLayout, Layout, ContentLayout } from '@strapi/design-system/Layout';
-import { Main } from '@strapi/design-system/Main';
-import { useNotifyAT } from '@strapi/design-system/LiveRegions';
-import { Table, Thead, Tr, Th, Tbody, Td } from '@strapi/design-system/Table';
-import { Typography } from '@strapi/design-system/Typography';
-import { VisuallyHidden } from '@strapi/design-system/VisuallyHidden';
-import { IconButton } from '@strapi/design-system/IconButton';
-import Pencil from '@strapi/icons/Pencil';
+import {
+  HeaderLayout,
+  Layout,
+  ContentLayout,
+  Main,
+  useNotifyAT,
+  Table,
+  Thead,
+  Tr,
+  Th,
+  Tbody,
+  Td,
+  Typography,
+  IconButton,
+  VisuallyHidden,
+} from '@strapi/design-system';
+import { Pencil } from '@strapi/icons';
 import { useQuery, useMutation, useQueryClient } from 'react-query';
 import forms from './utils/forms';
 import { fetchData, putProvider } from './utils/api';

package/admin/src/pages/Providers/reducer.js

@@ -1,5 +1,5 @@
 import produce from 'immer';
-import { set } from 'lodash';
+import set from 'lodash/set';
 
 const initialState = {
   formErrors: {},

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

@@ -1,4 +1,4 @@
-import { sortBy } from 'lodash';
+import sortBy from 'lodash/sortBy';
 
 const createProvidersArray = (data) => {
   return sortBy(

package/admin/src/pages/Roles/CreatePage/index.js

@@ -1,15 +1,19 @@
 import React, { useState, useRef } from 'react';
 import { useHistory } from 'react-router-dom';
-import { ContentLayout, HeaderLayout } from '@strapi/design-system/Layout';
-import { Main } from '@strapi/design-system/Main';
-import { Button } from '@strapi/design-system/Button';
-import { Stack } from '@strapi/design-system/Stack';
-import { Box } from '@strapi/design-system/Box';
-import { TextInput } from '@strapi/design-system/TextInput';
-import { Textarea } from '@strapi/design-system/Textarea';
-import { Typography } from '@strapi/design-system/Typography';
-import Check from '@strapi/icons/Check';
-import { GridItem, Grid } from '@strapi/design-system/Grid';
+import {
+  ContentLayout,
+  HeaderLayout,
+  Main,
+  Button,
+  Flex,
+  Box,
+  TextInput,
+  Textarea,
+  Typography,
+  GridItem,
+  Grid,
+} from '@strapi/design-system';
+import { Check } from '@strapi/icons';
 import { Formik } from 'formik';
 import { useIntl } from 'react-intl';
 import {
@@ -103,7 +107,7 @@ const EditPage = () => {
               })}
             />
             <ContentLayout>
-              <Stack spacing={7}>
+              <Flex direction="column" alignItems="stretch" gap={7}>
                 <Box
                   background="neutral0"
                   hasRadius
@@ -113,7 +117,7 @@ const EditPage = () => {
                   paddingLeft={7}
                   paddingRight={7}
                 >
-                  <Stack spacing={4}>
+                  <Flex direction="column" alignItems="stretch" gap={4}>
                     <Typography variant="delta" as="h2">
                       {formatMessage({
                         id: getTrad('EditPage.form.roles'),
@@ -157,7 +161,7 @@ const EditPage = () => {
                         />
                       </GridItem>
                     </Grid>
-                  </Stack>
+                  </Flex>
                 </Box>
                 {!isLoadingPlugins && (
                   <UsersPermissions
@@ -166,7 +170,7 @@ const EditPage = () => {
                     routes={routes}
                   />
                 )}
-              </Stack>
+              </Flex>
             </ContentLayout>
           </Form>
         )}

package/admin/src/pages/Roles/EditPage/index.js

@@ -11,17 +11,20 @@ import {
   useNotification,
   Link,
 } from '@strapi/helper-plugin';
-import { ContentLayout, HeaderLayout } from '@strapi/design-system/Layout';
-import { Main } from '@strapi/design-system/Main';
-import { Button } from '@strapi/design-system/Button';
-import { Stack } from '@strapi/design-system/Stack';
-import { Box } from '@strapi/design-system/Box';
-import { TextInput } from '@strapi/design-system/TextInput';
-import { Textarea } from '@strapi/design-system/Textarea';
-import { Typography } from '@strapi/design-system/Typography';
-import ArrowLeft from '@strapi/icons/ArrowLeft';
-import Check from '@strapi/icons/Check';
-import { GridItem, Grid } from '@strapi/design-system/Grid';
+import {
+  ContentLayout,
+  HeaderLayout,
+  Main,
+  Button,
+  Flex,
+  Box,
+  TextInput,
+  Textarea,
+  Typography,
+  GridItem,
+  Grid,
+} from '@strapi/design-system';
+import { ArrowLeft, Check } from '@strapi/icons';
 import UsersPermissions from '../../../components/UsersPermissions';
 import getTrad from '../../../utils/getTrad';
 import pluginId from '../../../pluginId';
@@ -116,7 +119,7 @@ const EditPage = () => {
               }
             />
             <ContentLayout>
-              <Stack spacing={7}>
+              <Flex direction="column" alignItems="stretch" gap={7}>
                 <Box
                   background="neutral0"
                   hasRadius
@@ -126,7 +129,7 @@ const EditPage = () => {
                   paddingLeft={7}
                   paddingRight={7}
                 >
-                  <Stack spacing={4}>
+                  <Flex direction="column" alignItems="stretch" gap={4}>
                     <Typography variant="delta" as="h2">
                       {formatMessage({
                         id: getTrad('EditPage.form.roles'),
@@ -170,7 +173,7 @@ const EditPage = () => {
                         />
                       </GridItem>
                     </Grid>
-                  </Stack>
+                  </Flex>
                 </Box>
                 {!isLoadingPlugins && (
                   <UsersPermissions
@@ -179,7 +182,7 @@ const EditPage = () => {
                     routes={routes}
                   />
                 )}
-              </Stack>
+              </Flex>
             </ContentLayout>
           </Form>
         )}

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

@@ -1,11 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { IconButton } from '@strapi/design-system/IconButton';
-import { Typography } from '@strapi/design-system/Typography';
-import { Flex } from '@strapi/design-system/Flex';
-import { Tbody, Tr, Td } from '@strapi/design-system/Table';
-import Pencil from '@strapi/icons/Pencil';
-import Trash from '@strapi/icons/Trash';
+import { IconButton, Typography, Flex, Tbody, Tr, Td } from '@strapi/design-system';
+import { Pencil, Trash } from '@strapi/icons';
 import { CheckPermissions, onRowClick, stopPropagation } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';

package/admin/src/pages/Roles/ListPage/index.js

@@ -1,12 +1,20 @@
 import React, { useMemo, useState } from 'react';
-import { Button } from '@strapi/design-system/Button';
-import { HeaderLayout, Layout, ContentLayout, ActionLayout } from '@strapi/design-system/Layout';
-import { Main } from '@strapi/design-system/Main';
-import { Table, Tr, Thead, Th } from '@strapi/design-system/Table';
-import { VisuallyHidden } from '@strapi/design-system/VisuallyHidden';
-import { Typography } from '@strapi/design-system/Typography';
-import { useNotifyAT } from '@strapi/design-system/LiveRegions';
-import Plus from '@strapi/icons/Plus';
+import {
+  Button,
+  HeaderLayout,
+  Layout,
+  ContentLayout,
+  ActionLayout,
+  Main,
+  Table,
+  Tr,
+  Thead,
+  Th,
+  Typography,
+  useNotifyAT,
+  VisuallyHidden,
+} from '@strapi/design-system';
+import { Plus } from '@strapi/icons';
 import {
   useTracking,
   SettingsPageTitle,

package/admin/src/translations/zh-Hans.json

@@ -1,62 +1,82 @@
 {
-  "BoundRoute.title": "绑定路由到",
-  "EditForm.inputSelect.description.role": "新验证身份的用户将被赋予所选角色。",
-  "EditForm.inputSelect.label.role": "认证用户的默认角色",
-  "EditForm.inputToggle.description.email": "不允许用户使用不同的认证提供者（绑定的相同的电子邮件地址）来创建多个帐户。",
-  "EditForm.inputToggle.description.email-confirmation": "启用（ON）后，新注册的用户会收到一封确认电子邮件。",
-  "EditForm.inputToggle.description.email-confirmation-redirection": "确认您的电子邮件后，选择将您重定向到的位置。",
-  "EditForm.inputToggle.description.email-reset-password": "应用程序的重置密码页面的 URL",
-  "EditForm.inputToggle.description.sign-up": "当禁用（OFF）时，注册过程将被禁止。任何人无论使用任何的供应商都不可以订阅。",
-  "EditForm.inputToggle.label.email": "每个电子邮件地址一个帐户",
-  "EditForm.inputToggle.label.email-confirmation": "启用电子邮件确认",
-  "EditForm.inputToggle.label.email-confirmation-redirection": "重定向 URL",
-  "EditForm.inputToggle.label.email-reset-password": "重置密码页面 URL",
-  "EditForm.inputToggle.label.sign-up": "启用注册",
-  "EditForm.inputToggle.placeholder.email-confirmation-redirection": "例如: https://yourfrontend.com/reset-password",
-  "EditForm.inputToggle.placeholder.email-reset-password": "例如: https://yourfrontend.com/reset-password",
-  "EditPage.form.roles": "角色详情",
-  "Email.template.email_confirmation": "邮箱地址确认",
-  "HeaderNav.link.advancedSettings": "高级设置",
-  "HeaderNav.link.emailTemplates": "电子邮件模板",
-  "HeaderNav.link.providers": "提供者",
-  "Plugin.permissions.plugins.description": "定义 {name} 插件所有允许的操作。",
-  "Plugins.header.description": "下面只列出路由绑定的操作。",
-  "Plugins.header.title": "权限",
-  "Policies.header.hint": "选择应用程序或插件的操作，然后点击 COG 图标显示绑定的路由",
-  "Policies.header.title": "高级设置",
-  "PopUpForm.Email.email_templates.inputDescription": "如果你不确定如何使用变量， {link}",
-  "PopUpForm.Email.link.documentation": "查看我们的文档",
-  "PopUpForm.Email.options.from.email.label": "发件人地址",
-  "PopUpForm.Email.options.from.email.placeholder": "kai@doe.com",
-  "PopUpForm.Email.options.from.name.label": "发件人名称",
-  "PopUpForm.Email.options.from.name.placeholder": "Kai Doe",
-  "PopUpForm.Email.options.message.label": "消息",
-  "PopUpForm.Email.options.object.label": "主题",
-  "PopUpForm.Email.options.object.placeholder": "请为%APP_NAME%确认邮箱地址",
-  "PopUpForm.Email.options.response_email.label": "回复邮件",
-  "PopUpForm.Email.options.response_email.placeholder": "kai@doe.com",
-  "PopUpForm.Providers.enabled.description": "如果禁用，用户将无法使用此供应商。",
-  "PopUpForm.Providers.enabled.label": "启用",
-  "PopUpForm.Providers.key.label": "客户端 ID",
-  "PopUpForm.Providers.key.placeholder": "文本",
-  "PopUpForm.Providers.redirectURL.front-end.label": "重定向 URL",
-  "PopUpForm.Providers.redirectURL.label": "添加到{provider}应用配置的跳转URL",
-  "PopUpForm.Providers.secret.label": "客户端秘钥",
-  "PopUpForm.Providers.secret.placeholder": "文本",
-  "PopUpForm.Providers.subdomain.label": "Host URI (Subdomain)",
-  "PopUpForm.Providers.subdomain.placeholder": "my.subdomain.com",
-  "PopUpForm.header.edit.email-templates": "编辑电子邮件模版",
-  "PopUpForm.header.edit.providers": "编辑提供商",
-  "Settings.roles.deleted": "角色已被删除",
-  "Settings.roles.edited": "角色编辑完成",
-  "Settings.section-label": "用户及权限插件",
-  "notification.success.submit": "设置已被更新",
-  "page.title": "设置 - 角色",
-  "plugin.description.long": "使用基于 JWT 的完整身份验证过程来保护 API。这个插件还有一个 ACL 策略，允许你管理用户组之间的权限。",
-  "plugin.description.short": "使用基于 JWT 的完整身份验证过程保护 API",
-  "plugin.name": "角色及权限",
-  "popUpWarning.button.cancel": "取消",
-  "popUpWarning.button.confirm": "确认",
-  "popUpWarning.title": "请确认",
-  "popUpWarning.warning.cancel": "你确定你要取消你的修改？"
+    "BoundRoute.title": "绑定路由到",
+    "EditForm.inputSelect.description.role": "新验证身份的用户将被赋予所选角色。",
+    "EditForm.inputSelect.label.role": "认证用户的默认角色",
+    "EditForm.inputToggle.description.email": "不允许用户使用不同的认证提供者（绑定的相同的电子邮件地址）来创建多个帐户。",
+    "EditForm.inputToggle.description.email-confirmation": "启用（ON）后，新注册的用户会收到一封确认电子邮件。",
+    "EditForm.inputToggle.description.email-confirmation-redirection": "确认您的电子邮件后，选择将您重定向到的位置。",
+    "EditForm.inputToggle.description.email-reset-password": "应用程序的重置密码页面的 URL",
+    "EditForm.inputToggle.description.sign-up": "当禁用（OFF）时，注册过程将被禁止。任何人无论使用任何的供应商都不可以订阅。",
+    "EditForm.inputToggle.label.email": "每个电子邮件地址一个帐户",
+    "EditForm.inputToggle.label.email-confirmation": "启用电子邮件确认",
+    "EditForm.inputToggle.label.email-confirmation-redirection": "重定向 URL",
+    "EditForm.inputToggle.label.email-reset-password": "重置密码页面 URL",
+    "EditForm.inputToggle.label.sign-up": "启用注册",
+    "EditForm.inputToggle.placeholder.email-confirmation-redirection": "例如: https://yourfrontend.com/reset-password",
+    "EditForm.inputToggle.placeholder.email-reset-password": "例如: https://yourfrontend.com/reset-password",
+    "EditPage.form.roles": "角色详情",
+    "Email.template.data.loaded": "电子邮件模板已加载",
+    "Email.template.email_confirmation": "邮箱地址确认",
+    "Email.template.form.edit.label": "编辑模板",
+    "Email.template.table.action.label": "操作",
+    "Email.template.table.icon.label": "图标",
+    "Email.template.table.name.label": "名称",
+    "Form.advancedSettings.data.loaded": "高级设置数据已加载",
+    "HeaderNav.link.advancedSettings": "高级设置",
+    "HeaderNav.link.emailTemplates": "电子邮件模板",
+    "HeaderNav.link.providers": "提供者",
+    "Plugin.permissions.plugins.description": "定义 {name} 插件所有允许的操作。",
+    "Plugins.header.description": "下面只列出路由绑定的操作。",
+    "Plugins.header.title": "权限",
+    "Policies.header.hint": "选择应用程序或插件的操作，然后点击 COG 图标显示绑定的路由",
+    "Policies.header.title": "高级设置",
+    "PopUpForm.Email.email_templates.inputDescription": "如果你不确定如何使用变量， {link}",
+    "PopUpForm.Email.link.documentation": "查看我们的文档",
+    "PopUpForm.Email.options.from.email.label": "发件人地址",
+    "PopUpForm.Email.options.from.email.placeholder": "kai@doe.com",
+    "PopUpForm.Email.options.from.name.label": "发件人名称",
+    "PopUpForm.Email.options.from.name.placeholder": "Kai Doe",
+    "PopUpForm.Email.options.message.label": "消息",
+    "PopUpForm.Email.options.object.label": "主题",
+    "PopUpForm.Email.options.object.placeholder": "请为%APP_NAME%确认邮箱地址",
+    "PopUpForm.Email.options.response_email.label": "回复邮件",
+    "PopUpForm.Email.options.response_email.placeholder": "kai@doe.com",
+    "PopUpForm.Providers.enabled.description": "如果禁用，用户将无法使用此供应商。",
+    "PopUpForm.Providers.enabled.label": "启用",
+    "PopUpForm.Providers.key.label": "客户端 ID",
+    "PopUpForm.Providers.key.placeholder": "文本",
+    "PopUpForm.Providers.redirectURL.front-end.label": "重定向 URL",
+    "PopUpForm.Providers.redirectURL.label": "添加到{provider}应用配置的跳转URL",
+    "PopUpForm.Providers.secret.label": "客户端秘钥",
+    "PopUpForm.Providers.secret.placeholder": "文本",
+    "PopUpForm.Providers.subdomain.label": "主机URI（子域名）",
+    "PopUpForm.Providers.subdomain.placeholder": "my.subdomain.com",
+    "PopUpForm.header.edit.email-templates": "编辑电子邮件模版",
+    "PopUpForm.header.edit.providers": "编辑提供商",
+    "Providers.data.loaded": "提供商已加载",
+    "Providers.status": "状态",
+    "Roles.empty": "您还没有任何角色。",
+    "Roles.empty.search": "没有与搜索相匹配的角色。",
+    "Settings.roles.deleted": "角色已被删除",
+    "Settings.roles.edited": "角色编辑完成",
+    "Settings.section-label": "用户及权限插件",
+    "components.Input.error.validation.email": "这是一个无效的电子邮件",
+    "components.Input.error.validation.json": "这不符合JSON格式",
+    "components.Input.error.validation.max": "值过高。",
+    "components.Input.error.validation.maxLength": "值过长。",
+    "components.Input.error.validation.min": "值太低。",
+    "components.Input.error.validation.minLength": "值太短。",
+    "components.Input.error.validation.minSupMax": "不能超过上限",
+    "components.Input.error.validation.regex": "该值不符合正则表达式。",
+    "components.Input.error.validation.required": "该值为必填项。",
+    "components.Input.error.validation.unique": "该值已被使用。",
+    "notification.success.submit": "设置已被更新",
+    "page.title": "设置 - 角色",
+    "plugin.description.long": "使用基于 JWT 的完整身份验证过程来保护 API。这个插件还有一个 ACL 策略，允许你管理用户组之间的权限。",
+    "plugin.description.short": "使用基于 JWT 的完整身份验证过程保护 API",
+    "plugin.name": "角色及权限",
+    "popUpWarning.button.cancel": "取消",
+    "popUpWarning.button.confirm": "确认",
+    "popUpWarning.title": "请确认",
+    "popUpWarning.warning.cancel": "你确定你要取消你的修改？"
 }

package/admin/src/utils/cleanPermissions.js

@@ -1,4 +1,4 @@
-import { isEmpty } from 'lodash';
+import isEmpty from 'lodash/isEmpty';
 
 const cleanPermissions = (permissions) =>
   Object.keys(permissions).reduce((acc, current) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/plugin-users-permissions",
-  "version": "4.9.0-alpha.0",
+  "version": "4.9.0-beta.1",
   "description": "Protect your API with a full-authentication process based on JWT",
   "repository": {
     "type": "git",
@@ -27,31 +27,46 @@
     "test:front:watch:ce": "cross-env IS_EE=false jest --config ./jest.config.front.js --watchAll"
   },
   "dependencies": {
-    "@strapi/helper-plugin": "4.9.0-alpha.0",
-    "@strapi/utils": "4.9.0-alpha.0",
+    "@strapi/design-system": "1.6.6",
+    "@strapi/helper-plugin": "4.9.0-beta.1",
+    "@strapi/icons": "1.6.6",
+    "@strapi/utils": "4.9.0-beta.1",
     "bcryptjs": "2.4.3",
+    "formik": "2.2.9",
     "grant-koa": "5.4.8",
+    "immer": "9.0.19",
     "jsonwebtoken": "9.0.0",
     "jwk-to-pem": "2.0.5",
     "koa": "^2.13.4",
     "koa2-ratelimit": "^1.1.2",
     "lodash": "4.17.21",
+    "match-sorter": "^4.0.2",
+    "prop-types": "^15.7.2",
     "purest": "4.0.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
     "react-intl": "6.2.8",
+    "react-query": "3.24.3",
     "react-redux": "8.0.5",
-    "react-router": "^5.2.0",
-    "react-router-dom": "5.3.4",
-    "url-join": "4.0.1"
+    "url-join": "4.0.1",
+    "yup": "^0.32.9"
   },
   "devDependencies": {
     "@testing-library/dom": "8.19.0",
     "@testing-library/react": "12.1.4",
     "@testing-library/react-hooks": "8.0.1",
     "@testing-library/user-event": "14.4.3",
+    "history": "^4.9.0",
     "msw": "1.0.1",
-    "react-test-renderer": "^17.0.2"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-router-dom": "5.3.4",
+    "react-test-renderer": "^17.0.2",
+    "styled-components": "5.3.3"
+  },
+  "peerDependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-router-dom": "5.3.4",
+    "styled-components": "5.3.3"
   },
   "engines": {
     "node": ">=14.19.1 <=18.x.x",
@@ -64,5 +79,5 @@
     "required": true,
     "kind": "plugin"
   },
-  "gitHead": "35f783d0dc07db101e7e62cb4d682f751551f452"
+  "gitHead": "ff37d666d0634fc84827e3d6419d916618275572"
 }

package/server/content-types/user/index.js

@@ -38,16 +38,19 @@ module.exports = {
       minLength: 6,
       configurable: false,
       private: true,
+      searchable: false,
     },
     resetPasswordToken: {
       type: 'string',
       configurable: false,
       private: true,
+      searchable: false,
     },
     confirmationToken: {
       type: 'string',
       configurable: false,
       private: true,
+      searchable: false,
     },
     confirmed: {
       type: 'boolean',

package/server/controllers/user.js

@@ -14,13 +14,20 @@ const { validateCreateUserBody, validateUpdateUserBody } = require('./validation
 const { sanitize } = utils;
 const { ApplicationError, ValidationError, NotFoundError } = utils.errors;
 
-const sanitizeOutput = (user, ctx) => {
+const sanitizeOutput = async (user, ctx) => {
   const schema = strapi.getModel('plugin::users-permissions.user');
   const { auth } = ctx.state;
 
   return sanitize.contentAPI.output(user, schema, { auth });
 };
 
+const sanitizeQuery = async (query, ctx) => {
+  const schema = strapi.getModel('plugin::users-permissions.user');
+  const { auth } = ctx.state;
+
+  return sanitize.contentAPI.query(query, schema, { auth });
+};
+
 module.exports = {
   /**
    * Create a/an user record.
@@ -136,7 +143,8 @@ module.exports = {
    * @return {Object|Array}
    */
   async find(ctx) {
-    const users = await getService('user').fetchAll(ctx.query);
+    const sanitizedQuery = await sanitizeQuery(ctx.query, ctx);
+    const users = await getService('user').fetchAll(sanitizedQuery);
 
     ctx.body = await Promise.all(users.map((user) => sanitizeOutput(user, ctx)));
   },
@@ -147,9 +155,9 @@ module.exports = {
    */
   async findOne(ctx) {
     const { id } = ctx.params;
-    const { query } = ctx;
+    const sanitizedQuery = await sanitizeQuery(ctx.query, ctx);
 
-    let data = await getService('user').fetch(id, query);
+    let data = await getService('user').fetch(id, sanitizedQuery);
 
     if (data) {
       data = await sanitizeOutput(data, ctx);
@@ -163,7 +171,9 @@ module.exports = {
    * @return {Number}
    */
   async count(ctx) {
-    ctx.body = await getService('user').count(ctx.query);
+    const sanitizedQuery = await sanitizeQuery(ctx.query, ctx);
+
+    ctx.body = await getService('user').count(sanitizedQuery);
   },
 
   /**
@@ -191,7 +201,8 @@ module.exports = {
       return ctx.unauthorized();
     }
 
-    const user = await getService('user').fetch(authUser.id, query);
+    const sanitizedQuery = await sanitizeQuery(query, ctx);
+    const user = await getService('user').fetch(authUser.id, sanitizedQuery);
 
     ctx.body = await sanitizeOutput(user, ctx);
   },