Created form layout

Signed-off-by: soupette <cyril.lpz@gmail.com>

packages/strapi-admin/admin/src/components/Users/ModalCreateBody/Padded.js

@@ -0,0 +1,31 @@
+// TODO DELETE THIS COMPONENT WHEN @buffetjs is READY
+
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+/* eslint-disable indent */
+
+const Padded = styled.div`
+  padding-top: ${({ theme, size, top }) => top && (theme.main.sizes.paddings[size] || size)};
+  padding-right: ${({ theme, size, right }) => right && (theme.main.sizes.paddings[size] || size)};
+  padding-bottom: ${({ theme, size, bottom }) =>
+    bottom && (theme.main.sizes.paddings[size] || size)};
+  padding-left: ${({ theme, size, left }) => left && (theme.main.sizes.paddings[size] || size)};
+`;
+
+Padded.defaultProps = {
+  bottom: false,
+  left: false,
+  right: false,
+  top: false,
+  size: 'sm',
+};
+
+Padded.propTypes = {
+  bottom: PropTypes.bool,
+  left: PropTypes.bool,
+  right: PropTypes.bool,
+  top: PropTypes.bool,
+  size: PropTypes.string,
+};
+
+export default Padded;

packages/strapi-admin/admin/src/components/Users/ModalCreateBody/Text.js

@@ -0,0 +1,40 @@
+// TODO DELETE THIS COMPONENT WHEN @buffetjs is READY
+
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+const Text = styled.p`
+  margin: 0;
+  line-height: ${({ lineHeight }) => lineHeight};
+  color: ${({ theme, color }) => theme.main.colors[color] || color};
+  font-size: ${({ theme, fontSize }) => theme.main.sizes.fonts[fontSize]};
+  font-weight: ${({ theme, fontWeight }) => theme.main.fontWeights[fontWeight]};
+  text-transform: ${({ textTransform }) => textTransform};
+  ${({ ellipsis }) =>
+  ellipsis &&
+    `
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  `}
+`;
+
+Text.defaultProps = {
+  color: 'greyDark',
+  ellipsis: false,
+  fontSize: 'md',
+  fontWeight: 'regular',
+  lineHeight: 'normal',
+  textTransform: 'none',
+};
+
+Text.propTypes = {
+  color: PropTypes.string,
+  ellipsis: PropTypes.bool,
+  fontSize: PropTypes.string,
+  fontWeight: PropTypes.string,
+  lineHeight: PropTypes.string,
+  textTransform: PropTypes.string,
+};
+
+export default Text;

packages/strapi-admin/admin/src/components/Users/ModalCreateBody/Wrapper.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+import { Container } from 'reactstrap';
+
+const Wrapper = styled(Container)`
+  padding: 0;
+`;
+
+Wrapper.defaultProps = {
+  fluid: true,
+};
+
+export default Wrapper;

packages/strapi-admin/admin/src/components/Users/ModalCreateBody/index.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ModalSection } from 'strapi-helper-plugin';
+import { FormattedMessage } from 'react-intl';
+import { Inputs } from '@buffetjs/custom';
+import { Col, Row } from 'reactstrap';
+import Padded from './Padded';
+import Text from './Text';
+import Wrapper from './Wrapper';
+import form from './utils/form';
+
+const ModalCreateBody = ({ onSubmit }) => {
+  return (
+    <form onSubmit={onSubmit}>
+      <ModalSection>
+        <Padded top size="18px">
+          <Text fontSize="xs" color="grey" fontWeight="bold" textTransform="uppercase">
+            <FormattedMessage id="app.components.Users.ModalCreateBody.block-title.details">
+              {txt => txt}
+            </FormattedMessage>
+          </Text>
+        </Padded>
+      </ModalSection>
+      <ModalSection>
+        <Wrapper>
+          <Padded top size="20px">
+            <Row>
+              {Object.keys(form).map(inputName => (
+                <Col xs="6" key={inputName}>
+                  <FormattedMessage id={form[inputName].label}>
+                    {label => <Inputs {...form[inputName]} label={label} name={inputName} />}
+                  </FormattedMessage>
+                </Col>
+              ))}
+            </Row>
+          </Padded>
+        </Wrapper>
+      </ModalSection>
+      <ModalSection>
+        <Padded top size="3px">
+          <Text fontSize="xs" color="grey" fontWeight="bold" textTransform="uppercase">
+            <FormattedMessage id="app.components.Users.ModalCreateBody.block-title.roles">
+              {txt => txt}
+            </FormattedMessage>
+          </Text>
+        </Padded>
+      </ModalSection>
+      <ModalSection>COMING SOON</ModalSection>
+      <button type="submit" style={{ display: 'none' }}>
+        hidden button to make to get the native form event
+      </button>
+    </form>
+  );
+};
+
+ModalCreateBody.defaultProps = {
+  onSubmit: e => e.preventDefault(),
+};
+
+ModalCreateBody.propTypes = {
+  onSubmit: PropTypes.func,
+};
+
+export default ModalCreateBody;

packages/strapi-admin/admin/src/components/Users/ModalCreateBody/utils/form.js

@@ -0,0 +1,28 @@
+const form = {
+  firstname: {
+    label: 'Settings.permissions.users.form.firstname',
+    placeholder: 'e.g. John',
+    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. john.doe@strapi.io',
+    type: 'email',
+    validations: {
+      required: true,
+    },
+  },
+};
+
+export default form;

