/** * * 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 (