Skip to content

Commit

Permalink
Private groups
Browse files Browse the repository at this point in the history
  • Loading branch information
1aerostorm committed Apr 28, 2024
1 parent 4e90fb0 commit df4f19a
Show file tree
Hide file tree
Showing 9 changed files with 252 additions and 1 deletion.
5 changes: 5 additions & 0 deletions src/components/elements/messages/StartPanel/StartPanel.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.msgs-start-panel {
.button {
display: block;
}
}
56 changes: 56 additions & 0 deletions src/components/elements/messages/StartPanel/index.jsx
Original file line number Diff line number Diff line change
@@ -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)
139 changes: 139 additions & 0 deletions src/components/modules/CreateGroup.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
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 LoadingIndicator from 'app/components/elements/LoadingIndicator'
import FormikAgent from 'app/components/elements/donate/FormikUtils'

class CreateGroup extends React.Component {
constructor(props) {
super(props)
this.state = {
initialValues: {
name: ''
}
}
}

validate = () => {
}

_onSubmit = () => {
}

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-3' style={{paddingTop: 5}}>
{tt('create_group_jsx.name')}
</div>
<div className='column small-9'>
<Field
type='text'
name='name'
/>
<ErrorMessage name='name' component='div' className='error' />
</div>
</div>

<div className='row' style={{ marginTop: '1.0rem', marginBottom: '1.0rem' }}>
<div className='column small-3' style={{paddingTop: 5}}>
{tt('create_group_jsx.logo')}
</div>
<div className='column small-9'>
<Field
type='text'
name='logo'
/>
<ErrorMessage name='logo' component='div' className='error' />
</div>
</div>

<div className='row' style={{ marginTop: '1.0rem', marginBottom: '1.0rem' }}>
<div className='column small-3' style={{paddingTop: 5}}>
{tt('create_group_jsx.admin')}
</div>
<div className='column small-9'>
<Field
type='text'
name='admin'
/>
<ErrorMessage name='admin' component='div' className='error' />
</div>
</div>

<div className='row' style={{ marginTop: '1.0rem', marginBottom: '1.0rem' }}>
<div className='column small-3' style={{paddingTop: 5}}>
{tt('create_group_jsx.encrypted')}
</div>
<div className='column small-9'>
<Field
type='checkbox'
name='encrypted'
/>
<ErrorMessage name='encrypted' component='div' className='error' />
</div>
</div>

<div className='row' style={{ marginTop: '1.0rem', marginBottom: '1.0rem' }}>
<div className='column small-3' style={{paddingTop: 5}}>
{tt('create_group_jsx.access')}
</div>
<div className='column small-9'>
<Field
type='checkbox'
name='access'
/>
<ErrorMessage name='access' component='div' className='error' />
</div>
</div>

{isSubmitting ? <span><LoadingIndicator type='circle' /><br /></span>
: <span>
<button type='submit' disabled={disabled} className='button'>
{tt('create_group_jsx.submit')}
</button>
</span>}
</Form>
)}}</Formik>)

return <div>
<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)
13 changes: 13 additions & 0 deletions src/components/modules/Modals.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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 />
Expand All @@ -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'),
Expand All @@ -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())
Expand Down
13 changes: 13 additions & 0 deletions src/components/modules/messages/Messenger/Messenger.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
3 changes: 2 additions & 1 deletion src/components/modules/messages/Messenger/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import Dropzone from 'react-dropzone';

import ConversationList from '../ConversationList';
import MessageList from '../MessageList';
import StartPanel from 'app/components/elements/messages/StartPanel'
import isScreenSmall from 'app/utils/isScreenSmall'
import './Messenger.css';

Expand Down Expand Up @@ -83,7 +84,7 @@ export default class Messages extends React.Component {
topRight={messagesTopRight}
renderEmpty={() => {
if ((localStorage.getItem('msgr_auth') && !account) || process.env.MOBILE_APP) return null
return (<img className='msgs-empty-chat' src='/msg_empty.png' />)
return <StartPanel />
}}
messages={messages}
replyingMessage={replyingMessage}
Expand Down
4 changes: 4 additions & 0 deletions src/locales/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,10 @@
"blocked_BY": "You are blocked by @%(BY)s.",
"do_not_bother_BY": "@%(BY)s wants to not be bothered by low-reputation users."
},
"msgs_start_panel": {
"start_chat": "Start chat",
"create_group": "Create group"
},
"emoji_i18n": {
"categoriesLabel": "Категории",
"emojiUnsupportedMessage": "Ваш браузер не поддерживает эмодзи.",
Expand Down
17 changes: 17 additions & 0 deletions src/locales/ru-RU.json
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,23 @@
"blocked_BY": "Вы заблокированы пользователем @%(BY)s.",
"do_not_bother_BY": "@%(BY)s просит пользователей с низкой репутацией не беспокоить."
},
"msgs_start_panel": {
"start_chat": "Начать чат",
"create_group": "Создать группу"
},
"create_group_jsx": {
"name": "Название",
"logo": "Логотип",
"admin": "Администратор",
"encrypted": "Шифровать сообщения в группе",
"encrypted_hint": "Шифрование позволяет сделать сообщения доступными только тем, кто имеет доступ к группе.",
"access": "Кому будет доступна группа",
"access_hint": "Можно сделать группу открытой, или доступной только тем, чьи заявки на вступление в группу одобрит администрация.",
"access_all": "Всем",
"all_read_only": "Всем, но постить только участникам",
"access_private": "Только участникам",
"submit": "Создать"
},
"emoji_i18n": {
"categoriesLabel": "Категории",
"emojiUnsupportedMessage": "Ваш браузер не поддерживает эмодзи.",
Expand Down
3 changes: 3 additions & 0 deletions src/redux/UserReducer.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ const defaultState = fromJS({
current: null,
show_login_modal: false,
show_donate_modal: false,
show_create_group_modal: false,
show_app_download_modal: false,
loginLoading: false,
pub_keys_used: null,
Expand Down Expand Up @@ -128,6 +129,8 @@ export default createModule({
{ action: 'HIDE_CONNECTION_ERROR_MODAL', reducer: state => state.set('hide_connection_error_modal', true) },
{ action: 'SHOW_DONATE', reducer: state => state.set('show_donate_modal', true) },
{ action: 'HIDE_DONATE', reducer: state => state.set('show_donate_modal', false) },
{ action: 'SHOW_CREATE_GROUP', reducer: state => state.set('show_create_group_modal', true) },
{ action: 'HIDE_CREATE_GROUP', reducer: state => state.set('show_create_group_modal', false) },
{ action: 'SHOW_APP_DOWNLOAD', reducer: state => state.set('show_app_download_modal', true) },
{ action: 'HIDE_APP_DOWNLOAD', reducer: state => state.set('show_app_download_modal', false) },
{ action: 'SET_DONATE_DEFAULTS', reducer: (state, {payload}) => state.set('donate_defaults', fromJS(payload)) },
Expand Down

0 comments on commit df4f19a

Please sign in to comment.