Private groups

src/components/all.scss

@@ -20,6 +20,7 @@
 
 // modules
 @import './modules/LoginForm.scss';
+@import './modules/CreateGroup.scss';
 @import './modules/Modals.scss';
 
 @import "./pages/Messages";

src/components/elements/Icon.jsx

@@ -9,6 +9,7 @@ const icons = new Map([
     // ['chevron-up-circle', require('app/assets/icons/chevron-up-circle.svg')],
     // ['chevron-down-circle', require('app/assets/icons/chevron-down-circle.svg')],
     ['chevron-left', require('app/assets/icons/chevron-left.svg')],
+    ['chevron-right', require('app/assets/icons/chevron-right.svg')],
     // ['chatboxes', require('app/assets/icons/chatboxes.svg')],
     ['cross', require('app/assets/icons/cross.svg')],
     // ['chatbox', require('app/assets/icons/chatbox.svg')],

src/components/elements/messages/StartPanel/StartPanel.scss

@@ -0,0 +1,5 @@
+.msgs-start-panel {
+    .button {
+        display: block;
+    }
+}

src/components/elements/messages/StartPanel/index.jsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import tt from 'counterpart'
+import {connect} from 'react-redux'
+
+import user from 'app/redux/UserReducer'
+import './StartPanel.scss'
+
+class StartPanel extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+        }
+    }
+
+    startChat = (e) => {
+        e.preventDefault()
+        const inp = document.getElementsByClassName('conversation-search-input')
+        if (!inp.length) {
+            console.error('startChat - no conversation-search-input')
+            return
+        }
+        if (inp.length > 1) {
+            console.error('startChat - multiple conversation-search-input:', inp)
+            return
+        }
+        inp[0].focus()
+    }
+
+    goCreateGroup = (e) => {
+        e.preventDefault()
+        this.props.showCreateGroup()
+    }
+
+    render() {
+        return (
+            <div>
+                <img className='msgs-empty-chat' src='/msg_empty.png' />
+                <div className='msgs-start-panel'>
+                    <button className='button' onClick={this.startChat}>{tt('msgs_start_panel.start_chat')}</button>
+                    <button className='button hollow' onClick={this.goCreateGroup}>{tt('msgs_start_panel.create_group')}</button>
+                </div>
+            </div>
+        )
+    }
+}
+
+export default connect(
+    (state, ownProps) => {
+        return { ...ownProps }
+    },
+    dispatch => ({
+        showCreateGroup() {
+            dispatch(user.actions.showCreateGroup())
+        },
+    })
+)(StartPanel)

src/components/elements/messages/Stepper/Stepper.scss

@@ -0,0 +1,28 @@
+.Stepper {
+    width: 100%;
+
+    .step {
+        display: inline-block;
+        text-align: center;
+        color: gray;
+        font-size: 90%;
+        .bar {
+            background-color: gray;
+            height: 8px;
+            margin-top: 0.25rem;
+            margin-bottom: 0.25rem;
+        }
+
+        &.left {
+            .bar {
+                background-color: #0078C4;
+            }
+        }
+        &.current {
+            color: #0078C4;
+            .bar {
+                background-color: #0078C4;
+            }
+        }
+    }
+}

src/components/elements/messages/Stepper/index.jsx

@@ -0,0 +1,56 @@
+import React from 'react'
+
+import './Stepper.scss'
+
+class Stepper extends React.Component {
+    constructor(props) {
+        super(props)
+        const { steps, startStep } = this.props
+        const entr = Object.entries(steps)
+        this.state = {
+            currentStep: startStep || entr[0][0]
+        }
+    }
+
+    nextStep = () => {
+        const { steps } = this.props
+        const entr = Object.entries(steps)
+        const { currentStep } = this.state
+        let found
+        for (const [key, content] of entr) {
+            if (found) {
+                this.setState({
+                    currentStep: key
+                })
+                return
+            }
+            found = key === currentStep
+        }
+    }
+
+    render() {
+        const { steps } = this.props
+        let { currentStep } = this.state
+
+        const entr = Object.entries(steps)
+        currentStep = currentStep || entr[0][0]
+        const width = (100 / entr.length).toFixed(1)
+        const stepObjs = []
+        let foundCurrent
+        for (const [key, content] of entr) {
+            const isCurrent = key === currentStep
+            foundCurrent = foundCurrent || isCurrent
+            const cn = foundCurrent ? (isCurrent ? 'current' : '') : 'left' 
+            stepObjs.push(<div className={'step ' + cn} style={{ minWidth: width + '%' }}>
+                    <div className={'bar'}></div>
+                    {content}
+                </div>)
+        }
+
+        return <div className='Stepper'>
+            {stepObjs}
+        </div>
+    }
+}
+
+export default Stepper

