@strapi/plugin-users-permissions 4.0.0-next.6 → 4.0.0

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

@@ -3,20 +3,56 @@ import { translatedErrors } from '@strapi/helper-plugin';
 
 import { getTrad } from '../../../utils';
 
+const callbackLabel = {
+  id: getTrad('PopUpForm.Providers.redirectURL.front-end.label'),
+  defaultMessage: 'The redirect URL to your front-end app',
+};
+const callbackPlaceholder = {
+  id: 'http://www.client-app.com',
+  defaultMessage: 'http://www.client-app.com',
+};
+const enabledDescription = {
+  id: getTrad('PopUpForm.Providers.enabled.description'),
+  defaultMessage: "If disabled, users won't be able to use this provider.",
+};
+const enabledLabel = {
+  id: getTrad('PopUpForm.Providers.enabled.label'),
+  defaultMessage: 'Enable',
+};
+const keyLabel = { id: getTrad('PopUpForm.Providers.key.label'), defaultMessage: 'Client ID' };
+const hintLabel = {
+  id: getTrad('PopUpForm.Providers.redirectURL.label'),
+  defaultMessage: 'The redirect URL to add in your {provider} application configurations',
+  values: {
+    provider: 'VK',
+  },
+};
+const textPlaceholder = {
+  id: getTrad('PopUpForm.Providers.key.placeholder'),
+  defaultMessage: 'TEXT',
+};
+
+const secretLabel = {
+  id: getTrad('PopUpForm.Providers.secret.label'),
+  defaultMessage: 'Client Secret',
+};
+
 const forms = {
   email: {
     form: [
-      {
-        autoFocus: true,
-        label: getTrad('PopUpForm.Providers.enabled.label'),
-        name: 'enabled',
-        type: 'bool',
-        description: getTrad('PopUpForm.Providers.enabled.description'),
-        size: { xs: 6 },
-        validations: {
-          required: true,
+      [
+        {
+          intlLabel: enabledLabel,
+          name: 'enabled',
+          type: 'bool',
+          description: enabledDescription,
+          size: 6,
+          // TODO check if still needed
+          // validations: {
+          //   required: true,
+          // },
         },
-      },
+      ],
     ],
     schema: yup.object().shape({
       enabled: yup.bool().required(translatedErrors.required),
@@ -24,65 +60,64 @@ const forms = {
   },
   providers: {
     form: [
-      {
-        autoFocus: true,
-        label: getTrad('PopUpForm.Providers.enabled.label'),
-        name: 'enabled',
-        type: 'bool',
-        description: getTrad('PopUpForm.Providers.enabled.description'),
-        size: { xs: 6 },
-        validations: {
-          required: true,
-        },
-      },
-      {
-        autoFocus: false,
-        label: getTrad('PopUpForm.Providers.key.label'),
-        name: 'key',
-        type: 'text',
-        placeholder: getTrad('PopUpForm.Providers.key.placeholder'),
-        size: { xs: 12 },
-        validations: {
-          required: true,
+      [
+        {
+          intlLabel: enabledLabel,
+          name: 'enabled',
+          type: 'bool',
+          description: enabledDescription,
+          size: 6,
+          validations: {
+            required: true,
+          },
         },
-      },
-      {
-        autoFocus: false,
-        label: getTrad('PopUpForm.Providers.secret.label'),
-        name: 'secret',
-        type: 'text',
-        placeholder: getTrad('PopUpForm.Providers.secret.placeholder'),
-        size: { xs: 12 },
-        validations: {
-          required: true,
+      ],
+      [
+        {
+          intlLabel: keyLabel,
+          name: 'key',
+          type: 'text',
+          placeholder: textPlaceholder,
+          size: 12,
+          validations: {
+            required: true,
+          },
         },
-      },
-      {
-        autoFocus: false,
-        label: getTrad('PopUpForm.Providers.redirectURL.front-end.label'),
-        placeholder: 'http://www.client-app.com',
-        name: 'callback',
-        type: 'text',
-        size: { xs: 12 },
-        validations: {
-          required: true,
+      ],
+      [
+        {
+          intlLabel: secretLabel,
+          name: 'secret',
+          type: 'text',
+          placeholder: textPlaceholder,
+          size: 12,
+          validations: {
+            required: true,
+          },
         },
-      },
-      {
-        label: {
-          id: getTrad('PopUpForm.Providers.redirectURL.label'),
-          params: {
-            provider: 'VK',
+      ],
+      [
+        {
+          intlLabel: callbackLabel,
+          placeholder: callbackPlaceholder,
+          name: 'callback',
+          type: 'text',
+          size: 12,
+          validations: {
+            required: true,
           },
         },
-        name: 'noName',
-        type: 'text',
-        validations: {},
-        size: {
-          xs: 12,
+      ],
+      [
+        {
+          intlLabel: hintLabel,
+          name: 'noName',
+          type: 'text',
+          validations: {},
+          size: 12,
+          disabled: true,
         },
-        disabled: true,
-      },
+      ],
     ],
     schema: yup.object().shape({
       enabled: yup.bool().required(translatedErrors.required),
@@ -105,76 +140,83 @@ const forms = {
   },
   providersWithSubdomain: {
     form: [
-      {
-        autoFocus: true,
-        label: getTrad('PopUpForm.Providers.enabled.label'),
-        name: 'enabled',
-        type: 'bool',
-        description: getTrad('PopUpForm.Providers.enabled.description'),
-        size: { xs: 6 },
-        validations: {
-          required: true,
-        },
-      },
-      {
-        autoFocus: false,
-        label: getTrad('PopUpForm.Providers.key.label'),
-        name: 'key',
-        type: 'text',
-        placeholder: getTrad('PopUpForm.Providers.key.placeholder'),
-        size: { xs: 12 },
-        validations: {
-          required: true,
+      [
+        {
+          intlLabel: enabledLabel,
+          name: 'enabled',
+          type: 'bool',
+          description: enabledDescription,
+          size: 6,
+          validations: {
+            required: true,
+          },
         },
-      },
-      {
-        autoFocus: false,
-        label: getTrad('PopUpForm.Providers.secret.label'),
-        name: 'secret',
-        type: 'text',
-        placeholder: getTrad('PopUpForm.Providers.secret.placeholder'),
-        size: { xs: 12 },
-        validations: {
-          required: true,
+      ],
+      [
+        {
+          intlLabel: keyLabel,
+          name: 'key',
+          type: 'text',
+          placeholder: textPlaceholder,
+          size: 12,
+          validations: {
+            required: true,
+          },
         },
-      },
-      {
-        autoFocus: false,
-        label: getTrad('PopUpForm.Providers.subdomain.label'),
-        name: 'subdomain',
-        type: 'text',
-        placeholder: getTrad('PopUpForm.Providers.subdomain.placeholder'),
-        size: { xs: 12 },
-        validations: {
-          required: true,
+      ],
+      [
+        {
+          intlLabel: secretLabel,
+          name: 'secret',
+          type: 'text',
+          placeholder: textPlaceholder,
+          size: 12,
+          validations: {
+            required: true,
+          },
         },
-      },
-      {
-        autoFocus: false,
-        label: getTrad('PopUpForm.Providers.redirectURL.front-end.label'),
-        placeholder: 'http://www.client-app.com',
-        name: 'callback',
-        type: 'text',
-        size: { xs: 12 },
-        validations: {
-          required: true,
+      ],
+
+      [
+        {
+          intlLabel: {
+            id: getTrad('PopUpForm.Providers.subdomain.label'),
+            defaultMessage: 'Host URI (Subdomain)',
+          },
+          name: 'subdomain',
+          type: 'text',
+          placeholder: {
+            id: getTrad('PopUpForm.Providers.subdomain.placeholder'),
+            defaultMessage: 'my.subdomain.com',
+          },
+          size: 12,
+          validations: {
+            required: true,
+          },
         },
-      },
-      {
-        label: {
-          id: getTrad('PopUpForm.Providers.redirectURL.label'),
-          params: {
-            provider: 'VK',
+      ],
+      [
+        {
+          intlLabel: callbackLabel,
+          placeholder: callbackPlaceholder,
+          name: 'callback',
+          type: 'text',
+          size: 12,
+          validations: {
+            required: true,
           },
         },
-        name: 'noName',
-        type: 'text',
-        validations: {},
-        size: {
-          xs: 12,
+      ],
+      [
+        {
+          intlLabel: hintLabel,
+          name: 'noName',
+          type: 'text',
+          validations: {},
+          size: 12,
+          disabled: true,
         },
-        disabled: true,
-      },
+      ],
     ],
     schema: yup.object().shape({
       enabled: yup.bool().required(translatedErrors.required),

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

@@ -1,169 +1,177 @@
 import React, { useState, useRef } from 'react';
 import { useHistory } from 'react-router-dom';
-import { Header } from '@buffetjs/custom';
-import { Padded } from '@buffetjs/core';
+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 { request, useTracking, useNotification, useOverlayBlocker } from '@strapi/helper-plugin';
-import BaselineAlignement from '../../../components/BaselineAlignement';
-import ContainerFluid from '../../../components/ContainerFluid';
-import FormCard from '../../../components/FormBloc';
-import SizedInput from '../../../components/SizedInput';
+import {
+  useOverlayBlocker,
+  SettingsPageTitle,
+  useTracking,
+  Form,
+  useNotification,
+} from '@strapi/helper-plugin';
+import UsersPermissions from '../../../components/UsersPermissions';
 import getTrad from '../../../utils/getTrad';
 import pluginId from '../../../pluginId';
-import UsersPermissions from '../../../components/UsersPermissions';
 import { usePlugins } from '../../../hooks';
 import schema from './utils/schema';
+import axiosInstance from '../../../utils/axiosInstance';
 
-const CreatePage = () => {
+const EditPage = () => {
   const { formatMessage } = useIntl();
-  const { trackUsage } = useTracking();
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const toggleNotification = useNotification();
-  const { lockApp, unlockApp } = useOverlayBlocker();
   const { goBack } = useHistory();
-  const [isSubmiting, setIsSubmiting] = useState(false);
-  const { permissions, routes, policies, isLoading } = usePlugins();
+  const { lockApp, unlockApp } = useOverlayBlocker();
+  const { isLoading: isLoadingPlugins, permissions, routes } = usePlugins();
+  const { trackUsage } = useTracking();
   const permissionsRef = useRef();
 
-  const headerActions = (handleSubmit, handleReset) => {
-    if (isLoading) {
-      return [];
-    }
-
-    return [
-      {
-        label: formatMessage({
-          id: 'app.components.Button.reset',
-          defaultMessage: 'Reset',
-        }),
-        onClick: () => {
-          handleReset();
-          permissionsRef.current.resetForm();
-        },
-        color: 'cancel',
-        type: 'button',
-      },
-      {
-        label: formatMessage({
-          id: getTrad('app.components.Button.save'),
-          defaultMessage: 'Save',
-        }),
-        onClick: handleSubmit,
-        color: 'success',
-        type: 'submit',
-        isLoading: isSubmiting,
-      },
-    ];
-  };
-
-  const handleCreateRoleSubmit = data => {
+  const handleCreateRoleSubmit = async data => {
+    // Set loading state
     lockApp();
-    setIsSubmiting(true);
-
-    const permissions = permissionsRef.current.getPermissions();
-
-    Promise.resolve(
-      request(`/${pluginId}/roles`, {
-        method: 'POST',
-        body: { ...data, ...permissions, users: [] },
-      })
-    )
-      .then(() => {
-        trackUsage('didCreateRole');
-        toggleNotification({
-          type: 'success',
-          message: { id: 'Settings.roles.created' },
-        });
-        // Forcing redirecting since we don't have the id in the response
-        // TODO
-        goBack();
-      })
-      .catch(err => {
-        console.error(err);
-        toggleNotification({
-          type: 'warning',
-          message: { id: 'notification.error' },
-        });
-      })
-      .finally(() => {
-        setIsSubmiting(false);
-        unlockApp();
+    setIsSubmitting(true);
+    try {
+      const permissions = permissionsRef.current.getPermissions();
+      // Update role in Strapi
+      await axiosInstance.post(`/${pluginId}/roles`, { ...data, ...permissions, users: [] });
+      // Notify success
+      trackUsage('didCreateRole');
+      toggleNotification({
+        type: 'success',
+        message: {
+          id: getTrad('Settings.roles.created'),
+          defaultMessage: 'Role created',
+        },
+      });
+      // Forcing redirecting since we don't have the id in the response
+      goBack();
+    } catch (err) {
+      console.error(err);
+      toggleNotification({
+        type: 'warning',
+        message: {
+          id: 'notification.error',
+          defaultMessage: 'An error occurred',
+        },
       });
+    }
+    // Unset loading state
+    setIsSubmitting(false);
+    unlockApp();
   };
 
   return (
-    <Formik
-      initialValues={{ name: '', description: '' }}
-      onSubmit={handleCreateRoleSubmit}
-      validationSchema={schema}
-    >
-      {({ handleSubmit, values, errors, handleReset, handleChange, handleBlur, touched }) => {
-        return (
-          <form onSubmit={handleSubmit}>
-            <ContainerFluid padding="0">
-              <Header
-                title={{
-                  label: formatMessage({
-                    id: getTrad('Settings.roles.create.title'),
-                    defaultMessage: 'Create a role',
-                  }),
-                }}
-                content={formatMessage({
-                  id: getTrad('Settings.roles.create.description'),
-                  defaultMessage: 'Define the rights given to the role',
-                })}
-                actions={headerActions(handleSubmit, handleReset)}
-                isLoading={isLoading}
-              />
-              <BaselineAlignement top size="3px" />
-              <FormCard
-                isLoading={isLoading}
-                title={formatMessage({
-                  id: getTrad('EditPage.form.roles'),
-                  defaultMessage: 'Role details',
-                })}
-              >
-                <SizedInput
-                  label="Settings.roles.form.input.name"
-                  defaultMessage="Name"
-                  name="name"
-                  type="text"
-                  error={errors.name && touched.name ? { id: errors.name } : null}
-                  onBlur={handleBlur}
-                  value={values.name}
-                  onChange={handleChange}
-                />
-                <SizedInput
-                  label="Settings.roles.form.input.description"
-                  defaultMessage="Description"
-                  name="description"
-                  type="textarea"
-                  error={
-                    errors.description && touched.description ? { id: errors.description } : null
-                  }
-                  onBlur={handleBlur}
-                  value={values.description}
-                  onChange={handleChange}
-                  // Override the default height of the textarea
-                  style={{ height: 115 }}
-                />
-              </FormCard>
-            </ContainerFluid>
-            <div style={{ paddingTop: '1.8rem' }} />
-            {!isLoading && (
-              <UsersPermissions
-                ref={permissionsRef}
-                permissions={permissions}
-                routes={routes}
-                policies={policies}
-              />
-            )}
-            <Padded top size="md" />
-          </form>
-        );
-      }}
-    </Formik>
+    <Main>
+      <SettingsPageTitle name="Roles" />
+      <Formik
+        enableReinitialize
+        initialValues={{ name: '', description: '' }}
+        onSubmit={handleCreateRoleSubmit}
+        validationSchema={schema}
+      >
+        {({ handleSubmit, values, handleChange, errors }) => (
+          <Form noValidate onSubmit={handleSubmit}>
+            <HeaderLayout
+              primaryAction={
+                !isLoadingPlugins && (
+                  <Button type="submit" loading={isSubmitting} startIcon={<Check />}>
+                    {formatMessage({
+                      id: 'app.components.Button.save',
+                      defaultMessage: 'Save',
+                    })}
+                  </Button>
+                )
+              }
+              title={formatMessage({
+                id: 'Settings.roles.create.title',
+                defaultMessage: 'Create a role',
+              })}
+              subtitle={formatMessage({
+                id: 'Settings.roles.create.description',
+                defaultMessage: 'Define the rights given to the role',
+              })}
+            />
+            <ContentLayout>
+              <Stack size={7}>
+                <Box
+                  background="neutral0"
+                  hasRadius
+                  shadow="filterShadow"
+                  paddingTop={6}
+                  paddingBottom={6}
+                  paddingLeft={7}
+                  paddingRight={7}
+                >
+                  <Stack size={4}>
+                    <Typography variant="delta" as="h2">
+                      {formatMessage({
+                        id: getTrad('EditPage.form.roles'),
+                        defaultMessage: 'Role details',
+                      })}
+                    </Typography>
+                    <Grid gap={4}>
+                      <GridItem col={6}>
+                        <TextInput
+                          name="name"
+                          value={values.name || ''}
+                          onChange={handleChange}
+                          label={formatMessage({
+                            id: 'Settings.roles.form.input.name',
+                            defaultMessage: 'Name',
+                          })}
+                          error={
+                            errors.name
+                              ? formatMessage({ id: errors.name, defaultMessage: 'Invalid value' })
+                              : null
+                          }
+                        />
+                      </GridItem>
+                      <GridItem col={6}>
+                        <Textarea
+                          name="description"
+                          value={values.description || ''}
+                          onChange={handleChange}
+                          label={formatMessage({
+                            id: 'Settings.roles.form.input.description',
+                            defaultMessage: 'Description',
+                          })}
+                          error={
+                            errors.description
+                              ? formatMessage({
+                                  id: errors.description,
+                                  defaultMessage: 'Invalid value',
+                                })
+                              : null
+                          }
+                        />
+                      </GridItem>
+                    </Grid>
+                  </Stack>
+                </Box>
+                {!isLoadingPlugins && (
+                  <UsersPermissions
+                    ref={permissionsRef}
+                    permissions={permissions}
+                    routes={routes}
+                  />
+                )}
+              </Stack>
+            </ContentLayout>
+          </Form>
+        )}
+      </Formik>
+    </Main>
   );
 };
 
-export default CreatePage;
+export default EditPage;