2017-08-04 17:00:34 +03:00
|
|
|
/*
|
|
|
|
Copyright 2017 Vector Creations Ltd
|
2017-08-25 14:10:13 +03:00
|
|
|
Copyright 2017 New Vector Ltd
|
2017-08-04 17:00:34 +03: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.
|
|
|
|
*/
|
|
|
|
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import React from 'react';
|
2017-10-30 19:45:45 +03:00
|
|
|
import { MatrixClient } from 'matrix-js-sdk';
|
2017-08-04 17:00:34 +03:00
|
|
|
import dis from '../../../dispatcher';
|
|
|
|
import Modal from '../../../Modal';
|
|
|
|
import sdk from '../../../index';
|
|
|
|
import { _t } from '../../../languageHandler';
|
|
|
|
import { GroupMemberType } from '../../../groups';
|
2017-10-30 19:45:45 +03:00
|
|
|
import GroupStoreCache from '../../../stores/GroupStoreCache';
|
2017-08-04 17:00:34 +03:00
|
|
|
import AccessibleButton from '../elements/AccessibleButton';
|
|
|
|
import GeminiScrollbar from 'react-gemini-scrollbar';
|
|
|
|
|
2017-10-30 19:45:45 +03:00
|
|
|
module.exports = React.createClass({
|
2017-08-04 17:00:34 +03:00
|
|
|
displayName: 'GroupMemberInfo',
|
|
|
|
|
2017-10-30 19:45:45 +03:00
|
|
|
contextTypes: {
|
|
|
|
matrixClient: PropTypes.instanceOf(MatrixClient),
|
|
|
|
},
|
|
|
|
|
2017-08-04 17:00:34 +03:00
|
|
|
propTypes: {
|
|
|
|
groupId: PropTypes.string,
|
2017-08-25 14:10:13 +03:00
|
|
|
groupMember: GroupMemberType,
|
2017-10-30 21:17:35 +03:00
|
|
|
isInvited: PropTypes.bool,
|
2017-08-04 17:00:34 +03:00
|
|
|
},
|
|
|
|
|
2017-08-21 21:18:32 +03:00
|
|
|
getInitialState: function() {
|
|
|
|
return {
|
|
|
|
removingUser: false,
|
2017-10-30 19:45:45 +03:00
|
|
|
isUserPrivilegedInGroup: null,
|
2017-08-21 21:34:07 +03:00
|
|
|
};
|
2017-08-21 21:18:32 +03:00
|
|
|
},
|
|
|
|
|
2017-08-04 17:00:34 +03:00
|
|
|
componentWillMount: function() {
|
2017-10-30 19:45:45 +03:00
|
|
|
this._initGroupStore(this.props.groupId);
|
|
|
|
},
|
|
|
|
|
|
|
|
componentWillReceiveProps(newProps) {
|
|
|
|
if (newProps.groupId !== this.props.groupId) {
|
|
|
|
this._unregisterGroupStore();
|
|
|
|
this._initGroupStore(newProps.groupId);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
_initGroupStore(groupId) {
|
|
|
|
this._groupStore = GroupStoreCache.getGroupStore(
|
|
|
|
this.context.matrixClient, this.props.groupId,
|
|
|
|
);
|
|
|
|
this._groupStore.registerListener(this.onGroupStoreUpdated);
|
|
|
|
},
|
|
|
|
|
|
|
|
_unregisterGroupStore() {
|
|
|
|
if (this._groupStore) {
|
|
|
|
this._groupStore.unregisterListener(this.onGroupStoreUpdated);
|
|
|
|
}
|
2017-08-04 17:00:34 +03:00
|
|
|
},
|
|
|
|
|
2017-10-30 19:45:45 +03:00
|
|
|
onGroupStoreUpdated: function() {
|
|
|
|
this.setState({
|
2017-10-30 21:17:35 +03:00
|
|
|
isUserInvited: this._groupStore.getGroupInvitedMembers().some(
|
|
|
|
(m) => m.userId === this.props.groupMember.userId,
|
|
|
|
),
|
2017-10-30 19:45:45 +03:00
|
|
|
isUserPrivilegedInGroup: this._groupStore.isUserPrivileged(),
|
2017-08-04 17:00:34 +03:00
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
_onKick: function() {
|
|
|
|
const ConfirmUserActionDialog = sdk.getComponent("dialogs.ConfirmUserActionDialog");
|
|
|
|
Modal.createDialog(ConfirmUserActionDialog, {
|
2017-11-09 15:24:20 +03:00
|
|
|
matrixClient: this.context.matrixClient,
|
2017-08-25 14:10:13 +03:00
|
|
|
groupMember: this.props.groupMember,
|
2017-10-30 21:17:35 +03:00
|
|
|
action: this.state.isUserInvited ? _t('Disinvite') : _t('Remove from community'),
|
2017-11-01 18:18:48 +03:00
|
|
|
title: this.state.isUserInvited ? _t('Disinvite this user from community?')
|
|
|
|
: _t('Remove this user from community?'),
|
2017-08-04 17:00:34 +03:00
|
|
|
danger: true,
|
|
|
|
onFinished: (proceed) => {
|
2017-08-21 21:18:32 +03:00
|
|
|
if (!proceed) return;
|
|
|
|
|
|
|
|
this.setState({removingUser: true});
|
2017-10-30 19:45:45 +03:00
|
|
|
this.context.matrixClient.removeUserFromGroup(
|
2017-08-30 19:34:44 +03:00
|
|
|
this.props.groupId, this.props.groupMember.userId,
|
|
|
|
).then(() => {
|
2017-08-25 14:10:13 +03:00
|
|
|
// return to the user list
|
2017-08-21 21:18:32 +03:00
|
|
|
dis.dispatch({
|
|
|
|
action: "view_user",
|
2017-08-30 11:22:26 +03:00
|
|
|
member: null,
|
2017-08-21 21:18:32 +03:00
|
|
|
});
|
|
|
|
}).catch((e) => {
|
|
|
|
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
|
|
|
Modal.createTrackedDialog('Failed to remove user from group', '', ErrorDialog, {
|
|
|
|
title: _t('Error'),
|
2017-10-30 21:17:35 +03:00
|
|
|
description: this.state.isUserInvited ?
|
|
|
|
_t('Failed to withdraw invitation') :
|
|
|
|
_t('Failed to remove user from community'),
|
2017-08-21 21:18:32 +03:00
|
|
|
});
|
|
|
|
}).finally(() => {
|
|
|
|
this.setState({removingUser: false});
|
|
|
|
});
|
2017-08-04 17:00:34 +03:00
|
|
|
},
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2017-08-21 21:18:32 +03:00
|
|
|
_onCancel: function(e) {
|
2017-08-25 14:10:13 +03:00
|
|
|
// Go back to the user list
|
2017-08-04 17:00:34 +03:00
|
|
|
dis.dispatch({
|
|
|
|
action: "view_user",
|
2017-08-30 11:22:26 +03:00
|
|
|
member: null,
|
2017-08-04 17:00:34 +03:00
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
onRoomTileClick(roomId) {
|
|
|
|
dis.dispatch({
|
|
|
|
action: 'view_room',
|
|
|
|
room_id: roomId,
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
render: function() {
|
2017-10-30 19:45:45 +03:00
|
|
|
if (this.state.removingUser) {
|
2017-08-25 14:10:13 +03:00
|
|
|
const Spinner = sdk.getComponent("elements.Spinner");
|
|
|
|
return <Spinner />;
|
2017-08-04 17:00:34 +03:00
|
|
|
}
|
|
|
|
|
2017-10-30 19:45:45 +03:00
|
|
|
let adminTools;
|
|
|
|
if (this.state.isUserPrivilegedInGroup) {
|
|
|
|
const kickButton = (
|
2017-08-04 17:00:34 +03:00
|
|
|
<AccessibleButton className="mx_MemberInfo_field"
|
|
|
|
onClick={this._onKick}>
|
2017-10-30 21:17:35 +03:00
|
|
|
{ this.state.isUserInvited ? _t('Disinvite') : _t('Remove from community') }
|
2017-08-04 17:00:34 +03:00
|
|
|
</AccessibleButton>
|
|
|
|
);
|
|
|
|
|
|
|
|
// No make/revoke admin API yet
|
|
|
|
/*const opLabel = this.state.isTargetMod ? _t("Revoke Moderator") : _t("Make Moderator");
|
|
|
|
giveModButton = <AccessibleButton className="mx_MemberInfo_field" onClick={this.onModToggle}>
|
|
|
|
{giveOpLabel}
|
|
|
|
</AccessibleButton>;*/
|
|
|
|
|
2017-10-30 19:45:45 +03:00
|
|
|
if (kickButton) {
|
|
|
|
adminTools =
|
|
|
|
<div className="mx_MemberInfo_adminTools">
|
|
|
|
<h3>{ _t("Admin Tools") }</h3>
|
|
|
|
<div className="mx_MemberInfo_buttons">
|
|
|
|
{ kickButton }
|
|
|
|
</div>
|
|
|
|
</div>;
|
|
|
|
}
|
2017-08-04 17:00:34 +03:00
|
|
|
}
|
|
|
|
|
2017-10-30 19:45:45 +03:00
|
|
|
const avatarUrl = this.context.matrixClient.mxcUrlToHttp(
|
2017-09-25 16:51:21 +03:00
|
|
|
this.props.groupMember.avatarUrl,
|
2017-09-25 17:07:02 +03:00
|
|
|
36, 36, 'crop',
|
2017-09-25 16:51:21 +03:00
|
|
|
);
|
|
|
|
|
2017-08-04 17:00:34 +03:00
|
|
|
const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
|
|
|
|
const avatar = (
|
2017-09-25 16:38:43 +03:00
|
|
|
<BaseAvatar name={this.props.groupMember.userId} width={36} height={36}
|
2017-09-25 16:51:21 +03:00
|
|
|
url={avatarUrl}
|
2017-09-25 16:38:43 +03:00
|
|
|
/>
|
2017-08-04 17:00:34 +03:00
|
|
|
);
|
|
|
|
|
2017-09-25 16:38:43 +03:00
|
|
|
const groupMemberName = (
|
|
|
|
this.props.groupMember.displayname || this.props.groupMember.userId
|
|
|
|
);
|
2017-08-04 17:00:34 +03:00
|
|
|
|
|
|
|
const EmojiText = sdk.getComponent('elements.EmojiText');
|
|
|
|
return (
|
|
|
|
<div className="mx_MemberInfo">
|
|
|
|
<GeminiScrollbar autoshow={true}>
|
2017-08-25 14:10:13 +03:00
|
|
|
<AccessibleButton className="mx_MemberInfo_cancel"onClick={this._onCancel}>
|
2017-10-26 16:05:58 +03:00
|
|
|
<img src="img/cancel.svg" width="18" height="18" className="mx_filterFlipColor" />
|
2017-08-25 14:10:13 +03:00
|
|
|
</AccessibleButton>
|
2017-08-04 17:00:34 +03:00
|
|
|
<div className="mx_MemberInfo_avatar">
|
2017-09-28 13:21:06 +03:00
|
|
|
{ avatar }
|
2017-08-04 17:00:34 +03:00
|
|
|
</div>
|
|
|
|
|
2017-09-28 13:21:06 +03:00
|
|
|
<EmojiText element="h2">{ groupMemberName }</EmojiText>
|
2017-08-04 17:00:34 +03:00
|
|
|
|
|
|
|
<div className="mx_MemberInfo_profile">
|
|
|
|
<div className="mx_MemberInfo_profileField">
|
2017-08-25 14:10:13 +03:00
|
|
|
{ this.props.groupMember.userId }
|
2017-08-04 17:00:34 +03:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
{ adminTools }
|
|
|
|
</GeminiScrollbar>
|
|
|
|
</div>
|
|
|
|
);
|
2017-08-21 21:34:07 +03:00
|
|
|
},
|
2017-10-30 19:45:45 +03:00
|
|
|
});
|