@strapi/plugin-users-permissions 4.0.0-beta.2 → 4.0.0-beta.20

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

@@ -15,14 +15,14 @@ import {
 import has from 'lodash/has';
 import upperFirst from 'lodash/upperFirst';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { HeaderLayout, Layout, ContentLayout } from '@strapi/parts/Layout';
-import { Main } from '@strapi/parts/Main';
-import { useNotifyAT } from '@strapi/parts/LiveRegions';
-import { Table, Thead, Tr, Th, Tbody, Td } from '@strapi/parts/Table';
-import { Text, TableLabel } from '@strapi/parts/Text';
-import { VisuallyHidden } from '@strapi/parts/VisuallyHidden';
-import { IconButton } from '@strapi/parts/IconButton';
-import EditIcon from '@strapi/icons/EditIcon';
+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 { useQuery, useMutation, useQueryClient } from 'react-query';
 import forms from './utils/forms';
 import { fetchData, putProvider } from './utils/api';
@@ -167,31 +167,31 @@ export const ProvidersPage = () => {
               <Thead>
                 <Tr>
                   <Th>
-                    <TableLabel textColor="neutral600">
+                    <Typography variant="sigma" textColor="neutral600">
                       <VisuallyHidden>
                         {formatMessage({ id: getTrad('Providers.image'), defaultMessage: 'Image' })}
                       </VisuallyHidden>
-                    </TableLabel>
+                    </Typography>
                   </Th>
                   <Th>
-                    <TableLabel textColor="neutral600">
+                    <Typography variant="sigma" textColor="neutral600">
                       {formatMessage({ id: getTrad('Providers.name'), defaultMessage: 'Name' })}
-                    </TableLabel>
+                    </Typography>
                   </Th>
                   <Th>
-                    <TableLabel textColor="neutral600">
+                    <Typography variant="sigma" textColor="neutral600">
                       {formatMessage({ id: getTrad('Providers.status'), defaultMessage: 'Status' })}
-                    </TableLabel>
+                    </Typography>
                   </Th>
                   <Th>
-                    <TableLabel>
+                    <Typography variant="sigma">
                       <VisuallyHidden>
                         {formatMessage({
                           id: getTrad('Providers.settings'),
                           defaultMessage: 'Settings',
                         })}
                       </VisuallyHidden>
-                    </TableLabel>
+                    </Typography>
                   </Th>
                 </Tr>
               </Thead>
@@ -208,12 +208,12 @@ export const ProvidersPage = () => {
                       <FontAwesomeIcon icon={provider.icon} />
                     </Td>
                     <Td width="45%">
-                      <Text highlighted textColor="neutral800">
+                      <Typography fontWeight="semiBold" textColor="neutral800">
                         {provider.name}
-                      </Text>
+                      </Typography>
                     </Td>
                     <Td width="65%">
-                      <Text
+                      <Typography
                         textColor={provider.enabled ? 'success600' : 'danger600'}
                         data-testid={`enable-${provider.name}`}
                       >
@@ -226,14 +226,14 @@ export const ProvidersPage = () => {
                               id: getTrad('Providers.disabled'),
                               defaultMessage: 'Disabled',
                             })}
-                      </Text>
+                      </Typography>
                     </Td>
                     <Td {...stopPropagation}>
                       {canUpdate && (
                         <IconButton
                           onClick={() => handleClickEdit(provider)}
                           noBorder
-                          icon={<EditIcon />}
+                          icon={<Pencil />}
                           label="Edit"
                         />
                       )}

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

@@ -18,4 +18,4 @@ export const fetchData = async toggleNotification => {
 
 export const putProvider = body => {
   return axiosInstance.put(getRequestURL('providers'), body);
-}
+};

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

@@ -1,15 +1,15 @@
 import React, { useState, useRef } from 'react';
 import { useHistory } from 'react-router-dom';
-import { ContentLayout, HeaderLayout } from '@strapi/parts/Layout';
-import { Main } from '@strapi/parts/Main';
-import { Button } from '@strapi/parts/Button';
-import { Stack } from '@strapi/parts/Stack';
-import { Box } from '@strapi/parts/Box';
-import { TextInput } from '@strapi/parts/TextInput';
-import { Textarea } from '@strapi/parts/Textarea';
-import { H3 } from '@strapi/parts/Text';
-import CheckIcon from '@strapi/icons/CheckIcon';
-import { GridItem, Grid } from '@strapi/parts/Grid';
+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 { Formik } from 'formik';
 import { useIntl } from 'react-intl';
 import {
@@ -84,7 +84,7 @@ const EditPage = () => {
             <HeaderLayout
               primaryAction={
                 !isLoadingPlugins && (
-                  <Button type="submit" loading={isSubmitting} startIcon={<CheckIcon />}>
+                  <Button type="submit" loading={isSubmitting} startIcon={<Check />}>
                     {formatMessage({
                       id: 'app.components.Button.save',
                       defaultMessage: 'Save',
@@ -113,12 +113,12 @@ const EditPage = () => {
                   paddingRight={7}
                 >
                   <Stack size={4}>
-                    <H3 as="h2">
+                    <Typography variant="delta" as="h2">
                       {formatMessage({
                         id: getTrad('EditPage.form.roles'),
                         defaultMessage: 'Role details',
                       })}
-                    </H3>
+                    </Typography>
                     <Grid gap={4}>
                       <GridItem col={6}>
                         <TextInput

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

@@ -1,14 +1,16 @@
 import React, { useState, useRef } from 'react';
-import { ContentLayout, HeaderLayout } from '@strapi/parts/Layout';
-import { Main } from '@strapi/parts/Main';
-import { Button } from '@strapi/parts/Button';
-import { Stack } from '@strapi/parts/Stack';
-import { Box } from '@strapi/parts/Box';
-import { TextInput } from '@strapi/parts/TextInput';
-import { Textarea } from '@strapi/parts/Textarea';
-import { H3 } from '@strapi/parts/Text';
-import CheckIcon from '@strapi/icons/CheckIcon';
-import { GridItem, Grid } from '@strapi/parts/Grid';
+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 { Link } from '@strapi/design-system/Link';
+import { GridItem, Grid } from '@strapi/design-system/Grid';
 import { Formik } from 'formik';
 import { useIntl } from 'react-intl';
 import { useRouteMatch } from 'react-router-dom';
@@ -92,7 +94,7 @@ const EditPage = () => {
                     disabled={role.code === 'strapi-super-admin'}
                     type="submit"
                     loading={isSubmitting}
-                    startIcon={<CheckIcon />}
+                    startIcon={<Check />}
                   >
                     {formatMessage({
                       id: 'app.components.Button.save',
@@ -103,6 +105,14 @@ const EditPage = () => {
               }
               title={role.name}
               subtitle={role.description}
+              navigationAction={
+                <Link startIcon={<ArrowLeft />} to="/settings/users-permissions/roles">
+                  {formatMessage({
+                    id: 'app.components.go-back',
+                    defaultMessage: 'Go back',
+                  })}
+                </Link>
+              }
             />
             <ContentLayout>
               <Stack size={7}>
@@ -116,12 +126,12 @@ const EditPage = () => {
                   paddingRight={7}
                 >
                   <Stack size={4}>
-                    <H3 as="h2">
+                    <Typography variant="delta" as="h2">
                       {formatMessage({
                         id: getTrad('EditPage.form.roles'),
                         defaultMessage: 'Role details',
                       })}
-                    </H3>
+                    </Typography>
                     <Grid gap={4}>
                       <GridItem col={6}>
                         <TextInput

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

@@ -1,7 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { IconButton, Tbody, Text, Tr, Td, Row } from '@strapi/parts';
-import { EditIcon, DeleteIcon } from '@strapi/icons';
+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 { CheckPermissions, onRowClick, stopPropagation } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
@@ -30,26 +34,26 @@ const TableBody = ({ sortedRoles, canDelete, permissions, setRoleToDelete, onDel
       {sortedRoles?.map(role => (
         <Tr key={role.name} {...onRowClick({ fn: () => handleClickEdit(role.id) })}>
           <Td width="20%">
-            <Text>{role.name}</Text>
+            <Typography>{role.name}</Typography>
           </Td>
           <Td width="50%">
-            <Text>{role.description}</Text>
+            <Typography>{role.description}</Typography>
           </Td>
           <Td width="30%">
-            <Text>
+            <Typography>
               {`${role.nb_users} ${formatMessage({
                 id: getTrad('Roles.users'),
                 defaultMessage: 'users',
               }).toLowerCase()}`}
-            </Text>
+            </Typography>
           </Td>
           <Td>
-            <Row justifyContent="end" {...stopPropagation}>
+            <Flex justifyContent="end" {...stopPropagation}>
               <CheckPermissions permissions={permissions.updateRole}>
                 <IconButton
                   onClick={() => handleClickEdit(role.id)}
                   noBorder
-                  icon={<EditIcon />}
+                  icon={<Pencil />}
                   label={formatMessage(
                     { id: 'app.component.table.edit', defaultMessage: 'Edit {target}' },
                     { target: `${role.name}` }
@@ -61,7 +65,7 @@ const TableBody = ({ sortedRoles, canDelete, permissions, setRoleToDelete, onDel
                   <IconButton
                     onClick={() => handleClickDelete(role.id)}
                     noBorder
-                    icon={<DeleteIcon />}
+                    icon={<Trash />}
                     label={formatMessage(
                       { id: 'app.component.table.delete', defaultMessage: 'Delete {target}' },
                       { target: `${role.name}` }
@@ -69,7 +73,7 @@ const TableBody = ({ sortedRoles, canDelete, permissions, setRoleToDelete, onDel
                   />
                 </CheckPermissions>
               )}
-            </Row>
+            </Flex>
           </Td>
         </Tr>
       ))}

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

@@ -1,20 +1,12 @@
 import React, { useMemo, useState } from 'react';
-import {
-  Button,
-  HeaderLayout,
-  Layout,
-  Main,
-  Table,
-  Tr,
-  Thead,
-  Th,
-  TableLabel,
-  useNotifyAT,
-  ContentLayout,
-  ActionLayout,
-  VisuallyHidden,
-} from '@strapi/parts';
-import AddIcon from '@strapi/icons/AddIcon';
+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 {
   useTracking,
   SettingsPageTitle,
@@ -23,7 +15,8 @@ import {
   useRBAC,
   NoPermissions,
   LoadingIndicatorPage,
-  Search,
+  SearchURLQuery,
+  useFocusWhenNavigate,
   useQueryParams,
   EmptyStateLayout,
   ConfirmDialog,
@@ -50,6 +43,7 @@ const RoleListPage = () => {
   const [showConfirmDelete, setShowConfirmDelete] = useState(false);
   const [isConfirmButtonLoading, setIsConfirmButtonLoading] = useState(false);
   const [roleToDelete, setRoleToDelete] = useState();
+  useFocusWhenNavigate();
 
   const queryClient = useQueryClient();
 
@@ -137,7 +131,7 @@ const RoleListPage = () => {
           })}
           primaryAction={
             <CheckPermissions permissions={permissions.createRole}>
-              <Button onClick={handleNewRoleClick} startIcon={<AddIcon />}>
+              <Button onClick={handleNewRoleClick} startIcon={<Plus />} size="L">
                 {formatMessage({
                   id: getTrad('List.button.roles'),
                   defaultMessage: 'Add new role',
@@ -149,7 +143,7 @@ const RoleListPage = () => {
 
         <ActionLayout
           startActions={
-            <Search
+            <SearchURLQuery
               label={formatMessage({
                 id: 'app.component.search.label',
                 defaultMessage: 'Search',
@@ -166,25 +160,25 @@ const RoleListPage = () => {
               <Thead>
                 <Tr>
                   <Th>
-                    <TableLabel textColor="neutral600">
+                    <Typography variant="sigma" textColor="neutral600">
                       {formatMessage({ id: getTrad('Roles.name'), defaultMessage: 'Name' })}
-                    </TableLabel>
+                    </Typography>
                   </Th>
                   <Th>
-                    <TableLabel textColor="neutral600">
+                    <Typography variant="sigma" textColor="neutral600">
                       {formatMessage({
                         id: getTrad('Roles.description'),
                         defaultMessage: 'Description',
                       })}
-                    </TableLabel>
+                    </Typography>
                   </Th>
                   <Th>
-                    <TableLabel textColor="neutral600">
+                    <Typography variant="sigma" textColor="neutral600">
                       {formatMessage({
                         id: getTrad('Roles.users'),
                         defaultMessage: 'Users',
                       })}
-                    </TableLabel>
+                    </Typography>
                   </Th>
                   <Th>
                     <VisuallyHidden>

package/documentation/1.0.0/overrides/users-permissions-User.json

@@ -6,7 +6,7 @@
         "security": [],
         "externalDocs": {
           "description": "Find out more in the strapi's documentation",
-          "url": "https://strapi.io/documentation/developer-docs/latest/development/plugins/users-permissions.html#registration"
+          "url": "https://docs.strapi.io/developer-docs/latest/plugins/users-permissions.html#registration"
         },
         "responses": {
           "200": {
@@ -58,7 +58,7 @@
         "security": [],
         "externalDocs": {
           "description": "Find out more in the strapi's documentation",
-          "url": "https://strapi.io/documentation/developer-docs/latest/development/plugins/users-permissions.html#email-validation"
+          "url": "https://docs.strapi.io/developer-docs/latest/plugins/users-permissions.html#email-validation"
         },
         "responses": {
           "200": {
@@ -130,7 +130,7 @@
         ],
         "externalDocs": {
           "description": "Find out more about the authentication flow in the strapi documentation",
-          "url": "https://strapi.io/documentation/developer-docs/latest/development/plugins/users-permissions.html#setting-up-the-provider-examples"
+          "url": "https://docs.strapi.io/developer-docs/latest/plugins/users-permissions.html#providers"
         },
         "responses": {
           "200": {
@@ -143,7 +143,7 @@
       "post": {
         "externalDocs": {
           "description": "Find out more in the strapi's documentation",
-          "url": "https://strapi.io/documentation/developer-docs/latest/development/plugins/users-permissions.html#login"
+          "url": "https://docs.strapi.io/developer-docs/latest/plugins/users-permissions.html#login"
         },
         "tags": ["Authentication"],
         "security": [],
@@ -188,7 +188,7 @@
         "tags": ["Authentication"],
         "externalDocs": {
           "description": "Find out more in the strapi's documentation",
-          "url": "https://strapi.io/documentation/developer-docs/latest/development/plugins/users-permissions.html#setting-up-the-provider-examples"
+          "url": "https://docs.strapi.io/developer-docs/latest/plugins/users-permissions.html#providers"
         },
         "parameters": [
           {
@@ -223,7 +223,7 @@
         "summary": "Send an email to reset your password",
         "externalDocs": {
           "description": "Find out more in the strapi's documentation",
-          "url": "https://strapi.io/documentation/developer-docs/latest/development/plugins/users-permissions.html#forgotten-reset-password"
+          "url": "https://docs.strapi.io/developer-docs/latest/plugins/users-permissions.html#forgotten-reset-password"
         },
         "requestBody": {
           "description": "",
@@ -315,7 +315,7 @@
       "description": "All the routes related to the authentication",
       "externalDocs": {
         "description": "Find out more in strapi's documentation",
-        "url": "https://strapi.io/documentation/developer-docs/latest/development/plugins/users-permissions.html"
+        "url": "https://docs.strapi.io/developer-docs/latest/plugins/users-permissions.html"
       }
     },
     {

package/package.json

@@ -1,23 +1,32 @@
 {
   "name": "@strapi/plugin-users-permissions",
-  "version": "4.0.0-beta.2",
+  "version": "4.0.0-beta.20",
   "description": "Protect your API with a full-authentication process based on JWT",
-  "strapi": {
-    "displayName": "Roles & Permissions",
-    "name": "users-permissions",
-    "icon": "users",
-    "description": "users-permissions.plugin.description",
-    "required": true,
-    "kind": "plugin"
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/strapi/strapi.git"
+  },
+  "license": "SEE LICENSE IN LICENSE",
+  "author": {
+    "name": "Strapi Solutions SAS",
+    "email": "hi@strapi.io",
+    "url": "https://strapi.io"
   },
+  "maintainers": [
+    {
+      "name": "Strapi Solutions SAS",
+      "email": "hi@strapi.io",
+      "url": "https://strapi.io"
+    }
+  ],
   "scripts": {
     "test": "echo \"no tests yet\""
   },
   "dependencies": {
     "@purest/providers": "^1.0.2",
-    "@strapi/helper-plugin": "4.0.0-beta.2",
-    "@strapi/utils": "4.0.0-beta.2",
-    "bcryptjs": "^2.4.3",
+    "@strapi/helper-plugin": "4.0.0-beta.20",
+    "@strapi/utils": "4.0.0-beta.20",
+    "bcryptjs": "2.4.3",
     "grant-koa": "5.4.8",
     "jsonwebtoken": "^8.1.0",
     "koa2-ratelimit": "^0.9.0",
@@ -29,34 +38,24 @@
     "react-redux": "7.2.3",
     "react-router": "^5.2.0",
     "react-router-dom": "5.2.0",
-    "reactstrap": "8.4.1",
     "redux-saga": "^0.16.0",
     "request": "^2.83.0",
+    "url-join": "4.0.1",
     "uuid": "^3.1.0"
   },
   "devDependencies": {
     "koa": "^2.13.1"
   },
-  "author": {
-    "name": "Strapi team",
-    "email": "hi@strapi.io",
-    "url": "https://strapi.io"
-  },
-  "maintainers": [
-    {
-      "name": "Strapi team",
-      "email": "hi@strapi.io",
-      "url": "https://strapi.io"
-    }
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git://github.com/strapi/strapi.git"
-  },
   "engines": {
     "node": ">=12.x.x <=16.x.x",
     "npm": ">=6.0.0"
   },
-  "license": "SEE LICENSE IN LICENSE",
-  "gitHead": "020680cbb38b6281b3e16df264b9388a087b2b49"
+  "strapi": {
+    "displayName": "Roles & Permissions",
+    "name": "users-permissions",
+    "description": "Protect your API with a full authentication process based on JWT. This plugin comes also with an ACL strategy that allows you to manage the permissions between the groups of users.",
+    "required": true,
+    "kind": "plugin"
+  },
+  "gitHead": "b4993dab9f6dbc583709167f459b6f00e0b4baa6"
 }