yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-12-28 23:57:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

Handle formValidation for providers

Browse Source
This commit is contained in:
cyril lopez 2018-01-22 12:05:22 +01:00
parent 88204154f9
commit 46ecdd1e17
6 changed files with 95 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
packages/strapi-plugin-users-permissions/admin/src/components/PopUpForm/index.js
View File

@ -8,7 +8,7 @@ import React from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
import { FormattedMessage } from 'react-intl';
import PropTypes from 'prop-types';
import { capitalize, get, isArray, isObject, includes, map, tail, take, takeRight } from 'lodash';
import { capitalize, get, findIndex, isArray, isObject, includes, map, tail, take, takeRight } from 'lodash';
// Translations
import en from 'translations/en.json';
@ -26,15 +26,15 @@ class PopUpForm extends React.Component { // eslint-disable-line react/prefer-st
}
renderButton = () => {
if (this.props.showLoader) {
return (
<Button onClick={() => {}} type="submit" className={styles.primary} disabled>
<p className={styles.saving}>
<span>.</span><span>.</span><span>.</span>
</p>
</Button>
);
}
// if (this.props.showLoader) {
// return (
// <Button onClick={() => {}} type="submit" className={styles.primary} disabled>
// <p className={styles.saving}>
// <span>.</span><span>.</span><span>.</span>
// </p>
// </Button>
// );
// }
return (
<Button type="submit" onClick={this.props.onSubmit} className={styles.primary}>
@ -79,15 +79,17 @@ class PopUpForm extends React.Component { // eslint-disable-line react/prefer-st
{map(tail(form), (value, key) => (
<Input
autoFocus={key === 0}
disabled={key === form.length - 2}
key={value}
customBootstrapClass="col-md-12"
didCheckErrors={this.props.didCheckErrors}
disabled={key === form.length - 2}
errors={get(this.props.formErrors, [findIndex(this.props.formErrors, ['name', value]), 'errors'], [])}
key={value}
label={`users-permissions.PopUpForm.Providers.${ includes(value, 'callback') ? `${dataToEdit}.callback` : value}.label`}
name={`${dataToEdit}.${value}`}
onChange={this.props.onChange}
type="text"
value={includes(value, 'callback') ? `${strapi.backendURL}${get(values, value)}` : get(values, value)}
validations={{}}
validations={{ required: true }}
/>
))}
</div>
@ -177,17 +179,19 @@ PopUpForm.contextTypes = {
PopUpForm.defaultProps = {
settingType: 'providers',
showLoader: false,
// showLoader: false,
};
PopUpForm.propTypes = {
actionType: PropTypes.string.isRequired,
dataToEdit: PropTypes.string.isRequired,
didCheckErrors: PropTypes.bool.isRequired,
formErrors: PropTypes.array.isRequired,
isOpen: PropTypes.bool.isRequired,
onChange: PropTypes.func.isRequired,
onSubmit: PropTypes.func.isRequired,
settingType: PropTypes.string,
showLoader: PropTypes.bool,
// showLoader: PropTypes.bool,
values: PropTypes.object.isRequired,
};

8
packages/strapi-plugin-users-permissions/admin/src/containers/HomePage/actions.js
View File

@ -14,6 +14,7 @@ import {
ON_CHANGE,
SET_DATA_TO_EDIT,
SET_FORM,
SET_FORM_ERRORS,
SUBMIT,
SUBMIT_SUCCEEDED,
UNSET_DATA_TO_EDIT,
@ -93,6 +94,13 @@ export function setForm(data) {
};
}
export function setFormErrors(formErrors) {
return {
type: SET_FORM_ERRORS,
formErrors,
};
}
export function submit(endPoint) {
return {
type: SUBMIT,

23
packages/strapi-plugin-users-permissions/admin/src/containers/HomePage/checkFormValidity.js Normal file
View File

@ -0,0 +1,23 @@
import { get, isEmpty } from 'lodash';
export default function checkFormValidity(settingType, data) {
const formErrors = [];
switch (settingType) {
case 'providers': {
const isProviderEnabled = get(data, 'enabled');
const keys = [ 'key', 'secret' ];
keys.map(key => {
if (isProviderEnabled && isEmpty(get(data, key))) {
formErrors.push({ name: key, errors: [{ id: 'components.Input.error.validation.required' }] });
}
});
break;
}
default:
}
return formErrors;
}

1
packages/strapi-plugin-users-permissions/admin/src/containers/HomePage/constants.js
View File

@ -12,6 +12,7 @@ export const FETCH_DATA_SUCCEEDED = 'UsersPermissions/HomePage/FETCH_DATA_SUCCEE
export const ON_CHANGE = 'UsersPermissions/HomePage/ON_CHANGE';
export const SET_DATA_TO_EDIT = 'UsersPermissions/HomePage/SET_DATA_TO_EDIT';
export const SET_FORM = 'UsersPermissions/HomePage/SET_FORM';
export const SET_FORM_ERRORS = 'UsersPermissions/HomePage/SET_FORM_ERRORS';
export const SUBMIT = 'UsersPermissions/HomePage/SUBMIT';
export const SUBMIT_SUCCEEDED = 'UsersPermissions/HomePage/SUBMIT_SUCCEEDED';
export const UNSET_DATA_TO_EDIT = 'UsersPermissions/HomePage/UNSET_DATA_TO_EDIT';

38
packages/strapi-plugin-users-permissions/admin/src/containers/HomePage/index.js
View File

@ -10,7 +10,7 @@ import { connect } from 'react-redux';
import { injectIntl } from 'react-intl';
import { bindActionCreators, compose } from 'redux';
import cn from 'classnames';
import { clone, includes, isEqual, isEmpty } from 'lodash';
import { clone, get, includes, isEqual, isEmpty } from 'lodash';
// Design
import EditForm from 'components/EditForm';
@ -36,6 +36,7 @@ import {
fetchData,
onChange,
setDataToEdit,
setFormErrors,
submit,
unsetDataToEdit,
} from './actions';
@ -43,6 +44,8 @@ import {
import reducer from './reducer';
import saga from './saga';
import checkFormValidity from './checkFormValidity';
const keyBoardShortCuts = [18, 78];
export class HomePage extends React.Component {
@ -103,6 +106,7 @@ export class HomePage extends React.Component {
}
handleButtonClick = () => {
// TODO change open modal URL
if (this.props.match.params.settingType === 'roles') {
this.props.history.push(`${this.props.location.pathname}/create`);
} else if (this.props.match.params.settingType === 'providers') {
@ -110,6 +114,24 @@ export class HomePage extends React.Component {
}
}
handleSubmit = (e) => {
e.preventDefault();
const modifiedObject = get(this.props.modifiedData, this.props.dataToEdit);
const initObject = get(this.props.initialData, this.props.dataToEdit);
const formErrors = checkFormValidity(this.props.match.params.settingType, modifiedObject);
if (isEqual(initObject, modifiedObject)) {
return this.props.unsetDataToEdit();
}
if (isEmpty(formErrors)) {
this.setState({ showModalEdit: false });
this.props.submit(this.props.match.params.settingType);
} else {
this.props.setFormErrors(formErrors);
}
}
pluginHeaderActions = [
{
label: 'users-permissions.EditPage.cancel',
@ -126,7 +148,7 @@ export class HomePage extends React.Component {
];
render() {
const { modifiedData, initialData, match, dataToEdit } = this.props;
const { didCheckErrors, formErrors, modifiedData, initialData, match, dataToEdit } = this.props;
const headerActions = match.params.settingType === 'advanced' && !isEqual(modifiedData, initialData) ?
this.pluginHeaderActions : [];
const noButtonList = match.params.settingType === 'email-templates' || match.params.settingType === 'providers';
@ -158,12 +180,10 @@ export class HomePage extends React.Component {
actionType={'edit'}
isOpen={this.state.showModalEdit}
dataToEdit={dataToEdit}
didCheckErrors={didCheckErrors}
formErrors={formErrors}
onChange={this.props.onChange}
onSubmit={(e) => {
e.preventDefault();
this.setState({ showModalEdit: false });
this.props.submit(match.params.settingType);
}}
onSubmit={this.handleSubmit}
settingType={match.params.settingType}
values={modifiedData[dataToEdit] || {}}
/>
@ -185,7 +205,9 @@ HomePage.propTypes = {
data: PropTypes.array.isRequired,
dataToEdit: PropTypes.string.isRequired,
deleteData: PropTypes.func.isRequired,
didCheckErrors: PropTypes.bool.isRequired,
fetchData: PropTypes.func.isRequired,
formErrors: PropTypes.array.isRequired,
history: PropTypes.object.isRequired,
initialData: PropTypes.object.isRequired,
location: PropTypes.object.isRequired,
@ -193,6 +215,7 @@ HomePage.propTypes = {
modifiedData: PropTypes.object.isRequired,
onChange: PropTypes.func.isRequired,
setDataToEdit: PropTypes.func.isRequired,
setFormErrors: PropTypes.func.isRequired,
submit: PropTypes.func.isRequired,
unsetDataToEdit: PropTypes.func.isRequired,
};
@ -206,6 +229,7 @@ function mapDispatchToProps(dispatch) {
fetchData,
onChange,
setDataToEdit,
setFormErrors,
submit,
unsetDataToEdit,
},

14
packages/strapi-plugin-users-permissions/admin/src/containers/HomePage/reducer.js
View File

@ -14,6 +14,7 @@ import {
ON_CHANGE,
SET_DATA_TO_EDIT,
SET_FORM,
SET_FORM_ERRORS,
SUBMIT_SUCCEEDED,
UNSET_DATA_TO_EDIT,
} from './constants';
@ -23,6 +24,8 @@ const initialState = fromJS({
dataToDelete: Map({}),
dataToEdit: '',
deleteEndPoint: '',
didCheckErrors: false,
formErrors: List([]),
initialData: fromJS({}),
modifiedData: fromJS({}),
});
@ -30,7 +33,9 @@ const initialState = fromJS({
function homePageReducer(state = initialState, action) {
switch (action.type) {
case CANCEL_CHANGES:
return state.update('modifiedData', () => state.get('initialData'));
return state
.set('formErrors', List([]))
.update('modifiedData', () => state.get('initialData'));
case DELETE_DATA:
return state
.set('dataToDelete', Map(action.dataToDelete))
@ -52,14 +57,21 @@ function homePageReducer(state = initialState, action) {
return state.update('dataToEdit', () => action.dataToEdit);
case SET_FORM:
return state
.set('formErrors', List([]))
.set('initialData', action.form)
.set('modifiedData', action.form);
case SET_FORM_ERRORS:
return state
.update('didCheckErrors', (v) => v = !v)
.set('formErrors', List(action.formErrors));
case SUBMIT_SUCCEEDED:
return state
.set('formErrors', List([]))
.update('dataToEdit', () => '')
.update('initialData', () => state.get('modifiedData'));
case UNSET_DATA_TO_EDIT:
return state
.set('formErrors', List([]))
.update('dataToEdit', () => '')
.update('modifiedData', () => state.get('initialData'));
default: