pro/im_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'devel' into repackage

Browse Source
This commit is contained in:
or-else
2018-09-04 16:27:17 +03:00
parent cf849d6412 7bf26a55be
commit 3865eb8928
6 changed files with 223 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+7 -3
View File
@@ -6,14 +6,18 @@ and [icons](https://google.github.io/material-design-icons/#icon-font-for-the-we
Although the app is generally usable, keep in mind that this is work in progress. Some bugs probably exist. The app was tested in the latest Chrome & Firefox only. NPM [is available](https://www.npmjs.com/package/tinode-webapp).
Try possibly newer or older version live at https://api.tinode.co/. Login as one of `alice`, `bob`, `carol`, `dave`, `frank`. Password is `<login>123`, e.g. password for `alice` is `alice123`. You can discover other users by email or phone by prefixing them with `email:` or `tel:` respectively. Emails are `<login>@example.com`, e.g. `alice@example.com`, phones are `17025550001` through `17025550009`. The demo is reset every night at 2:15am Pacific time.
License: [Apache 2.0](http://www.apache.org/licenses/LICENSE-2.0)
Try possibly newer or older version live at https://api.tinode.co/. For login and other instructions [see here](https://github.com/tinode/chat/#demo).
Sample avatar photos from https://www.pexels.com/ under [CC0 license](https://www.pexels.com/photo-license/).
Background pattern from http://subtlepatterns.com/, commercial and non-commercial use allowed with attribution.
## Getting support
* Read [client-side](http://tinode.github.io/js-api/) and [server-side](https://github.com/tinode/chat/blob/master/docs/API.md) API documentation.
* For support, general questions, discussions post to [https://groups.google.com/d/forum/tinode](https://groups.google.com/d/forum/tinode).
* For bugs and feature requests [open an issue](https://github.com/tinode/webchat/issues/new).
## Missing functionality
* Previews not generated for videos, audio, links or docs.
css/base.css
+4 -4
View File
@@ -1339,14 +1339,14 @@ ul.tabbar > li {
ul.tabbar > li > a {
position: relative;
padding-top: 0.75rem;
text-decoration: none;
text-transform: uppercase;
display: block;
min-width: 6rem;
min-width: 6.5rem;
text-align: center;
line-height: 2rem;
font-weight: 400;
font-size: 1.1rem;
font-size: 1.25rem;
font-variant: small-caps;
text-decoration: none;
color: rgba(33,150,243,0.6);
overflow: hidden;
box-shadow: inset 0 -2px 2.5px -1px rgba(0,0,0,0.25);
css/base.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
index.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
package.json
+1 -1
View File
@@ -1,7 +1,7 @@
{
"name": "tinode-webapp",
"description": "Tinode Web Client",
"version": "0.15.5-rc2",
"version": "0.15.5",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-minify": "^0.4.3",
src/webapp.js
+209 -123
View File
@@ -384,15 +384,25 @@ function setUrlTopic(hash, topic) {
// Detect server address from the URL
function detectServerAddress() {
var host = DEFAULT_HOST;
if (window.location.protocol === 'file:' || window.location.hostname === 'localhost') {
host = KNOWN_HOSTS.local;
} else if (window.location.hostname) {
host = window.location.hostname + (window.location.port ? ':' + window.location.port : '');
let host = DEFAULT_HOST;
if (typeof window.location == 'object') {
if (window.location.protocol == 'file:' || window.location.hostname == 'localhost') {
host = KNOWN_HOSTS.local;
} else if (window.location.hostname) {
host = window.location.hostname + (window.location.port ? ':' + window.location.port : '');
}
}
return host;
}
// Detect if the page is served over HTTPS.
function isSecureConnection() {
if (typeof window.location == 'object') {
return window.location.protocol == 'https:';
}
return false;
}
// Create VCard which represents topic 'public' info
function vcard(fn, imageDataUrl) {
var card = null;
@@ -475,7 +485,7 @@ function deleteMessages(all, hard, params, errorHandler) {
var promise = all ?
topic.delMessagesAll(hard) :
topic.delMessagesList([params.seq], hard);
promise.catch(function(err) {
promise.catch((err) => {
if (errorHandler) {
errorHandler(err.message, "err");
}
@@ -548,7 +558,7 @@ class ContextMenu extends React.Component {
this.toggle(false);
}
componentWillReceiveProps(nextProps) {
UNSAFE_componentWillReceiveProps(nextProps) {
this.toggle(nextProps.visible);
}
@@ -581,7 +591,7 @@ class ContextMenu extends React.Component {
e.preventDefault();
e.stopPropagation();
this.props.hide();
var item = this.props.items[e.currentTarget.dataset.id];
let item = this.props.items[e.currentTarget.dataset.id];
item.handler(this.props.params, this.props.onError);
}
@@ -590,16 +600,15 @@ class ContextMenu extends React.Component {
return null;
}
var count = 0;
var instance = this;
var menu = [];
this.props.items.map(function(item) {
let count = 0;
let menu = [];
this.props.items.map((item) => {
if (item && item.title) {
menu.push(
item.title === "-" ?
<li className="separator" key={count} />
:
<li onClick={instance.handleClick} data-id={count} key={count}>{item.title}</li>
<li onClick={this.handleClick} data-id={count} key={count}>{item.title}</li>
);
}
count++;
@@ -661,7 +670,7 @@ class MoreButton extends React.PureComponent {
}
handleToggle() {
var open = !this.state.open;
let open = !this.state.open;
this.setState({open: open});
if (this.props.onToggle) {
this.props.onToggle(open);
@@ -679,11 +688,11 @@ class MoreButton extends React.PureComponent {
/* BEGIN Lettertile: Avatar box: either a bitmap or a letter tile or a stock icon. */
class LetterTile extends React.PureComponent {
render() {
var avatar;
let avatar;
if (this.props.avatar === true) {
if (this.props.topic && this.props.title && this.props.title.trim()) {
var letter = this.props.title.trim().charAt(0);
var color = "lettertile dark-color" + (Math.abs(stringHash(this.props.topic)) % 16);
let letter = this.props.title.trim().charAt(0);
let color = "lettertile dark-color" + (Math.abs(stringHash(this.props.topic)) % 16);
avatar = (<div className={color}><div>{letter}</div></div>)
} else {
avatar = (Tinode.topicType(this.props.topic) === "grp") ?
@@ -708,6 +717,7 @@ class InPlaceEdit extends React.Component {
this.state = {
active: props.state,
initialText: props.text || "",
text: props.text || ""
};
@@ -717,12 +727,16 @@ class InPlaceEdit extends React.Component {
this.handleEditingFinished = this.handleEditingFinished.bind(this);
}
componentWillReceiveProps(nextProps) {
static getDerivedStateFromProps(nextProps, prevState) {
// If text has changed while in read mode, update text and discard changes.
// Ignore update if in edit mode.
if (this.props.text != nextProps.text && !this.state.active) {
this.setState({text: nextProps.text || ""});
if (prevState.initialText != nextProps.text && !prevState.active) {
return {
initialText: nextProps.text || "",
text: nextProps.text || ""
};
}
return null;
}
handeTextChange(e) {
@@ -875,8 +889,8 @@ class PermissionsEditor extends React.Component {
}
handleChange(val) {
var mode = this.state.mode;
var idx = mode.indexOf(val);
let mode = this.state.mode;
let idx = mode.indexOf(val);
if (idx == -1) {
mode += val;
} else {
@@ -901,8 +915,8 @@ class PermissionsEditor extends React.Component {
}
render() {
var all = 'JRWPASDO';
var names = {
const all = 'JRWPASDO';
const names = {
'J': 'Join (J)',
'R': 'Read (R)',
'W': 'Write (W)',
@@ -913,12 +927,12 @@ class PermissionsEditor extends React.Component {
'O': 'Owner (O)'
};
var skip = this.props.skip || "";
var mode = this.state.mode;
var compare = (this.props.compare || "").replace("N", "");
var items = [];
for (var i=0; i<all.length; i++) {
var c = all.charAt(i);
let skip = this.props.skip || "";
let mode = this.state.mode;
let compare = (this.props.compare || "").replace("N", "");
let items = [];
for (let i=0; i<all.length; i++) {
let c = all.charAt(i);
if (skip.indexOf(c) >= 0 && mode.indexOf(c) < 0) {
// Permission is marked as inactive: hide unchecked permissions, disable checked permissions
continue;
@@ -987,7 +1001,7 @@ class ChipInput extends React.Component {
this.handleKeyDown = this.handleKeyDown.bind(this);
}
componentWillReceiveProps(nextProps) {
UNSAFE_componentWillReceiveProps(nextProps) {
this.setState({
sortedChips: ChipInput.sortChips(nextProps.chips, nextProps.required),
chipIndex: ChipInput.indexChips(nextProps.chips)
@@ -1149,8 +1163,10 @@ class GroupSubs extends React.Component {
};
}
componentWillReceiveProps(nextProps) {
this.setState({onlineSubs: nextProps.subscribers ? nextProps.subscribers : []});
static getDerivedStateFromProps(nextProps, prevState) {
return {
onlineSubs: nextProps.subscribers ? nextProps.subscribers : []
};
}
render() {
@@ -1373,10 +1389,13 @@ class AvatarUpload extends React.Component {
this.handleFileUpload = this.handleFileUpload.bind(this);
}
componentWillReceiveProps(nextProps) {
if (this.props.avatar != nextProps.avatar) {
this.setState({dataUrl: nextProps.avatar});
static getDerivedStateFromProps(nextProps, prevState) {
if (prevState.dataUrl != nextProps.avatar) {
return {
dataUrl: nextProps.avatar
};
}
return null;
}
handleFileUpload(e) {
@@ -1429,16 +1448,31 @@ class SettingsView extends React.PureComponent {
super(props);
this.state = {
transport: "def"
transport: props.transport || "def",
messageSounds: props.messageSounds,
desktopAlerts: props.desktopAlerts && props.desktopAlertsEnabled
};
this.handleSubmit = this.handleSubmit.bind(this);
this.handleCheckboxClick = this.handleCheckboxClick.bind(this);
this.handleTransportSelected = this.handleTransportSelected.bind(this);
}
handleSubmit(e) {
e.preventDefault();
this.props.onUpdate(null, this.state.transport);
this.props.onUpdate({
transport: this.state.transport,
messageSounds: this.state.messageSounds,
desktopAlerts: this.state.desktopAlerts
});
}
handleCheckboxClick(what, checked) {
if (what == "sound") {
this.setState({messageSounds: checked});
} else if (what == "alert") {
this.setState({desktopAlerts: checked});
}
}
handleTransportSelected(e) {
@@ -1463,10 +1497,26 @@ class SettingsView extends React.PureComponent {
});
return (
<form id="settings-form" onSubmit={this.handleSubmit}>
<label className="small">Wire transport:</label>
<ul className="quoted">
{transportOptions}
</ul>
<div className="panel-form-row">
<label forHtml="message-sound">Message sound:</label>
<CheckBox name="sound" id="message-sound"
checked={this.state.messageSounds}
onChange={this.handleCheckboxClick} />
</div>
<div className="panel-form-row">
<label forHtml="desktop-alerts">Notification alerts{!this.props.desktopAlertsEnabled ? ' (requires HTTPS)' : null}:</label>
<CheckBox name="alert" id="desktop-alerts"
checked={this.state.desktopAlerts}
onChange={this.props.desktopAlertsEnabled ? this.handleCheckboxClick : null} />
</div>
<div className="panel-form-row">
<label className="small">Wire transport:</label>
</div>
<div className="panel-form-row">
<ul className="quoted">
{transportOptions}
</ul>
</div>
<div className="dialog-buttons">
<button type="submit" className="blue">Update</button>
</div>
@@ -1587,7 +1637,7 @@ class SidepanelView extends React.Component {
disabled={this.props.loginDisabled}
serverAddress={this.props.serverAddress}
onLogin={this.handleLoginRequested}
onServerAddressChange={this.props.onConnectionSettings} /> :
onServerAddressChange={this.props.onGlobalSettings} /> :
view === 'register' ?
<CreateAccountView
@@ -1596,8 +1646,13 @@ class SidepanelView extends React.Component {
onError={this.props.onError} /> :
view === 'settings' ?
<SettingsView onCancel={this.props.onCancel}
onUpdate={this.props.onConnectionSettings}
<SettingsView
transport={this.props.transport}
messageSounds={this.props.messageSounds}
desktopAlerts={this.props.desktopAlerts}
desktopAlertsEnabled={this.props.desktopAlertsEnabled}
onCancel={this.props.onCancel}
onUpdate={this.props.onGlobalSettings}
/> :
view === 'edit' ?
@@ -1614,6 +1669,7 @@ class SidepanelView extends React.Component {
connected={this.props.connected}
topicSelected={this.props.topicSelected}
showContextMenu={this.props.showContextMenu}
messageSounds={this.props.messageSounds}
onTopicSelected={this.props.onTopicSelected}
onAcsChange={this.props.onAcsChange}
onOnlineChange={this.props.onOnlineChange} /> :
@@ -1652,8 +1708,10 @@ class ErrorPanel extends React.PureComponent {
this.hide = this.hide.bind(this);
}
componentWillReceiveProps(nextProps) {
this.setState({show: !(!nextProps.level)});
static getDerivedStateFromProps(nextProps, prevState) {
return {
show: !(!nextProps.level)
};
}
hide() {
@@ -1832,8 +1890,8 @@ class TagManager extends React.Component {
this.handleCancel = this.handleCancel.bind(this);
}
componentWillReceiveProps(nextProps) {
this.setState({tags: nextProps.tags});
static getDerivedStateFromProps(nextProps, prevState) {
return {tags: nextProps.tags};
}
handleShowTagManager() {
@@ -2037,16 +2095,15 @@ class UnreadBadge extends React.PureComponent {
/* Contact's labels: [you], [muted], [blocked], etc */
// FIXME: this class is unused.
class ContactBadges_UNUSED_REMOVE extends React.Component {
class ContactBadges_UNUSED_REMOVE extends React.PureComponent {
render() {
var badges = null;
let badges = null;
if (this.props.badges && this.props.badges.length > 0) {
var count = 0;
badges = [];
this.props.badges.map(function(b) {
var style = "badge" + (b.color ? " " + b.color : "");
badges.push(<span className={style} key={count}>{b.name}</span>);
count ++;
// Badge names are expected to be unique, so using the name as the key.
badges.push(<span className={style} key={b.name}>{b.name}</span>);
});
}
return badges;
@@ -2079,7 +2136,7 @@ class ContactsView extends React.Component {
me.onSubsUpdated = undefined;
}
componentWillReceiveProps(nextProps) {
UNSAFE_componentWillReceiveProps(nextProps) {
if (this.props.topicSelected != nextProps.topicSelected) {
// If topicSelecetd is changed externally, update the
// topic with online status and access mode.
@@ -2107,12 +2164,12 @@ class ContactsView extends React.Component {
// New message received
// Skip update if the topic is currently open, otherwise the badge will annoyingly flash.
if (this.props.topicSelected !== cont.topic) {
// Disable sound for now. Need to add a config option.
// POP_SOUND.play();
if (this.props.messageSounds) {
POP_SOUND.play();
}
this.resetContactList();
} else if (document.hidden) {
// Disable sound for now.
// POP_SOUND.play();
} else if (document.hidden && this.props.messageSounds) {
POP_SOUND.play();
}
} else if (what === "recv") {
// Explicitly ignoring "recv" -- it causes no visible updates to contact list.
@@ -2434,8 +2491,7 @@ class NewTopicView extends React.Component {
this.state = {
tabSelected: "p2p",
searchQuery: props.contactsSearchQuery,
contactList: props.foundContacts,
contactSelected: null
contactList: props.foundContacts
};
this.handleTabClick = this.handleTabClick.bind(this);
@@ -2448,17 +2504,17 @@ class NewTopicView extends React.Component {
this.props.onInitFind();
}
componentWillReceiveProps(nextProps) {
this.setState({
static getDerivedStateFromProps(nextProps, prevState) {
return {
searchQuery: nextProps.contactsSearchQuery,
contactList: nextProps.foundContacts
});
};
}
handleTabClick(e) {
e.preventDefault();
window.location.hash = addUrlParam(window.location.hash, 'tab', e.currentTarget.dataset.id);
this.setState({tabSelected: e.currentTarget.dataset.id, contactSelected: null});
this.setState({tabSelected: e.currentTarget.dataset.id});
}
handleContactSelected(sel) {
@@ -2483,10 +2539,10 @@ class NewTopicView extends React.Component {
<div className="flex-column">
<ul className="tabbar">
<li className={this.state.tabSelected === "p2p" ? "active" : null}>
<a href="javascript:;" data-id="p2p" onClick={this.handleTabClick}>1:1</a>
<a href="javascript:;" data-id="p2p" onClick={this.handleTabClick}>find</a>
</li>
<li className={this.state.tabSelected === "grp" ? "active" : null}>
<a href="javascript:;" data-id="grp" onClick={this.handleTabClick}>group</a>
<a href="javascript:;" data-id="grp" onClick={this.handleTabClick}>new group</a>
</li>
<li className={this.state.tabSelected === "byid" ? "active" : null}>
<a href="javascript:;" data-id="byid" onClick={this.handleTabClick}>by id</a>
@@ -2606,7 +2662,7 @@ class SearchContacts extends React.Component {
this.handleSearchChange = this.handleSearchChange.bind(this);
this.handleSearch = this.handleSearch.bind(this);
this.handleClear = this.handleClear.bind(this);
this.handleKeyPress = this.handleKeyPress.bind(this);
this.handleKeyDown = this.handleKeyDown.bind(this);
}
componentWillUnmount() {
@@ -2626,6 +2682,8 @@ class SearchContacts extends React.Component {
if (query.length > 0) {
this.setState({edited: true});
this.props.onSearchContacts(query);
} else if (this.props.searchQuery) {
this.props.onSearchContacts(DEL_CHAR);
}
}
@@ -2636,9 +2694,11 @@ class SearchContacts extends React.Component {
this.setState({search: '', edited: false});
}
handleKeyPress(e) {
handleKeyDown(e) {
if (e.key === 'Enter') {
this.handleSearch(e);
} else if (e.key === 'Escape') {
this.handleClear();
}
}
@@ -2650,7 +2710,7 @@ class SearchContacts extends React.Component {
<input className="search" type="text"
placeholder="List like email:alice@example.com, tel:17025550003..."
value={this.state.search} onChange={this.handleSearchChange}
onKeyPress={this.handleKeyPress} required autoFocus />
onKeyDown={this.handleKeyDown} required autoFocus />
<a href="javascript:;" onClick={this.handleClear}>
<i className="material-icons">close</i>
</a>
@@ -2726,8 +2786,8 @@ class ValidationView extends React.PureComponent {
this.handleSubmit = this.handleSubmit.bind(this);
}
componentWillReceiveProps(nextProps) {
this.setState({code: nextProps.credCode});
static getDerivedStateFromProps(nextProps, prevState) {
return {code: nextProps.credCode};
}
handleChange(e) {
@@ -2758,7 +2818,7 @@ class ValidationView extends React.PureComponent {
</label>
</div>
<div className="panel-form-row">
<input type="text" id="enter-confirmation-code" placeholder="The code is 123456"
<input type="text" id="enter-confirmation-code" placeholder="Numbers only"
value={this.state.code} onChange={this.handleChange}
onKeyPress={this.handleKeyPress} required />
</div>
@@ -2828,7 +2888,7 @@ class InfoView extends React.Component {
}
// No need to separately handle component mount.
componentWillReceiveProps(props) {
UNSAFE_componentWillReceiveProps(props) {
var topic = Tinode.getTopic(props.topic);
if (!topic) {
return;
@@ -3191,7 +3251,7 @@ class InfoView extends React.Component {
<div className="panel-form-row">
<label>Muted:</label>
<CheckBox name="P" checked={this.state.muted}
onChange={this.handleMuted} />
onChange={this.handleMuted} />
</div>
<MoreButton
title="More"
@@ -3579,6 +3639,7 @@ class MessagesView extends React.Component {
this.handleDescChange = this.handleDescChange.bind(this);
this.handleSubsUpdated = this.handleSubsUpdated.bind(this);
this.handleNewMessage = this.handleNewMessage.bind(this);
this.handleAllMessagesReceived = this.handleAllMessagesReceived.bind(this);
this.handleInfoReceipt = this.handleInfoReceipt.bind(this);
this.handleImagePreview = this.handleImagePreview.bind(this);
this.handleCloseImagePreview = this.handleCloseImagePreview.bind(this);
@@ -3610,7 +3671,7 @@ class MessagesView extends React.Component {
}
}
componentWillReceiveProps(nextProps) {
UNSAFE_componentWillReceiveProps(nextProps) {
this.propsChange(nextProps);
}
@@ -3636,6 +3697,7 @@ class MessagesView extends React.Component {
// Bind the new topic to component.
topic.onData = this.handleNewMessage;
topic.onAllMessagesReceived = this.handleAllMessagesReceived;
topic.onInfo = this.handleInfoReceipt;
topic.onMetaDesc = this.handleDescChange;
topic.onSubsUpdated = this.handleSubsUpdated;
@@ -3688,10 +3750,6 @@ class MessagesView extends React.Component {
// Show "loading" spinner.
this.setState({ fetchingMessages: true });
topic.subscribe(getQuery.build())
.then(() => {
// Hide spinner.
this.setState({ fetchingMessages: false });
})
.catch((err) => {
this.props.onError(err.message, "err");
this.setState({
@@ -3716,6 +3774,7 @@ class MessagesView extends React.Component {
});
}
oldTopic.onData = undefined;
oldTopic.onAllMessagesReceived = undefined;
oldTopic.onInfo = undefined;
oldTopic.onMetaDesc = undefined;
oldTopic.onSubsUpdated = undefined;
@@ -3733,20 +3792,16 @@ class MessagesView extends React.Component {
// Get older messages
fetchMoreMessages(event) {
var instance = this;
if (event.target.scrollTop <= 0) {
var started = false;
var newState = {scrollPosition: event.target.scrollHeight - event.target.scrollTop};
this.setState(function(prevState, props) {
let newState = {scrollPosition: event.target.scrollHeight - event.target.scrollTop};
this.setState((prevState, props) => {
if (!prevState.fetchingMessages) {
var topic = Tinode.getTopic(instance.state.topic);
var topic = Tinode.getTopic(this.state.topic);
if (topic && topic.isSubscribed() && topic.msgHasMoreMessages()) {
newState.fetchingMessages = true;
topic.getMessagesPage(MESSAGES_PAGE).then(function() {
instance.setState({fetchingMessages: false});
}).catch(function(err) {
instance.setState({fetchingMessages: false});
instance.props.onError(err.message, "err");
topic.getMessagesPage(MESSAGES_PAGE).catch((err) => {
this.setState({fetchingMessages: false});
this.props.onError(err.message, "err");
});
}
}
@@ -3815,6 +3870,10 @@ class MessagesView extends React.Component {
this.setState(newState);
}
handleAllMessagesReceived(count) {
this.setState({fetchingMessages: false});
}
handleInfoReceipt(info) {
switch (info.what) {
case "kp": {
@@ -4301,7 +4360,7 @@ class TinodeWeb extends React.Component {
this.handleUpdateAccountRequest = this.handleUpdateAccountRequest.bind(this);
this.handleUpdateAccountTagsRequest = this.handleUpdateAccountTagsRequest.bind(this);
this.handleSettings = this.handleSettings.bind(this);
this.handleConnectionSettings = this.handleConnectionSettings.bind(this);
this.handleGlobalSettings = this.handleGlobalSettings.bind(this);
this.handleSidepanelCancel = this.handleSidepanelCancel.bind(this);
this.handleNewTopic = this.handleNewTopic.bind(this);
this.handleNewTopicRequest = this.handleNewTopicRequest.bind(this);
@@ -4323,10 +4382,17 @@ class TinodeWeb extends React.Component {
}
getBlankState() {
let settings = localStorage.getObject("settings") || {};
return {
connected: false,
transport: null,
serverAddress: detectServerAddress(),
transport: settings.transport || null,
serverAddress: settings.serverAddress || detectServerAddress(),
// "On" is the default, so saving the "off" state.
messageSounds: !settings.messageSoundsOff,
desktopAlerts: settings.desktopAlerts,
desktopAlertsEnabled: isSecureConnection(),
sidePanelSelected: 'login',
sidePanelTitle: null,
sidePanelAvatar: null,
@@ -4351,7 +4417,7 @@ class TinodeWeb extends React.Component {
contextMenuParams: null,
contextMenuItems: [],
serverVersion: 'no connection',
contactsSearchQuery: '',
contactsSearchQuery: undefined,
foundContacts: [],
credMethod: undefined,
credCode: undefined
@@ -4445,11 +4511,11 @@ class TinodeWeb extends React.Component {
}
// Save validation credentials, if available.
if (hash.params.code && hash.params.method) {
this.setState({
credCode: hash.params.code,
credMethod: hash.params.method
});
if (hash.params.method) {
this.setState({ credMethod: hash.params.method });
}
if (hash.params.code) {
this.setState({ credCode: hash.params.code });
}
// Additional parameters of panels.
@@ -4495,17 +4561,16 @@ class TinodeWeb extends React.Component {
// User clicked Login button in the side panel.
handleLoginRequest(login, password) {
var instance = this;
this.setState({loginDisabled: true, login: login, password: password});
this.handleError("", null);
if (Tinode.isConnected()) {
this.doLogin(login, password, {meth: this.state.credMethod, resp: this.state.credCode});
} else {
Tinode.connect().catch(function(err) {
Tinode.connect().catch((err) => {
// Socket error
instance.setState({loginDisabled: false});
instance.handleError(err.message, "err");
this.setState({loginDisabled: false});
this.handleError(err.message, "err");
});
}
}
@@ -4542,6 +4607,9 @@ class TinodeWeb extends React.Component {
if (promise) {
promise.then((ctrl) => {
if (ctrl.code >= 300 && ctrl.text === "validate credentials") {
if (cred) {
this.handleError("Code does not match", "warn");
}
this.handleCredentialsRequest(ctrl.params);
} else {
this.handleLoginSuccessful(this);
@@ -4640,9 +4708,8 @@ class TinodeWeb extends React.Component {
this.tnFndSubsUpdated();
} else {
fnd.onSubsUpdated = this.tnFndSubsUpdated;
var instance = this;
fnd.subscribe(fnd.startMetaQuery().withSub().withTags().build()).catch(function(err){
instance.handleError(err.message, "err");
fnd.subscribe(fnd.startMetaQuery().withSub().withTags().build()).catch((err) => {
this.handleError(err.message, "err");
});
}
}
@@ -4655,16 +4722,17 @@ class TinodeWeb extends React.Component {
});
this.setState({foundContacts: contacts});
}
/** Called when the user enters a contact into the contact search field in the NewAccount panel
@param query {Array} is an array of contacts to search for
*/
handleSearchContacts(query) {
var fnd = Tinode.getFndTopic();
var instance = this;
fnd.setMeta({desc: {public: query}}).then(function(ctrl) {
this.setState({contactsSearchQuery: query == DEL_CHAR ? '' : query});
fnd.setMeta({desc: {public: query}}).then((ctrl) => {
return fnd.getMeta(fnd.startMetaQuery().withSub().build());
}).catch(function(err){
instance.handleError(err.message, "err");
}).catch((err) => {
this.handleError(err.message, "err");
});
}
@@ -4751,19 +4819,18 @@ class TinodeWeb extends React.Component {
// Actual registration of a new account.
handleNewAccountRequest(login_, password_, public_, cred_, tags_) {
var instance = this;
Tinode.connect(this.state.serverAddress)
.then(function() {
var params = Tinode.addCredential({public: public_, tags: tags_}, cred_);
return Tinode.createAccountBasic(login_, password_, params);
}).then(function(ctrl) {
}).then((ctrl) => {
if (ctrl.code >= 300 && ctrl.text === "validate credentials") {
instance.handleCredentialsRequest(ctrl.params);
this.handleCredentialsRequest(ctrl.params);
} else {
instance.handleLoginSuccessful(instance);
this.handleLoginSuccessful(this);
}
}).catch(function(err) {
instance.handleError(err.message, "err");
}).catch((err) => {
this.handleError(err.message, "err");
});
}
@@ -4794,11 +4861,26 @@ class TinodeWeb extends React.Component {
window.location.hash = setUrlSidePanel(window.location.hash, this.state.myUserId ? 'edit' : 'settings');
}
// User updated connection parameters - transport and server address
handleConnectionSettings(serverAddress, transport) {
transport = transport || this.state.transport;
serverAddress = serverAddress || this.state.serverAddress;
this.setState({serverAddress: serverAddress, transport: transport, sidePanelSelected: 'login'});
// User updated global parameters.
handleGlobalSettings(settings) {
let serverAddress = settings.serverAddress || this.state.serverAddress;
let transport = settings.transport || this.state.transport;
let messageSounds = (typeof settings.messageSounds == 'boolean') ? settings.messageSounds : this.state.messageSounds;
let desktopAlerts = settings.desktopAlerts || this.state.desktopAlerts;
this.setState({
serverAddress: serverAddress,
transport: transport,
messageSounds: messageSounds,
desktopAlerts: desktopAlerts,
});
localStorage.setObject({
serverAddress: serverAddress,
messageSoundsOff: !messageSounds,
transport: this.state.transport,
desktopAlerts: desktopAlerts
});
window.location.hash = setUrlSidePanel(window.location.hash, '');
TinodeWeb.tnSetup(serverAddress, transport);
}
@@ -5028,8 +5110,12 @@ class TinodeWeb extends React.Component {
credMethod={this.state.credMethod}
credCode={this.state.credCode}
transport={this.state.transport}
messageSounds={this.state.messageSounds}
desktopAlerts={this.state.desktopAlerts}
desktopAlertsEnabled={this.state.desktopAlertsEnabled}
serverAddress={this.state.serverAddress}
onConnectionSettings={this.handleConnectionSettings}
onGlobalSettings={this.handleGlobalSettings}
onSignUp={this.handleNewAccount}
onSettings={this.handleSettings}