2016-01-12 14:11:15 +00:00
|
|
|
/*
|
|
|
|
Copyright 2015, 2016 OpenMarket Ltd
|
2017-02-17 15:50:30 +00:00
|
|
|
Copyright 2017 Vector Creations Ltd
|
2016-01-12 14:11:15 +00:00
|
|
|
|
|
|
|
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.
|
|
|
|
*/
|
|
|
|
|
|
|
|
'use strict';
|
|
|
|
|
2017-10-11 16:56:17 +00:00
|
|
|
const React = require('react');
|
2017-12-26 01:03:18 +00:00
|
|
|
import PropTypes from 'prop-types';
|
2017-10-11 16:56:17 +00:00
|
|
|
const sdk = require('../../../index');
|
|
|
|
const MatrixClientPeg = require('../../../MatrixClientPeg');
|
2016-01-12 14:11:15 +00:00
|
|
|
|
2017-11-13 19:19:33 +00:00
|
|
|
import { _t } from '../../../languageHandler';
|
2017-05-23 14:16:31 +00:00
|
|
|
|
2016-01-12 14:11:15 +00:00
|
|
|
module.exports = React.createClass({
|
|
|
|
displayName: 'RoomPreviewBar',
|
|
|
|
|
|
|
|
propTypes: {
|
2017-12-26 01:03:18 +00:00
|
|
|
onJoinClick: PropTypes.func,
|
|
|
|
onRejectClick: PropTypes.func,
|
|
|
|
onForgetClick: PropTypes.func,
|
2016-03-10 17:43:20 +00:00
|
|
|
|
|
|
|
// if inviterName is specified, the preview bar will shown an invite to the room.
|
|
|
|
// You should also specify onRejectClick if specifiying inviterName
|
2017-12-26 01:03:18 +00:00
|
|
|
inviterName: PropTypes.string,
|
2016-03-17 18:38:25 +00:00
|
|
|
|
|
|
|
// If invited by 3rd party invite, the email address the invite was sent to
|
2017-12-26 01:03:18 +00:00
|
|
|
invitedEmail: PropTypes.string,
|
2016-06-24 14:34:07 +00:00
|
|
|
|
|
|
|
// A standard client/server API error object. If supplied, indicates that the
|
|
|
|
// caller was unable to fetch details about the room for the given reason.
|
2017-12-26 01:03:18 +00:00
|
|
|
error: PropTypes.object,
|
2016-06-24 14:34:07 +00:00
|
|
|
|
2017-12-26 01:03:18 +00:00
|
|
|
canPreview: PropTypes.bool,
|
|
|
|
spinner: PropTypes.bool,
|
|
|
|
room: PropTypes.object,
|
2016-06-28 13:59:45 +00:00
|
|
|
|
|
|
|
// The alias that was used to access this room, if appropriate
|
2016-06-28 16:11:47 +00:00
|
|
|
// If given, this will be how the room is referred to (eg.
|
|
|
|
// in error messages).
|
2017-12-26 01:03:18 +00:00
|
|
|
roomAlias: PropTypes.string,
|
2016-01-12 14:11:15 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
getDefaultProps: function() {
|
|
|
|
return {
|
|
|
|
onJoinClick: function() {},
|
2016-01-18 17:39:23 +00:00
|
|
|
canPreview: true,
|
2016-01-12 14:11:15 +00:00
|
|
|
};
|
|
|
|
},
|
|
|
|
|
2016-03-18 15:30:27 +00:00
|
|
|
getInitialState: function() {
|
|
|
|
return {
|
2017-10-11 16:56:17 +00:00
|
|
|
busy: false,
|
2017-01-20 14:22:27 +00:00
|
|
|
};
|
2016-03-18 15:30:27 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
componentWillMount: function() {
|
|
|
|
// If this is an invite and we've been told what email
|
|
|
|
// address was invited, fetch the user's list of 3pids
|
|
|
|
// so we can check them against the one that was invited
|
|
|
|
if (this.props.inviterName && this.props.invitedEmail) {
|
|
|
|
this.setState({busy: true});
|
|
|
|
MatrixClientPeg.get().lookupThreePid(
|
2017-10-11 16:56:17 +00:00
|
|
|
'email', this.props.invitedEmail,
|
2016-03-18 15:30:27 +00:00
|
|
|
).finally(() => {
|
|
|
|
this.setState({busy: false});
|
|
|
|
}).done((result) => {
|
|
|
|
this.setState({invitedEmailMxid: result.mxid});
|
|
|
|
}, (err) => {
|
|
|
|
this.setState({threePidFetchError: err});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2017-10-17 20:03:49 +00:00
|
|
|
_roomNameElement: function() {
|
|
|
|
return this.props.room ? this.props.room.name : (this.props.room_alias || "");
|
2017-02-17 15:50:30 +00:00
|
|
|
},
|
|
|
|
|
2016-01-12 14:11:15 +00:00
|
|
|
render: function() {
|
2017-10-11 16:56:17 +00:00
|
|
|
let joinBlock, previewBlock;
|
2016-01-12 14:11:15 +00:00
|
|
|
|
2016-03-18 15:30:27 +00:00
|
|
|
if (this.props.spinner || this.state.busy) {
|
2017-10-11 16:56:17 +00:00
|
|
|
const Spinner = sdk.getComponent("elements.Spinner");
|
2016-02-09 16:55:03 +00:00
|
|
|
return (<div className="mx_RoomPreviewBar">
|
|
|
|
<Spinner />
|
|
|
|
</div>);
|
|
|
|
}
|
|
|
|
|
2018-07-25 10:39:46 +00:00
|
|
|
const myMember = this.props.room ?
|
|
|
|
this.props.room.getMember(MatrixClientPeg.get().getUserId()) :
|
|
|
|
null;
|
|
|
|
const kicked = myMember && myMember.isKicked();
|
|
|
|
const banned = myMember && myMember && myMember.membership == 'ban';
|
2017-02-17 15:50:30 +00:00
|
|
|
|
2016-01-18 20:18:46 +00:00
|
|
|
if (this.props.inviterName) {
|
2017-10-11 16:56:17 +00:00
|
|
|
let emailMatchBlock;
|
2016-03-18 15:30:27 +00:00
|
|
|
if (this.props.invitedEmail) {
|
|
|
|
if (this.state.threePidFetchError) {
|
|
|
|
emailMatchBlock = <div className="error">
|
2017-10-11 16:56:17 +00:00
|
|
|
{ _t("Unable to ascertain that the address this invite was sent to matches one associated with your account.") }
|
2017-01-20 14:22:27 +00:00
|
|
|
</div>;
|
2016-03-18 15:30:27 +00:00
|
|
|
} else if (this.state.invitedEmailMxid != MatrixClientPeg.get().credentials.userId) {
|
2016-03-21 22:05:59 +00:00
|
|
|
emailMatchBlock =
|
|
|
|
<div className="mx_RoomPreviewBar_warning">
|
|
|
|
<div className="mx_RoomPreviewBar_warningIcon">
|
|
|
|
<img src="img/warning.svg" width="24" height="23" title= "/!\\" alt="/!\\" />
|
|
|
|
</div>
|
|
|
|
<div className="mx_RoomPreviewBar_warningText">
|
2017-10-11 16:56:17 +00:00
|
|
|
{ _t("This invitation was sent to an email address which is not associated with this account:") }
|
|
|
|
<b><span className="email">{ this.props.invitedEmail }</span></b>
|
|
|
|
<br />
|
|
|
|
{ _t("You may wish to login with a different account, or add this email to this account.") }
|
2016-03-21 22:05:59 +00:00
|
|
|
</div>
|
2017-01-20 14:22:27 +00:00
|
|
|
</div>;
|
2016-03-18 15:30:27 +00:00
|
|
|
}
|
|
|
|
}
|
2016-01-18 17:39:23 +00:00
|
|
|
joinBlock = (
|
|
|
|
<div>
|
|
|
|
<div className="mx_RoomPreviewBar_invite_text">
|
2017-05-23 14:16:31 +00:00
|
|
|
{ _t('You have been invited to join this room by %(inviterName)s', {inviterName: this.props.inviterName}) }
|
2016-01-18 17:39:23 +00:00
|
|
|
</div>
|
|
|
|
<div className="mx_RoomPreviewBar_join_text">
|
2017-11-13 19:19:33 +00:00
|
|
|
{ _t(
|
2017-06-08 13:45:59 +00:00
|
|
|
'Would you like to <acceptText>accept</acceptText> or <declineText>decline</declineText> this invitation?',
|
2017-11-13 19:19:33 +00:00
|
|
|
{},
|
|
|
|
{
|
|
|
|
'acceptText': (sub) => <a onClick={this.props.onJoinClick}>{ sub }</a>,
|
|
|
|
'declineText': (sub) => <a onClick={this.props.onRejectClick}>{ sub }</a>,
|
|
|
|
},
|
2017-10-11 16:56:17 +00:00
|
|
|
) }
|
2016-01-18 17:39:23 +00:00
|
|
|
</div>
|
2017-10-11 16:56:17 +00:00
|
|
|
{ emailMatchBlock }
|
2016-01-18 17:39:23 +00:00
|
|
|
</div>
|
|
|
|
);
|
2017-02-17 15:50:30 +00:00
|
|
|
} else if (kicked || banned) {
|
2017-10-17 20:03:49 +00:00
|
|
|
const roomName = this._roomNameElement();
|
2017-02-17 16:35:18 +00:00
|
|
|
const kickerMember = this.props.room.currentState.getMember(
|
2017-10-11 16:56:17 +00:00
|
|
|
myMember.events.member.getSender(),
|
2017-02-17 15:50:30 +00:00
|
|
|
);
|
2017-02-17 16:35:18 +00:00
|
|
|
const kickerName = kickerMember ?
|
|
|
|
kickerMember.name : myMember.events.member.getSender();
|
2017-02-17 15:50:30 +00:00
|
|
|
let reason;
|
|
|
|
if (myMember.events.member.getContent().reason) {
|
2017-10-11 16:56:17 +00:00
|
|
|
reason = <div>{ _t("Reason: %(reasonText)s", {reasonText: myMember.events.member.getContent().reason}) }</div>;
|
2017-02-17 15:50:30 +00:00
|
|
|
}
|
|
|
|
let rejoinBlock;
|
|
|
|
if (!banned) {
|
2017-10-11 16:56:17 +00:00
|
|
|
rejoinBlock = <div><a onClick={this.props.onJoinClick}><b>{ _t("Rejoin") }</b></a></div>;
|
2017-02-17 15:50:30 +00:00
|
|
|
}
|
2017-06-08 13:08:51 +00:00
|
|
|
|
|
|
|
let actionText;
|
|
|
|
if (kicked) {
|
2017-11-16 13:19:36 +00:00
|
|
|
if (roomName) {
|
2017-10-17 20:03:49 +00:00
|
|
|
actionText = _t("You have been kicked from %(roomName)s by %(userName)s.", {roomName: roomName, userName: kickerName});
|
|
|
|
} else {
|
|
|
|
actionText = _t("You have been kicked from this room by %(userName)s.", {userName: kickerName});
|
|
|
|
}
|
2017-10-11 16:56:17 +00:00
|
|
|
} else if (banned) {
|
2017-11-16 13:19:36 +00:00
|
|
|
if (roomName) {
|
2017-10-17 20:03:49 +00:00
|
|
|
actionText = _t("You have been banned from %(roomName)s by %(userName)s.", {roomName: roomName, userName: kickerName});
|
|
|
|
} else {
|
|
|
|
actionText = _t("You have been banned from this room by %(userName)s.", {userName: kickerName});
|
|
|
|
}
|
2017-06-08 13:08:51 +00:00
|
|
|
} // no other options possible due to the kicked || banned check above.
|
|
|
|
|
2017-02-17 15:50:30 +00:00
|
|
|
joinBlock = (
|
|
|
|
<div>
|
|
|
|
<div className="mx_RoomPreviewBar_join_text">
|
2017-10-11 16:56:17 +00:00
|
|
|
{ actionText }
|
2017-06-08 13:08:51 +00:00
|
|
|
<br />
|
2017-10-11 16:56:17 +00:00
|
|
|
{ reason }
|
|
|
|
{ rejoinBlock }
|
|
|
|
<a onClick={this.props.onForgetClick}><b>{ _t("Forget room") }</b></a>
|
2017-02-17 15:50:30 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
} else if (this.props.error) {
|
2017-10-11 16:56:17 +00:00
|
|
|
const name = this.props.roomAlias || _t("This room");
|
|
|
|
let error;
|
2016-06-24 14:34:07 +00:00
|
|
|
if (this.props.error.errcode == 'M_NOT_FOUND') {
|
2017-06-08 13:08:51 +00:00
|
|
|
error = _t("%(roomName)s does not exist.", {roomName: name});
|
2016-06-24 14:34:07 +00:00
|
|
|
} else {
|
2017-06-08 13:08:51 +00:00
|
|
|
error = _t("%(roomName)s is not accessible at this time.", {roomName: name});
|
2016-06-24 14:34:07 +00:00
|
|
|
}
|
|
|
|
joinBlock = (
|
|
|
|
<div>
|
|
|
|
<div className="mx_RoomPreviewBar_join_text">
|
|
|
|
{ error }
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
2017-02-17 15:50:30 +00:00
|
|
|
} else {
|
|
|
|
const name = this._roomNameElement();
|
2016-01-12 14:11:15 +00:00
|
|
|
joinBlock = (
|
2016-01-18 19:56:56 +00:00
|
|
|
<div>
|
|
|
|
<div className="mx_RoomPreviewBar_join_text">
|
2017-10-17 20:03:49 +00:00
|
|
|
{ name ? _t('You are trying to access %(roomName)s.', {roomName: name}) : _t('You are trying to access a room.') }
|
2017-10-11 16:56:17 +00:00
|
|
|
<br />
|
2017-11-13 19:19:33 +00:00
|
|
|
{ _t("<a>Click here</a> to join the discussion!",
|
|
|
|
{},
|
|
|
|
{ 'a': (sub) => <a onClick={this.props.onJoinClick}><b>{ sub }</b></a> },
|
2017-10-11 16:56:17 +00:00
|
|
|
) }
|
2016-01-18 19:56:56 +00:00
|
|
|
</div>
|
2016-01-12 14:11:15 +00:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2016-01-18 17:39:23 +00:00
|
|
|
if (this.props.canPreview) {
|
|
|
|
previewBlock = (
|
2016-01-12 14:11:15 +00:00
|
|
|
<div className="mx_RoomPreviewBar_preview_text">
|
2017-05-23 14:16:31 +00:00
|
|
|
{ _t('This is a preview of this room. Room interactions have been disabled') }.
|
2016-01-12 14:11:15 +00:00
|
|
|
</div>
|
2016-01-18 17:39:23 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="mx_RoomPreviewBar">
|
2016-01-18 19:56:56 +00:00
|
|
|
<div className="mx_RoomPreviewBar_wrapper">
|
|
|
|
{ joinBlock }
|
|
|
|
{ previewBlock }
|
|
|
|
</div>
|
2016-01-12 14:11:15 +00:00
|
|
|
</div>
|
|
|
|
);
|
2017-10-11 16:56:17 +00:00
|
|
|
},
|
2016-01-12 14:11:15 +00:00
|
|
|
});
|