@strapi/plugin-users-permissions 0.0.0-next.e50ef5e2ea57ecf3da5bcf308508b51ee3c0deca → 0.0.0-next.e5b87a54008c9de2b3286a4774635dcf69895d9b

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)}

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

@@ -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/pages/AdvancedSettings/index.jsx

@@ -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

@@ -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/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/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 {
@@ -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 fallback=".." />}
+              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/index.jsx

@@ -153,107 +153,106 @@ export const RolesListPage = () => {
   }
 
   return (
-    <Layouts.Root>
+    <Page.Main>
       <Page.Title>
         {formatMessage(
           { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },
           { name: pageTitle }
         )}
       </Page.Title>
-      <Page.Main>
-        <Layouts.Header
-          title={formatMessage({
-            id: 'global.roles',
-            defaultMessage: 'Roles',
-          })}
-          subtitle={formatMessage({
-            id: 'Settings.roles.list.description',
-            defaultMessage: 'List of roles',
-          })}
-          primaryAction={
-            canCreate ? (
-              <LinkButton
-                to="new"
-                tag={NavLink}
-                onClick={() => trackUsage('willCreateRole')}
-                startIcon={<Plus />}
-                size="S"
-              >
-                {formatMessage({
-                  id: getTrad('List.button.roles'),
-                  defaultMessage: 'Add new role',
-                })}
-              </LinkButton>
-            ) : null
-          }
-        />
-
-        <Layouts.Action
-          startActions={
-            <SearchInput
-              label={formatMessage({
-                id: 'app.component.search.label',
-                defaultMessage: 'Search',
+      <Layouts.Header
+        title={formatMessage({
+          id: 'global.roles',
+          defaultMessage: 'Roles',
+        })}
+        subtitle={formatMessage({
+          id: 'Settings.roles.list.description',
+          defaultMessage: 'List of roles',
+        })}
+        primaryAction={
+          canCreate ? (
+            <LinkButton
+              to="new"
+              tag={NavLink}
+              onClick={() => trackUsage('willCreateRole')}
+              startIcon={<Plus />}
+              size="S"
+              fullWidth
+            >
+              {formatMessage({
+                id: getTrad('List.button.roles'),
+                defaultMessage: 'Add new role',
               })}
-            />
-          }
-        />
+            </LinkButton>
+          ) : null
+        }
+      />
+
+      <Layouts.Action
+        startActions={
+          <SearchInput
+            label={formatMessage({
+              id: 'app.component.search.label',
+              defaultMessage: 'Search',
+            })}
+          />
+        }
+      />
 
-        <Layouts.Content>
-          {!canRead && <Page.NoPermissions />}
-          {canRead && sortedRoles && sortedRoles?.length ? (
-            <Table colCount={colCount} rowCount={rowCount}>
-              <Thead>
-                <Tr>
-                  <Th>
-                    <Typography variant="sigma" textColor="neutral600">
-                      {formatMessage({ id: 'global.name', defaultMessage: 'Name' })}
-                    </Typography>
-                  </Th>
-                  <Th>
-                    <Typography variant="sigma" textColor="neutral600">
-                      {formatMessage({
-                        id: 'global.description',
-                        defaultMessage: 'Description',
-                      })}
-                    </Typography>
-                  </Th>
-                  <Th>
-                    <Typography variant="sigma" textColor="neutral600">
-                      {formatMessage({
-                        id: 'global.users',
-                        defaultMessage: 'Users',
-                      })}
-                    </Typography>
-                  </Th>
-                  <Th>
-                    <VisuallyHidden>
-                      {formatMessage({
-                        id: 'global.actions',
-                        defaultMessage: 'Actions',
-                      })}
-                    </VisuallyHidden>
-                  </Th>
-                </Tr>
-              </Thead>
-              <TableBody
-                sortedRoles={sortedRoles}
-                canDelete={canDelete}
-                canUpdate={canUpdate}
-                permissions={PERMISSIONS}
-                setRoleToDelete={setRoleToDelete}
-                onDelete={[showConfirmDelete, setShowConfirmDelete]}
-              />
-            </Table>
-          ) : (
-            <EmptyStateLayout content={formatMessage(emptyLayout[emptyContent])} />
-          )}
-        </Layouts.Content>
-        <Dialog.Root open={showConfirmDelete} onOpenChange={handleShowConfirmDelete}>
-          <ConfirmDialog onConfirm={handleConfirmDelete} />
-        </Dialog.Root>
-      </Page.Main>
-    </Layouts.Root>
+      <Layouts.Content>
+        {!canRead && <Page.NoPermissions />}
+        {canRead && sortedRoles && sortedRoles?.length ? (
+          <Table colCount={colCount} rowCount={rowCount}>
+            <Thead>
+              <Tr>
+                <Th>
+                  <Typography variant="sigma" textColor="neutral600">
+                    {formatMessage({ id: 'global.name', defaultMessage: 'Name' })}
+                  </Typography>
+                </Th>
+                <Th>
+                  <Typography variant="sigma" textColor="neutral600">
+                    {formatMessage({
+                      id: 'global.description',
+                      defaultMessage: 'Description',
+                    })}
+                  </Typography>
+                </Th>
+                <Th>
+                  <Typography variant="sigma" textColor="neutral600">
+                    {formatMessage({
+                      id: 'global.users',
+                      defaultMessage: 'Users',
+                    })}
+                  </Typography>
+                </Th>
+                <Th>
+                  <VisuallyHidden>
+                    {formatMessage({
+                      id: 'global.actions',
+                      defaultMessage: 'Actions',
+                    })}
+                  </VisuallyHidden>
+                </Th>
+              </Tr>
+            </Thead>
+            <TableBody
+              sortedRoles={sortedRoles}
+              canDelete={canDelete}
+              canUpdate={canUpdate}
+              permissions={PERMISSIONS}
+              setRoleToDelete={setRoleToDelete}
+              onDelete={[showConfirmDelete, setShowConfirmDelete]}
+            />
+          </Table>
+        ) : (
+          <EmptyStateLayout content={formatMessage(emptyLayout[emptyContent])} />
+        )}
+      </Layouts.Content>
+      <Dialog.Root open={showConfirmDelete} onOpenChange={handleShowConfirmDelete}>
+        <ConfirmDialog onConfirm={handleConfirmDelete} />
+      </Dialog.Root>
+    </Page.Main>
   );
 };
 

package/admin/src/translations/de.json

@@ -4,15 +4,25 @@
   "EditForm.inputSelect.label.role": "Standardrolle für authentifizierte Benutzer",
   "EditForm.inputToggle.description.email": "Verbiete das Anlegen verschiedener Accounts mit der gleichen E-Mail-Adresse bei unterschiedlichen Anmeldemethoden.",
   "EditForm.inputToggle.description.email-confirmation": "Wenn aktiviert (ON) erhalten neu registrierte Benutzer eine Bestätigungs-E-Mail.",
-  "EditForm.inputToggle.description.email-confirmation-redirection": "Nachdem Sie die E-Mail bestätigt haben, wähle wohin sie weitergeleitet wird.",
-  "EditForm.inputToggle.description.email-reset-password": "URL deiner Passwort-Zurücksetzen-Seite deiner Anwendung",
+  "EditForm.inputToggle.description.email-confirmation-redirection": "Wähle wohin weitergeleitet wird, wenn die die E-Mail bestätigt wurde.",
+  "EditForm.inputToggle.description.email-reset-password": "URL deiner Passwort-Zurücksetzen-Seite",
   "EditForm.inputToggle.description.sign-up": "Wenn deaktiviert (OFF), wird der Registrationsprozess unterbunden. Niemand kann sich mehr registrieren.",
   "EditForm.inputToggle.label.email": "Ein Account pro E-Mail-Adresse",
   "EditForm.inputToggle.label.email-confirmation": "Aktiviere E-Mail Benachrichtigungen",
   "EditForm.inputToggle.label.email-confirmation-redirection": "Weiterleitungs-URL",
   "EditForm.inputToggle.label.email-reset-password": "Passwort-Zurücksetzen-Seite",
   "EditForm.inputToggle.label.sign-up": "Registration ermöglichen",
+  "EditForm.inputToggle.placeholder.email-confirmation-redirection": "z.B.: https://example.com/email-bestaetigung-weiterleitung",
+  "EditForm.inputToggle.placeholder.email-reset-password": "z.B.: https://example.com/passwort-zuruecksetzen",
+  "EditPage.form.roles": "Rollen-Details",
+  "Email.template.data.loaded": "E-Mail-Vorlagen wurden geladen",
   "Email.template.email_confirmation": "Bestätigung der E-Mail-Addresse",
+  "Email.template.reset_password": "Passwort zurücksetzen",
+  "Email.template.form.edit.label": "Vorlage bearbeiten",
+  "Email.template.table.action.label": "Aktion",
+  "Email.template.table.icon.label": "Icon",
+  "Email.template.table.name.label": "Name",
+  "Form.advancedSettings.data.loaded": "Erweiterte Einstellungsdaten wurden geladen",
   "HeaderNav.link.advancedSettings": "Erweiterte Einstellungen",
   "HeaderNav.link.emailTemplates": "E-Mail-Templates",
   "HeaderNav.link.providers": "Methoden",
@@ -44,10 +54,25 @@
   "PopUpForm.Providers.subdomain.placeholder": "my.subdomain.com",
   "PopUpForm.header.edit.email-templates": "E-Mail-Templates bearbeiten",
   "PopUpForm.header.edit.providers": "Anbieter bearbeiten",
+  "Providers.data.loaded": "Anbieter wurden geladen",
+  "Providers.status": "Status",
+  "Roles.empty": "Du hast noch keine Rollen.",
+  "Roles.empty.search": "Keine Rollen entsprechen der Suche.",
   "Settings.roles.deleted": "Rolle gelöscht",
   "Settings.roles.edited": "Rolle bearbeitet",
   "Settings.section-label": "Nutzer- & Berechtigungen-Plugin",
+  "components.Input.error.validation.email": "Das ist keine gültige E-Mail-Adresse",
+  "components.Input.error.validation.json": "Das entspricht nicht dem JSON-Format",
+  "components.Input.error.validation.max": "Der Wert ist zu hoch.",
+  "components.Input.error.validation.maxLength": "Der Wert ist zu lang.",
+  "components.Input.error.validation.min": "Der Wert ist zu niedrig.",
+  "components.Input.error.validation.minLength": "Der Wert ist zu kurz.",
+  "components.Input.error.validation.minSupMax": "Kann nicht größer sein",
+  "components.Input.error.validation.regex": "Der Wert entspricht nicht dem regulären Ausdruck.",
+  "components.Input.error.validation.required": "Dieser Wert ist erforderlich.",
+  "components.Input.error.validation.unique": "Dieser Wert wird bereits verwendet.",
   "notification.success.submit": "Einstellungen aktualisiert",
+  "page.title": "Einstellungen - Rollen",
   "plugin.description.long": "Beschütze deine API mit einem vollständigen Authentifikationsprozess basierend auf JWT. Zudem bietet dieses Plugin eine ACL-Strategie, die erlaubt, die Berechtigungen für Benutzergruppen festzulegen.",
   "plugin.description.short": "Beschütze deine API mit einem vollständigen Authentifikationsprozess basierend auf JWT.",
   "plugin.name": "Nutzer- & Berechtigungen-Plugin",