@strapi/plugin-users-permissions 0.0.0-4fc90398602f

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

@@ -0,0 +1,244 @@
+import * as yup from 'yup';
+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',
+};
+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: [
+      [
+        {
+          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),
+    }),
+  },
+  providers: {
+    form: [
+      [
+        {
+          intlLabel: enabledLabel,
+          name: 'enabled',
+          type: 'bool',
+          description: enabledDescription,
+          size: 6,
+          validations: {
+            required: true,
+          },
+        },
+      ],
+      [
+        {
+          intlLabel: keyLabel,
+          name: 'key',
+          type: 'text',
+          placeholder: textPlaceholder,
+          size: 12,
+          validations: {
+            required: true,
+          },
+        },
+      ],
+      [
+        {
+          intlLabel: secretLabel,
+          name: 'secret',
+          type: 'text',
+          placeholder: textPlaceholder,
+          size: 12,
+          validations: {
+            required: true,
+          },
+        },
+      ],
+      [
+        {
+          intlLabel: callbackLabel,
+          placeholder: callbackPlaceholder,
+          name: 'callback',
+          type: 'text',
+          size: 12,
+          validations: {
+            required: true,
+          },
+        },
+      ],
+      [
+        {
+          intlLabel: hintLabel,
+          name: 'noName',
+          type: 'text',
+          validations: {},
+          size: 12,
+          disabled: true,
+        },
+      ],
+    ],
+    schema: yup.object().shape({
+      enabled: yup.bool().required(translatedErrors.required),
+      key: yup.string().when('enabled', {
+        is: true,
+        then: yup.string().required(translatedErrors.required),
+        otherwise: yup.string(),
+      }),
+      secret: yup.string().when('enabled', {
+        is: true,
+        then: yup.string().required(translatedErrors.required),
+        otherwise: yup.string(),
+      }),
+      callback: yup.string().when('enabled', {
+        is: true,
+        then: yup.string().required(translatedErrors.required),
+        otherwise: yup.string(),
+      }),
+    }),
+  },
+  providersWithSubdomain: {
+    form: [
+      [
+        {
+          intlLabel: enabledLabel,
+          name: 'enabled',
+          type: 'bool',
+          description: enabledDescription,
+          size: 6,
+          validations: {
+            required: true,
+          },
+        },
+      ],
+      [
+        {
+          intlLabel: keyLabel,
+          name: 'key',
+          type: 'text',
+          placeholder: textPlaceholder,
+          size: 12,
+          validations: {
+            required: true,
+          },
+        },
+      ],
+      [
+        {
+          intlLabel: secretLabel,
+          name: 'secret',
+          type: 'text',
+          placeholder: textPlaceholder,
+          size: 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,
+          },
+        },
+      ],
+      [
+        {
+          intlLabel: callbackLabel,
+          placeholder: callbackPlaceholder,
+          name: 'callback',
+          type: 'text',
+          size: 12,
+          validations: {
+            required: true,
+          },
+        },
+      ],
+      [
+        {
+          intlLabel: hintLabel,
+          name: 'noName',
+          type: 'text',
+          validations: {},
+          size: 12,
+          disabled: true,
+        },
+      ],
+    ],
+    schema: yup.object().shape({
+      enabled: yup.bool().required(translatedErrors.required),
+      key: yup.string().when('enabled', {
+        is: true,
+        then: yup.string().required(translatedErrors.required),
+        otherwise: yup.string(),
+      }),
+      secret: yup.string().when('enabled', {
+        is: true,
+        then: yup.string().required(translatedErrors.required),
+        otherwise: yup.string(),
+      }),
+      subdomain: yup.string().when('enabled', {
+        is: true,
+        then: yup.string().required(translatedErrors.required),
+        otherwise: yup.string(),
+      }),
+      callback: yup.string().when('enabled', {
+        is: true,
+        then: yup.string().required(translatedErrors.required),
+        otherwise: yup.string(),
+      }),
+    }),
+  },
+};
+
+export default forms;

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

