@akemona-org/strapi-admin 3.7.0

package/admin/src/containers/ProfilePage/index.js

@@ -0,0 +1,170 @@
+import React, { useMemo } from 'react';
+import { BaselineAlignment, auth, Select, Option } from 'strapi-helper-plugin';
+import { Padded, Text } from '@buffetjs/core';
+import { Col } from 'reactstrap';
+import { get } from 'lodash';
+import { useIntl } from 'react-intl';
+import { languages, languageNativeNames } from '../../i18n';
+import ContainerFluid from '../../components/ContainerFluid';
+import PageTitle from '../../components/PageTitle';
+import SizedInput from '../../components/SizedInput';
+import { Header } from '../../components/Settings';
+import FormBloc from '../../components/FormBloc';
+import { useSettingsForm } from '../../hooks';
+import useChangeLanguage from '../LanguageProvider/hooks/useChangeLanguage';
+import ProfilePageLabel from './components';
+import { form, schema } from './utils';
+
+const ProfilePage = () => {
+  const changeLanguage = useChangeLanguage();
+  const { formatMessage } = useIntl();
+
+  const onSubmitSuccessCb = data => {
+    changeLanguage(data.preferedLanguage);
+    auth.setUserInfo(data);
+  };
+
+  const [
+    { formErrors, initialData, isLoading, modifiedData, showHeaderLoader, showHeaderButtonLoader },
+    // eslint-disable-next-line no-unused-vars
+    _,
+    { handleCancel, handleChange, handleSubmit, setField },
+  ] = useSettingsForm('/admin/users/me', schema, onSubmitSuccessCb, [
+    'email',
+    'firstname',
+    'lastname',
+    'username',
+    'preferedLanguage',
+  ]);
+
+  const headerLabel = useMemo(() => {
+    const userInfos = auth.getUserInfo();
+
+    if (modifiedData) {
+      return modifiedData.username || `${modifiedData.firstname} ${modifiedData.lastname}`;
+    }
+
+    return userInfos.username || `${userInfos.firstname} ${userInfos.lastname}`;
+  }, [modifiedData]);
+
+  return (
+    <>
+      <PageTitle title="User profile" />
+      <form onSubmit={handleSubmit}>
+        <ContainerFluid padding="18px 30px 0 30px">
+          <Header
+            isLoading={showHeaderLoader}
+            initialData={initialData}
+            label={headerLabel}
+            modifiedData={modifiedData}
+            onCancel={handleCancel}
+            showHeaderButtonLoader={showHeaderButtonLoader}
+          />
+          <BaselineAlignment top size="3px" />
+          {/* Experience block */}
+          <FormBloc
+            isLoading={isLoading}
+            title={formatMessage({ id: 'Settings.profile.form.section.profile.title' })}
+          >
+            {Object.keys(form).map(key => (
+              <SizedInput
+                {...form[key]}
+                key={key}
+                error={formErrors[key]}
+                name={key}
+                onChange={handleChange}
+                value={get(modifiedData, key, '')}
+              />
+            ))}
+          </FormBloc>
+          <BaselineAlignment top size="2px" />
+
+          {/* Password block */}
+          {!isLoading && (
+            <>
+              <Padded top size="md">
+                <FormBloc
+                  title={formatMessage({ id: 'Settings.profile.form.section.password.title' })}
+                >
+                  <SizedInput
+                    label="Auth.form.currentPassword.label"
+                    type="password"
+                    validations={{}}
+                    error={formErrors.currentPassword}
+                    name="currentPassword"
+                    onChange={handleChange}
+                    value={get(modifiedData, 'currentPassword', '')}
+                  />
+                  <Col size={6} />
+                  <SizedInput
+                    label="Auth.form.password.label"
+                    type="password"
+                    autoComplete="new-password"
+                    validations={{}}
+                    error={formErrors.password}
+                    name="password"
+                    onChange={handleChange}
+                    value={get(modifiedData, 'password', '')}
+                  />
+
+                  <SizedInput
+                    label="Auth.form.confirmPassword.label"
+                    type="password"
+                    validations={{}}
+                    error={formErrors.confirmPassword}
+                    name="confirmPassword"
+                    onChange={handleChange}
+                    value={get(modifiedData, 'confirmPassword', '')}
+                  />
+                </FormBloc>
+              </Padded>
+
+              <BaselineAlignment top size="13px" />
+
+              {/* Interface block */}
+              <Padded top size="smd">
+                <FormBloc
+                  title={formatMessage({ id: 'Settings.profile.form.section.experience.title' })}
+                >
+                  <ProfilePageLabel htmlFor="">
+                    {formatMessage({
+                      id: 'Settings.profile.form.section.experience.interfaceLanguage',
+                    })}
+                  </ProfilePageLabel>
+                  <Col xs="6">
+                    <Select
+                      aria-labelledby="interface-language"
+                      selectedValue={get(modifiedData, 'preferedLanguage')}
+                      onChange={nextLocaleCode => setField('preferedLanguage', nextLocaleCode)}
+                    >
+                      {languages.map(language => {
+                        const langName = languageNativeNames[language];
+
+                        return (
+                          <Option value={language} key={language}>
+                            {langName}
+                          </Option>
+                        );
+                      })}
+                    </Select>
+
+                    <Padded size="sm" top bottom>
+                      <Text color="grey">
+                        {formatMessage({
+                          id: 'Settings.profile.form.section.experience.interfaceLanguage.hint',
+                        })}
+                      </Text>
+                    </Padded>
+                  </Col>
+                </FormBloc>
+              </Padded>
+            </>
+          )}
+        </ContainerFluid>
+      </form>
+      <BaselineAlignment bottom size="80px" />
+    </>
+  );
+};
+
+export default ProfilePage;

