Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-16 05:04:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

Better support for inviting multiple people

Browse Source 
Pasting a list of addresses into the box will now pop up a dialog to confirm and show you the success / failure state of each address. It will also not die if it gets rate limited.

Fixes https://github.com/vector-im/vector-web/issues/1713
This commit is contained in:
David Baker 2016-08-10 17:11:49 +01:00
parent e0f71977b4
commit 54b3638a85
4 changed files with 302 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/Invite.js Normal file
View File

@ -0,0 +1,45 @@
/*
Copyright 2016 OpenMarket Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import MatrixClientPeg from './MatrixClientPeg';
const emailRegex = /^\S+@\S+\.\S+$/;
export function getAddressType(inputText) {
const isEmailAddress = /^\S+@\S+\.\S+$/.test(inputText);
const isMatrixId = inputText[0] === '@' && inputText.indexOf(":") > 0;
// sanity check the input for user IDs
if (isEmailAddress) {
return 'email';
} else if (isMatrixId) {
return 'mx';
} else {
return null;
}
}
export function inviteToRoom(roomId, addr) {
const addrType = getAddressType(addr);
if (addrType == 'email') {
return MatrixClientPeg.get().inviteByEmail(roomId, addr);
} else if (addrType == 'mx') {
return MatrixClientPeg.get().invite(roomId, addr);
} else {
throw new Error('Unsupported address');
}
}

1
src/component-index.js
View File

@ -48,6 +48,7 @@ module.exports.components['views.create_room.RoomAlias'] = require('./components
module.exports.components['views.dialogs.DeactivateAccountDialog'] = require('./components/views/dialogs/DeactivateAccountDialog');
module.exports.components['views.dialogs.ErrorDialog'] = require('./components/views/dialogs/ErrorDialog');
module.exports.components['views.dialogs.LogoutPrompt'] = require('./components/views/dialogs/LogoutPrompt');
module.exports.components['views.dialogs.MultiInviteDialog'] = require('./components/views/dialogs/MultiInviteDialog');
module.exports.components['views.dialogs.NeedToRegisterDialog'] = require('./components/views/dialogs/NeedToRegisterDialog');
module.exports.components['views.dialogs.QuestionDialog'] = require('./components/views/dialogs/QuestionDialog');
module.exports.components['views.dialogs.SetDisplayNameDialog'] = require('./components/views/dialogs/SetDisplayNameDialog');

199
src/components/views/dialogs/MultiInviteDialog.js Normal file
View File

@ -0,0 +1,199 @@
/*
Copyright 2016 OpenMarket Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import {getAddressType, inviteToRoom} from '../../../Invite';
import sdk from '../../../index';
export default class MultiInviteDialog extends React.Component {
constructor(props, context) {
super(props, context);
this._onCancel = this._onCancel.bind(this);
this._startInviting = this._startInviting.bind(this);
this.state = {
busy: false,
completionStates: [], // State of each address (invited or error)
errorTexts: [], // Textual error per address
done: false,
};
for (let i = 0; i < this.props.inputs.length; ++i) {
const input = this.props.inputs[i];
if (getAddressType(input) === null) {
this.state.completionStates[i] = 'error';
this.state.errorTexts[i] = 'Unrecognised address';
}
}
}
_onCancel() {
this.props.onFinished(false);
}
_startInviting() {
this.setState({
completionStates: [],
busy: true,
done: false,
});
this._inviteMore(0);
}
_inviteMore(nextIndex) {
if (nextIndex == this.props.inputs.length) {
this.setState({
busy: false,
done: true,
});
return;
}
const input = this.props.inputs[nextIndex];
// don't try to invite it if it's an invalid address
// (it will already be marked as an error though,
// so no need top do so again
if (getAddressType(input) === null) {
this._inviteMore(nextIndex + 1);
return;
}
// don't re-invite (there's no way in the UI to do this, but
// for sanity's sake)
if (this.state.completionStates[nextIndex] == 'invited') {
this._inviteMore(nextIndex + 1);
return;
}
inviteToRoom(this.props.roomId, input).then(() => {
this.setState((s) => {
s.completionStates[nextIndex] = 'invited'
return s;
});
this._inviteMore(nextIndex + 1);
}, (err) => {
let errorText;
let fatal = false;
if (err.errcode == 'M_FORBIDDEN') {
fatal = true;
errorText = 'You do not have permission to invite people to this room.';
} else if (err.errcode == 'M_LIMIT_EXCEEDED') {
// we're being throttled so wait a bit & try again
setTimeout(() => {
this._inviteMore(nextIndex);
}, 5000);
return;
} else {
errorText = 'Unknown server error';
}
this.setState((s) => {
s.completionStates[nextIndex] = 'error';
s.errorTexts[nextIndex] = errorText;
s.busy = !fatal;
s.done = fatal;
return s;
});
if (!fatal) {
this._inviteMore(nextIndex + 1);
}
});
}
_getProgressIndicator() {
const numErrors = this.state.completionStates.filter((s) => {
return s == 'error';
}).length;
let errorText;
if (numErrors > 0) {
const plural = numErrors > 1 ? 's' : '';
errorText = <span className="error">({numErrors} error{plural})</span>
}
return <span>
{this.state.completionStates.length} / {this.props.inputs.length} {errorText}
</span>;
}
render() {
const Spinner = sdk.getComponent("elements.Spinner");
const inviteTiles = [];
for (let i = 0; i < this.props.inputs.length; ++i) {
const input = this.props.inputs[i];
let statusClass = '';
let statusElement;
if (this.state.completionStates[i] == 'error') {
statusClass = 'error';
statusElement = <p className="mx_MultiInviteDialog_statusText">{this.state.errorTexts[i]}</p>;
} else if (this.state.completionStates[i] == 'invited') {
statusClass = 'invited';
}
inviteTiles.push(
<li key={i}>
<p className={statusClass}>{input}</p>
{statusElement}
</li>
);
}
let controls = [];
if (this.state.busy) {
controls.push(<Spinner key="spinner" />);
controls.push(<span key="progr">{this._getProgressIndicator()}</span>);
} else if (this.state.done) {
controls.push(
<button
key="cancel"
className="mx_Dialog_primary"
onClick={this._onCancel}
>Done</button>
);
controls.push(<span key="progr">{this._getProgressIndicator()}</span>);
} else {
controls.push(
<button
key="invite"
onClick={this._startInviting}
autoFocus={true}
className="mx_Dialog_primary"
>
Invite
</button>);
controls.push(<button key="cancel" onClick={this._onCancel}>Cancel</button>);
}
return (
<div className="mx_MultiInviteDialog">
<div className="mx_Dialog_title">
Inviting {this.props.inputs.length} People
</div>
<div className="mx_Dialog_content">
<ul>
{inviteTiles}
</ul>
</div>
<div className="mx_Dialog_buttons">
{controls}
</div>
</div>
);
}
}
MultiInviteDialog.propTypes = {
onFinished: React.PropTypes.func.isRequired,
};

113
src/components/views/rooms/MemberList.js
View File

@ -24,6 +24,7 @@ var sdk = require('../../../index');
var GeminiScrollbar = require('react-gemini-scrollbar');
var rate_limited_func = require('../../../ratelimitedfunc');
var CallHandler = require("../../../CallHandler");
var Invite = require("../../../Invite");
var INITIAL_LOAD_NUM_MEMBERS = 30;
var SHARE_HISTORY_WARNING =
@ -191,22 +192,20 @@ module.exports = React.createClass({
// email addresses and user IDs do not allow space, comma, semicolon so split
// on them for bulk inviting.
var separators =[ ";", " ", "," ];
for (var i = 0; i < separators.length; i++) {
if (inputText.indexOf(separators[i]) >= 0) {
var inputs = inputText.split(separators[i]);
inputs.forEach(function(input) {
self.onInvite(input);
});
return;
// '+' here will treat multiple consecutive separators as one separator, so
// ', ' separators will also do the right thing.
const inputs = inputText.split(/[, ;]+/).filter((x) => {
return x.trim().length > 0;
});
let validInputs = 0;
for (const input of inputs) {
if (Invite.getAddressType(input) != null) {
++validInputs;
}
}
var isEmailAddress = /^\S+@\S+\.\S+$/.test(inputText);
// sanity check the input for user IDs
if (!isEmailAddress && (inputText[0] !== '@' || inputText.indexOf(":") === -1)) {
console.error("Bad ID to invite: %s", inputText);
if (validInputs == 0) {
Modal.createDialog(ErrorDialog, {
title: "Invite Error",
description: "Malformed ID. Should be an email address or a Matrix ID like '@localpart:domain'"
@ -243,53 +242,55 @@ module.exports = React.createClass({
inviteWarningDefer.resolve();
}
var promise = inviteWarningDefer.promise;
if (isEmailAddress) {
promise = promise.then(function() {
return MatrixClientPeg.get().inviteByEmail(self.props.roomId, inputText);
});
}
else {
promise = promise.then(function() {
return MatrixClientPeg.get().invite(self.props.roomId, inputText);
});
}
const promise = inviteWarningDefer.promise;
self.setState({
inviting: true
});
console.log(
"Invite %s to %s - isEmail=%s", inputText, this.props.roomId, isEmailAddress
);
promise.then(function(res) {
console.log("Invited %s", inputText);
}, function(err) {
if (err !== null) {
console.error("Failed to invite: %s", JSON.stringify(err));
if (err.errcode == 'M_FORBIDDEN') {
Modal.createDialog(ErrorDialog, {
title: "Unable to Invite",
description: "You do not have permission to invite people to this room."
});
} else {
Modal.createDialog(ErrorDialog, {
title: "Server error whilst inviting",
description: err.message
});
if (inputs.length == 1) {
// for a single address, we just send the invite
promise.then(() => {
return Invite.inviteToRoom(self.props.roomId, inputs[0]);
}).catch((err) => {
if (err !== null) {
console.error("Failed to invite: %s", JSON.stringify(err));
if (err.errcode == 'M_FORBIDDEN') {
Modal.createDialog(ErrorDialog, {
title: "Unable to Invite",
description: "You do not have permission to invite people to this room."
});
} else {
Modal.createDialog(ErrorDialog, {
title: "Server error whilst inviting",
description: err.message
});
}
}
}
}).finally(function() {
self.setState({
inviting: false
});
}).finally(() => {
self.setState({
inviting: false
});
// XXX: hacky focus on the invite box
setTimeout(function() {
var inviteBox = document.getElementById("mx_SearchableEntityList_query");
if (inviteBox) {
inviteBox.focus();
}
}, 0);
}).done();
self.setState({
inviting: false
inviting: true
});
// XXX: hacky focus on the invite box
setTimeout(function() {
var inviteBox = document.getElementById("mx_SearchableEntityList_query");
if (inviteBox) {
inviteBox.focus();
}
}, 0);
});
} else {
// if there are several, display the confirmation/progress dialog
promise.done(() => {
const MultiInviteDialog = sdk.getComponent('views.dialogs.MultiInviteDialog');
Modal.createDialog(MultiInviteDialog, {
roomId: this.props.roomId,
inputs: inputs,
});
});
}
},
getMemberDict: function() {