@@ -0,0 +1,177 @@
+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 { Formik } from 'formik';
+import { useIntl } from 'react-intl';
+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 { usePlugins } from '../../../hooks';
+import schema from './utils/schema';
+import axiosInstance from '../../../utils/axiosInstance';
+
+const EditPage = () => {
+  const { formatMessage } = useIntl();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const toggleNotification = useNotification();
+  const { goBack } = useHistory();
+  const { lockApp, unlockApp } = useOverlayBlocker();
+  const { isLoading: isLoadingPlugins, permissions, routes } = usePlugins();
+  const { trackUsage } = useTracking();
+  const permissionsRef = useRef();
+
+  const handleCreateRoleSubmit = async (data) => {
+    // Set loading state
+    lockApp();
+    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 (
+    <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: 'global.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 spacing={7}>
+                <Box
+                  background="neutral0"
+                  hasRadius
+                  shadow="filterShadow"
+                  paddingTop={6}
+                  paddingBottom={6}
+                  paddingLeft={7}
+                  paddingRight={7}
+                >
+                  <Stack spacing={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: 'global.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: 'global.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 EditPage;

package/admin/src/pages/Roles/CreatePage/utils/schema.js

@@ -0,0 +1,9 @@
+import * as yup from 'yup';
+import { translatedErrors } from '@strapi/helper-plugin';
+
+const schema = yup.object().shape({
+  name: yup.string().required(translatedErrors.required),
+  description: yup.string().required(translatedErrors.required),
+});
+
+export default schema;

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

@@ -0,0 +1,190 @@
+import React, { useState, useRef } from 'react';
+import { Formik } from 'formik';
+import { useIntl } from 'react-intl';
+import { useRouteMatch } from 'react-router-dom';
+import {
+  useOverlayBlocker,
+  SettingsPageTitle,
+  LoadingIndicatorPage,
+  Form,
+  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 UsersPermissions from '../../../components/UsersPermissions';
+import getTrad from '../../../utils/getTrad';
+import pluginId from '../../../pluginId';
+import { usePlugins, useFetchRole } from '../../../hooks';
+import schema from './utils/schema';
+import axiosInstance from '../../../utils/axiosInstance';
+
+const EditPage = () => {
+  const { formatMessage } = useIntl();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const toggleNotification = useNotification();
+  const { lockApp, unlockApp } = useOverlayBlocker();
+  const {
+    params: { id },
+  } = useRouteMatch(`/settings/${pluginId}/roles/:id`);
+  const { isLoading: isLoadingPlugins, routes } = usePlugins();
+  const { role, onSubmitSucceeded, isLoading: isLoadingRole } = useFetchRole(id);
+  const permissionsRef = useRef();
+
+  const handleEditRoleSubmit = async (data) => {
+    // Set loading state
+    lockApp();
+    setIsSubmitting(true);
+    try {
+      const permissions = permissionsRef.current.getPermissions();
+      // Update role in Strapi
+      await axiosInstance.put(`/${pluginId}/roles/${id}`, { ...data, ...permissions, users: [] });
+      // Notify success
+      onSubmitSucceeded({ name: data.name, description: data.description });
+      toggleNotification({
+        type: 'success',
+        message: {
+          id: getTrad('Settings.roles.edited'),
+          defaultMessage: 'Role edited',
+        },
+      });
+    } catch (err) {
+      console.error(err);
+      toggleNotification({
+        type: 'warning',
+        message: {
+          id: 'notification.error',
+          defaultMessage: 'An error occurred',
+        },
+      });
+    }
+    // Unset loading state
+    setIsSubmitting(false);
+    unlockApp();
+  };
+
+  if (isLoadingRole) {
+    return <LoadingIndicatorPage />;
+  }
+
+  return (
+    <Main>
+      <SettingsPageTitle name="Roles" />
+      <Formik
+        enableReinitialize
+        initialValues={{ name: role.name, description: role.description }}
+        onSubmit={handleEditRoleSubmit}
+        validationSchema={schema}
+      >
+        {({ handleSubmit, values, handleChange, errors }) => (
+          <Form noValidate onSubmit={handleSubmit}>
+            <HeaderLayout
+              primaryAction={
+                !isLoadingPlugins && (
+                  <Button
+                    disabled={role.code === 'strapi-super-admin'}
+                    type="submit"
+                    loading={isSubmitting}
+                    startIcon={<Check />}
+                  >
+                    {formatMessage({
+                      id: 'global.save',
+                      defaultMessage: 'Save',
+                    })}
+                  </Button>
+                )
+              }
+              title={role.name}
+              subtitle={role.description}
+              navigationAction={
+                <Link startIcon={<ArrowLeft />} to="/settings/users-permissions/roles">
+                  {formatMessage({
+                    id: 'global.back',
+                    defaultMessage: 'Back',
+                  })}
+                </Link>
+              }
+            />
+            <ContentLayout>
+              <Stack spacing={7}>
+                <Box
+                  background="neutral0"
+                  hasRadius
+                  shadow="filterShadow"
+                  paddingTop={6}
+                  paddingBottom={6}
+                  paddingLeft={7}
+                  paddingRight={7}
+                >
+                  <Stack spacing={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: 'global.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: 'global.description',
+                            defaultMessage: 'Description',
+                          })}
+                          error={
+                            errors.description
+                              ? formatMessage({
+                                  id: errors.description,
+                                  defaultMessage: 'Invalid value',
+                                })
+                              : null
+                          }
+                        />
+                      </GridItem>
+                    </Grid>
+                  </Stack>
+                </Box>
+                {!isLoadingPlugins && (
+                  <UsersPermissions
+                    ref={permissionsRef}
+                    permissions={role.permissions}
+                    routes={routes}
+                  />
+                )}
+              </Stack>
+            </ContentLayout>
+          </Form>
+        )}
+      </Formik>
+    </Main>
+  );
+};
+
+export default EditPage;

package/admin/src/pages/Roles/EditPage/utils/schema.js

@@ -0,0 +1,9 @@
+import * as yup from 'yup';
+import { translatedErrors } from '@strapi/helper-plugin';
+
+const schema = yup.object().shape({
+  name: yup.string().required(translatedErrors.required),
+  description: yup.string().required(translatedErrors.required),
+});
+
+export default schema;