diff --git a/packages/strapi-admin/admin/src/components/FormBloc/index.js b/packages/strapi-admin/admin/src/components/FormBloc/index.js index a7945359c0..6da582494a 100644 --- a/packages/strapi-admin/admin/src/components/FormBloc/index.js +++ b/packages/strapi-admin/admin/src/components/FormBloc/index.js @@ -1,13 +1,13 @@ import React from 'react'; -import { Padded } from '@buffetjs/core'; +import { Padded, Text } from '@buffetjs/core'; import { LoadingIndicator, Row } from 'strapi-helper-plugin'; import PropTypes from 'prop-types'; import BaselineAlignement from '../BaselineAlignement'; import Bloc from '../Bloc'; -const FormBloc = ({ children, isLoading }) => ( +const FormBloc = ({ children, isLoading, title }) => ( - + {isLoading ? ( <> @@ -15,7 +15,21 @@ const FormBloc = ({ children, isLoading }) => ( ) : ( - {children} + <> + {title && ( + <> + + + + {title} + + + + + + )} + {children} + )} @@ -23,11 +37,13 @@ const FormBloc = ({ children, isLoading }) => ( FormBloc.defaultProps = { isLoading: false, + title: null, }; FormBloc.propTypes = { children: PropTypes.node.isRequired, isLoading: PropTypes.bool, + title: PropTypes.string, }; export default FormBloc; diff --git a/packages/strapi-admin/admin/src/components/Users/SelectRoles/index.js b/packages/strapi-admin/admin/src/components/Users/SelectRoles/index.js index e3225892b4..332353f2f1 100644 --- a/packages/strapi-admin/admin/src/components/Users/SelectRoles/index.js +++ b/packages/strapi-admin/admin/src/components/Users/SelectRoles/index.js @@ -13,7 +13,7 @@ import MultiValueContainer from './MultiValueContainer'; const SelectRoles = ({ error, isDisabled, name, onChange, value }) => { const [options, setOptions] = useState([]); const { formatMessage } = useGlobalContext(); - const translatedError = error ? formatMessage(error) : null; + const translatedError = error && error.id ? formatMessage(error) : null; useEffect(() => { // TODO diff --git a/packages/strapi-admin/admin/src/containers/Users/EditPage/index.js b/packages/strapi-admin/admin/src/containers/Users/EditPage/index.js index 58b100bdfd..d57f486df3 100644 --- a/packages/strapi-admin/admin/src/containers/Users/EditPage/index.js +++ b/packages/strapi-admin/admin/src/containers/Users/EditPage/index.js @@ -1,22 +1,33 @@ -import React, { useReducer } from 'react'; +import React, { useEffect, useReducer } from 'react'; import { useRouteMatch } from 'react-router-dom'; import { useIntl } from 'react-intl'; +import { get } from 'lodash'; import { - // BackHeader, // LoadingIndicator, - // Row, // auth, // request, useGlobalContext, } from 'strapi-helper-plugin'; +import { Col } from 'reactstrap'; +import { Padded } from '@buffetjs/core'; +import BaselineAlignement from '../../../components/BaselineAlignement'; import ContainerFluid from '../../../components/ContainerFluid'; +import FormBloc from '../../../components/FormBloc'; +import SizedInput from '../../../components/SizedInput'; import Header from '../../../components/Users/Header'; +import SelectRoles from '../../../components/Users/SelectRoles'; +import form from './utils/form'; +import fakeData from './utils/tempData'; import { initialState, reducer } from './reducer'; import init from './init'; const EditPage = () => { const { settingsBaseURL } = useGlobalContext(); - const [{ isLoading }, dispatch] = useReducer(reducer, initialState, init); + const [{ formErrors, isLoading, modifiedData }, dispatch] = useReducer( + reducer, + initialState, + init + ); const { formatMessage } = useIntl(); const { params: { id }, @@ -25,12 +36,40 @@ const EditPage = () => { ? 'app.containers.Users.EditPage.header.label-loading' : 'app.containers.Users.EditPage.header.label'; const headerLabel = formatMessage({ id: headerLabelId }, { name: 'soup' }); - console.log({ dispatch, id }); + + useEffect(() => { + const getData = () => { + return new Promise(resolve => { + setTimeout(() => { + dispatch({ + type: 'GET_DATA_SUCCEEDED', + data: fakeData, + }); + + resolve(); + }, 1000); + }); + }; + + getData(); + }, []); + console.log({ id }); + + const handleChange = ({ target: { name, value, type: inputType } }) => { + dispatch({ + type: 'ON_CHANGE', + inputType, + keys: name, + value, + }); + }; const handleSubmit = e => { e.preventDefault(); }; + console.log({ modifiedData }); + return ( <>
@@ -42,6 +81,45 @@ const EditPage = () => { modifiedData={{}} onCancel={() => {}} /> + + + {Object.keys(form).map(key => { + return ( + + ); + })} + + + {!isLoading && ( + + + + + {/* TODO fix padding for error */} + + + + + )} diff --git a/packages/strapi-admin/admin/src/containers/Users/EditPage/reducer.js b/packages/strapi-admin/admin/src/containers/Users/EditPage/reducer.js index 4305af2414..ea6ecabbbc 100644 --- a/packages/strapi-admin/admin/src/containers/Users/EditPage/reducer.js +++ b/packages/strapi-admin/admin/src/containers/Users/EditPage/reducer.js @@ -1,6 +1,6 @@ /* eslint-disable consistent-return */ import produce from 'immer'; -// import { pick, set, unset } from 'lodash'; +import { set, unset } from 'lodash'; const initialState = { formErrors: {}, @@ -16,24 +16,24 @@ const reducer = (state, action) => case 'GET_DATA_SUCCEEDED': { draftState.isLoading = false; draftState.showHeaderLoader = false; - // draftState.initialData = pick(action.data, ['email', 'firstname', 'lastname', 'username']); - // draftState.modifiedData = pick(action.data, ['email', 'firstname', 'lastname', 'username']); + draftState.initialData = action.data; + draftState.modifiedData = action.data; break; } case 'ON_CANCEL': { draftState.modifiedData = state.initialData; break; } - // case 'ON_CHANGE': { - // if (action.inputType === 'password' && !action.value) { - // unset(draftState.modifiedData, action.keys.split('.')); - // } else if (action.keys.includes('username')) { - // set(draftState.modifiedData, action.keys.split('.'), null); - // } else { - // set(draftState.modifiedData, action.keys.split('.'), action.value); - // } - // break; - // } + case 'ON_CHANGE': { + if (action.inputType === 'password' && !action.value) { + unset(draftState.modifiedData, action.keys.split('.')); + } else if (action.keys.includes('username')) { + set(draftState.modifiedData, action.keys.split('.'), null); + } else { + set(draftState.modifiedData, action.keys.split('.'), action.value); + } + break; + } // case 'ON_SUBMIT': { // draftState.showHeaderLoader = true; // break; diff --git a/packages/strapi-admin/admin/src/containers/Users/EditPage/utils/form.js b/packages/strapi-admin/admin/src/containers/Users/EditPage/utils/form.js new file mode 100644 index 0000000000..32dcc48f4d --- /dev/null +++ b/packages/strapi-admin/admin/src/containers/Users/EditPage/utils/form.js @@ -0,0 +1,50 @@ +const form = { + firstname: { + autoFocus: true, + 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, + }, + }, + username: { + label: 'Auth.form.username.label', + placeholder: 'e.g. John_Doe', + type: 'text', + validations: {}, + }, + password: { + label: 'Auth.form.password.label', + type: 'password', + validations: {}, + }, + confirmPassword: { + label: 'Auth.form.confirmPassword.label', + type: 'password', + validations: {}, + }, + active: { + label: 'app.containers.Users.EditPage.form.active.label', + type: 'bool', + validations: {}, + }, +}; + +export default form; diff --git a/packages/strapi-admin/admin/src/translations/en.json b/packages/strapi-admin/admin/src/translations/en.json index 72c4fc855a..ec7fd41c40 100644 --- a/packages/strapi-admin/admin/src/translations/en.json +++ b/packages/strapi-admin/admin/src/translations/en.json @@ -324,5 +324,7 @@ "app.components.Users.SortPicker.sortby.username_asc": "Username (A to Z)", "app.components.Users.SortPicker.sortby.username_desc": "Username (Z to A)", "app.containers.Users.EditPage.header.label-loading": "Edit user", - "app.containers.Users.EditPage.header.label": "Edit {name}" + "app.containers.Users.EditPage.header.label": "Edit {name}", + "app.containers.Users.EditPage.roles-bloc-title": "Attributed roles", + "app.containers.Users.EditPage.form.active.label": "Active" }