1051 lines
No EOL
46 KiB
TypeScript
1051 lines
No EOL
46 KiB
TypeScript
import * as React from "react";
|
|
import {useRef, useState} from "react";
|
|
import {EventHandler, ReactEventHandler, Registry} from "tc-shared/events";
|
|
import {
|
|
ChannelInfo,
|
|
GroupProperties,
|
|
PermissionModalEvents
|
|
} from "tc-shared/ui/modal/permission/ModalPermissionEditor";
|
|
import {PermissionEditorEvents} from "tc-shared/ui/modal/permission/PermissionEditor";
|
|
import {ConnectionHandler} from "tc-shared/ConnectionHandler";
|
|
import {LocalIconRenderer} from "tc-shared/ui/react-elements/Icon";
|
|
import {createInputModal} from "tc-shared/ui/elements/Modal";
|
|
import {Translatable} from "tc-shared/ui/react-elements/i18n";
|
|
import {LoadingDots} from "tc-shared/ui/react-elements/LoadingDots";
|
|
import * as contextmenu from "tc-shared/ui/elements/ContextMenu";
|
|
import {MenuEntryType, spawn_context_menu} from "tc-shared/ui/elements/ContextMenu";
|
|
import {copy_to_clipboard} from "tc-shared/utils/helpers";
|
|
import {FlatInputField} from "tc-shared/ui/react-elements/InputField";
|
|
import {arrayBufferBase64} from "tc-shared/utils/buffers";
|
|
import {tra} from "tc-shared/i18n/localize";
|
|
|
|
const cssStyle = require("./TabHandler.scss");
|
|
|
|
export class SideBar extends React.Component<{ connection: ConnectionHandler, modalEvents: Registry<PermissionModalEvents>, editorEvents: Registry<PermissionEditorEvents> }, {}> {
|
|
render() {
|
|
return [
|
|
<ServerGroupsSideBar key={"server-groups"} connection={this.props.connection} modalEvents={this.props.modalEvents} />,
|
|
<ChannelGroupsSideBar key={"channel-groups"} connection={this.props.connection} modalEvents={this.props.modalEvents} />,
|
|
<ChannelSideBar key={"channel"} connection={this.props.connection} modalEvents={this.props.modalEvents} />,
|
|
<ClientSideBar key={"client"} connection={this.props.connection} modalEvents={this.props.modalEvents} />,
|
|
<ClientChannelSideBar key={"client-channel"} connection={this.props.connection} modalEvents={this.props.modalEvents} />
|
|
];
|
|
}
|
|
}
|
|
|
|
const GroupsButton = (props: { image: string, alt: string, onClick?: () => void, disabled: boolean }) => {
|
|
return (
|
|
<div className={cssStyle.button + " " + (props.disabled ? cssStyle.disabled : "")} onClick={() => !props.disabled && props.onClick()} >
|
|
<img src={props.image} alt={props.alt} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
|
|
const GroupsListEntry = (props: { connection: ConnectionHandler, group: GroupProperties, selected: boolean, callbackSelect: () => void, onContextMenu: (event: React.MouseEvent) => void }) => {
|
|
let groupTypePrefix = "";
|
|
switch (props.group.type) {
|
|
case "query":
|
|
groupTypePrefix = "[Q] ";
|
|
break;
|
|
|
|
case "template":
|
|
groupTypePrefix = "[T] ";
|
|
break;
|
|
}
|
|
return (
|
|
<div className={cssStyle.entry + " " + (props.selected ? cssStyle.selected : "")} onClick={props.callbackSelect} onContextMenu={props.onContextMenu}>
|
|
<LocalIconRenderer icon={props.connection.fileManager.icons.load_icon(props.group.iconId)} />
|
|
<div className={cssStyle.name}>{ groupTypePrefix + props.group.name + " (" + props.group.id + ")" }</div>
|
|
</div>
|
|
)
|
|
};
|
|
|
|
@ReactEventHandler<GroupsList>(e => e.props.events)
|
|
class GroupsList extends React.Component<{ connection: ConnectionHandler, events: Registry<PermissionModalEvents>, target: "server" | "channel" }, {
|
|
selectedGroupId: number,
|
|
showQueryGroups: boolean,
|
|
showTemplateGroups: boolean,
|
|
|
|
disableGroupAdd: boolean,
|
|
disableGroupRename: boolean,
|
|
disablePermissionCopy: boolean,
|
|
disableDelete: boolean
|
|
}> {
|
|
private readonly groups: GroupProperties[] = [];
|
|
private visibleGroups: GroupProperties[] = [];
|
|
|
|
private updateScheduleId;
|
|
private modifyPower: number;
|
|
private isListActive: boolean = false;
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.modifyPower = 0;
|
|
this.state = {
|
|
selectedGroupId: -1,
|
|
showQueryGroups: false,
|
|
showTemplateGroups: false,
|
|
|
|
disableDelete: true,
|
|
disablePermissionCopy: true,
|
|
disableGroupAdd: true,
|
|
disableGroupRename: true
|
|
}
|
|
}
|
|
|
|
render() {
|
|
this.updateGroups(false);
|
|
|
|
return [
|
|
<div key={"list"} className={cssStyle.list + " " + cssStyle.containerList} onContextMenu={event => {
|
|
if(event.isDefaultPrevented())
|
|
return;
|
|
|
|
event.preventDefault();
|
|
spawn_context_menu(event.pageX, event.pageY, {
|
|
name: tr("Add group"),
|
|
icon_class: "client-add",
|
|
type: MenuEntryType.ENTRY,
|
|
callback: () => this.props.events.fire("action_create_group", { target: this.props.target, sourceGroup: 0 }),
|
|
invalidPermission: this.state.disableGroupAdd
|
|
});
|
|
}}>
|
|
<div className={cssStyle.entries}>
|
|
{this.visibleGroups.map(e => <GroupsListEntry key={"group-" + e.id}
|
|
connection={this.props.connection}
|
|
group={e}
|
|
selected={e.id === this.state.selectedGroupId}
|
|
callbackSelect={() => this.props.events.fire("action_select_group", { id: e.id, target: this.props.target })}
|
|
onContextMenu={event => {
|
|
event.preventDefault();
|
|
this.props.events.fire("action_select_group", { target: this.props.target, id: e.id });
|
|
spawn_context_menu(event.pageX, event.pageY, {
|
|
name: tr("Rename group"),
|
|
type: MenuEntryType.ENTRY,
|
|
callback: () => this.onGroupRename(),
|
|
icon_class: "client-change_nickname",
|
|
invalidPermission: this.state.disableGroupRename
|
|
}, {
|
|
name: tr("Copy permissions"),
|
|
type: MenuEntryType.ENTRY,
|
|
icon_class: "client-copy",
|
|
callback: () => this.props.events.fire("action_group_copy_permissions", { target: this.props.target, sourceGroup: e.id }),
|
|
invalidPermission: this.state.disablePermissionCopy
|
|
}, {
|
|
name: tr("Delete group"),
|
|
type: MenuEntryType.ENTRY,
|
|
icon_class: "client-delete",
|
|
callback: () => this.onGroupDelete(),
|
|
invalidPermission: this.state.disableDelete
|
|
}, contextmenu.Entry.HR(), {
|
|
name: tr("Add group"),
|
|
icon_class: "client-add",
|
|
type: MenuEntryType.ENTRY,
|
|
callback: () => this.props.events.fire("action_create_group", { target: this.props.target, sourceGroup: e.id }),
|
|
invalidPermission: this.state.disableGroupAdd
|
|
});
|
|
}}
|
|
/>)}
|
|
</div>
|
|
</div>,
|
|
<div key={"buttons"} className={cssStyle.buttons}>
|
|
<GroupsButton
|
|
image={"img/icon_group_add.svg"}
|
|
alt={this.props.target === "server" ? tr("Add server group") : tr("Add channel group")}
|
|
disabled={this.state.disableGroupAdd}
|
|
onClick={() => this.props.events.fire("action_create_group", { target: this.props.target, sourceGroup: this.state.selectedGroupId })}
|
|
/>
|
|
<GroupsButton
|
|
image={"img/icon_group_rename.svg"}
|
|
alt={this.props.target === "server" ? tr("Rename server group") : tr("Rename channel group")}
|
|
onClick={() => this.onGroupRename()}
|
|
disabled={this.state.disableGroupRename}
|
|
/>
|
|
<GroupsButton
|
|
image={"img/icon_group_permission_copy.svg"}
|
|
alt={this.props.target === "server" ? tr("Copy server group permissions") : tr("Copy channel group permissions")}
|
|
disabled={this.state.disablePermissionCopy}
|
|
onClick={() => this.props.events.fire("action_group_copy_permissions", { target: this.props.target, sourceGroup: this.state.selectedGroupId })}
|
|
/>
|
|
<GroupsButton
|
|
image={"img/icon_group_delete.svg"}
|
|
alt={this.props.target === "server" ? tr("Delete server group") : tr("Delete channel group")}
|
|
disabled={this.state.disableDelete}
|
|
onClick={() => this.onGroupDelete()}
|
|
/>
|
|
</div>
|
|
];
|
|
}
|
|
|
|
private updateGroups(updateSelectedGroup: boolean) {
|
|
/* sort groups */
|
|
{
|
|
const typeMappings = {
|
|
"query": 3,
|
|
"template": 2,
|
|
"normal": 1
|
|
};
|
|
|
|
this.groups.sort((b, a) => {
|
|
if(typeMappings[a.type] > typeMappings[b.type])
|
|
return 1;
|
|
|
|
if(typeMappings[a.type] < typeMappings[b.type])
|
|
return -1;
|
|
|
|
if(a.sortId < b.sortId)
|
|
return 1;
|
|
|
|
if(a.sortId > b.sortId)
|
|
return -1;
|
|
|
|
if(a.id > b.id)
|
|
return -1;
|
|
|
|
if(a.id < b.id)
|
|
return 1;
|
|
|
|
return 0;
|
|
});
|
|
}
|
|
this.visibleGroups = this.groups.filter(e => e.type === "template" ? this.state.showTemplateGroups : e.type === "query" ? this.state.showQueryGroups : true);
|
|
|
|
/* select any group */
|
|
if(updateSelectedGroup && this.visibleGroups.findIndex(e => e.id === this.state.selectedGroupId) === -1 && this.visibleGroups.length !== 0)
|
|
this.props.events.fire("action_select_group", { target: this.props.target, id: this.visibleGroups[0].id });
|
|
}
|
|
|
|
private scheduleUpdate() {
|
|
clearTimeout(this.updateScheduleId);
|
|
this.updateScheduleId = setTimeout(() => this.forceUpdate(), 10);
|
|
}
|
|
|
|
private selectedGroup() {
|
|
return this.groups.find(e => e.id === this.state.selectedGroupId);
|
|
}
|
|
|
|
@EventHandler<PermissionModalEvents>("action_activate_tab")
|
|
private handleGroupTabActive(events: PermissionModalEvents["action_activate_tab"]) {
|
|
this.isListActive = this.props.target === "server" ? events.tab === "groups-server" : events.tab === "groups-channel";
|
|
if(events.tab === "groups-server" || events.tab === "groups-channel") {
|
|
if(typeof events.activeGroupId !== "undefined")
|
|
this.setState({ selectedGroupId: events.activeGroupId });
|
|
|
|
if(this.isListActive)
|
|
this.props.events.fire("action_set_permission_editor_subject", { mode: events.tab, groupId: events.activeGroupId || this.state.selectedGroupId, clientDatabaseId: 0, channelId: 0 });
|
|
}
|
|
}
|
|
|
|
@EventHandler<PermissionModalEvents>("notify_groups_reset")
|
|
private handleReset() {
|
|
this.groups.splice(0, this.groups.length);
|
|
}
|
|
|
|
@EventHandler<PermissionModalEvents>("notify_client_permissions")
|
|
private handleClientPermissions(event: PermissionModalEvents["notify_client_permissions"]) {
|
|
const selectedGroup = this.selectedGroup();
|
|
|
|
this.modifyPower = this.props.target === "server" ? event.serverGroupModifyPower : event.channelGroupModifyPower;
|
|
this.setState({
|
|
showTemplateGroups: event.modifyTemplateGroups,
|
|
showQueryGroups: event.modifyQueryGroups,
|
|
|
|
disableGroupAdd: this.props.target === "server" ? !event.serverGroupCreate : !event.channelGroupCreate,
|
|
disablePermissionCopy: this.props.target === "server" ? !event.serverGroupCreate : !event.channelGroupCreate,
|
|
|
|
disableGroupRename: !selectedGroup || this.modifyPower === 0 || this.modifyPower < selectedGroup.needed_modify_power,
|
|
disableDelete: !selectedGroup || this.modifyPower === 0 || this.modifyPower < selectedGroup.needed_modify_power,
|
|
});
|
|
/* this.forceUpdate(); */ /* No force update needed since if the state does not change the displayed groups would not either */
|
|
}
|
|
|
|
@EventHandler<PermissionModalEvents>("action_select_group")
|
|
private handleSelect(event: PermissionModalEvents["action_select_group"]) {
|
|
if(event.target !== this.props.target)
|
|
return;
|
|
|
|
if(this.state.selectedGroupId === event.id)
|
|
return;
|
|
|
|
const selectedGroup = this.groups.find(e => e.id === event.id);
|
|
this.setState({
|
|
selectedGroupId: event.id,
|
|
|
|
disableGroupRename: !selectedGroup || this.modifyPower === 0 || this.modifyPower < selectedGroup.needed_modify_power,
|
|
disableDelete: !selectedGroup || this.modifyPower === 0 || this.modifyPower < selectedGroup.needed_modify_power,
|
|
});
|
|
|
|
if(this.isListActive) {
|
|
this.props.events.fire("action_set_permission_editor_subject", {
|
|
mode: this.props.target === "server" ? "groups-server" : "groups-channel",
|
|
groupId: event.id,
|
|
clientDatabaseId: 0,
|
|
channelId: 0
|
|
});
|
|
}
|
|
}
|
|
|
|
@EventHandler<PermissionModalEvents>("query_groups")
|
|
private handleQuery(event: PermissionModalEvents["query_groups"]) {
|
|
if(event.target !== this.props.target)
|
|
return;
|
|
|
|
this.groups.splice(0, this.groups.length);
|
|
}
|
|
|
|
@EventHandler<PermissionModalEvents>("query_groups_result")
|
|
private handleQueryResult(event: PermissionModalEvents["query_groups_result"]) {
|
|
if(event.target !== this.props.target)
|
|
return;
|
|
|
|
this.groups.splice(0, this.groups.length);
|
|
this.groups.push(...event.groups);
|
|
this.updateGroups(true);
|
|
this.scheduleUpdate();
|
|
}
|
|
|
|
@EventHandler<PermissionModalEvents>("notify_groups_created")
|
|
private handleGroupsCreated(event: PermissionModalEvents["notify_groups_created"]) {
|
|
if(event.target !== this.props.target)
|
|
return;
|
|
|
|
this.groups.push(...event.groups);
|
|
this.updateGroups(true);
|
|
this.scheduleUpdate();
|
|
}
|
|
|
|
@EventHandler<PermissionModalEvents>("notify_groups_deleted")
|
|
private handleGroupsDeleted(event: PermissionModalEvents["notify_groups_deleted"]) {
|
|
if(event.target !== this.props.target)
|
|
return;
|
|
|
|
event.groups.forEach(id => {
|
|
const index = this.groups.findIndex(e => e.id === id);
|
|
if(index === -1) return;
|
|
|
|
this.groups.splice(index, 1);
|
|
});
|
|
|
|
this.updateGroups(true);
|
|
this.scheduleUpdate();
|
|
}
|
|
|
|
@EventHandler<PermissionModalEvents>("notify_group_updated")
|
|
private handleGroupUpdated(event: PermissionModalEvents["notify_group_updated"]) {
|
|
if(event.target !== this.props.target)
|
|
return;
|
|
|
|
const group = this.groups.find(e => e.id === event.id);
|
|
if(!group) return;
|
|
|
|
for(const update of event.properties) {
|
|
switch (update.property) {
|
|
case "name":
|
|
group.name = update.value;
|
|
break;
|
|
|
|
case "icon":
|
|
group.iconId = update.value;
|
|
break;
|
|
|
|
case "sort":
|
|
group.sortId = update.value;
|
|
break;
|
|
|
|
case "save":
|
|
group.saveDB = update.value;
|
|
break;
|
|
}
|
|
}
|
|
|
|
this.updateGroups(true);
|
|
this.scheduleUpdate();
|
|
}
|
|
|
|
private onGroupRename() {
|
|
const group = this.selectedGroup();
|
|
if(!group) return;
|
|
|
|
createInputModal(tr("Rename group"), tr("Enter the new group name"), name => {
|
|
if(name.length < 3)
|
|
return false;
|
|
|
|
if(name.length > 64)
|
|
return false;
|
|
|
|
return this.groups.findIndex(e => e.name === name && e.type === group.type) === -1;
|
|
}, result => {
|
|
if(typeof result !== "string")
|
|
return;
|
|
|
|
this.props.events.fire("action_rename_group", { id: group.id, target: this.props.target, newName: result });
|
|
}).open();
|
|
}
|
|
|
|
private onGroupDelete() {
|
|
const group = this.selectedGroup();
|
|
if(!group) return;
|
|
|
|
this.props.events.fire("action_delete_group", { id: group.id, target: this.props.target, mode: "ask" });
|
|
}
|
|
|
|
componentDidMount(): void {
|
|
this.props.events.fire("query_groups", { target: this.props.target });
|
|
}
|
|
}
|
|
|
|
|
|
@ReactEventHandler<GroupsList>(e => e.props.events)
|
|
class ServerClientList extends React.Component<{ connection: ConnectionHandler, events: Registry<PermissionModalEvents> }, {
|
|
selectedGroupId: number,
|
|
selectedClientId: number,
|
|
|
|
disableClientAdd: boolean,
|
|
disableClientRemove: boolean,
|
|
|
|
state: "loading" | "error" | "normal" | "no-permissions",
|
|
error?: string;
|
|
}> {
|
|
private readonly groups: GroupProperties[] = [];
|
|
private clients: {
|
|
name: string;
|
|
databaseId: number;
|
|
uniqueId: string;
|
|
}[] = [];
|
|
private clientMemberAddPower: number = 0;
|
|
private clientMemberRemovePower: number = 0;
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
selectedGroupId: 0,
|
|
selectedClientId: 0,
|
|
|
|
disableClientAdd: true,
|
|
disableClientRemove: true,
|
|
|
|
state: "loading"
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const selectedGroup = this.selectedGroup();
|
|
let groupTypePrefix = "";
|
|
switch (selectedGroup?.type) {
|
|
case "query":
|
|
groupTypePrefix = "[Q] ";
|
|
break;
|
|
|
|
case "template":
|
|
groupTypePrefix = "[T] ";
|
|
break;
|
|
}
|
|
|
|
return [
|
|
<div key={"list"} className={cssStyle.list + " " + cssStyle.containerList} onContextMenu={e => this.onListContextMenu(e)}>
|
|
{selectedGroup ?
|
|
<div key={"selected-group"} className={cssStyle.entry + " " + cssStyle.selectedGroup}>
|
|
<div className={cssStyle.icon}><LocalIconRenderer icon={this.props.connection.fileManager.icons.load_icon(selectedGroup.iconId)} /></div>
|
|
<div className={cssStyle.name}>{ groupTypePrefix + selectedGroup.name + " (" + selectedGroup.id + ")" }</div>
|
|
</div>
|
|
: undefined
|
|
}
|
|
<div className={cssStyle.entries}>
|
|
{this.clients.map(client => <div
|
|
key={"client-" + client.databaseId}
|
|
className={cssStyle.entry + " " + (this.state.selectedClientId === client.databaseId ? cssStyle.selected : "")}
|
|
onClick={() => this.setState({
|
|
selectedClientId: client.databaseId,
|
|
disableClientRemove: !selectedGroup || this.clientMemberRemovePower === 0 || selectedGroup.needed_member_remove > this.clientMemberRemovePower
|
|
})}
|
|
onContextMenu={e => {
|
|
e.preventDefault();
|
|
|
|
this.setState({ selectedClientId: client.databaseId });
|
|
contextmenu.spawn_context_menu(e.pageX, e.pageY, {
|
|
type: contextmenu.MenuEntryType.ENTRY,
|
|
name: tr("Add client"),
|
|
icon_class: 'client-add',
|
|
callback: () => this.onClientAdd(),
|
|
invalidPermission: this.clientMemberAddPower === 0 || selectedGroup.needed_member_remove > this.clientMemberAddPower
|
|
}, {
|
|
type: contextmenu.MenuEntryType.ENTRY,
|
|
name: tr("Remove client"),
|
|
icon_class: 'client-delete',
|
|
callback: () => this.onClientRemove(),
|
|
invalidPermission: !selectedGroup || this.clientMemberRemovePower === 0 || selectedGroup.needed_member_remove > this.clientMemberRemovePower
|
|
}, {
|
|
type: contextmenu.MenuEntryType.ENTRY,
|
|
name: tr("Copy unique id"),
|
|
icon_class: 'client-copy',
|
|
callback: () => copy_to_clipboard(client.uniqueId)
|
|
}, contextmenu.Entry.HR(), {
|
|
type: contextmenu.MenuEntryType.ENTRY,
|
|
name: tr("Refresh"),
|
|
icon_class: 'client-refresh',
|
|
callback: () => this.onRefreshList()
|
|
})
|
|
}}
|
|
>{client.name || client.uniqueId}</div>)}
|
|
</div>
|
|
<div className={cssStyle.overlay + " " + (this.clients.length > 0 ? cssStyle.hidden : "")}>
|
|
<a><Translatable>This group contains no clients.</Translatable></a>
|
|
</div>
|
|
<div className={cssStyle.overlay + " " + (selectedGroup?.saveDB ? cssStyle.hidden : "")}>
|
|
<a><Translatable>This group is a temporary group.</Translatable></a>
|
|
</div>
|
|
<div className={cssStyle.overlay + " " + cssStyle.error + " " + (this.state.state === "no-permissions" ? "" : cssStyle.hidden)}>
|
|
<a><Translatable>You don't have permissions to view the clients in this group</Translatable></a>
|
|
</div>
|
|
<div className={cssStyle.overlay + " " + cssStyle.error + " " + (this.state.state === "error" ? "" : cssStyle.hidden)}>
|
|
<a><Translatable>Failed to query clients:</Translatable><br />{this.state.error}</a>
|
|
</div>
|
|
<div className={cssStyle.overlay + " " + (selectedGroup ? cssStyle.hidden : "")}>
|
|
<a><Translatable>No group selected</Translatable></a>
|
|
</div>
|
|
<div className={cssStyle.overlay + " " + (this.state.state !== "loading" ? cssStyle.hidden : "")}>
|
|
<a><Translatable>loading</Translatable> <LoadingDots maxDots={3} /></a>
|
|
</div>
|
|
</div>,
|
|
<div key={"buttons"} className={cssStyle.buttons}>
|
|
<GroupsButton
|
|
image={"img/icon_group_add.svg"}
|
|
alt={tr("Add client")}
|
|
disabled={this.state.disableClientAdd}
|
|
onClick={() => this.onClientAdd()}
|
|
/>
|
|
<GroupsButton
|
|
image={"img/icon_group_delete.svg"}
|
|
alt={tr("Remove client")}
|
|
disabled={this.state.disableClientRemove}
|
|
onClick={() => this.onClientRemove()}
|
|
/>
|
|
</div>
|
|
];
|
|
}
|
|
|
|
private selectedClient() {
|
|
return this.clients.find(e => e.databaseId === this.state.selectedClientId);
|
|
}
|
|
|
|
private selectedGroup() {
|
|
return this.groups.find(e => e.id === this.state.selectedGroupId);
|
|
}
|
|
|
|
@EventHandler<PermissionModalEvents>("action_activate_tab")
|
|
private handleGroupTabActive(events: PermissionModalEvents["action_activate_tab"]) {
|
|
if(events.tab === "groups-server" || events.tab === "groups-channel") {
|
|
if(typeof events.activeGroupId !== "undefined")
|
|
this.setState({ selectedGroupId: events.activeGroupId });
|
|
}
|
|
}
|
|
|
|
@EventHandler<PermissionModalEvents>("query_group_clients")
|
|
private handleQueryClients(events: PermissionModalEvents["query_group_clients"]) {
|
|
if(events.id !== this.state.selectedGroupId)
|
|
return;
|
|
|
|
this.setState({ state: "loading" });
|
|
}
|
|
|
|
@EventHandler<PermissionModalEvents>("query_group_clients_result")
|
|
private handleQueryClientsResult(event: PermissionModalEvents["query_group_clients_result"]) {
|
|
if(event.id !== this.state.selectedGroupId)
|
|
return;
|
|
|
|
this.clients = (event.clients || []).slice(0);
|
|
this.setState({
|
|
state: event.status === "success" ? "normal" : event.status === "error" ? "error" : event.status === "no-permissions" ? "no-permissions" : "error",
|
|
error: event.error || tr("unknown error")
|
|
});
|
|
}
|
|
|
|
@EventHandler<PermissionModalEvents>("notify_client_list_toggled")
|
|
private handleNotifyShow(events: PermissionModalEvents["notify_client_list_toggled"]) {
|
|
if(!events.visible)
|
|
return;
|
|
|
|
this.props.events.fire("query_group_clients", { id: this.state.selectedGroupId });
|
|
}
|
|
|
|
@EventHandler<PermissionModalEvents>("notify_groups_reset")
|
|
private handleReset() {
|
|
this.groups.splice(0, this.groups.length);
|
|
this.setState({ selectedClientId: 0, selectedGroupId: 0 })
|
|
}
|
|
|
|
@EventHandler<PermissionModalEvents>("notify_client_permissions")
|
|
private handleClientPermissions(event: PermissionModalEvents["notify_client_permissions"]) {
|
|
this.clientMemberAddPower = event.serverGroupMemberAddPower;
|
|
this.clientMemberRemovePower = event.serverGroupMemberRemovePower;
|
|
|
|
const group = this.selectedGroup();
|
|
const client = this.selectedClient();
|
|
this.setState({
|
|
disableClientRemove: !client || this.clientMemberRemovePower === 0 || group.needed_member_remove > this.clientMemberRemovePower,
|
|
disableClientAdd: !group || this.clientMemberAddPower === 0 || group.needed_member_add > this.clientMemberAddPower
|
|
});
|
|
}
|
|
|
|
@EventHandler<PermissionModalEvents>("action_select_group")
|
|
private handleSelect(event: PermissionModalEvents["action_select_group"]) {
|
|
if(event.target !== "server")
|
|
return;
|
|
|
|
if(this.state.selectedGroupId === event.id)
|
|
return;
|
|
|
|
const selectedGroup = this.groups.find(e => e.id === event.id);
|
|
const client = this.selectedClient();
|
|
this.setState({
|
|
selectedGroupId: event.id,
|
|
|
|
disableClientRemove: !client || this.clientMemberRemovePower === 0 || selectedGroup.needed_member_remove > this.clientMemberRemovePower,
|
|
disableClientAdd: !selectedGroup || this.clientMemberAddPower === 0 || selectedGroup.needed_member_add > this.clientMemberAddPower
|
|
});
|
|
}
|
|
|
|
@EventHandler<PermissionModalEvents>("query_groups_result")
|
|
private handleQueryResult(event: PermissionModalEvents["query_groups_result"]) {
|
|
if(event.target !== "server")
|
|
return;
|
|
|
|
this.groups.splice(0, this.groups.length);
|
|
this.groups.push(...event.groups);
|
|
if(!this.selectedGroup())
|
|
this.setState({ selectedGroupId: 0, selectedClientId: 0 });
|
|
}
|
|
|
|
@EventHandler<PermissionModalEvents>("notify_groups_created")
|
|
private handleGroupsCreated(event: PermissionModalEvents["notify_groups_created"]) {
|
|
if(event.target !== "server")
|
|
return;
|
|
|
|
this.groups.push(...event.groups);
|
|
}
|
|
|
|
@EventHandler<PermissionModalEvents>("notify_groups_deleted")
|
|
private handleGroupsDeleted(event: PermissionModalEvents["notify_groups_deleted"]) {
|
|
if(event.target !== "server")
|
|
return;
|
|
|
|
event.groups.forEach(id => {
|
|
const index = this.groups.findIndex(e => e.id === id);
|
|
if(index === -1) return;
|
|
|
|
this.groups.splice(index, 1);
|
|
});
|
|
|
|
this.forceUpdate();
|
|
}
|
|
|
|
@EventHandler<PermissionModalEvents>("notify_group_updated")
|
|
private handleGroupUpdated(event: PermissionModalEvents["notify_group_updated"]) {
|
|
if(event.target !== "server")
|
|
return;
|
|
|
|
const group = this.groups.find(e => e.id === event.id);
|
|
if(!group) return;
|
|
|
|
for(const update of event.properties) {
|
|
switch (update.property) {
|
|
case "name":
|
|
group.name = update.value;
|
|
break;
|
|
|
|
case "icon":
|
|
group.iconId = update.value;
|
|
break;
|
|
|
|
case "sort":
|
|
group.sortId = update.value;
|
|
break;
|
|
|
|
case "save":
|
|
group.saveDB = update.value;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if(this.state.selectedGroupId === event.id)
|
|
this.forceUpdate();
|
|
}
|
|
|
|
@EventHandler<PermissionModalEvents>("action_server_group_add_client_result")
|
|
private handleServerGroupAddClientResult(event: PermissionModalEvents["action_server_group_add_client_result"]) {
|
|
if(event.id !== this.state.selectedGroupId || event.status !== "success")
|
|
return;
|
|
|
|
this.props.events.fire("query_group_clients", { id: this.state.selectedGroupId });
|
|
}
|
|
|
|
@EventHandler<PermissionModalEvents>("action_server_group_remove_client_result")
|
|
private handleServerGroupRemoveClientResult(event: PermissionModalEvents["action_server_group_remove_client_result"]) {
|
|
if(event.id !== this.state.selectedGroupId || event.status !== "success")
|
|
return;
|
|
|
|
this.props.events.fire("query_group_clients", { id: this.state.selectedGroupId });
|
|
}
|
|
|
|
private onRefreshList() {
|
|
this.props.events.fire("query_group_clients", { id: this.state.selectedGroupId });
|
|
}
|
|
|
|
private onListContextMenu(event: React.MouseEvent) {
|
|
if(event.isDefaultPrevented())
|
|
return;
|
|
|
|
contextmenu.spawn_context_menu(event.pageX, event.pageY, {
|
|
type: contextmenu.MenuEntryType.ENTRY,
|
|
name: tr("Add client"),
|
|
icon_class: 'client-add',
|
|
callback: () => this.onClientAdd()
|
|
}, {
|
|
type: contextmenu.MenuEntryType.ENTRY,
|
|
name: tr("Refresh"),
|
|
icon_class: 'client-refresh',
|
|
callback: () => this.onRefreshList()
|
|
});
|
|
}
|
|
private onClientAdd() {
|
|
createInputModal(tr("Add client to server group"), tr("Enter the client unique id or database id"), text => {
|
|
if(!text) return false;
|
|
if(!!text.match(/^[0-9]+$/))
|
|
return true;
|
|
try {
|
|
return atob(text).length == 20;
|
|
} catch(error) {
|
|
return false;
|
|
}
|
|
}, async text => {
|
|
if(typeof(text) !== "string")
|
|
return;
|
|
|
|
let targetClient;
|
|
if(!!text.match(/^[0-9]+$/)) {
|
|
targetClient = parseInt(text);
|
|
} else {
|
|
targetClient = text.trim();
|
|
}
|
|
|
|
this.props.events.fire("action_server_group_add_client", { client: targetClient, id: this.state.selectedGroupId });
|
|
}).open();
|
|
}
|
|
|
|
private onClientRemove() {
|
|
this.props.events.fire("action_server_group_remove_client", { id: this.state.selectedGroupId, client: this.state.selectedClientId });
|
|
}
|
|
}
|
|
|
|
const ServerGroupsSideBar = (props: { connection: ConnectionHandler, modalEvents: Registry<PermissionModalEvents> }) => {
|
|
const [ active, setActive ] = useState(true);
|
|
const [ clientList, setClientList ] = useState(false);
|
|
|
|
props.modalEvents.reactUse("action_activate_tab", event => setActive(event.tab === "groups-server"));
|
|
props.modalEvents.reactUse("notify_client_list_toggled", event => setClientList(event.visible));
|
|
|
|
return (
|
|
<div className={cssStyle.sideContainer + " " + cssStyle.containerServerGroups + " " + (active ? "" : cssStyle.hidden)}>
|
|
<div className={cssStyle.containerGroupList + " " + (!clientList ? "" : cssStyle.hidden)}>
|
|
<GroupsList connection={props.connection} events={props.modalEvents} target={"server"} />
|
|
</div>
|
|
<div className={cssStyle.containerClientList + " " + (clientList ? "" : cssStyle.hidden)}>
|
|
<ServerClientList connection={props.connection} events={props.modalEvents} />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const ChannelGroupsSideBar = (props: { connection: ConnectionHandler, modalEvents: Registry<PermissionModalEvents> }) => {
|
|
const [ active, setActive ] = useState(false);
|
|
|
|
props.modalEvents.reactUse("action_activate_tab", event => setActive(event.tab === "groups-channel"));
|
|
|
|
return (
|
|
<div className={cssStyle.sideContainer + " " + cssStyle.containerChannelGroups + " " + (active ? "" : cssStyle.hidden)}>
|
|
<GroupsList connection={props.connection} events={props.modalEvents} target={"channel"} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
@ReactEventHandler<ChannelList>(e => e.props.events)
|
|
class ChannelList extends React.Component<{ connection: ConnectionHandler, events: Registry<PermissionModalEvents>, tabTarget: "channel" | "client-channel" }, { selectedChanelId: number }> {
|
|
private channels: ChannelInfo[] = [];
|
|
private isActiveTab = false;
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
selectedChanelId: 0
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div className={cssStyle.containerList + " " + cssStyle.listChannels} onContextMenu={e => {
|
|
e.preventDefault();
|
|
|
|
spawn_context_menu(e.pageX, e.pageY, {
|
|
type: MenuEntryType.ENTRY,
|
|
icon_class: "client-check_update",
|
|
name: tr("Refresh"),
|
|
callback: () => this.props.events.fire("query_channels")
|
|
});
|
|
}}>
|
|
<div className={cssStyle.entries}>
|
|
{this.channels.map(e => (
|
|
<div key={"channel-" + e.id}
|
|
className={cssStyle.entry + " " + (e.id === this.state.selectedChanelId ? cssStyle.selected : "")}
|
|
style={{paddingLeft: `calc(0.25em + ${e.depth * 16}px)`}}
|
|
onClick={() => this.props.events.fire("action_select_channel", { target: this.props.tabTarget, id: e.id })}
|
|
>
|
|
<LocalIconRenderer icon={this.props.connection.fileManager.icons.load_icon(e.iconId)} />
|
|
<a className={cssStyle.name}>{e.name + " (" + e.id + ")"}</a>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
componentDidMount(): void {
|
|
this.props.events.fire("query_channels");
|
|
}
|
|
|
|
@EventHandler<PermissionModalEvents>("query_channels_result")
|
|
private handleQueryChannelsResult(event: PermissionModalEvents["query_channels_result"]) {
|
|
this.channels = event.channels.slice(0);
|
|
if(this.channels.length > 0 && this.channels.findIndex(e => e.id === this.state.selectedChanelId) === -1)
|
|
this.setState({ selectedChanelId: this.channels[0].id });
|
|
else
|
|
this.forceUpdate();
|
|
}
|
|
|
|
@EventHandler<PermissionModalEvents>("notify_channel_updated")
|
|
private handleChannelUpdated(event: PermissionModalEvents["notify_channel_updated"]) {
|
|
const channel = this.channels.find(e => e.id === event.id);
|
|
if(!channel) return;
|
|
|
|
switch (event.property) {
|
|
case "icon":
|
|
channel.iconId = event.value;
|
|
break;
|
|
|
|
case "name":
|
|
channel.name = event.value;
|
|
break;
|
|
|
|
default:
|
|
return;
|
|
}
|
|
|
|
this.forceUpdate();
|
|
}
|
|
|
|
@EventHandler<PermissionModalEvents>("action_select_channel")
|
|
private handleActionSelectChannel(event: PermissionModalEvents["action_select_channel"]) {
|
|
if(event.target !== this.props.tabTarget)
|
|
return;
|
|
|
|
this.setState({ selectedChanelId: event.id });
|
|
if(this.isActiveTab) {
|
|
this.props.events.fire("action_set_permission_editor_subject", {
|
|
mode: this.props.tabTarget,
|
|
channelId: event.id });
|
|
}
|
|
}
|
|
|
|
@EventHandler<PermissionModalEvents>("action_activate_tab")
|
|
private handleActionTabSelect(event: PermissionModalEvents["action_activate_tab"]) {
|
|
this.isActiveTab = event.tab === this.props.tabTarget;
|
|
if(!this.isActiveTab)
|
|
return;
|
|
|
|
if(typeof event.activeChannelId === "number")
|
|
this.setState({ selectedChanelId: event.activeChannelId });
|
|
|
|
this.props.events.fire("action_set_permission_editor_subject", {
|
|
mode: this.props.tabTarget,
|
|
channelId: typeof event.activeChannelId === "number" ? event.activeChannelId : this.state.selectedChanelId });
|
|
}
|
|
}
|
|
|
|
const ChannelSideBar = (props: { connection: ConnectionHandler, modalEvents: Registry<PermissionModalEvents> }) => {
|
|
const [ active, setActive ] = useState(false);
|
|
|
|
props.modalEvents.reactUse("action_activate_tab", event => setActive(event.tab === "channel"));
|
|
|
|
return (
|
|
<div className={cssStyle.sideContainer + " " + cssStyle.containerChannels + " " + (active ? "" : cssStyle.hidden)}>
|
|
<ChannelList connection={props.connection} events={props.modalEvents} tabTarget={"channel"} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const ClientSelect = (props: { events: Registry<PermissionModalEvents>, tabTarget: "client" | "client-channel" }) => {
|
|
const [ clientIdentifier, setClientIdentifier ] = useState<number | string | undefined>(undefined);
|
|
const [ clientInfo, setClientInfo ] = useState<{ name: string, uniqueId: string, databaseId: number }>(undefined);
|
|
|
|
const refInput = useRef<FlatInputField>();
|
|
const refNickname = useRef<FlatInputField>();
|
|
const refUniqueIdentifier = useRef<FlatInputField>();
|
|
const refDatabaseId = useRef<FlatInputField>();
|
|
|
|
props.events.reactUse("action_activate_tab", event => {
|
|
if(event.tab !== props.tabTarget)
|
|
return;
|
|
|
|
if(typeof event.activeClientDatabaseId !== "undefined") {
|
|
props.events.fire("action_select_client", { target: props.tabTarget, id: event.activeClientDatabaseId === 0 ? "undefined" : event.activeClientDatabaseId });
|
|
} else {
|
|
if(clientInfo && clientInfo.databaseId)
|
|
props.events.fire("action_set_permission_editor_subject", { mode: props.tabTarget, clientDatabaseId: clientInfo.databaseId });
|
|
else
|
|
props.events.fire("action_set_permission_editor_subject", { mode: props.tabTarget, clientDatabaseId: 0 });
|
|
}
|
|
});
|
|
|
|
const resetInfoFields = (placeholder?: string) => {
|
|
refNickname.current?.setValue(undefined);
|
|
refUniqueIdentifier.current?.setValue(undefined);
|
|
refDatabaseId.current?.setValue(undefined);
|
|
|
|
refNickname.current?.setState({ placeholder: placeholder });
|
|
refUniqueIdentifier.current?.setState({ placeholder: placeholder });
|
|
refDatabaseId.current?.setState({ placeholder: placeholder });
|
|
};
|
|
|
|
props.events.reactUse("query_client_info", event => {
|
|
if(event.client !== clientIdentifier)
|
|
return;
|
|
|
|
refInput.current?.setState({ disabled: true });
|
|
resetInfoFields(tr("loading..."));
|
|
props.events.fire("action_set_permission_editor_subject", { mode: props.tabTarget, clientDatabaseId: 0 });
|
|
});
|
|
|
|
props.events.reactUse("query_client_info_result", event => {
|
|
if(event.client !== clientIdentifier)
|
|
return;
|
|
|
|
refInput.current?.setState({ disabled: false });
|
|
if(event.state === "success") {
|
|
setClientInfo(event.info);
|
|
|
|
refNickname.current?.setValue(event.info.name);
|
|
refUniqueIdentifier.current?.setValue(event.info.uniqueId);
|
|
refDatabaseId.current?.setValue(event.info.databaseId + "");
|
|
props.events.fire("action_set_permission_editor_subject", { mode: props.tabTarget, clientDatabaseId: event.info.databaseId });
|
|
return;
|
|
} else if(event.state === "error") {
|
|
refInput.current.setState({ disabled: false, isInvalid: true, invalidMessage: event.error });
|
|
} else if(event.state === "no-permission") {
|
|
refInput.current.setState({ disabled: false, isInvalid: true, invalidMessage: tra("failed on permission {0}", event.failedPermission) });
|
|
} else if(event.state === "no-such-client") {
|
|
refInput.current.setState({ disabled: false, isInvalid: true, invalidMessage: tr("no client found") });
|
|
refInput.current.focus();
|
|
}
|
|
|
|
refNickname.current?.setState({ placeholder: undefined });
|
|
refUniqueIdentifier.current?.setState({ placeholder: undefined });
|
|
refDatabaseId.current?.setState({ placeholder: undefined });
|
|
});
|
|
|
|
props.events.reactUse("action_select_client", event => {
|
|
if(event.target !== props.tabTarget)
|
|
return;
|
|
|
|
setClientIdentifier(event.id);
|
|
refInput.current.setValue(typeof event.id === "undefined" ? "" : event.id.toString());
|
|
if(typeof event.id === "number" || typeof event.id === "string") {
|
|
/* first do the state update */
|
|
props.events.fire_async("query_client_info", { client: event.id });
|
|
} else {
|
|
refInput.current?.setValue(undefined);
|
|
resetInfoFields(undefined);
|
|
props.events.fire("action_set_permission_editor_subject", { mode: props.tabTarget, clientDatabaseId: 0 });
|
|
}
|
|
});
|
|
|
|
return (
|
|
<div className={cssStyle.clientSelect}>
|
|
<FlatInputField
|
|
ref={refInput}
|
|
label={tr("Database or Unique ID")}
|
|
className={cssStyle.inputField}
|
|
labelType={"floating"}
|
|
finishOnEnter={true}
|
|
onInput={value => {
|
|
if(value.match(/^[0-9]{1,8}$/)) {
|
|
refInput.current?.setState({ isInvalid: false });
|
|
} else if(value.length === 0) {
|
|
refInput.current?.setState({ isInvalid: false });
|
|
} else {
|
|
try {
|
|
if(arrayBufferBase64(value).byteLength !== 20)
|
|
throw void 0;
|
|
|
|
refInput.current?.setState({ isInvalid: false });
|
|
} catch (e) {
|
|
refInput.current?.setState({ isInvalid: true, invalidMessage: undefined });
|
|
}
|
|
}
|
|
}}
|
|
onBlur={() => {
|
|
const value = refInput.current.value();
|
|
let client;
|
|
if(value.match(/^[0-9]{1,8}$/)) {
|
|
client = parseInt(value);
|
|
} else if(value.length === 0) {
|
|
client = undefined;
|
|
} else {
|
|
try {
|
|
if(arrayBufferBase64(value).byteLength !== 20) {
|
|
refInput.current?.setState({ isInvalid: true, invalidMessage: tr("Invalid UUID length") });
|
|
return;
|
|
}
|
|
} catch (e) {
|
|
refInput.current?.setState({ isInvalid: true, invalidMessage: tr("Invalid UUID") });
|
|
return;
|
|
}
|
|
}
|
|
refInput.current?.setState({ isInvalid: false });
|
|
props.events.fire("action_select_client", { id: client, target: props.tabTarget });
|
|
}}
|
|
/>
|
|
<hr />
|
|
<FlatInputField ref={refNickname} label={tr("Nickname")} className={cssStyle.infoField} disabled={true} />
|
|
<FlatInputField ref={refUniqueIdentifier} label={tr("Unique identifier")} className={cssStyle.infoField} disabled={true} />
|
|
<FlatInputField ref={refDatabaseId} label={tr("Client database ID")} className={cssStyle.infoField} disabled={true} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const ClientSideBar = (props: { connection: ConnectionHandler, modalEvents: Registry<PermissionModalEvents> }) => {
|
|
const [ active, setActive ] = useState(false);
|
|
|
|
props.modalEvents.reactUse("action_activate_tab", event => setActive(event.tab === "client"));
|
|
|
|
return (
|
|
<div className={cssStyle.sideContainer + " " + cssStyle.containerClient + " " + (active ? "" : cssStyle.hidden)}>
|
|
<ClientSelect events={props.modalEvents} tabTarget={"client"} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const ClientChannelSideBar = (props: { connection: ConnectionHandler, modalEvents: Registry<PermissionModalEvents> }) => {
|
|
const [ active, setActive ] = useState(false);
|
|
|
|
props.modalEvents.reactUse("action_activate_tab", event => setActive(event.tab === "client-channel"));
|
|
|
|
return (
|
|
<div className={cssStyle.sideContainer + " " + cssStyle.containerChannelClient + " " + (active ? "" : cssStyle.hidden)}>
|
|
<ClientSelect events={props.modalEvents} tabTarget={"client-channel"} />
|
|
<ChannelList connection={props.connection} events={props.modalEvents} tabTarget={"client-channel"} />
|
|
</div>
|
|
);
|
|
}; |