-
- );
- }
-};
diff --git a/src/views/info-view.jsx b/src/views/info-view.jsx
index dbc00a10..1a90eece 100644
--- a/src/views/info-view.jsx
+++ b/src/views/info-view.jsx
@@ -5,104 +5,83 @@ import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
import Tinode from 'tinode-sdk';
import AvatarUpload from '../widgets/avatar-upload.jsx';
+import BadgeList from '../widgets/badge-list.jsx';
import CheckBox from '../widgets/checkbox.jsx';
import ContactList from '../widgets/contact-list.jsx';
import ErrorPanel from '../widgets/error-panel.jsx';
import GroupManager from '../widgets/group-manager.jsx';
-import InPlaceEdit from '../widgets/in-place-edit.jsx';
import MenuCancel from '../widgets/menu-cancel.jsx';
-import MoreButton from '../widgets/more-button.jsx';
import PermissionsEditor from '../widgets/permissions-editor.jsx';
-import TagManager from '../widgets/tag-manager.jsx';
+import TopicCommon from '../widgets/topic-common.jsx';
+import TopicSecurity from '../widgets/topic-security.jsx';
-import { MAX_TITLE_LENGTH, NO_ACCESS_MODE } from '../config.js';
+import { MAX_TITLE_LENGTH, MAX_TOPIC_DESCRIPTION_LENGTH, NO_ACCESS_MODE } from '../config.js';
-import { makeImageDataUrl } from '../lib/blob-helpers.js';
+import { makeImageUrl } from '../lib/blob-helpers.js';
import { arrayEqual, theCard } from '../lib/utils.js';
const messages = defineMessages({
- requested: {
+ info: {
+ id: 'panel_title_info',
+ description: 'Title for InfoView',
+ defaultMessage: 'Info'
+ },
+ general: {
+ id: 'panel_title_general',
+ description: 'Title for TopicCommon.',
+ defaultMessage: 'General'
+ },
+ security: {
+ id: 'panel_title_security',
+ description: 'Title for TopicSecirity and AccSecurity.',
+ defaultMessage: 'Security'
+ },
+ members: {
+ id: 'panel_title_members',
+ description: 'Title for managing group members view.',
+ defaultMessage: 'Members'
+ },
+ crop: {
+ id: 'panel_title_crop',
+ description: 'Title for AvatarCropView.',
+ defaultMessage: 'Drag to Adjust'
+ },
+ perm_want: {
id: 'requested_permissions',
defaultMessage: 'Requested',
description: 'Title for permissions'
},
- granted: {
+ perm_given: {
id: 'granted_permissions',
defaultMessage: 'Granted',
description: 'Title for permissions'
},
+ perm_auth: {
+ id: 'permissions_authenticated',
+ defaultMessage: 'Authenticated',
+ description: 'Title for editing default authenticated permissions'
+ },
+ perm_anon: {
+ id: 'permissions_anonymous',
+ defaultMessage: 'Anonymous',
+ description: 'Title for editing default anonymous permissions'
+ },
+ perm_user: {
+ id: 'permissions_user',
+ defaultMessage: 'User\'s Permissions',
+ description: 'Title for editing user\'s permissions'
+ },
edit_permissions: {
id: 'menu_item_edit_permissions',
defaultMessage: 'Edit permissions',
description: 'Menu item [Edit permissions]'
},
- other_user: {
- id: 'label_other_user',
- defaultMessage: 'Other',
- description: 'Label for the other user when the user is unnamed'
- },
- clear_messages: {
- id: 'action_clear_messages',
- defaultMessage: 'Clear Messages',
- description: 'Flat button [Clear Messages] (soft-delete messages)'
- },
- clear_messages_warning: {
- id: 'clear_messages_warning',
- defaultMessage: 'Are you sure you want to clear all messages? It cannot be undone.',
- description: 'Alert dialog warning when deleting all messages.'
- },
- delete_messages: {
- id: 'action_delete_messages',
- defaultMessage: 'Clear Messages for All',
- description: 'Flat button [Clear for All] (hard-delete all messages)'
- },
- delete_messages_warning: {
- id: 'delete_messages_warning',
- defaultMessage: 'Are you sure you want to delete all messages for everyone? It cannot be undone.',
- description: 'Alert dialog warning when hard-deleting all messages.'
- },
- topic_delete: {
- id: 'topic_delete',
- defaultMessage: 'Delete Conversation',
- description: 'Alert title when deleting the topic.'
- },
- topic_delete_warning: {
- id: 'topic_delete_warning',
- defaultMessage: 'Are you sure you want to delete this conversation? It cannot be undone.',
- description: 'Alert warning when deleting entire topic'
- },
- leave_chat: {
- id: 'action_leave_chat',
- defaultMessage: 'Leave Conversation',
- description: 'Flat button [Leave Conversation]'
- },
- leave_chat_warning: {
- id: 'leave_chat_warning',
- defaultMessage: 'Are you sure you want to leave this conversation?',
- description: 'Alert dialog warning when unsubscribing from a chat.'
- },
- block_contact: {
- id: 'action_block_contact',
- defaultMessage: "Block Contact",
- description: "Flat button [Block Contact]"
- },
- block_contact_warning: {
- id: 'block_contact_warning',
- defaultMessage: 'Are you sure you want to block this contact?',
- description: 'Alert dialog warning when blocking a contact.'
- },
- report_chat: {
- id: 'action_report_chat',
- defaultMessage: 'Report Conversation',
- description: 'Flat button [Report Group]'
- },
- report_chat_warning: {
- id: 'report_chat_warning',
- defaultMessage: 'Are you sure you want to block and report this conversation?',
- description: 'Alert dialog warning when reporting a conversation for abuse'
- },
});
+function _clip(str, length) {
+ return str && str.substring(0, length);
+}
+
class InfoView extends React.Component {
constructor(props) {
super(props);
@@ -118,6 +97,7 @@ class InfoView extends React.Component {
groupTopic: undefined,
channel: undefined,
fullName: undefined,
+ description: undefined,
avatar: null,
private: null,
selectedContact: null,
@@ -129,39 +109,26 @@ class InfoView extends React.Component {
auth: null,
anon: null,
contactList: [],
- tags: [],
- showMemberPanel: false,
- showPermissionEditorFor: undefined,
- moreInfoExpanded: false,
+ trustedBadges: [],
previousMetaDesc: undefined,
previousSubsUpdated: undefined,
- previousTagsUpdated: undefined
};
this.resetSubs = this.resetSubs.bind(this);
this.resetDesc = this.resetDesc.bind(this);
+ this.resetTags = this.resetTags.bind(this);
this.onMetaDesc = this.onMetaDesc.bind(this);
this.onSubsUpdated = this.onSubsUpdated.bind(this);
- this.onTagsUpdated = this.onTagsUpdated.bind(this);
- this.handleFullNameUpdate = this.handleFullNameUpdate.bind(this);
- this.handlePrivateUpdate = this.handlePrivateUpdate.bind(this);
this.handleImageChanged = this.handleImageChanged.bind(this);
this.handleMuted = this.handleMuted.bind(this);
+ this.handleUnarchive = this.handleUnarchive.bind(this);
this.handlePermissionsChanged = this.handlePermissionsChanged.bind(this);
this.handleLaunchPermissionsEditor = this.handleLaunchPermissionsEditor.bind(this);
- this.handleHidePermissionsEditor = this.handleHidePermissionsEditor.bind(this);
this.handleShowAddMembers = this.handleShowAddMembers.bind(this);
- this.handleHideAddMembers = this.handleHideAddMembers.bind(this);
this.handleMemberUpdateRequest = this.handleMemberUpdateRequest.bind(this);
- this.handleDeleteTopic = this.handleDeleteTopic.bind(this);
- this.handleDeleteMessages = this.handleDeleteMessages.bind(this);
- this.handleLeave = this.handleLeave.bind(this);
- this.handleBlock = this.handleBlock.bind(this);
- this.handleReport = this.handleReport.bind(this);
this.handleMemberSelected = this.handleMemberSelected.bind(this);
- this.handleMoreInfo = this.handleMoreInfo.bind(this);
- this.handleTagsUpdated = this.handleTagsUpdated.bind(this);
this.handleContextMenu = this.handleContextMenu.bind(this);
+ this.handleBackNavigate = this.handleBackNavigate.bind(this);
}
// No need to separately handle component mount.
@@ -177,19 +144,13 @@ class InfoView extends React.Component {
this.previousSubsUpdated = topic.onSubsUpdated;
topic.onSubsUpdated = this.onSubsUpdated;
-
- if (topic.getType() == 'grp') {
- this.previousTagsUpdated = topic.onTagsUpdated;
- topic.onTagsUpdated = this.onTagsUpdated;
- } else {
- this.previousTagsUpdated = undefined;
- }
}
if (this.state.topic != props.topic) {
this.setState({topic: props.topic});
this.resetDesc(topic, props);
this.resetSubs(topic, props);
+ this.resetTags(topic);
}
}
@@ -201,7 +162,6 @@ class InfoView extends React.Component {
this.setState({topic: null});
topic.onMetaDesc = this.previousMetaDesc;
topic.onSubsUpdated = this.previousSubsUpdated;
- topic.onTagsUpdated = this.previousTagsUpdated;
}
resetSubs(topic, props) {
@@ -230,6 +190,15 @@ class InfoView extends React.Component {
const defacs = topic.getDefaultAccess() || {};
const acs = topic.getAccessMode();
+ const badges = [];
+ if (topic.trusted) {
+ for (const [key, val] of Object.entries(topic.trusted)) {
+ if (val) {
+ badges.push(key);
+ }
+ }
+ }
+
this.setState({
owner: acs && acs.isOwner(),
admin: acs && acs.isAdmin(),
@@ -237,21 +206,30 @@ class InfoView extends React.Component {
deleter: acs && acs.isDeleter(),
muted: acs && acs.isMuted(),
- fullName: topic.public ? topic.public.fn : undefined,
- avatar: makeImageDataUrl(topic.public ? topic.public.photo : null),
- private: topic.private ? topic.private.comment : null,
+ fullName: _clip(topic.public ? topic.public.fn : undefined, MAX_TITLE_LENGTH),
+ description: _clip(topic.public ? topic.public.note : undefined, MAX_TOPIC_DESCRIPTION_LENGTH),
+ avatar: makeImageUrl(topic.public ? topic.public.photo : null),
+ trustedBadges: badges,
+ private: _clip(topic.private ? topic.private.comment : null, MAX_TITLE_LENGTH),
+ archived: topic.isArchived(),
address: topic.name,
groupTopic: topic.isGroupType(),
- channel: topic.isChannelType(),
- showMemberPanel: false,
+ channel: topic.isChannelType() || topic.chan,
access: acs ? acs.getMode() : undefined,
modeGiven: acs ? acs.getGiven() : undefined,
modeWant: acs ? acs.getWant() : undefined,
auth: defacs.auth,
anon: defacs.anon
});
+ }
- if (topic.getType() == 'grp' && acs && acs.isOwner()) {
+ resetTags(topic) {
+ if (topic.getType() != 'grp') {
+ return;
+ }
+
+ const acs = topic.getAccessMode();
+ if (acs && acs.isOwner()) {
// Requesting tags: owner is editing the topic.
topic.getMeta(topic.startMetaQuery().withTags().build());
}
@@ -281,30 +259,6 @@ class InfoView extends React.Component {
}
}
- onTagsUpdated(tags) {
- this.setState({tags: tags});
-
- if (this.previousTagsUpdated && this.previousTagsUpdated != this.onTagsUpdated) {
- this.previousTagsUpdated();
- }
- }
-
- handleFullNameUpdate(fn) {
- fn = fn.trim().substring(0, MAX_TITLE_LENGTH);
- if (this.state.fullName !== fn) {
- this.setState({fullName: fn});
- this.props.onTopicDescUpdate(this.props.topic, theCard(fn, null), null);
- }
- }
-
- handlePrivateUpdate(comment) {
- comment = comment.trim().substring(0, MAX_TITLE_LENGTH);
- if (this.state.private !== comment) {
- this.setState({private: comment});
- this.props.onTopicDescUpdate(this.props.topic, null, comment || Tinode.DEL_CHAR);
- }
- }
-
handleImageChanged(img) {
this.setState({avatar: img});
this.props.onTopicDescUpdate(this.props.topic, theCard(null, img || Tinode.DEL_CHAR), null);
@@ -315,13 +269,17 @@ class InfoView extends React.Component {
this.props.onChangePermissions(this.props.topic, checked ? '-P' : '+P');
}
- handlePermissionsChanged(perm) {
- switch (this.state.showPermissionEditorFor) {
+ handleUnarchive(ignored, ignored2) {
+ this.props.onTopicUnArchive(this.props.topic);
+ }
+
+ handlePermissionsChanged(which, perm) {
+ switch (which) {
case 'auth':
- this.props.onTopicDescUpdate(this.props.topic, null, null, {auth: perm});
+ this.props.onTopicDescUpdateRequest(this.props.topic, null, null, {auth: perm});
break;
case 'anon':
- this.props.onTopicDescUpdate(this.props.topic, null, null, {anon: perm});
+ this.props.onTopicDescUpdateRequest(this.props.topic, null, null, {anon: perm});
break;
case 'mode':
case 'want':
@@ -335,7 +293,7 @@ class InfoView extends React.Component {
break;
}
- this.setState({showPermissionEditorFor: undefined});
+ this.handleBackNavigate();
}
handleLaunchPermissionsEditor(which, uid) {
@@ -359,15 +317,15 @@ class InfoView extends React.Component {
toSkip += 'W';
}
}
- titleEdit = formatMessage(messages.requested);
- titleCompare = formatMessage(messages.granted);
+ titleEdit = formatMessage(messages.perm_want);
+ titleCompare = formatMessage(messages.perm_given);
break;
case 'given':
toEdit = this.state.modeGiven2;
toCompare = this.state.modeWant2;
toSkip = this.state.groupTopic ? (this.state.owner ? '' : 'O') : 'ASDO';
- titleEdit = formatMessage(messages.granted);
- titleCompare = formatMessage(messages.requested);
+ titleEdit = formatMessage(messages.perm_given);
+ titleCompare = formatMessage(messages.perm_want);
break;
case 'auth':
toEdit = this.state.auth;
@@ -389,8 +347,8 @@ class InfoView extends React.Component {
toEdit = user.acs.getGiven();
toCompare = user.acs.getWant();
toSkip = this.state.owner ? '' : 'O';
- titleEdit = formatMessage(messages.granted);
- titleCompare = formatMessage(messages.requested);
+ titleEdit = formatMessage(messages.perm_given);
+ titleCompare = formatMessage(messages.perm_want);
if (user.public) {
userTitle = user.public.fn;
userAvatar = user.public.photo;
@@ -398,11 +356,10 @@ class InfoView extends React.Component {
break;
}
default:
- console.log("Unknown permission editing mode '" + which + "'");
- break;
+ console.error("Unknown permission editing mode '" + which + "'");
+ return;
}
this.setState({
- showPermissionEditorFor: which,
userPermissionsEdited: uid,
userPermissionsTitle: userTitle,
userPermissionsAvatar: userAvatar,
@@ -412,109 +369,41 @@ class InfoView extends React.Component {
immutablePermissionsTitle: titleCompare,
editedPermissionsSkipped: toSkip,
});
- }
-
- handleHidePermissionsEditor() {
- this.setState({showPermissionEditorFor: undefined});
+ this.props.onNavigate(`perm/${which}`);
}
handleShowAddMembers(e) {
e.preventDefault();
this.props.onInitFind();
- this.setState({showMemberPanel: true});
- }
-
- handleHideAddMembers() {
- this.setState({showMemberPanel: false});
+ this.props.onNavigate('members');
}
handleMemberUpdateRequest(members, added, removed) {
this.props.onMemberUpdateRequest(this.props.topic, added, removed);
- this.setState({showMemberPanel: false});
- }
-
- handleDeleteTopic(e) {
- e.preventDefault();
- const {formatMessage} = this.props.intl;
- this.props.onShowAlert(
- formatMessage(messages.topic_delete), // title
- formatMessage(messages.topic_delete_warning), // content
- (() => { this.props.onDeleteTopic(this.props.topic); }), // onConfirm
- null, // "OK"
- true, // Show Reject button
- null // "Cancel"
- );
- }
-
- handleDeleteMessages(e) {
- e.preventDefault();
- const {formatMessage} = this.props.intl;
- this.props.onShowAlert(
- formatMessage(this.state.deleter ? messages.delete_messages : messages.clear_messages), // title
- formatMessage(this.state.deleter ? messages.delete_messages_warning : messages.clear_messages_warning), // content
- (() => { this.props.onDeleteMessages(this.props.topic); }), // onConfirm
- null, // "OK"
- true, // Show Reject button
- null // "Cancel"
- );
- }
-
- handleLeave(e) {
- e.preventDefault();
- const {formatMessage} = this.props.intl;
- this.props.onShowAlert(
- formatMessage(messages.leave_chat), // title
- formatMessage(messages.leave_chat_warning), // content
- (() => { this.props.onLeaveTopic(this.props.topic); }), // onConfirm
- null, // "OK"
- true, // Show Reject button
- null // "Cancel"
- );
- }
-
- handleBlock(e) {
- e.preventDefault();
- const {formatMessage} = this.props.intl;
- this.props.onShowAlert(
- formatMessage(messages.block_contact), // title
- formatMessage(messages.block_contact_warning), // content
- (() => { this.props.onBlockTopic(this.props.topic); }), // onConfirm
- null, // "OK"
- true, // Show Reject button
- null // "Cancel"
- );
- }
-
- handleReport(e) {
- e.preventDefault();
- const {formatMessage} = this.props.intl;
- this.props.onShowAlert(
- formatMessage(messages.report_chat), // title
- formatMessage(messages.report_chat_warning), // content
- (() => { this.props.onReportTopic(this.props.topic); }), // onConfirm
- null, // "OK"
- true, // Show Reject button
- null // "Cancel"
- );
+ this.props.onNavigate('info');
}
handleMemberSelected(uid) {
this.setState({selectedContact: uid});
}
- handleMoreInfo(open) {
- this.setState({moreInfoExpanded: open});
- }
-
- handleTagsUpdated(tags) {
- if (!arrayEqual(this.state.tags.slice(0), tags.slice(0))) {
- this.props.onTopicTagsUpdate(this.props.topic, tags);
+ handleBackNavigate() {
+ const args = (this.props.panel || 'info').split('/');
+ if (args[0] == 'info') {
+ this.props.onNavigate(null);
+ } else if (args[0] == 'perm') {
+ if (args[1] == 'user') {
+ this.props.onNavigate('info');
+ } else {
+ this.props.onNavigate('security');
+ }
+ } else {
+ this.props.onNavigate('info');
}
}
handleContextMenu(params) {
const {formatMessage} = this.props.intl;
- const instance = this;
const topic = this.props.tinode.getTopic(this.props.topic);
if (!topic) {
return;
@@ -524,14 +413,19 @@ class InfoView extends React.Component {
return;
}
+ const isMe = this.props.tinode.isMe(params.topicName);
const menuItems = [
- {title: formatMessage(messages.edit_permissions), handler: function() {
- instance.handleLaunchPermissionsEditor('user', params.topicName);
- }},
- 'member_delete',
- user.acs.isMuted() ? 'member_unmute' : 'member_mute',
- user.acs.isJoiner() ? 'member_block' : 'member_unblock'
+ {title: formatMessage(messages.edit_permissions), handler: () => {
+ this.handleLaunchPermissionsEditor(isMe ? 'want' : 'user', params.topicName);
+ }}
];
+ if (!isMe) {
+ menuItems.push('member_delete');
+ }
+ menuItems.push(user.acs.isMuted() ? 'member_unmute' : 'member_mute');
+ if (!isMe) {
+ menuItems.push(user.acs.isJoiner() ? 'member_block' : 'member_unblock');
+ }
this.props.showContextMenu({
topicName: this.props.topic,
x: params.x,
@@ -540,16 +434,20 @@ class InfoView extends React.Component {
}
render() {
+ const args = (this.props.panel || 'info').split('/');
+ const view = args[0];
+ args.shift();
+
const {formatMessage} = this.props.intl;
+ const panelTitle = formatMessage((view == 'perm' ? messages['perm_' + args[0]] : messages[view])
+ || messages['info']);
return (
-
-
-
-
-
-
-
- {this.state.fullName}
-
-
- {this.props.myUserId}
-
-
-
{this.props.displayMobile ?
@@ -557,18 +455,20 @@ class InfoView extends React.Component {
level={this.props.errorLevel}
text={this.props.errorText}
onClearError={this.props.onError} /> : null}
- {this.state.showMemberPanel ?
+ {view == 'members' ?
-
+ {panelTitle}
-
-
-
- :
-
- )
- :
-
- {spanText}
-
- );
+
+ let element;
+ const attr = {};
+ if (this.props.type == 'password') {
+ element = VisiblePassword;
+ attr.onFinished = this.handlePasswordFinished;
+ } else {
+ if (this.props.multiline > 1) {
+ element = 'textarea';
+ attr.rows = this.props.multiline;
+ attr.className = 'inplace-edit';
+ } else {
+ element = 'input';
+ attr.type = this.props.type || 'text';
+ }
+ attr.value = this.state.value;
+ attr.onChange = this.handeTextChange;
+ attr.onKeyDown = this.handleKeyDown;
+ attr.onBlur = this.handleEditingFinished;
+ }
+ attr.placeholder = this.props.placeholder;
+ attr.required = this.props.required ? 'required' : '';
+ attr.autoComplete = this.props.autoComplete;
+ attr.autoFocus = true;
+ attr.ref = this.selfRef;
+
+ return React.createElement(element, attr, null);
}
};
diff --git a/src/widgets/letter-tile.jsx b/src/widgets/letter-tile.jsx
index 672dc1f2..ec522246 100644
--- a/src/widgets/letter-tile.jsx
+++ b/src/widgets/letter-tile.jsx
@@ -2,15 +2,15 @@ import React from 'react';
import Tinode from 'tinode-sdk';
-import { stringHash } from '../lib/strformat.js';
+import { idToColorClass } from '../lib/strformat.js';
+import { sanitizeImageUrl } from '../lib/utils.js';
export default class LetterTile extends React.PureComponent {
render() {
let avatar;
if (this.props.avatar === true) {
const isGroup = (Tinode.topicType(this.props.topic) == 'grp');
- const iconColor = (isGroup ? 'light-color' : 'dark-color')
- + (Math.abs(stringHash(this.props.topic)) % 16);
+ const iconColor = idToColorClass(this.props.topic, isGroup);
if (this.props.topic && this.props.title && this.props.title.trim()) {
const letter = this.props.title.trim().charAt(0);
const className = 'lettertile ' + iconColor;
@@ -21,9 +21,10 @@ export default class LetterTile extends React.PureComponent {
group : person;
}
} else if (this.props.avatar) {
+ const url = this.props.tinode.authorizeURL(sanitizeImageUrl(this.props.avatar));
// If avatar image is invalid, show a placeholder.
- avatar = 
{e.target.onerror = null; e.target.src="/img/broken_image.png"}} />;
+ avatar = 
{e.target.onerror = null; e.target.src="../img/broken_image.png"}} />;
} else {
avatar = null;
}
diff --git a/src/widgets/load-spinner.jsx b/src/widgets/load-spinner.jsx
index 6d4aab82..c270e371 100644
--- a/src/widgets/load-spinner.jsx
+++ b/src/widgets/load-spinner.jsx
@@ -2,7 +2,9 @@ import React from 'react';
export default class LoadSpinner extends React.PureComponent {
render() {
+ const className = 'load-spinner-box' + (this.props.large ? ' large' : '')
+ + (this.props.clear ? ' clear' : '') + (this.props.centered ? ' centered' : '');
return (this.props.show ?
-
+
);
diff --git a/src/widgets/group-subs.jsx b/src/widgets/group-subs.jsx
index e123b686..2ec40453 100644
--- a/src/widgets/group-subs.jsx
+++ b/src/widgets/group-subs.jsx
@@ -6,7 +6,7 @@ import { FormattedMessage } from 'react-intl';
import { MAX_ONLINE_IN_TOPIC } from '../config.js'
import LetterTile from './letter-tile.jsx';
-import { makeImageDataUrl } from '../lib/blob-helpers.js';
+import { makeImageUrl } from '../lib/blob-helpers.js';
export default class GroupSubs extends React.Component {
constructor(props) {
@@ -22,8 +22,9 @@ export default class GroupSubs extends React.Component {
usersOnline.push(
+ {e.preventDefault(); this.props.onNavigate('general');}}>
+ edit
+
+
+ {
- (tags) =>
-
-
:
null
}
- ![]()
.
+ el = UploadingImage;
+ }
+ }
+ break;
+ case 'BN':
+ // Button
+ attr.onClick = this.handleFormButtonClick;
+ let inner = React.Children.map(values, (child) => {
+ return typeof child == 'string' ? child : undefined;
+ });
+ if (!inner || inner.length == 0) {
+ inner = [attr.name]
+ }
+ // Get text which will be sent back when the button is clicked.
+ attr['data-title'] = inner.join('');
+ break;
+ case 'MN':
+ // Mention
+ if (data && data.hasOwnProperty('colorId')) {
+ attr.className = 'mn-dark-color' + data.colorId;
+ }
+ break;
+ case 'FM':
+ // Form
+ attr.className = 'bot-form';
+ break;
+ case 'RW':
+ // Form element formatting is dependent on element content.
+ break;
+ case 'QQ':
+ // Quote/citation.
+ attr.className = 'reply-quote'
+ attr.onClick = this.handleQuoteClick;
+ break;
+ case 'IC':
+ // Icon.
+ if (data.name == 'button') {
+ attr.className = 'flat-button faux';
+ } else {
+ const icons = {
+ form: {
+ name: 'dashboard', title: 'drafty_form'
+ },
+ attachment: {
+ name: 'attachment', title: 'drafty_attachment'
+ }
+ };
+ const icon = icons[data.name];
+ el = React.Fragment;
+ if (icon) {
+ const key = data.orig.toLowerCase();
+ values = [{icon.name},
+ formatMessage(messages[icon.title])].concat(' ', values || []);
+ } else {
+ values = [];
+ }
+ }
+ break;
+ default:
+ if (el == '_UNKN') {
+ // Unknown element.
+ el = React.Fragment;
+ values = [extension, ' '].concat(values || []);
+ }
+ break;
+ }
+ return React.createElement(el, attr, values);
+ } else {
+ return values;
+ }
+};
+
export default injectIntl(MessagesView);
diff --git a/src/views/new-topic-view.jsx b/src/views/new-topic-view.jsx
index 2cf6c843..eeec3b85 100644
--- a/src/views/new-topic-view.jsx
+++ b/src/views/new-topic-view.jsx
@@ -56,16 +56,17 @@ class NewTopicView extends React.Component {
this.setState({searchQuery: Tinode.isNullValue(query) ? null : query});
}
- handleContactSelected(sel) {
- if (this.state.tabSelected === 'p2p') {
+ handleContactSelected(uid) {
+ if (this.state.tabSelected == 'p2p') {
HashNavigation.navigateTo(HashNavigation.removeUrlParam(window.location.hash, 'tab'));
- this.props.onCreateTopic(sel);
+ this.props.onCreateTopic(uid);
}
}
- handleNewGroupSubmit(name, dataUrl, priv, tags, isChannel) {
+ handleNewGroupSubmit(name, description, dataUrl, priv, tags, isChannel) {
HashNavigation.navigateTo(HashNavigation.removeUrlParam(window.location.hash, 'tab'));
- this.props.onCreateTopic(undefined, theCard(name, dataUrl), priv, tags, isChannel);
+ this.props.onCreateTopic(undefined,
+ {public: theCard(name, dataUrl, null, description), private: priv, tags: tags}, isChannel);
}
handleGroupByID(topicName) {
@@ -112,6 +113,7 @@ class NewTopicView extends React.Component {
type="p2p"
onSearchContacts={this.handleSearchContacts} />
);
diff --git a/src/views/tinode-web.jsx b/src/views/tinode-web.jsx
index b08d61eb..43f9cb53 100644
--- a/src/views/tinode-web.jsx
+++ b/src/views/tinode-web.jsx
@@ -1,6 +1,5 @@
// The top-level class to hold all functionality together.
import React from 'react';
-import ReactDOM from 'react-dom';
import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
import * as firebase from 'firebase/app';
@@ -18,7 +17,7 @@ import SidepanelView from './sidepanel-view.jsx';
import { API_KEY, APP_NAME, DEFAULT_P2P_ACCESS_MODE, LOGGING_ENABLED,
MEDIA_BREAKPOINT, RECEIVED_DELAY } from '../config.js';
import { PACKAGE_VERSION } from '../version.js';
-import { base64ReEncode, makeImageDataUrl } from '../lib/blob-helpers.js';
+import { base64ReEncode, makeImageUrl } from '../lib/blob-helpers.js';
import { detectServerAddress, isLocalHost, isSecureConnection } from '../lib/host-name.js';
import LocalStorageUtil from '../lib/local-storage.js';
import HashNavigation from '../lib/navigation.js';
@@ -70,6 +69,8 @@ class TinodeWeb extends React.Component {
constructor(props) {
super(props);
+ this.selfRef = React.createRef();
+
this.state = this.getBlankState();
this.handleResize = this.handleResize.bind(this);
@@ -100,7 +101,7 @@ class TinodeWeb extends React.Component {
this.handleNewChatInvitation = this.handleNewChatInvitation.bind(this);
this.handleNewAccount = this.handleNewAccount.bind(this);
this.handleNewAccountRequest = this.handleNewAccountRequest.bind(this);
- this.handleUpdateAccountRequest = this.handleUpdateAccountRequest.bind(this);
+ this.handleUpdatePasswordRequest = this.handleUpdatePasswordRequest.bind(this);
this.handleUpdateAccountTagsRequest = this.handleUpdateAccountTagsRequest.bind(this);
this.handleToggleIncognitoMode = this.handleToggleIncognitoMode.bind(this);
this.handleSettings = this.handleSettings.bind(this);
@@ -119,8 +120,9 @@ class TinodeWeb extends React.Component {
this.handleStartTopicRequest = this.handleStartTopicRequest.bind(this);
this.handleNewTopicCreated = this.handleNewTopicCreated.bind(this);
this.handleTopicUpdateRequest = this.handleTopicUpdateRequest.bind(this);
+ this.handleUnarchive = this.handleUnarchive.bind(this);
this.handleChangePermissions = this.handleChangePermissions.bind(this);
- this.handleTagsUpdated = this.handleTagsUpdated.bind(this);
+ this.handleTagsUpdateRequest = this.handleTagsUpdateRequest.bind(this);
this.handleLogout = this.handleLogout.bind(this);
this.handleDeleteAccount = this.handleDeleteAccount.bind(this);
this.handleDeleteTopicRequest = this.handleDeleteTopicRequest.bind(this);
@@ -133,7 +135,6 @@ class TinodeWeb extends React.Component {
this.handleHideContextMenu = this.handleHideContextMenu.bind(this);
this.handleShowAlert = this.handleShowAlert.bind(this);
this.handleShowInfoView = this.handleShowInfoView.bind(this);
- this.handleHideInfoView = this.handleHideInfoView.bind(this);
this.handleMemberUpdateRequest = this.handleMemberUpdateRequest.bind(this);
this.handleValidateCredentialsRequest = this.handleValidateCredentialsRequest.bind(this);
this.handlePasswordResetRequest = this.handlePasswordResetRequest.bind(this);
@@ -157,7 +158,7 @@ class TinodeWeb extends React.Component {
// "On" is the default, so saving the "off" state.
messageSounds: !settings.messageSoundsOff,
incognitoMode: false,
- desktopAlerts: persist && settings.desktopAlerts,
+ desktopAlerts: persist && !!settings.desktopAlerts,
desktopAlertsEnabled: (isSecureConnection() || isLocalHost()) &&
(typeof firebase != 'undefined') && (typeof navigator != 'undefined') &&
(typeof FIREBASE_INIT != 'undefined'),
@@ -173,6 +174,7 @@ class TinodeWeb extends React.Component {
sidePanelSelected: 'login',
sidePanelTitle: null,
sidePanelAvatar: null,
+ myTrustedBadges: [],
loadSpinnerVisible: false,
login: '',
@@ -186,7 +188,7 @@ class TinodeWeb extends React.Component {
newTopicParams: null,
loginDisabled: false,
displayMobile: (window.innerWidth <= MEDIA_BREAKPOINT),
- showInfoPanel: false,
+ infoPanel: undefined,
mobilePanel: 'sidepanel',
contextMenuVisible: false,
@@ -224,7 +226,7 @@ class TinodeWeb extends React.Component {
serviceWorkerChannel.addEventListener('message', this.handlePushMessage);
} else {
// Safari is broken by design.
- console.warn('Your browser does not support BroadcastChannel. Some features will not be available');
+ console.warn("Your browser does not support BroadcastChannel. Some features will not be available");
}
// Window/tab visible or invisible for pausing timers.
@@ -386,7 +388,7 @@ class TinodeWeb extends React.Component {
const hash = HashNavigation.parseUrlHash(window.location.hash);
if (hash.path && hash.path.length > 0) {
// Left-side panel selector.
- if (['register','settings','edit','notif','security','support','general',
+ if (['register','settings','edit','notif','security','support','general','crop',
'cred','reset','newtpk','archive','blocked','contacts',''].includes(hash.path[0])) {
this.setState({sidePanelSelected: hash.path[0]});
} else {
@@ -424,7 +426,7 @@ class TinodeWeb extends React.Component {
// Additional parameters of panels.
this.setState({
- showInfoPanel: hash.params.info,
+ infoPanel: hash.params.info,
newTopicTabSelected: hash.params.tab
});
}
@@ -564,8 +566,9 @@ class TinodeWeb extends React.Component {
cred = Tinode.credential(cred);
// Try to login with login/password. If they are not available, try token. If no token, ask for login/password.
let promise = null;
- const token = this.tinode.getAuthToken();
+ let token = this.tinode.getAuthToken();
if (login && password) {
+ token = null;
this.setState({password: null});
promise = this.tinode.loginBasic(login, password, cred);
} else if (token) {
@@ -593,7 +596,9 @@ class TinodeWeb extends React.Component {
autoLogin: false
});
this.handleError(err.message, 'err');
- localStorage.removeItem('auth-token');
+ if (token) {
+ this.handleLogout();
+ }
HashNavigation.navigateTo('');
});
} else {
@@ -661,7 +666,18 @@ class TinodeWeb extends React.Component {
if (desc.public) {
this.setState({
sidePanelTitle: desc.public.fn,
- sidePanelAvatar: makeImageDataUrl(desc.public.photo)
+ sidePanelAvatar: makeImageUrl(desc.public.photo)
+ });
+ }
+ if (desc.trusted) {
+ const badges = [];
+ for (const [key, val] of Object.entries(desc.trusted)) {
+ if (val) {
+ badges.push(key);
+ }
+ }
+ this.setState({
+ myTrustedBadges: badges,
});
}
if (desc.acs) {
@@ -769,6 +785,7 @@ class TinodeWeb extends React.Component {
// Contacts expect c.topic to be set.
c.topic = c.name;
}
+
newState.chatList.push(c);
if (this.state.topicSelected == c.topic) {
newState.topicSelectedOnline = c.online;
@@ -849,7 +866,7 @@ class TinodeWeb extends React.Component {
errorText: '',
errorLevel: null,
mobilePanel: 'topic-view',
- showInfoPanel: false
+ infoPanel: undefined
});
// Different contact selected.
if (this.state.topicSelected != topicName) {
@@ -867,7 +884,7 @@ class TinodeWeb extends React.Component {
mobilePanel: 'sidepanel',
topicSelectedOnline: false,
topicSelectedAcs: null,
- showInfoPanel: false
+ infoPanel: undefined
});
HashNavigation.navigateTo(HashNavigation.setUrlTopic('', null));
@@ -887,18 +904,33 @@ class TinodeWeb extends React.Component {
// - msg - Drafty message with content
// - promise - Promise to be resolved when the upload is completed
// - uploader - for tracking progress
- handleSendMessage(msg, promise, uploader) {
+ // - head - head dictionary to be attached to the message
+ handleSendMessage(msg, promise, uploader, head) {
const topic = this.tinode.getTopic(this.state.topicSelected);
msg = topic.createMessage(msg, false);
// The uploader is used to show progress.
msg._uploader = uploader;
+ if (head) {
+ msg.head = Object.assign(msg.head || {}, head);
+ }
+
if (!topic.isSubscribed()) {
+ // Topic is not subscribed yet. Subscribe.
if (!promise) {
promise = Promise.resolve();
}
- promise = promise.then(() => { return topic.subscribe(); });
+ promise = promise
+ .then(() => topic.subscribe())
+ .then(() => {
+ // If there are unsent messages, try sending them now.
+ topic.queuedMessages((pub) => {
+ if (!pub._sending && topic.isSubscribed()) {
+ this.sendMessage(pub);
+ }
+ });
+ });
}
if (promise) {
@@ -984,32 +1016,15 @@ class TinodeWeb extends React.Component {
});
}
- handleUpdateAccountRequest(password, pub, defacs) {
- this.handleError();
-
- if (pub || defacs) {
- const params = {};
- if (pub) {
- params.public = pub;
- }
- if (defacs) {
- params.defacs = defacs;
- }
- this.tinode.getMeTopic().setMeta({desc: params}).catch((err) => {
- this.handleError(err.message, 'err');
- });
- }
- if (password) {
- this.tinode.updateAccountBasic(null, this.tinode.getCurrentLogin(), password).catch((err) => {
- this.handleError(err.message, 'err');
- });
- }
- }
-
handleToggleIncognitoMode(on) {
+ // Make state undefined.
+ this.setState({incognitoMode: null});
+
const me = this.tinode.getMeTopic();
const am = me.getAccessMode().updateWant(on ? '-P' : '+P').getWant();
me.setMeta({sub: {mode: am}}).catch((err) => {
+ // Request failed, keep existing state.
+ this.setState({incognitoMode: !on});
this.handleError(err.message, 'err');
});
}
@@ -1070,6 +1085,7 @@ class TinodeWeb extends React.Component {
togglePushToken(enabled) {
if (enabled) {
+ this.setState({desktopAlerts: null});
if (!this.state.firebaseToken) {
const fcm = this.fbPush ?
Promise.resolve() :
@@ -1079,7 +1095,7 @@ class TinodeWeb extends React.Component {
}).then(() => {
this.requestPushToken();
}).catch((err) => {
- console.warn("Failed to get notification permission.", err);
+ console.error("Failed to get notification permission.", err);
this.handleError(err.message, 'err');
this.setState({desktopAlerts: false, firebaseToken: null});
LocalStorageUtil.updateObject('settings', {desktopAlerts: false});
@@ -1092,7 +1108,7 @@ class TinodeWeb extends React.Component {
}
} else if (this.state.firebaseToken && this.fbPush) {
this.fbPush.deleteToken(this.state.firebaseToken).catch((err) => {
- console.warn("Unable to delete token.", err);
+ console.error("Unable to delete token.", err);
}).finally(() => {
LocalStorageUtil.updateObject('settings', {desktopAlerts: false});
localStorage.removeItem('firebase-token');
@@ -1121,7 +1137,7 @@ class TinodeWeb extends React.Component {
}
}).catch((err) => {
this.handleError(err.message, 'err');
- console.warn("Failed to retrieve firebase token", err);
+ console.error("Failed to retrieve firebase token", err);
});
}
@@ -1156,6 +1172,8 @@ class TinodeWeb extends React.Component {
let path = '';
if (['security','support','general','notif'].includes(parsed.path[0])) {
path = 'edit';
+ } else if ('crop' == parsed.path[0]) {
+ path = 'general';
} else if ('blocked' == parsed.path[0]) {
path = 'security';
} else if (this.state.myUserId) {
@@ -1171,13 +1189,18 @@ class TinodeWeb extends React.Component {
this.setState({errorText: '', errorLevel: null});
}
- // Basic nagigator by hash value. No need to bind to this.
+ // Sidepanel navigator. No need to bind to 'this'.
basicNavigator(hash) {
HashNavigation.navigateTo(HashNavigation.setUrlSidePanel(window.location.hash, hash));
}
+ // Topic info navigator. No need to bind to 'this'.
+ infoNavigator(hash) {
+ HashNavigation.navigateTo(HashNavigation.setUrlInfoPanel(window.location.hash, hash));
+ }
+
// Request to start a topic, new or selected from search results, or "by ID".
- handleStartTopicRequest(topicName, pub, priv, tags, isChannel) {
+ handleStartTopicRequest(topicName, newTopicParams, isChannel) {
// Check if topic is indeed new. If not, launch it.
if (topicName && this.tinode.isTopicCached(topicName)) {
this.handleTopicSelected(topicName);
@@ -1192,14 +1215,14 @@ class TinodeWeb extends React.Component {
params.desc = {defacs: {auth: DEFAULT_P2P_ACCESS_MODE}};
} else {
topicName = topicName || this.tinode.newGroupTopicName(isChannel);
- params.desc = {public: pub, private: {comment: priv}};
- params.tags = tags;
+ params.desc = {public: newTopicParams.public, private: {comment: newTopicParams.private}};
+ params.tags = newTopicParams.tags;
}
params._topicName = topicName;
this.setState({newTopicParams: params}, () => {this.handleTopicSelected(topicName)});
}
- // New topic was creted, here is the new topic name.
+ // New topic was created, here is the new topic name.
handleNewTopicCreated(oldName, newName) {
if (this.state.topicSelected == oldName && oldName != newName) {
// If the current URl contains the old topic name, replace it with new.
@@ -1211,21 +1234,49 @@ class TinodeWeb extends React.Component {
}
}
- handleTopicUpdateRequest(topicName, pub, priv, permissions) {
+ handleTopicUpdateRequest(topicName, pub, priv, defacs) {
+ this.handleError();
+
const topic = this.tinode.getTopic(topicName);
if (topic) {
const params = {};
+ let attachments;
if (pub) {
+ if (pub.photo) {
+ if (pub.photo.ref && pub.photo.ref != Tinode.DEL_CHAR) {
+ attachments = [pub.photo.ref];
+ } else if (!pub.photo.data || pub.photo.data == Tinode.DEL_CHAR) {
+ pub.photo = Tinode.DEL_CHAR;
+ }
+ }
params.public = pub;
}
- if (priv) {
+
+ if (typeof priv == 'string') {
params.private = (priv === Tinode.DEL_CHAR) ?
Tinode.DEL_CHAR : {comment: priv};
}
- if (permissions) {
- params.defacs = permissions;
+ if (defacs) {
+ params.defacs = defacs;
}
- topic.setMeta({desc: params}).catch((err) => {
+ topic.setMeta({desc: params, attachments: attachments}).catch((err) => {
+ this.handleError(err.message, 'err');
+ });
+ }
+ }
+
+ handleUnarchive(topicName) {
+ const topic = this.tinode.getTopic(topicName);
+ if (topic) {
+ topic.archive(false);
+ }
+ }
+
+ handleUpdatePasswordRequest(password) {
+ this.handleError();
+
+ if (password) {
+ this.tinode.updateAccountBasic(null, this.tinode.getCurrentLogin(), password).catch((err) => {
this.handleError(err.message, 'err');
});
}
@@ -1248,7 +1299,7 @@ class TinodeWeb extends React.Component {
}
}
- handleTagsUpdated(topicName, tags) {
+ handleTagsUpdateRequest(topicName, tags) {
const topic = this.tinode.getTopic(topicName);
if (topic) {
topic.setMeta({tags: tags}).catch((err) => {
@@ -1373,7 +1424,7 @@ class TinodeWeb extends React.Component {
contextMenuClickAt: {x: params.x, y: params.y},
contextMenuParams: params,
contextMenuItems: menuItems || this.defaultTopicContextMenu(params.topicName),
- contextMenuBounds: ReactDOM.findDOMNode(this).getBoundingClientRect()
+ contextMenuBounds: this.selfRef.current.getBoundingClientRect()
});
}
@@ -1442,13 +1493,8 @@ class TinodeWeb extends React.Component {
}
handleShowInfoView() {
- HashNavigation.navigateTo(HashNavigation.addUrlParam(window.location.hash, 'info', true));
- this.setState({showInfoPanel: true});
- }
-
- handleHideInfoView() {
- HashNavigation.navigateTo(HashNavigation.removeUrlParam(window.location.hash, 'info'));
- this.setState({showInfoPanel: false});
+ HashNavigation.navigateTo(HashNavigation.addUrlParam(window.location.hash, 'info', 'info'));
+ this.setState({infoPanel: 'info'});
}
handleMemberUpdateRequest(topicName, added, removed) {
@@ -1524,7 +1570,7 @@ class TinodeWeb extends React.Component {
render() {
return (
-
- Unknown}
- readOnly={!this.state.owner}
- value={this.state.fullName}
- required={true}
- onFinished={this.handleFullNameUpdate} />
-
-
-
+ {this.state.private ?
+
+
+ : null
+ }
+
-
-
- {
- (private_placeholder) =>
+
+ {this.state.private}
+
+ {this.state.address}
-
+
+ {this.state.description ?
+
+
+
: null}
{this.state.description}
+
+ {
- (more) =>
- {this.state.moreInfoExpanded ?
-
-
- {this.state.owner ?
- <>
-
+
+
+ {this.state.archived ?
-
-
-
- :
- null
- }
-
-
- {this.state.address}
-
- {this.state.groupTopic ?
-
-
-
- {this.state.access}
-
-
- :
-
-
- }
- {this.state.sharer && (this.state.auth || this.state.anon) ?
-
-
-
-
-
-
-
- {this.state.fullName ? this.state.fullName : formatMessage(messages.other_user)}:
-
- {this.state.modeGiven2}
-
-
-
-
- :
- null
- }
-
-
-
-
-
- Auth: {this.state.admin ?
-
- {this.state.auth}
-
- :
- {this.state.auth}
- }
-
- Anon: {this.state.admin ?
-
- {this.state.anon}
-
- :
- {this.state.anon}
- }
-
-
- {!this.state.channel ?
-
- delete_outline {
- formatMessage(this.state.deleter ? messages.delete_messages : messages.clear_messages)
- }
-
- :
- null
- }
- {this.state.owner ?
-
- delete {formatMessage(messages.topic_delete)}
-
- :
-
- exit_to_app {formatMessage(messages.leave_chat)}
-
- }
- {!this.state.groupTopic ?
-
- block {formatMessage(messages.block_contact)}
-
- :
- null
- }
- {!this.state.owner ?
-
- report {formatMessage(messages.report_chat)}
-
- :
- null
- }
+
+
{this.state.groupTopic && this.state.sharer ?
<>
-
{groupTopic ?
- {
- (no_members) =>
+ {
+ (no_members) =>
:
null
diff --git a/src/views/logo-view.jsx b/src/views/logo-view.jsx
index 01705ac1..82f044ea 100644
--- a/src/views/logo-view.jsx
+++ b/src/views/logo-view.jsx
@@ -16,7 +16,7 @@ export default class LogoView extends React.PureComponent {
-
-
-
-
- person_add
-
+
+
+
+ person_add
+
Tinode Web
-{lastSeen}
+
);
diff --git a/src/widgets/avatar-crop.jsx b/src/widgets/avatar-crop.jsx
new file mode 100644
index 00000000..791ddff4
--- /dev/null
+++ b/src/widgets/avatar-crop.jsx
@@ -0,0 +1,70 @@
+// Edit account parameters.
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import Cropper from './cropper.jsx';
+import { imageCrop } from '../lib/blob-helpers.js';
+
+export default class AvatarCrop extends React.PureComponent {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ top: 0,
+ left: 0,
+ width: 0,
+ height: 0,
+ scale: 1
+ };
+
+ this.handleSubmit = this.handleSubmit.bind(this);
+ this.handleChange = this.handleChange.bind(this);
+ }
+
+ // Cut out in image coordinates and desired scale factor.
+ handleChange(left, top, width, height, scale) {
+ this.setState({
+ left: left,
+ top: top,
+ width: width,
+ height: height,
+ scale: scale
+ });
+ }
+
+ handleSubmit() {
+ imageCrop(this.props.mime, this.props.avatar,
+ this.state.left, this.state.top,
+ this.state.width, this.state.height,
+ this.state.scale,
+ (mime, blob, width, height) => {
+ this.props.onSubmit(mime, blob, width, height);
+ },
+ (err) => {
+ this.props.onError(err);
+ }
+ );
+ }
+
+ render() {
+ return (
+
{this.state.contextMenuVisible ?
-
+
+
+ );
+ }
+};
diff --git a/src/widgets/avatar-upload.jsx b/src/widgets/avatar-upload.jsx
index f9452393..a073841f 100644
--- a/src/widgets/avatar-upload.jsx
+++ b/src/widgets/avatar-upload.jsx
@@ -1,42 +1,32 @@
import React from 'react';
import LetterTile from './letter-tile.jsx';
+import LoadSpinner from './load-spinner.jsx';
-import { AVATAR_SIZE, MAX_EXTERN_ATTACHMENT_SIZE } from '../config.js';
-import { imageScaled, blobToBase64, makeImageDataUrl } from '../lib/blob-helpers.js';
+import { sanitizeImageUrl } from '../lib/utils.js';
+
+import { AVATAR_SIZE } from '../config.js';
export default class AvatarUpload extends React.Component {
constructor(props) {
super(props);
this.state = {
- dataUrl: props.avatar
+ source: props.avatar
};
- this.handleFileUpload = this.handleFileUpload.bind(this);
+ this.handleFileReceived = this.handleFileReceived.bind(this);
}
componentDidUpdate(prevProps) {
if (this.props.avatar != prevProps.avatar) {
- this.setState({dataUrl: this.props.avatar})
+ this.setState({source: this.props.avatar});
}
}
- handleFileUpload(e) {
- imageScaled(e.target.files[0], AVATAR_SIZE, AVATAR_SIZE, MAX_EXTERN_ATTACHMENT_SIZE, true,
- // Image successfully scaled and converted.
- (mime, blob) => {
- // Convert blob to base64-encoded bits.
- blobToBase64(blob, (unused, base64bits) => {
- const du = makeImageDataUrl({data: base64bits, type: mime});
- this.setState({dataUrl: du});
- this.props.onImageChanged(du);
- });
- },
- // Failure
- (err) => {
- this.props.onError(err, 'err');
- });
+ handleFileReceived(e) {
+ const image = e.target.files[0];
+ this.props.onImageUpdated(image.type, URL.createObjectURL(image), image.name);
// Clear the value so the same file can be uploaded again.
e.target.value = '';
}
@@ -48,16 +38,17 @@ export default class AvatarUpload extends React.Component {
const className = 'avatar-upload' + (this.props.readOnly ? ' read-only' : '');
return (
+
+
+ {this.props.onCancel ?
+
+ : null}
+
+
+
- {this.props.readOnly || !this.state.dataUrl ?
+ {this.props.readOnly || !this.state.source ?
null :
- {e.preventDefault(); this.props.onImageChanged(null);}}>
+ {e.preventDefault(); this.props.onImageUpdated();}}>
clear
}
- {this.state.dataUrl ?
- 
:
+ {this.state.source ?
+ )})
:
this.props.readOnly && this.props.uid ?
+
{this.props.userFrom && this.props.response ?
![]()
.
- el = UploadingImage;
- }
- }
- break;
- case 'BN':
- // Button
- attr.onClick = this.handleFormButtonClick;
- let inner = React.Children.map(values, (child) => {
- return typeof child == 'string' ? child : undefined;
- });
- if (!inner || inner.length == 0) {
- inner = [attr.name]
- }
- // Get text which will be sent back when the button is clicked.
- attr['data-title'] = inner.join('');
- break;
- case 'FM':
- // Form
- attr.className = 'bot-form';
- break;
- case 'RW':
- // Form element formatting is dependent on element content.
- break;
- default:
- if (el == '_UNKN') {
- // Unknown element.
- // TODO: make it prettier.
- el = <>extension;
- }
- break;
- }
- return React.createElement(el, attr, values);
- } else {
- return values;
- }
-};
+export default ChatMessage;
diff --git a/src/widgets/checkbox.jsx b/src/widgets/checkbox.jsx
index 04f48f37..28d10c2f 100644
--- a/src/widgets/checkbox.jsx
+++ b/src/widgets/checkbox.jsx
@@ -15,9 +15,11 @@ export default class CheckBox extends React.PureComponent {
render() {
return (
this.props.onChange ? (
- this.props.checked ?
+ this.props.checked === true ?
check_box :
- check_box_outline_blank
+ this.props.checked === false ?
+ check_box_outline_blank :
+ indeterminate_check_box
) : (
this.props.checked ?
check_box :
diff --git a/src/widgets/chip-input.jsx b/src/widgets/chip-input.jsx
index 48bb06f3..5e85d34b 100644
--- a/src/widgets/chip-input.jsx
+++ b/src/widgets/chip-input.jsx
@@ -2,7 +2,7 @@ import React from 'react';
import Chip from './chip.jsx';
-import { makeImageDataUrl } from '../lib/blob-helpers.js';
+import { makeImageUrl } from '../lib/blob-helpers.js';
/* BEGIN ChipInput: group membership widget */
export default class ChipInput extends React.Component {
@@ -118,8 +118,9 @@ export default class ChipInput extends React.Component {
this.state.sortedChips.map((item) => {
chips.push(
0);
return (
diff --git a/src/widgets/group-manager.jsx b/src/widgets/group-manager.jsx
index 5f7906ed..64705022 100644
--- a/src/widgets/group-manager.jsx
+++ b/src/widgets/group-manager.jsx
@@ -165,6 +165,7 @@ class GroupManager extends React.Component {
{AVATAR_SIZE}×{AVATAR_SIZE}
}
{this.props.readOnly ? null :
}
+ accept="image/*" onChange={this.handleFileReceived} />}
{this.props.readOnly ? null :
}
+ {icon_mapping[b] || b} {comment}
);
+ });
+ return <>{badges};
+ }
+ return null;
+ }
+};
+
+export default injectIntl(BadgeList);
diff --git a/src/widgets/chat-message.jsx b/src/widgets/chat-message.jsx
index 69c5d2d4..4e638877 100644
--- a/src/widgets/chat-message.jsx
+++ b/src/widgets/chat-message.jsx
@@ -1,15 +1,15 @@
// Single message, sent or received.
import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, injectIntl } from 'react-intl';
import { Drafty } from 'tinode-sdk';
import Attachment from './attachment.jsx';
import LetterTile from './letter-tile.jsx';
import ReceivedMarker from './received-marker.jsx'
-import UploadingImage from './uploading-image.jsx'
+
import { sanitizeImageUrl, sanitizeUrl } from '../lib/utils.js';
-export default class ChatMessage extends React.Component {
+class BaseChatMessage extends React.PureComponent {
constructor(props) {
super(props);
@@ -25,6 +25,8 @@ export default class ChatMessage extends React.Component {
this.handleFormButtonClick = this.handleFormButtonClick.bind(this);
this.handleContextClick = this.handleContextClick.bind(this);
this.handleCancelUpload = this.handleCancelUpload.bind(this);
+
+ this.handleQuoteClick = this.handleQuoteClick.bind(this);
}
handleImagePreview(e) {
@@ -60,12 +62,13 @@ export default class ChatMessage extends React.Component {
e.preventDefault();
e.stopPropagation();
const menuItems = this.props.received == Tinode.MESSAGE_STATUS_FAILED ? ['menu_item_send_retry'] : [];
- if (this.props.received >= Tinode.MESSAGE_STATUS_FAILED &&
+ if (this.props.userIsWriter &&
+ this.props.received > Tinode.MESSAGE_STATUS_FAILED &&
this.props.received < Tinode.MESSAGE_STATUS_DEL_RANGE) {
menuItems.push('menu_item_reply');
}
this.props.showContextMenu({ seq: this.props.seq, content: this.props.content,
- y: e.pageY, x: e.pageX }, menuItems);
+ y: e.pageY, x: e.pageX, pickReply: this.props.pickReply }, menuItems);
}
handleProgress(ratio) {
@@ -76,6 +79,15 @@ export default class ChatMessage extends React.Component {
this.props.onCancelUpload(this.props.seq, this.props.uploader);
}
+ handleQuoteClick(e) {
+ e.preventDefault();
+ e.stopPropagation();
+ const replyToSeq = this.props.replyToSeq;
+ if (replyToSeq) {
+ this.props.onQuoteClick(replyToSeq);
+ }
+ }
+
render() {
const sideClass = this.props.deleted ? 'center' :
(this.props.sequence + ' ' + (this.props.response ? 'left' : 'right'));
@@ -105,7 +117,8 @@ export default class ChatMessage extends React.Component {
onError={this.props.onError}
key={i} />);
}, this);
- content = React.createElement(React.Fragment, null, Drafty.format(content, draftyFormatter, this));
+ const tree = Drafty.format(content, this.props.formatter, this);
+ content = React.createElement(React.Fragment, null, tree);
} else if (this.props.deleted) {
// Message represents a range of deleted messages.
content = <>block
@@ -113,19 +126,18 @@ export default class ChatMessage extends React.Component {
defaultMessage="content deleted" description="Shown when messages are deleted" />
} else if (typeof content != 'string') {
- content = <>
- error_outline
-
{fullDisplay ?
{fullDisplay ?
- {
- (notFound) => {return this.props.userName || {notFound}}
- }
+ {this.props.userName ||
+
: null
}
@@ -169,86 +181,7 @@ export default class ChatMessage extends React.Component {
}
};
-// Convert Drafty object to a tree of React elements.
-import { BROKEN_IMAGE_SIZE, REM_SIZE } from '../config.js';
-import { fitImageSize } from '../lib/blob-helpers.js';
+const IntlChatMessage = injectIntl(BaseChatMessage);
+const ChatMessage = React.forwardRef((props, ref) =>
{chips}
@@ -141,7 +143,8 @@ export default class ChipInput extends React.Component {
onBlur={this.handleFocusLost}
onKeyDown={this.handleKeyDown}
value={this.state.input}
- autoFocus />
+ tabIndex={this.props.tabIndex}
+ autoFocus={autoFocus} />
);
}
diff --git a/src/widgets/chip.jsx b/src/widgets/chip.jsx
index 8182120c..711a8298 100644
--- a/src/widgets/chip.jsx
+++ b/src/widgets/chip.jsx
@@ -23,6 +23,7 @@ export default class Chip extends React.PureComponent {
:
{title}
{this.props.isChannel ? 
: null}
-
{this.props.showMode ?
: null}
- {marker}{subtitle || '\u00A0'}
}
+ this.props.small ? null : {marker}{subtitle || '\u00A0'}
}
-
+
-
{menu}
+
+ );
+ }
+}
diff --git a/src/widgets/doc-preview.jsx b/src/widgets/doc-preview.jsx
index ca9a3af7..8714c91d 100644
--- a/src/widgets/doc-preview.jsx
+++ b/src/widgets/doc-preview.jsx
@@ -45,6 +45,10 @@ export default class DocPreview extends React.PureComponent {
+ 
+
+
+
+
+
+
+ : null);
+
: null);
}
}
diff --git a/src/widgets/more-button.jsx b/src/widgets/more-button.jsx
deleted file mode 100644
index 7e0529e3..00000000
--- a/src/widgets/more-button.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-// Toggle [Title text >] -> [Title text v]
-
-import React from 'react';
-
-export default class MoreButton extends React.PureComponent {
- constructor(props) {
- super(props);
-
- this.state = {
- open: props.open
- };
- this.handleToggle = this.handleToggle.bind(this);
- }
-
- handleToggle() {
- const open = !this.state.open;
- this.setState({open: open});
- if (this.props.onToggle) {
- this.props.onToggle(open);
- }
- }
-
- render() {
- return ();
- }
-}
diff --git a/src/widgets/new-topic-group.jsx b/src/widgets/new-topic-group.jsx
index 37bcaefe..1dd14f1e 100644
--- a/src/widgets/new-topic-group.jsx
+++ b/src/widgets/new-topic-group.jsx
@@ -5,34 +5,36 @@ import AvatarUpload from './avatar-upload.jsx';
import CheckBox from './checkbox.jsx';
import TagManager from './tag-manager.jsx';
-import { MAX_TITLE_LENGTH } from '../config.js';
+import { MAX_TITLE_LENGTH, MAX_TOPIC_DESCRIPTION_LENGTH } from '../config.js';
export default class NewTopicGroup extends React.PureComponent {
constructor(props) {
super(props);
+ this.fullName = React.createRef();
+
this.state = {
- fn: '', // full/formatted name
+ fullName: '', // full/formatted name
private: '',
+ description: '',
imageDataUrl: null,
tags: [],
isChannel: false
};
- this.handleFnChange = this.handleFnChange.bind(this);
- this.handlePrivateChange = this.handlePrivateChange.bind(this);
+ this.handleFieldEdit = this.handleFieldEdit.bind(this);
this.handleImageChanged = this.handleImageChanged.bind(this);
this.handleTagsChanged = this.handleTagsChanged.bind(this);
this.handleChannelToggle = this.handleChannelToggle.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
- handleFnChange(e) {
- this.setState({fn: e.target.value});
+ componentDidMount() {
+ // this.fullName.current.focus();
}
- handlePrivateChange(e) {
- this.setState({private: e.target.value});
+ handleFieldEdit(name, e) {
+ this.setState({[name]: e.target.value || ''});
}
handleImageChanged(img) {
@@ -50,10 +52,11 @@ export default class NewTopicGroup extends React.PureComponent {
handleSubmit(e) {
e.preventDefault();
- const fn = this.state.fn.trim().substring(0, MAX_TITLE_LENGTH);
+ const fn = this.state.fullName.trim().substring(0, MAX_TITLE_LENGTH);
const comment = this.state.private.trim().substring(0, MAX_TITLE_LENGTH);
+ const description = this.state.description.trim().substring(0, MAX_TOPIC_DESCRIPTION_LENGTH);
if (fn) {
- this.props.onSubmit(fn, this.state.imageDataUrl, comment, this.state.tags, this.state.isChannel);
+ this.props.onSubmit(fn, description, this.state.imageDataUrl, comment, this.state.tags, this.state.isChannel);
}
}
@@ -64,8 +67,14 @@ export default class NewTopicGroup extends React.PureComponent {
}
return (