package/admin/src/containers/ProfilePage/utils/form.js

@@ -0,0 +1,36 @@
+const form = {
+  firstname: {
+    autoFocus: true,
+    label: 'Settings.permissions.users.form.firstname',
+    placeholder: 'e.g. Kai',
+    type: 'text',
+    validations: {
+      required: true,
+    },
+  },
+  lastname: {
+    label: 'Settings.permissions.users.form.lastname',
+    placeholder: 'e.g. Doe',
+    type: 'text',
+    validations: {
+      required: true,
+    },
+  },
+  email: {
+    label: 'Settings.permissions.users.form.email',
+    placeholder: 'e.g. kai.doe@strapi.io',
+    type: 'email',
+    validations: {
+      required: true,
+    },
+  },
+  username: {
+    label: 'Auth.form.username.label',
+    placeholder: 'e.g. Kai_Doe',
+    type: 'text',
+    autoComplete: 'no',
+    validations: {},
+  },
+};
+
+export default form;

package/admin/src/containers/ProfilePage/utils/index.js

@@ -0,0 +1,2 @@
+export { default as form } from './form';
+export { default as schema } from './schema';

package/admin/src/containers/ProfilePage/utils/schema.js

@@ -0,0 +1,16 @@
+import * as yup from 'yup';
+import { translatedErrors } from 'strapi-helper-plugin';
+import { profileValidation } from '../../../validations/users';
+
+const schema = yup.object().shape({
+  ...profileValidation,
+  currentPassword: yup
+    .string()
+    .when(['password', 'confirmPassword'], (password, confirmPassword, passSchema) => {
+      return password || confirmPassword
+        ? passSchema.required(translatedErrors.required)
+        : passSchema;
+    }),
+});
+
+export default schema;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Redirect } from 'react-router-dom';
+
+const CreatePage = () => {
+  return <Redirect to="/404" />;
+};
+
+export default CreatePage;

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