src/components/modules/CreateGroup.jsx

@@ -0,0 +1,134 @@
+import React from 'react'
+import {connect} from 'react-redux'
+import { Formik, Form, Field, ErrorMessage, } from 'formik'
+import { Map } from 'immutable'
+import { Asset, AssetEditor } from 'golos-lib-js/lib/utils'
+import tt from 'counterpart'
+
+import g from 'app/redux/GlobalReducer'
+import transaction from 'app/redux/TransactionReducer'
+import user from 'app/redux/UserReducer'
+import Icon from 'app/components/elements/Icon'
+import LoadingIndicator from 'app/components/elements/LoadingIndicator'
+import FormikAgent from 'app/components/elements/donate/FormikUtils'
+import Stepper from 'app/components/elements/messages/Stepper'
+
+class CreateGroup extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            initialValues: {
+                name: '',
+                is_encrypted: true,
+                privacy: 'public_group'
+            }
+        }
+        this.stepperRef = React.createRef()
+    }
+
+    validate = () => {
+    }
+
+    _onSubmit = () => {
+    }
+
+    goNext = (e) => {
+        e.preventDefault()
+        this.stepperRef.current.nextStep()
+    }
+
+    render() {
+        const form = (<Formik
+            initialValues={this.state.initialValues}
+            enableReinitialize={true}
+            validate={this.validate}
+            onSubmit={this._onSubmit}
+        >
+        {({
+            handleSubmit, isSubmitting, isValid, values, setFieldValue, handleChange,
+        }) => {
+            const disabled = !isValid
+            return (
+        <Form>
+
+            <div className='row' style={{ marginTop: '1.0rem', marginBottom: '1.0rem' }}>
+                <div className='column small-4' style={{paddingTop: 5}}>
+                    {tt('create_group_jsx.name')}
+                </div>
+                <div className='column small-8'>
+                    <Field
+                        type='text'
+                        name='name'
+                        autoFocus
+                    />
+                    <ErrorMessage name='name' component='div' className='error' />
+                </div>
+            </div>
+
+            <div className='row' style={{ marginTop: '1.0rem', marginBottom: '1.0rem' }}>
+                <div className='column small-4' style={{paddingTop: 5}}>
+                    {tt('create_group_jsx.access')}
+                </div>
+                <div className='column small-8'>
+                    <Field
+                        as='select'
+                        name='privacy'
+                    >
+                        <option value='public_group'>{tt('create_group_jsx.access_all')}</option>
+                        <option value='public_read_only'>{tt('create_group_jsx.all_read_only')}</option>
+                        <option value='private_group'>{tt('create_group_jsx.access_private')}</option>
+                    </Field>
+                    <ErrorMessage name='privacy' component='div' className='error' />
+                </div>
+            </div>
+
+            <div className='row' style={{ marginTop: '1.0rem', marginBottom: '1.0rem' }}>
+                <div className='column small-8'>
+                    <label style={{fontSize: '100%'}}>
+                        <Field
+                            type='checkbox'
+                            name='is_encrypted'
+                        />
+                        {tt('create_group_jsx.encrypted')}
+                    </label>
+                    <ErrorMessage name='is_encrypted' component='div' className='error' />
+                </div>
+            </div>
+
+            <Stepper ref={this.stepperRef} steps={{
+                name: tt('create_group_jsx.step_name'),
+                logo: tt('create_group_jsx.step_logo'),
+                admin: tt('create_group_jsx.step_admin'),
+                create: tt('create_group_jsx.step_create')
+            }} startStep='logo' />
+            {isSubmitting ? <span><LoadingIndicator type='circle' /><br /></span>
+            : <span>
+                <button onClick={this.goNext} disabled={disabled} className='button small next-button' title={tt('g.submit')}>
+                    <Icon name='chevron-right' size='1_25x' />
+                </button>
+            </span>}
+        </Form>
+        )}}</Formik>)
+
+        return <div className='CreateGroup'>
+               <div className='row'>
+                   <h3>{tt('msgs_start_panel.create_group')}</h3>
+               </div>
+               {form}
+        </div>
+    }
+}
+
+export default connect(
+    (state, ownProps) => {
+        const currentUser = state.user.getIn(['current'])
+        const currentAccount = currentUser && state.global.getIn(['accounts', currentUser.get('username')])
+
+        return { ...ownProps,
+            currentUser,
+            currentAccount,
+        }
+    },
+    dispatch => ({
+    })
+)(CreateGroup)