packages/strapi-admin/admin/src/containers/Users/ListPage/Header.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useGlobalContext } from 'strapi-helper-plugin';
+import { Header as HeaderCompo } from '@buffetjs/custom';
+
+const Header = ({ count, onClickAddUser }) => {
+  const { formatMessage } = useGlobalContext();
+  const tradBaseId = 'Settings.permissions.users.listview.';
+  const headerDescriptionSuffix =
+    count > 1 ? 'header.description.plural' : 'header.description.singular';
+  const headerProps = {
+    actions: [
+      {
+        color: 'delete',
+        disabled: true,
+        label: formatMessage({ id: 'app.utils.delete' }),
+        type: 'button',
+      },
+
+      {
+        color: 'primary',
+        icon: true,
+        label: formatMessage({ id: 'Settings.permissions.users.create' }),
+        onClick: onClickAddUser,
+        type: 'button',
+      },
+    ],
+    content: formatMessage({ id: `${tradBaseId}${headerDescriptionSuffix}` }, { number: count }),
+    title: { label: formatMessage({ id: `${tradBaseId}header.title` }) },
+  };
+
+  return <HeaderCompo {...headerProps} />;
+};
+
+Header.defaultProps = {
+  count: 0,
+  onClickAddUser: () => {},
+};
+
+Header.propTypes = {
+  count: PropTypes.number,
+  onClickAddUser: PropTypes.func,
+};
+
+export default Header;

packages/strapi-admin/admin/src/containers/Users/ListPage/ModalForm.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal, ModalHeader } from 'strapi-helper-plugin';
+import ModalBody from '../../../components/Users/ModalCreateBody';
+
+const ModalForm = ({ isOpen, onClosed, onToggle }) => {
+  return (
+    <Modal isOpen={isOpen} onToggle={onToggle} onClosed={onClosed}>
+      <ModalHeader headerBreadcrumbs={['Settings.permissions.users.add-new']} />
+      <ModalBody />
+    </Modal>
+  );
+};
+
+ModalForm.defaultProps = {
+  onClosed: () => {},
+};
+
+ModalForm.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onClosed: PropTypes.func,
+  onToggle: PropTypes.func.isRequired,
+};
+
+export default ModalForm;

packages/strapi-admin/admin/src/containers/Users/ListPage/index.js

@@ -1,40 +1,17 @@
-import React from 'react';
-import { useGlobalContext } from 'strapi-helper-plugin';
-import { Header } from '@buffetjs/custom';
+import React, { useState } from 'react';
+import Header from './Header';
+import ModalForm from './ModalForm';
 
 const ListPage = () => {
+  const [isModalOpened, setIsModalOpened] = useState(false);
   // TODO when API ready
   const usersCount = 1;
-  const { formatMessage } = useGlobalContext();
-  const tradBaseId = 'Settings.permissions.users.listview.';
-  const headerDescriptionSuffix =
-    usersCount > 1 ? 'header.description.plural' : 'header.description.singular';
-  const headerProps = {
-    actions: [
-      {
-        label: formatMessage({ id: 'app.utils.delete' }),
-        color: 'delete',
-        type: 'button',
-        disabled: true,
-      },
-
-      {
-        label: formatMessage({ id: `${tradBaseId}button-create` }),
-        color: 'primary',
-        type: 'button',
-        icon: true,
-      },
-    ],
-    content: formatMessage(
-      { id: `${tradBaseId}${headerDescriptionSuffix}` },
-      { number: usersCount }
-    ),
-    title: { label: formatMessage({ id: `${tradBaseId}header.title` }) },
-  };
+  const handleToggle = () => setIsModalOpened(prev => !prev);
 
   return (
     <div>
-      <Header {...headerProps} />
+      <Header count={usersCount} onClickAddUser={handleToggle} />
+      <ModalForm isOpen={isModalOpened} onToggle={handleToggle} />
     </div>
   );
 };

packages/strapi-admin/admin/src/translations/en.json

@@ -113,7 +113,8 @@
   "app.components.ListPluginsPage.deletePlugin.title": "Uninstalling",
   "app.components.ListPluginsPage.deletePlugin.description": "It might take a few seconds to uninstall the plugin.",
   "app.components.listPluginsPage.deletePlugin.error": "An error occurred while uninstalling the plugin",
-
+  "app.components.Users.ModalCreateBody.block-title.details": "Details",
+  "app.components.Users.ModalCreateBody.block-title.roles": "User's roles",
   "app.links.configure-view": "Configure the view",
 
   "app.utils.SelectOption.defaultMessage": " ",
@@ -243,9 +244,13 @@
   "Settings.error": "Error",
   "Settings.permissions.menu.link.roles.label": "Roles",
   "Settings.permissions.menu.link.users.label": "Users",
-  "Settings.permissions.users.listview.button-create": "Create new User",
+  "Settings.permissions.users.add-new": "Add new user",
+  "Settings.permissions.users.create": "Create new User",
+  "Settings.permissions.users.form.email": "Email",
+  "Settings.permissions.users.form.firstname": "First name",
+  "Settings.permissions.users.form.lastname": "Last name",
   "Settings.permissions.users.listview.header.title": "Users",
-  "Settings.permissions.users.listview.header.description.singular": "0 user found",
+  "Settings.permissions.users.listview.header.description.singular": "0 users found",
   "Settings.permissions.users.listview.header.description.plural": "{number} users found",
   "Settings.webhooks.title": "Webhooks",
   "Settings.webhooks.singular": "webhook",

packages/strapi-helper-plugin/lib/src/components/ModalHeader/index.js

@@ -13,7 +13,7 @@ const ModalHeader = ({ headerBreadcrumbs, onClickGoBack, withBackButton, HeaderC
   const translatedHeaders = headerBreadcrumbs
     ? headerBreadcrumbs.map(headerTrad => ({
         key: headerTrad,
-        element: <FormattedMessage id={headerTrad} />,
+        element: <FormattedMessage id={headerTrad} defaultMessage={headerTrad} />,
       }))
     : null;
   /* eslint-enable indent */