diff --git a/src/components/modules/CreateGroup.jsx b/src/components/modules/CreateGroup.jsx index fdda26a6..889e5047 100644 --- a/src/components/modules/CreateGroup.jsx +++ b/src/components/modules/CreateGroup.jsx @@ -146,7 +146,6 @@ class CreateGroup extends React.Component { } }) }, 'active') - } goNext = (e, setFieldValue) => { diff --git a/src/components/modules/groups/GroupSettings.jsx b/src/components/modules/groups/GroupSettings.jsx index 61f74904..410b905c 100644 --- a/src/components/modules/groups/GroupSettings.jsx +++ b/src/components/modules/groups/GroupSettings.jsx @@ -1,4 +1,5 @@ import React from 'react' +import DropZone from 'react-dropzone' import {connect} from 'react-redux' import { Formik, Form, Field, ErrorMessage, } from 'formik' import { Map } from 'immutable' @@ -15,7 +16,10 @@ import Icon from 'app/components/elements/Icon' import LoadingIndicator from 'app/components/elements/LoadingIndicator' import DialogManager from 'app/components/elements/common/DialogManager' import { showLoginDialog } from 'app/components/dialogs/LoginDialog' +import { validateLogoStep } from 'app/components/modules/groups/GroupLogo' +import { validateAdminStep } from 'app/components/modules/groups/GroupAdmin' import { getGroupLogo, getGroupMeta, getGroupTitle } from 'app/utils/groups' +import { proxifyImageUrlWithStrip } from 'app/utils/ProxifyUrl' class GroupSettings extends React.Component { constructor(props) { @@ -28,7 +32,7 @@ class GroupSettings extends React.Component { componentDidMount() { const { currentGroup } = this.props const group = currentGroup.toJS() - const { name, member_list, privacy, json_metadata } = group + const { name, member_list, privacy, json_metadata, is_encrypted } = group const meta = getGroupMeta(json_metadata) let admin for (const mem of member_list) { @@ -38,10 +42,12 @@ class GroupSettings extends React.Component { break } const initialValues = { + name, title: meta.title, logo: meta.logo, admin, - privacy + privacy, + is_encrypted, } this.setState({ initialValues @@ -66,12 +72,81 @@ class GroupSettings extends React.Component { applyFieldValue('admin', value) } - validate = async () => { + uploadLogo = (file, name, { applyFieldValue }) => { + const { uploadImage } = this.props + this.setState({ uploading: true }) + uploadImage(file, progress => { + if (progress.url) { + applyFieldValue('logo', progress.url) + } + if (progress.error) { + const { error } = progress; + notify(error, 10000) + } + this.setState({ uploading: false }) + }) + } + + onDrop = (acceptedFiles, rejectedFiles, { applyFieldValue }) => { + const file = acceptedFiles[0] + + if (!file) { + if (rejectedFiles.length) { + DialogManager.alert( + tt('post_editor.please_insert_only_image_files') + ) + } + return + } + + this.uploadLogo(file, file.name, { applyFieldValue }) + }; + onPrivacyChange = (e, { applyFieldValue }) => { + applyFieldValue('privacy', e.target.value) } - onSubmit = async () => { + validate = async (values) => { + const errors = {} + if (!values.title) { + errors.title = tt('g.required') + } else if (values.title.length < 3) { + errors.title = tt('create_group_jsx.group_min_length') + } + await validateLogoStep(values, errors) + await validateAdminStep(values, errors) + return errors + } + + _onSubmit = async (values, actions) => { + const { currentUser } = this.props + const creator = currentUser.get('username') + + this.setState({ + submitError: '' + }) + showLoginDialog(creator, (res) => { + const password = res && res.password + if (!password) { + actions.setSubmitting(false) + return + } + this.props.privateGroup({ + creator, + password, + ...values, + onSuccess: () => { + actions.setSubmitting(false) + const { closeMe } = this.props + if (closeMe) closeMe() + }, + onError: (err, errStr) => { + this.setState({ submitError: errStr }) + actions.setSubmitting(false) + } + }) + }, 'active', false) } closeMe = (e) => { @@ -79,6 +154,18 @@ class GroupSettings extends React.Component { this.props.closeMe() } + _renderPreview = ({ values, errors }) => { + let { logo } = values + if (logo && !errors.logo) { + const size = '75x75' // main size of Userpic + logo = proxifyImageUrlWithStrip(logo, size); + return + {tt('group_settings_jsx.preview')} + + } + return null + } + render() { const { currentGroup } = this.props const group = currentGroup.toJS() @@ -87,7 +174,7 @@ class GroupSettings extends React.Component { const meta = getGroupMeta(json_metadata) const title = getGroupTitle(meta, name) - const { initialValues } = this.state + const { initialValues, submitError } = this.state let form if (!initialValues) { @@ -104,7 +191,7 @@ class GroupSettings extends React.Component { {({ handleSubmit, isSubmitting, isValid, values, errors, setFieldValue, applyFieldValue, setFieldTouched, handleChange, }) => { - const disabled = !isValid + const disabled = !isValid || this.state.uploading return (