src/components/modules/CreateGroup.scss

@@ -0,0 +1,15 @@
+.CreateGroup {
+	.next-button {
+	    width: 48px;
+	    height: 48px;
+	    padding-left: 13px !important;
+	    color: white;
+	    position: absolute;
+	    bottom: 0.4rem;
+	    right: 0.5rem;
+	}
+	.Stepper {
+		width: 85%;
+		margin-left: 1rem;
+	}
+}

src/components/modules/Modals.jsx

@@ -5,6 +5,7 @@ import { connect } from 'react-redux';
 import CloseButton from 'react-foundation-components/lib/global/close-button';
 import Reveal from 'react-foundation-components/lib/global/reveal';
 
+import CreateGroup from 'app/components/modules/CreateGroup'
 import Donate from 'app/components/modules/Donate'
 import LoginForm from 'app/components/modules/LoginForm';
 import AppDownload from 'app/components/modules/app/AppDownload'
@@ -17,6 +18,7 @@ class Modals extends React.Component {
     static propTypes = {
         show_login_modal: PropTypes.bool,
         show_donate_modal: PropTypes.bool,
+        show_create_group_modal: PropTypes.bool,
         show_app_download_modal: PropTypes.bool,
         hideDonate: PropTypes.func.isRequired,
         hideAppDownload: PropTypes.func.isRequired,
@@ -34,9 +36,11 @@ class Modals extends React.Component {
         const {
             show_login_modal,
             show_donate_modal,
+            show_create_group_modal,
             show_app_download_modal,
             hideLogin,
             hideDonate,
+            hideCreateGroup,
             hideAppDownload,
             notifications,
             removeNotification,
@@ -60,6 +64,10 @@ class Modals extends React.Component {
                     <CloseButton onClick={hideDonate} />
                     <Donate />
                 </Reveal>}
+                {show_create_group_modal && <Reveal revealStyle={{ overflow: 'hidden' }} onHide={hideCreateGroup} show={show_create_group_modal}>
+                    <CloseButton onClick={hideCreateGroup} />
+                    <CreateGroup />
+                </Reveal>}
                 {show_app_download_modal && <Reveal onHide={hideAppDownload} show={show_app_download_modal}>
                     <CloseButton onClick={hideAppDownload} />
                     <AppDownload />
@@ -81,6 +89,7 @@ export default connect(
         return {
             show_login_modal: state.user.get('show_login_modal'),
             show_donate_modal: state.user.get('show_donate_modal'),
+            show_create_group_modal: state.user.get('show_create_group_modal'),
             show_app_download_modal: state.user.get('show_app_download_modal'),
             loginUnclosable,
             notifications: state.app.get('notifications'),
@@ -95,6 +104,10 @@ export default connect(
             if (e) e.preventDefault()
             dispatch(user.actions.hideDonate())
         },
+        hideCreateGroup: e => {
+            if (e) e.preventDefault()
+            dispatch(user.actions.hideCreateGroup())
+        },
         hideAppDownload: e => {
             if (e) e.preventDefault()
             dispatch(user.actions.hideAppDownload())

src/components/modules/messages/Messenger/Messenger.css

@@ -85,3 +85,16 @@
     transform: translateX(-50%) translateY(-50%);
     left: 50%;
 }
+
+.msgs-start-panel {
+    top: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    left: 50%;
+    position: absolute;
+    z-index: 10;
+    background-color: rgba(255, 255, 255, 0.5);
+    backdrop-filter: blur(5px);
+    padding: 1rem;
+    border-radius: 10px;
+    border: 1px solid black;
+}