@@ -0,0 +1,172 @@
+import React, { useState, useRef } from 'react';
+import { useRouteMatch } from 'react-router-dom';
+import get from 'lodash/get';
+import { BaselineAlignment, useGlobalContext, request } from 'strapi-helper-plugin';
+import { Header } from '@buffetjs/custom';
+import { Padded } from '@buffetjs/core';
+import { Formik } from 'formik';
+import { useIntl } from 'react-intl';
+import PageTitle from '../../../components/SettingsPageTitle';
+import ContainerFluid from '../../../components/ContainerFluid';
+import { Permissions, RoleForm } from '../../../components/Roles';
+import { useFetchRole, useFetchPermissionsLayout } from '../../../hooks';
+import schema from './utils/schema';
+
+const EditPage = () => {
+  const { formatMessage } = useIntl();
+  const { emitEvent, settingsBaseURL } = useGlobalContext();
+  const {
+    params: { id },
+  } = useRouteMatch(`${settingsBaseURL}/roles/:id`);
+  const [isSubmiting, setIsSubmiting] = useState(false);
+  const permissionsRef = useRef();
+
+  const { isLoading: isLayoutLoading, data: permissionsLayout } = useFetchPermissionsLayout(id);
+  const {
+    role,
+    permissions: rolePermissions,
+    isLoading: isRoleLoading,
+    onSubmitSucceeded,
+  } = useFetchRole(id);
+
+  /* eslint-disable indent */
+  const headerActions = (handleSubmit, handleReset) =>
+    isLayoutLoading && isRoleLoading
+      ? []
+      : [
+          {
+            label: formatMessage({
+              id: 'app.components.Button.reset',
+              defaultMessage: 'Reset',
+            }),
+            disabled: role.code === 'strapi-super-admin',
+            onClick: () => {
+              handleReset();
+              permissionsRef.current.resetForm();
+            },
+            color: 'cancel',
+            type: 'button',
+          },
+          {
+            label: formatMessage({
+              id: 'app.components.Button.save',
+              defaultMessage: 'Save',
+            }),
+            disabled: role.code === 'strapi-super-admin',
+            onClick: handleSubmit,
+            color: 'success',
+            type: 'submit',
+            isLoading: isSubmiting,
+          },
+        ];
+  /* eslint-enable indent */
+
+  const handleEditRoleSubmit = async data => {
+    try {
+      strapi.lockAppWithOverlay();
+      setIsSubmiting(true);
+
+      const { permissionsToSend, didUpdateConditions } = permissionsRef.current.getPermissions();
+
+      await request(`/admin/roles/${id}`, {
+        method: 'PUT',
+        body: data,
+      });
+
+      if (role.code !== 'strapi-super-admin') {
+        await request(`/admin/roles/${id}/permissions`, {
+          method: 'PUT',
+          body: {
+            permissions: permissionsToSend,
+          },
+        });
+
+        if (didUpdateConditions) {
+          emitEvent('didUpdateConditions');
+        }
+      }
+
+      permissionsRef.current.setFormAfterSubmit();
+      onSubmitSucceeded({ name: data.name, description: data.description });
+
+      strapi.notification.toggle({
+        type: 'success',
+        message: { id: 'notification.success.saved' },
+      });
+    } catch (err) {
+      console.error(err.response);
+
+      const errorMessage = get(err, 'response.payload.message', 'An error occured');
+      const message = get(err, 'response.payload.data.permissions[0]', errorMessage);
+
+      strapi.notification.toggle({
+        type: 'warning',
+        message,
+      });
+    } finally {
+      setIsSubmiting(false);
+      strapi.unlockApp();
+    }
+  };
+
+  const isFormDisabled = role.code === 'strapi-super-admin';
+
+  return (
+    <>
+      <PageTitle name="Roles" />
+      <Formik
+        enableReinitialize
+        initialValues={{
+          name: role.name,
+          description: role.description,
+        }}
+        onSubmit={handleEditRoleSubmit}
+        validationSchema={schema}
+        validateOnChange={false}
+      >
+        {({ handleSubmit, values, errors, handleReset, handleChange, handleBlur }) => (
+          <form onSubmit={handleSubmit}>
+            <ContainerFluid padding="0">
+              <Header
+                title={{
+                  label: formatMessage({
+                    id: 'Settings.roles.edit.title',
+                    defaultMessage: 'Edit a role',
+                  }),
+                }}
+                content={formatMessage({
+                  id: 'Settings.roles.create.description',
+                  defaultMessage: 'Define the rights given to the role',
+                })}
+                actions={headerActions(handleSubmit, handleReset)}
+                isLoading={isLayoutLoading || isRoleLoading}
+              />
+              <BaselineAlignment top size="3px" />
+              <RoleForm
+                isLoading={isRoleLoading}
+                disabled={isFormDisabled}
+                errors={errors}
+                values={values}
+                onChange={handleChange}
+                onBlur={handleBlur}
+                role={role}
+              />
+              {!isLayoutLoading && !isRoleLoading && (
+                <Padded top bottom size="md">
+                  <Permissions
+                    isFormDisabled={isFormDisabled}
+                    permissions={rolePermissions}
+                    ref={permissionsRef}
+                    layout={permissionsLayout}
+                  />
+                </Padded>
+              )}
+            </ContainerFluid>
+          </form>
+        )}
+      </Formik>
+    </>
+  );
+};
+
+export default EditPage;

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

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

