/** * * PopUpForm * */ 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, findIndex, isArray, isEmpty, isObject, includes, map, startsWith, tail, take, takeRight, } from 'lodash'; // Translations import en from 'translations/en.json'; import Input from 'components/Input'; import styles from './styles.scss'; class PopUpForm extends React.Component { // eslint-disable-line react/prefer-stateless-function state = { enabled: false, isEditing: false }; componentWillReceiveProps(nextProps) { const { values } = nextProps; if (get(values, 'enabled') && get(values, 'enabled') !== get(this.props.values, 'enabled')) { this.setState({ enabled: get(values, 'enabled') }); } } getRedirectURIProviderConf = () => { // NOTE: Still testings providers so the switch statement is likely to change switch (this.props.dataToEdit) { case 'facebook': return `${strapi.backendURL}/connect/facebook/callback`; case 'google': return `${strapi.backendURL}/connect/google/callback`; case 'github': return get(this.props.values, 'redirect_uri', ''); default: { const value = get(this.props.values, 'callback', ''); return startsWith(value, 'http') ? value : `${strapi.backendURL}${value}`; } } } generateRedirectURL = (url) => { return startsWith(url, 'https://') || startsWith(url, 'http://') || this.state.isEditing ? url : `${strapi.backendURL}${startsWith(url, '/') ? '' : '/'}${url}`; } handleChange = (e) => { this.setState({ enabled: e.target.value }); this.props.onChange(e); } handleBlur = (e) => { this.setState({ isEditing: false }); if (isEmpty(e.target.value)) { const { name, type } = e.target; const target = Object.assign({ name, type }, { value: `/auth/${this.props.dataToEdit}/callback` }); this.props.onChange({ target }); } } handleFocus = () => this.setState({ isEditing: true }); renderForm = () => { const { dataToEdit, settingType, values } = this.props; const form = Object.keys(values.options || values || {}).reduce((acc, current) => { const path = settingType === 'email-templates' ? ['options', current] : [ current ]; const name = settingType === 'email-templates' ? 'options.' : ''; if (isObject(get(values, path)) && !isArray(get(values, path))) { return Object.keys(get(values, path, {})) .reduce((acc, curr) => { acc.push(`${name}${current}.${curr}`); return acc; }, []).concat(acc); } else if (current !== 'icon' && current !== 'scope'){ acc.push(`${name}${current}`); } return acc; }, []); if (settingType === 'providers') { return (
{form.length > 1 &&
} {map(tail(form), (value, key) => ( {}} onBlur={includes(value, 'callback') || includes(value, 'redirect_uri') ? this.handleBlur : false} onChange={this.props.onChange} type="text" value={includes(value, 'callback') || includes(value, 'redirect_uri') ? this.generateRedirectURL(get(values, value)) : get(values, value)} validations={{ required: true }} /> ))} { dataToEdit !== 'email' && ( {}} value={this.getRedirectURIProviderConf()} validations={{}} /> )}
); } return (
{map(take(form, 3), (value, key) => ( ))}
{map(takeRight(form, 2), (value) => ( ))}
); } render() { const { display } = this.props.values; const { actionType, dataToEdit, settingType } = this.props; let header = {dataToEdit}; if (actionType) { header = {capitalize(dataToEdit)} }} />; } if (display && en[display]) { header = ; } return (
{header}
{this.renderForm()}
); } } PopUpForm.contextTypes = { unsetDataToEdit: PropTypes.func.isRequired, }; PopUpForm.defaultProps = { settingType: 'providers', // 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, values: PropTypes.object.isRequired, }; export default PopUpForm;