package/admin/src/containers/Roles/ListPage/BaselineAlignment.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+// TODO : Temporary baseline alignment
+const BaselineAlignment = styled.div`
+  padding-top: 3px;
+`;
+
+export default BaselineAlignment;

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

@@ -0,0 +1,149 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { List, Header } from '@buffetjs/custom';
+import { Button } from '@buffetjs/core';
+import { Duplicate, Pencil, Plus } from '@buffetjs/icons';
+import matchSorter from 'match-sorter';
+import { useIntl } from 'react-intl';
+import { useHistory } from 'react-router-dom';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { ListButton, useGlobalContext, useQuery, useUserPermissions } from 'strapi-helper-plugin';
+import adminPermissions from '../../../permissions';
+import PageTitle from '../../../components/SettingsPageTitle';
+import { EmptyRole, RoleListWrapper, RoleRow } from '../../../components/Roles';
+import { useRolesList, useSettingsHeaderSearchContext } from '../../../hooks';
+import UpgradePlanModal from '../../../components/UpgradePlanModal';
+import BaselineAlignment from './BaselineAlignment';
+
+const RoleListPage = () => {
+  const { formatMessage } = useIntl();
+  const { push } = useHistory();
+  const [isOpen, setIsOpen] = useState(false);
+  const { emitEvent, settingsBaseURL } = useGlobalContext();
+  const { roles, isLoading } = useRolesList();
+  const { toggleHeaderSearch } = useSettingsHeaderSearchContext();
+  const {
+    allowedActions: { canUpdate },
+  } = useUserPermissions(adminPermissions.settings.roles);
+  const query = useQuery();
+  const _q = decodeURIComponent(query.get('_q') || '');
+  const results = matchSorter(roles, _q, { keys: ['name', 'description'] });
+
+  useEffect(() => {
+    toggleHeaderSearch({ id: 'Settings.permissions.menu.link.roles.label' });
+
+    return () => {
+      toggleHeaderSearch();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleGoTo = useCallback(
+    id => {
+      push(`${settingsBaseURL}/roles/${id}`);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [settingsBaseURL]
+  );
+
+  const handleToggle = useCallback(e => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsOpen(prev => !prev);
+  }, []);
+
+  const handleToggleModalForCreatingRole = useCallback(e => {
+    e.preventDefault();
+    e.stopPropagation();
+    emitEvent('didShowRBACUpgradeModal');
+
+    setIsOpen(true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const headerActions = [
+    {
+      label: formatMessage({
+        id: 'Settings.roles.list.button.add',
+        defaultMessage: 'Add new role',
+      }),
+      onClick: handleToggleModalForCreatingRole,
+      color: 'primary',
+      type: 'button',
+      icon: true,
+    },
+  ];
+
+  const resultsCount = results.length;
+
+  return (
+    <>
+      <PageTitle name="Roles" />
+      <Header
+        icon
+        title={{
+          label: formatMessage({
+            id: 'Settings.roles.title',
+            defaultMessage: 'roles',
+          }),
+        }}
+        content={formatMessage({
+          id: 'Settings.roles.list.description',
+          defaultMessage: 'List of roles',
+        })}
+        // Show a loader in the header while requesting data
+        isLoading={isLoading}
+        actions={headerActions}
+      />
+      <BaselineAlignment />
+      <RoleListWrapper>
+        <List
+          title={formatMessage(
+            {
+              id: `Settings.roles.list.title${results.length > 1 ? '.plural' : '.singular'}`,
+            },
+            { number: resultsCount }
+          )}
+          items={results}
+          isLoading={isLoading}
+          customRowComponent={role => (
+            <RoleRow
+              onClick={() => handleGoTo(role.id)}
+              canUpdate={canUpdate}
+              links={[
+                {
+                  icon: <Duplicate fill="#0e1622" />,
+                  onClick: handleToggle,
+                },
+                {
+                  icon: canUpdate ? <Pencil fill="#0e1622" /> : null,
+                  onClick: () => {
+                    handleGoTo(role.id);
+                  },
+                },
+                {
+                  icon: <FontAwesomeIcon icon="trash-alt" />,
+                  onClick: handleToggle,
+                },
+              ]}
+              role={role}
+            />
+          )}
+        />
+        {!resultsCount && !isLoading && <EmptyRole />}
+        <ListButton>
+          <Button
+            onClick={handleToggleModalForCreatingRole}
+            icon={<Plus fill="#007eff" width="11px" height="11px" />}
+            label={formatMessage({
+              id: 'Settings.roles.list.button.add',
+              defaultMessage: 'Add new role',
+            })}
+          />
+        </ListButton>
+      </RoleListWrapper>
+      <UpgradePlanModal isOpen={isOpen} onToggle={handleToggle} />
+    </>
+  );
+};
+
+export default RoleListPage;

package/admin/src/containers/Roles/ProtectedEditPage/index.js

@@ -0,0 +1,31 @@
+import React, { useMemo } from 'react';
+import { useUserPermissions, LoadingIndicatorPage } from 'strapi-helper-plugin';
+import { Redirect } from 'react-router-dom';
+import adminPermissions from '../../../permissions';
+import EditPage from '../EditPage';
+
+const ProtectedEditPage = () => {
+  const permissions = useMemo(() => {
+    return {
+      read: adminPermissions.settings.roles.read,
+      update: adminPermissions.settings.roles.update,
+    };
+  }, []);
+
+  const {
+    isLoading,
+    allowedActions: { canRead, canUpdate },
+  } = useUserPermissions(permissions);
+
+  if (isLoading) {
+    return <LoadingIndicatorPage />;
+  }
+
+  if (!canRead && !canUpdate) {
+    return <Redirect to="/" />;
+  }
+
+  return <EditPage />;
+};
+
+export default ProtectedEditPage;

package/admin/src/containers/Roles/ProtectedListPage/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { CheckPagePermissions } from 'strapi-helper-plugin';
+import adminPermissions from '../../../permissions';
+import ListPage from '../ListPage';
+
+const ProtectedListPage = () => (
+  <CheckPagePermissions permissions={adminPermissions.settings.roles.main}>
+    <ListPage />
+  </CheckPagePermissions>
+);
+
+export default ProtectedListPage;

package/admin/src/containers/SettingsHeaderSearchContextProvider/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import SettingsHeaderSearchContext from '../../contexts/SettingsHeaderSearchContext';
+
+const SettingsHeaderSearchContextProvider = ({ children, ...rest }) => {
+  return (
+    <SettingsHeaderSearchContext.Provider value={rest.value}>
+      {children}
+    </SettingsHeaderSearchContext.Provider>
+  );
+};
+
+SettingsHeaderSearchContextProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default SettingsHeaderSearchContextProvider;

package/admin/src/containers/SettingsPage/components/ApplicationDetailLink/Icon.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import styled from 'styled-components';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+const LeftMenuIcon = styled(({ ...props }) => <FontAwesomeIcon {...props} icon="circle" />)`
+  position: absolute;
+  top: calc(50% - 0.25rem);
+  left: 1.5rem;
+  font-size: 0.5rem;
+  color: ${props => props.theme.main.colors.leftMenu['link-color']};
+`;
+
+export default LeftMenuIcon;

package/admin/src/containers/SettingsPage/components/ApplicationDetailLink/Link.js

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+import { NavLink } from 'react-router-dom';
+
+const Link = styled(NavLink)`
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+  padding-left: 30px;
+  height: 34px;
+  border-radius: 2px;
+  &.active {
+    background-color: #e9eaeb;
+    > p {
+      font-weight: 600;
+    }
+    > svg {
+      color: #2d3138;
+    }
+  }
+  &:hover {
+    text-decoration: none;
+  }
+`;
+
+export default Link;