mirror of
https://github.com/revoltchat/revite.git
synced 2024-12-24 06:32:08 -05:00
feat(permission): implement new server / channel permission menus
This commit is contained in:
Paul Makles
parent
3632b6b351
commit
041c039827
17 changed files with 587 additions and 311 deletions
2
.env
2
.env
|
|
@ -1,2 +1,2 @@
|
|||
VITE_API_URL=https://api.revolt.chat
|
||||
VITE_API_URL=http://local.revolt.chat:8000
|
||||
VITE_THEMES_URL=https://themes.revolt.chat
|
||||
|
|
|
|||
|
|
@ -126,6 +126,7 @@
|
|||
"localforage": "^1.9.0",
|
||||
"lodash.defaultsdeep": "^4.6.1",
|
||||
"lodash.isequal": "^4.5.0",
|
||||
"long": "^5.2.0",
|
||||
"markdown-it": "^12.0.6",
|
||||
"markdown-it-emoji": "^2.0.0",
|
||||
"markdown-it-sub": "^1.0.0",
|
||||
|
|
|
|||
|
|
@ -2,14 +2,12 @@ import { Check } from "@styled-icons/boxicons-regular";
|
|||
import { Cog } from "@styled-icons/boxicons-solid";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { Link } from "react-router-dom";
|
||||
import { ServerPermission } from "revolt.js/dist/api/permissions";
|
||||
import { Permission } from "revolt.js/dist/api/permissions";
|
||||
import { Server } from "revolt.js/dist/maps/Servers";
|
||||
import styled, { css } from "styled-components/macro";
|
||||
|
||||
import { Text } from "preact-i18n";
|
||||
|
||||
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
|
||||
|
||||
import IconButton from "../ui/IconButton";
|
||||
|
||||
import Tooltip from "./Tooltip";
|
||||
|
|
@ -125,7 +123,7 @@ export default observer(({ server }: Props) => {
|
|||
</Tooltip>
|
||||
) : undefined}
|
||||
<div className="title">{server.name}</div>
|
||||
{(server.permission & ServerPermission.ManageServer) > 0 && (
|
||||
{server.havePermission("ManageServer") && (
|
||||
<Link to={`/server/${server._id}/settings`}>
|
||||
<IconButton>
|
||||
<Cog size={20} />
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { Send, ShieldX, HappyBeaming, Box } from "@styled-icons/boxicons-solid";
|
||||
import Axios, { CancelTokenSource } from "axios";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { ChannelPermission } from "revolt.js/dist/api/permissions";
|
||||
import { Permission } from "revolt.js/dist/api/permissions";
|
||||
import { Channel } from "revolt.js/dist/maps/Channels";
|
||||
import styled, { css } from "styled-components/macro";
|
||||
import { ulid } from "ulid";
|
||||
|
|
@ -125,6 +125,7 @@ const FileAction = styled.div`
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
`;
|
||||
|
||||
// For sed replacement
|
||||
|
|
@ -147,7 +148,7 @@ export default observer(({ channel }: Props) => {
|
|||
|
||||
const renderer = getRenderer(channel);
|
||||
|
||||
if (!(channel.permission & ChannelPermission.SendMessage)) {
|
||||
if (!(channel.permission & Permission.SendMessage)) {
|
||||
return (
|
||||
<Base>
|
||||
<Blocked>
|
||||
|
|
@ -475,7 +476,7 @@ export default observer(({ channel }: Props) => {
|
|||
setReplies={setReplies}
|
||||
/>
|
||||
<Base>
|
||||
{channel.permission & ChannelPermission.UploadFiles ? (
|
||||
{channel.permission & Permission.UploadFiles ? (
|
||||
<FileAction>
|
||||
<FileUploader
|
||||
size={24}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import {
|
|||
Notification,
|
||||
} from "@styled-icons/boxicons-solid";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { ChannelPermission } from "revolt.js";
|
||||
import { Permission } from "revolt.js";
|
||||
import { Message as MessageObject } from "revolt.js/dist/maps/Messages";
|
||||
import styled from "styled-components";
|
||||
|
||||
|
|
@ -131,8 +131,7 @@ export const MessageOverlayBar = observer(({ message, queued }: Props) => {
|
|||
)}
|
||||
{isAuthor ||
|
||||
(message.channel &&
|
||||
message.channel.permission &
|
||||
ChannelPermission.ManageMessages) ? (
|
||||
message.channel.permission & Permission.ManageMessages) ? (
|
||||
<Tooltip content="Delete">
|
||||
<Entry
|
||||
onClick={(e) =>
|
||||
|
|
|
|||
|
|
@ -4,12 +4,14 @@ import { useContext } from "preact/hooks";
|
|||
import {
|
||||
ClientStatus,
|
||||
StatusContext,
|
||||
useClient,
|
||||
} from "../../../context/revoltjs/RevoltClient";
|
||||
|
||||
import Banner from "../../ui/Banner";
|
||||
|
||||
export default function ConnectionStatus() {
|
||||
const status = useContext(StatusContext);
|
||||
const client = useClient();
|
||||
|
||||
if (status === ClientStatus.OFFLINE) {
|
||||
return (
|
||||
|
|
@ -20,7 +22,8 @@ export default function ConnectionStatus() {
|
|||
} else if (status === ClientStatus.DISCONNECTED) {
|
||||
return (
|
||||
<Banner>
|
||||
<Text id="app.special.status.disconnected" />
|
||||
<Text id="app.special.status.disconnected" /> <br />
|
||||
<a onClick={() => client.websocket.connect()}>Reconnect</a>
|
||||
</Banner>
|
||||
);
|
||||
} else if (status === ClientStatus.CONNECTING) {
|
||||
|
|
|
|||
79
src/components/settings/roles/OverrideSwitch.tsx
Normal file
79
src/components/settings/roles/OverrideSwitch.tsx
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
import { Check, Square, X } from "@styled-icons/boxicons-regular";
|
||||
import styled, { css } from "styled-components";
|
||||
|
||||
type State = "Allow" | "Neutral" | "Deny";
|
||||
|
||||
const SwitchContainer = styled.div.attrs({
|
||||
role: "radiogroup",
|
||||
"aria-orientiation": "horizontal",
|
||||
})`
|
||||
flex-shrink: 0;
|
||||
|
||||
display: flex;
|
||||
margin: 4px 16px;
|
||||
overflow: hidden;
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--secondary-background);
|
||||
border: 2px solid var(--tertiary-background);
|
||||
`;
|
||||
|
||||
const Switch = styled.div.attrs({
|
||||
role: "radio",
|
||||
})<{ state: State; selected: boolean }>`
|
||||
padding: 4px;
|
||||
cursor: pointer;
|
||||
transition: 0.2s ease all;
|
||||
|
||||
color: ${(props) =>
|
||||
props.state === "Allow"
|
||||
? "var(--success)"
|
||||
: props.state === "Deny"
|
||||
? "var(--error)"
|
||||
: "var(--tertiary-foreground)"};
|
||||
|
||||
${(props) =>
|
||||
props.selected &&
|
||||
css`
|
||||
color: white;
|
||||
|
||||
background: ${props.state === "Allow"
|
||||
? "var(--success)"
|
||||
: props.state === "Deny"
|
||||
? "var(--error)"
|
||||
: "var(--primary-background)"};
|
||||
`}
|
||||
|
||||
&:hover {
|
||||
filter: brightness(0.8);
|
||||
}
|
||||
`;
|
||||
|
||||
interface Props {
|
||||
state: State;
|
||||
onChange: (state: State) => void;
|
||||
}
|
||||
|
||||
export function OverrideSwitch({ state, onChange }: Props) {
|
||||
return (
|
||||
<SwitchContainer>
|
||||
<Switch
|
||||
onClick={() => onChange("Deny")}
|
||||
state="Deny"
|
||||
selected={state === "Deny"}>
|
||||
<X size={24} />
|
||||
</Switch>
|
||||
<Switch
|
||||
onClick={() => onChange("Neutral")}
|
||||
state="Neutral"
|
||||
selected={state === "Neutral"}>
|
||||
<Square size={24} />
|
||||
</Switch>
|
||||
<Switch
|
||||
onClick={() => onChange("Allow")}
|
||||
state="Allow"
|
||||
selected={state === "Allow"}>
|
||||
<Check size={24} />
|
||||
</Switch>
|
||||
</SwitchContainer>
|
||||
);
|
||||
}
|
||||
33
src/components/settings/roles/PermissionList.tsx
Normal file
33
src/components/settings/roles/PermissionList.tsx
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
import { OverrideField } from "revolt-api/types/_common";
|
||||
import { Permission } from "revolt.js";
|
||||
|
||||
import { PermissionSelect } from "./PermissionSelect";
|
||||
|
||||
interface Props {
|
||||
value: OverrideField | number;
|
||||
onChange: (v: OverrideField | number) => void;
|
||||
|
||||
filter?: (keyof typeof Permission)[];
|
||||
}
|
||||
|
||||
export function PermissionList({ value, onChange, filter }: Props) {
|
||||
return (
|
||||
<>
|
||||
{(Object.keys(Permission) as (keyof typeof Permission)[])
|
||||
.filter(
|
||||
(key) =>
|
||||
key !== "GrantAllSafe" &&
|
||||
(!filter || filter.includes(key)),
|
||||
)
|
||||
.map((x) => (
|
||||
<PermissionSelect
|
||||
id={x}
|
||||
key={x}
|
||||
permission={Permission[x]}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
124
src/components/settings/roles/PermissionSelect.tsx
Normal file
124
src/components/settings/roles/PermissionSelect.tsx
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
import Long from "long";
|
||||
import { OverrideField } from "revolt-api/types/_common";
|
||||
import { Permission } from "revolt.js";
|
||||
import styled from "styled-components";
|
||||
|
||||
import { Text } from "preact-i18n";
|
||||
import { useMemo } from "preact/hooks";
|
||||
|
||||
import Checkbox from "../../ui/Checkbox";
|
||||
|
||||
import { OverrideSwitch } from "./OverrideSwitch";
|
||||
|
||||
interface PermissionSelectProps {
|
||||
id: keyof typeof Permission;
|
||||
permission: number;
|
||||
value: OverrideField | number;
|
||||
onChange: (value: OverrideField | number) => void;
|
||||
}
|
||||
|
||||
type State = "Allow" | "Neutral" | "Deny";
|
||||
|
||||
const PermissionEntry = styled.label`
|
||||
width: 100%;
|
||||
margin: 8px 0;
|
||||
display: flex;
|
||||
font-size: 1.1em;
|
||||
align-items: center;
|
||||
|
||||
.title {
|
||||
flex-grow: 1;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 0.8em;
|
||||
color: var(--secondary-foreground);
|
||||
}
|
||||
`;
|
||||
|
||||
export function PermissionSelect({
|
||||
id,
|
||||
permission,
|
||||
value,
|
||||
onChange,
|
||||
}: PermissionSelectProps) {
|
||||
const state: State = useMemo(() => {
|
||||
if (typeof value === "object") {
|
||||
if (Long.fromNumber(value.d).and(permission).eq(permission)) {
|
||||
return "Deny";
|
||||
}
|
||||
|
||||
if (Long.fromNumber(value.a).and(permission).eq(permission)) {
|
||||
return "Allow";
|
||||
}
|
||||
|
||||
return "Neutral";
|
||||
} else {
|
||||
if (Long.fromNumber(value).and(permission).eq(permission)) {
|
||||
return "Allow";
|
||||
}
|
||||
|
||||
return "Neutral";
|
||||
}
|
||||
}, [value]);
|
||||
|
||||
function onSwitch(state: State) {
|
||||
if (typeof value !== "object") throw "!";
|
||||
|
||||
// Convert to Long so we can do bitwise ops.
|
||||
let allow = Long.fromNumber(value.a);
|
||||
let deny = Long.fromNumber(value.d);
|
||||
|
||||
// Clear the current permission value.
|
||||
if (allow.and(permission).eq(permission)) {
|
||||
allow = allow.xor(permission);
|
||||
}
|
||||
|
||||
if (deny.and(permission).eq(permission)) {
|
||||
deny = deny.xor(permission);
|
||||
}
|
||||
|
||||
// Apply the current permission state.
|
||||
if (state === "Allow") {
|
||||
allow = allow.or(permission);
|
||||
}
|
||||
|
||||
if (state === "Deny") {
|
||||
deny = deny.or(permission);
|
||||
}
|
||||
|
||||
// Invoke state change.
|
||||
onChange({
|
||||
a: allow.toNumber(),
|
||||
d: deny.toNumber(),
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<PermissionEntry>
|
||||
<span class="title">
|
||||
<Text id={`permissions.server.${id}.t`}>{id}</Text>
|
||||
<span class="description">
|
||||
<Text id={`permissions.server.${id}.d`} />
|
||||
</span>
|
||||
</span>
|
||||
{typeof value === "object" ? (
|
||||
<OverrideSwitch state={state} onChange={onSwitch} />
|
||||
) : (
|
||||
<Checkbox
|
||||
checked={state === "Allow"}
|
||||
onChange={() =>
|
||||
onChange(
|
||||
Long.fromNumber(value, false)
|
||||
.xor(permission)
|
||||
.toNumber(),
|
||||
)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</PermissionEntry>
|
||||
);
|
||||
}
|
||||
35
src/components/settings/roles/RoleSelection.tsx
Normal file
35
src/components/settings/roles/RoleSelection.tsx
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
import { Role } from "revolt-api/types/Servers";
|
||||
|
||||
import Checkbox from "../../ui/Checkbox";
|
||||
|
||||
export type RoleOrDefault = (
|
||||
| Role
|
||||
| {
|
||||
name: string;
|
||||
permissions: number;
|
||||
colour?: string;
|
||||
hoist?: boolean;
|
||||
rank?: number;
|
||||
}
|
||||
) & { id: string };
|
||||
|
||||
interface Props {
|
||||
selected: string;
|
||||
onSelect: (id: string) => void;
|
||||
|
||||
roles: RoleOrDefault[];
|
||||
}
|
||||
|
||||
export function RoleSelection({ selected, onSelect, roles }: Props) {
|
||||
return (
|
||||
<>
|
||||
{roles.map((x) => (
|
||||
<Checkbox
|
||||
checked={x.id === selected}
|
||||
onChange={() => onSelect(x.id)}>
|
||||
{x.name}
|
||||
</Checkbox>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
22
src/components/settings/roles/UnsavedChanges.tsx
Normal file
22
src/components/settings/roles/UnsavedChanges.tsx
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import Tip from "../../../components/ui/Tip";
|
||||
import Button from "../../ui/Button";
|
||||
|
||||
interface Props {
|
||||
save: () => void;
|
||||
}
|
||||
|
||||
export function UnsavedChanges({ save }: Props) {
|
||||
return (
|
||||
<Tip hideSeparator>
|
||||
<span
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "8px",
|
||||
}}>
|
||||
You have unsaved changes!
|
||||
<Button onClick={save}>Save</Button>
|
||||
</span>
|
||||
</Tip>
|
||||
);
|
||||
}
|
||||
|
|
@ -89,7 +89,7 @@ export interface CheckboxProps {
|
|||
disabled?: boolean;
|
||||
contrast?: boolean;
|
||||
className?: string;
|
||||
children: Children;
|
||||
children?: Children;
|
||||
description?: Children;
|
||||
onChange: (state: boolean) => void;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,11 +14,7 @@ import { Cog, UserVoice } from "@styled-icons/boxicons-solid";
|
|||
import { useHistory } from "react-router-dom";
|
||||
import { Attachment } from "revolt-api/types/Autumn";
|
||||
import { Presence, RelationshipStatus } from "revolt-api/types/Users";
|
||||
import {
|
||||
ChannelPermission,
|
||||
ServerPermission,
|
||||
UserPermission,
|
||||
} from "revolt.js/dist/api/permissions";
|
||||
import { Permission, UserPermission } from "revolt.js/dist/api/permissions";
|
||||
import { Channel } from "revolt.js/dist/maps/Channels";
|
||||
import { Message } from "revolt.js/dist/maps/Messages";
|
||||
import { Server } from "revolt.js/dist/maps/Servers";
|
||||
|
|
@ -505,9 +501,8 @@ export default function ContextMenus() {
|
|||
|
||||
if (server_list) {
|
||||
const server = client.servers.get(server_list)!;
|
||||
const permissions = server.permission;
|
||||
if (server) {
|
||||
if (permissions & ServerPermission.ManageChannels) {
|
||||
if (server.havePermission("ManageChannel")) {
|
||||
generateAction({
|
||||
action: "create_category",
|
||||
target: server,
|
||||
|
|
@ -517,7 +512,8 @@ export default function ContextMenus() {
|
|||
target: server,
|
||||
});
|
||||
}
|
||||
if (permissions & ServerPermission.ManageServer)
|
||||
|
||||
if (server.havePermission("ManageServer"))
|
||||
generateAction({
|
||||
action: "open_server_settings",
|
||||
id: server_list,
|
||||
|
|
@ -673,9 +669,7 @@ export default function ContextMenus() {
|
|||
userId !== uid &&
|
||||
uid !== server.owner
|
||||
) {
|
||||
if (
|
||||
serverPermissions & ServerPermission.KickMembers
|
||||
)
|
||||
if (serverPermissions & Permission.KickMembers)
|
||||
generateAction(
|
||||
{
|
||||
action: "kick_member",
|
||||
|
|
@ -688,7 +682,7 @@ export default function ContextMenus() {
|
|||
"var(--error)", // the only relevant part really
|
||||
);
|
||||
|
||||
if (serverPermissions & ServerPermission.BanMembers)
|
||||
if (serverPermissions & Permission.BanMembers)
|
||||
generateAction(
|
||||
{
|
||||
action: "ban_member",
|
||||
|
|
@ -718,8 +712,7 @@ export default function ContextMenus() {
|
|||
if (message && !queued) {
|
||||
const sendPermission =
|
||||
message.channel &&
|
||||
message.channel.permission &
|
||||
ChannelPermission.SendMessage;
|
||||
message.channel.permission & Permission.SendMessage;
|
||||
|
||||
if (sendPermission) {
|
||||
generateAction({
|
||||
|
|
@ -759,8 +752,7 @@ export default function ContextMenus() {
|
|||
|
||||
if (
|
||||
message.author_id === userId ||
|
||||
channelPermissions &
|
||||
ChannelPermission.ManageMessages
|
||||
channelPermissions & Permission.ManageMessages
|
||||
) {
|
||||
generateAction({
|
||||
action: "delete_message",
|
||||
|
|
@ -903,7 +895,7 @@ export default function ContextMenus() {
|
|||
case "VoiceChannel":
|
||||
if (
|
||||
channelPermissions &
|
||||
ChannelPermission.InviteOthers
|
||||
Permission.InviteOthers
|
||||
) {
|
||||
generateAction({
|
||||
action: "create_invite",
|
||||
|
|
@ -913,7 +905,7 @@ export default function ContextMenus() {
|
|||
|
||||
if (
|
||||
serverPermissions &
|
||||
ServerPermission.ManageServer
|
||||
Permission.ManageServer
|
||||
)
|
||||
generateAction(
|
||||
{
|
||||
|
|
@ -926,7 +918,7 @@ export default function ContextMenus() {
|
|||
|
||||
if (
|
||||
serverPermissions &
|
||||
ServerPermission.ManageChannels
|
||||
Permission.ManageChannel
|
||||
)
|
||||
generateAction({
|
||||
action: "delete_channel",
|
||||
|
|
@ -958,20 +950,15 @@ export default function ContextMenus() {
|
|||
);
|
||||
|
||||
if (
|
||||
serverPermissions &
|
||||
ServerPermission.ChangeNickname ||
|
||||
serverPermissions &
|
||||
ServerPermission.ChangeAvatar
|
||||
serverPermissions & Permission.ChangeNickname ||
|
||||
serverPermissions & Permission.ChangeAvatar
|
||||
)
|
||||
generateAction(
|
||||
{ action: "edit_identity", target: server },
|
||||
"edit_identity",
|
||||
);
|
||||
|
||||
if (
|
||||
serverPermissions &
|
||||
ServerPermission.ManageServer
|
||||
)
|
||||
if (serverPermissions & Permission.ManageServer)
|
||||
generateAction(
|
||||
{
|
||||
action: "open_server_settings",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { useParams } from "react-router-dom";
|
||||
import { ServerPermission } from "revolt.js";
|
||||
import { Permission } from "revolt.js";
|
||||
import { Route } from "revolt.js/dist/api/routes";
|
||||
import styled from "styled-components/macro";
|
||||
|
||||
|
|
@ -74,8 +74,7 @@ export default function InviteBot() {
|
|||
{[...client.servers.values()]
|
||||
.filter(
|
||||
(x) =>
|
||||
x.permission &
|
||||
ServerPermission.ManageServer,
|
||||
x.permission & Permission.ManageServer,
|
||||
)
|
||||
.map((server) => (
|
||||
<option value={server._id} key={server._id}>
|
||||
|
|
|
|||
|
|
@ -1,23 +1,114 @@
|
|||
import isEqual from "lodash.isequal";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import {
|
||||
ChannelPermission,
|
||||
DEFAULT_PERMISSION_DM,
|
||||
} from "revolt.js/dist/api/permissions";
|
||||
import { OverrideField } from "revolt-api/types/_common";
|
||||
import { Channel } from "revolt.js/dist/maps/Channels";
|
||||
|
||||
import { useEffect, useState } from "preact/hooks";
|
||||
import { useLayoutEffect, useState } from "preact/hooks";
|
||||
|
||||
import Button from "../../../components/ui/Button";
|
||||
import Checkbox from "../../../components/ui/Checkbox";
|
||||
import Tip from "../../../components/ui/Tip";
|
||||
import { PermissionList } from "../../../components/settings/roles/PermissionList";
|
||||
import {
|
||||
RoleOrDefault,
|
||||
RoleSelection,
|
||||
} from "../../../components/settings/roles/RoleSelection";
|
||||
import { UnsavedChanges } from "../../../components/settings/roles/UnsavedChanges";
|
||||
import { useRoles } from "../server/Roles";
|
||||
|
||||
interface Props {
|
||||
channel: Channel;
|
||||
}
|
||||
|
||||
// ! FIXME: bad code :)
|
||||
export default observer(({ channel }: Props) => {
|
||||
// Consolidate all permissions that we can change right now.
|
||||
const currentRoles =
|
||||
channel.channel_type === "Group"
|
||||
? ([
|
||||
{
|
||||
id: "default",
|
||||
name: "Default",
|
||||
permissions: channel.permissions,
|
||||
},
|
||||
] as RoleOrDefault[])
|
||||
: (useRoles(channel.server!).map((role) => {
|
||||
return {
|
||||
...role,
|
||||
permissions: (role.id === "default"
|
||||
? channel.default_permissions
|
||||
: channel.role_permissions?.[role.id]) ?? {
|
||||
a: 0,
|
||||
d: 0,
|
||||
},
|
||||
};
|
||||
}) as RoleOrDefault[]);
|
||||
|
||||
// Keep track of whatever role we're editing right now.
|
||||
const [selected, setSelected] = useState("default");
|
||||
const [value, setValue] = useState<OverrideField | number | undefined>(
|
||||
undefined,
|
||||
);
|
||||
const currentPermission = currentRoles.find(
|
||||
(x) => x.id === selected,
|
||||
)!.permissions;
|
||||
const currentValue = value ?? currentPermission;
|
||||
|
||||
// If a role gets deleted, unselect it immediately.
|
||||
useLayoutEffect(() => {
|
||||
if (!channel?.server?.roles) return;
|
||||
if (!channel.server.roles[selected]) {
|
||||
setSelected("default");
|
||||
}
|
||||
}, [channel.server?.roles]);
|
||||
|
||||
// Upload new role information to server.
|
||||
function save() {
|
||||
channel.setPermissions(
|
||||
selected,
|
||||
typeof currentValue === "number"
|
||||
? currentValue
|
||||
: {
|
||||
allow: currentValue.a,
|
||||
deny: currentValue.d,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ height: "100%", overflowY: "scroll" }}>
|
||||
<h1>Select Role</h1>
|
||||
<RoleSelection
|
||||
selected={selected}
|
||||
onSelect={(id) => {
|
||||
setValue(undefined);
|
||||
setSelected(id);
|
||||
}}
|
||||
roles={currentRoles}
|
||||
/>
|
||||
{!isEqual(currentPermission, currentValue) && (
|
||||
<>
|
||||
<hr />
|
||||
<UnsavedChanges save={save} />
|
||||
</>
|
||||
)}
|
||||
<hr />
|
||||
<h1>Edit Permissions</h1>
|
||||
<PermissionList
|
||||
value={currentValue}
|
||||
onChange={setValue}
|
||||
filter={[
|
||||
"ViewChannel",
|
||||
"ReadMessageHistory",
|
||||
"SendMessage",
|
||||
"ManageMessages",
|
||||
"ManageWebhooks",
|
||||
"InviteOthers",
|
||||
"SendEmbeds",
|
||||
"UploadFiles",
|
||||
"Masquerade",
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
/*const [selected, setSelected] = useState("default");
|
||||
|
||||
type R = { name: string; permissions: number };
|
||||
const roles: { [key: string]: R } = {};
|
||||
|
|
@ -98,5 +189,5 @@ export default observer(({ channel }: Props) => {
|
|||
click here to save permissions for role
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
);*/
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,21 +1,8 @@
|
|||
import { Plus } from "@styled-icons/boxicons-regular";
|
||||
import isEqual from "lodash.isequal";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { ChannelPermission, ServerPermission } from "revolt.js";
|
||||
import { Server } from "revolt.js/dist/maps/Servers";
|
||||
|
||||
import styles from "./Panes.module.scss";
|
||||
import { Text } from "preact-i18n";
|
||||
import {
|
||||
useCallback,
|
||||
useContext,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useState,
|
||||
} from "preact/hooks";
|
||||
|
||||
import { useIntermediate } from "../../../context/intermediate/Intermediate";
|
||||
import { AppContext } from "../../../context/revoltjs/RevoltClient";
|
||||
import { useLayoutEffect, useMemo, useState } from "preact/hooks";
|
||||
|
||||
import Button from "../../../components/ui/Button";
|
||||
import Checkbox from "../../../components/ui/Checkbox";
|
||||
|
|
@ -23,267 +10,179 @@ import ColourSwatches from "../../../components/ui/ColourSwatches";
|
|||
import InputBox from "../../../components/ui/InputBox";
|
||||
import Overline from "../../../components/ui/Overline";
|
||||
|
||||
import ButtonItem from "../../../components/navigation/items/ButtonItem";
|
||||
import { PermissionList } from "../../../components/settings/roles/PermissionList";
|
||||
import {
|
||||
RoleOrDefault,
|
||||
RoleSelection,
|
||||
} from "../../../components/settings/roles/RoleSelection";
|
||||
import { UnsavedChanges } from "../../../components/settings/roles/UnsavedChanges";
|
||||
|
||||
interface Props {
|
||||
server: Server;
|
||||
}
|
||||
|
||||
const I32ToU32 = (arr: number[]) => arr.map((x) => x >>> 0);
|
||||
export function useRoles(server: Server) {
|
||||
return useMemo(
|
||||
() =>
|
||||
[
|
||||
// Pull in known server roles.
|
||||
...server.orderedRoles,
|
||||
// Include the default server permissions.
|
||||
{
|
||||
id: "default",
|
||||
name: "Default",
|
||||
permissions: server.default_permissions,
|
||||
},
|
||||
] as RoleOrDefault[],
|
||||
[server.roles, server.default_permissions],
|
||||
);
|
||||
}
|
||||
|
||||
// ! FIXME: bad code :)
|
||||
export const Roles = observer(({ server }: Props) => {
|
||||
const client = useContext(AppContext);
|
||||
const [role, setRole] = useState("default");
|
||||
const { openScreen } = useIntermediate();
|
||||
const roles = server.roles || {};
|
||||
// Consolidate all permissions that we can change right now.
|
||||
const currentRoles = useRoles(server);
|
||||
|
||||
if (role !== "default" && typeof roles[role] === "undefined") {
|
||||
useEffect(() => setRole("default"), [role]);
|
||||
return null;
|
||||
// Keep track of whatever role we're editing right now.
|
||||
const [selected, setSelected] = useState("default");
|
||||
const [value, setValue] = useState<Partial<RoleOrDefault>>({});
|
||||
const currentRole = currentRoles.find((x) => x.id === selected)!;
|
||||
const currentRoleValue = { ...currentRole, ...value };
|
||||
|
||||
// If a role gets deleted, unselect it immediately.
|
||||
useLayoutEffect(() => {
|
||||
if (!server.roles) return;
|
||||
if (!server.roles[selected]) {
|
||||
setSelected("default");
|
||||
}
|
||||
}, [server.roles]);
|
||||
|
||||
// Calculate permissions we have access to on this server.
|
||||
const current = server.permission;
|
||||
|
||||
// Upload new role information to server.
|
||||
function save() {
|
||||
const { permissions: permsCurrent, ...current } = currentRole;
|
||||
const { permissions: permsValue, ...value } = currentRoleValue;
|
||||
|
||||
if (!isEqual(permsCurrent, permsValue)) {
|
||||
server.setPermissions(
|
||||
selected,
|
||||
typeof permsValue === "number"
|
||||
? permsValue
|
||||
: {
|
||||
allow: permsValue.a,
|
||||
deny: permsValue.d,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
if (!isEqual(current, value)) {
|
||||
server.editRole(selected, value);
|
||||
}
|
||||
}
|
||||
|
||||
const clientPermissions = client.servers.get(server._id)!.permission;
|
||||
|
||||
const {
|
||||
name: roleName,
|
||||
colour: roleColour,
|
||||
hoist: roleHoist,
|
||||
rank: roleRank,
|
||||
permissions,
|
||||
} = roles[role] ?? {};
|
||||
|
||||
const getPermissions = useCallback(
|
||||
(id: string) => {
|
||||
return I32ToU32(
|
||||
id === "default"
|
||||
? server.default_permissions
|
||||
: roles[id].permissions,
|
||||
);
|
||||
},
|
||||
[roles, server],
|
||||
);
|
||||
|
||||
const [perm, setPerm] = useState(getPermissions(role));
|
||||
const [name, setName] = useState(roleName);
|
||||
const [hoist, setHoist] = useState(roleHoist);
|
||||
const [rank, setRank] = useState(roleRank);
|
||||
const [colour, setColour] = useState(roleColour);
|
||||
|
||||
useEffect(
|
||||
() => setPerm(getPermissions(role)),
|
||||
[getPermissions, role, permissions],
|
||||
);
|
||||
|
||||
useEffect(() => setName(roleName), [role, roleName]);
|
||||
useEffect(() => setHoist(roleHoist), [role, roleHoist]);
|
||||
useEffect(() => setRank(roleRank), [role, roleRank]);
|
||||
useEffect(() => setColour(roleColour), [role, roleColour]);
|
||||
|
||||
const modified =
|
||||
!isEqual(perm, getPermissions(role)) ||
|
||||
!isEqual(name, roleName) ||
|
||||
!isEqual(colour, roleColour) ||
|
||||
!isEqual(hoist, roleHoist) ||
|
||||
!isEqual(rank, roleRank);
|
||||
|
||||
const save = () => {
|
||||
if (!isEqual(perm, getPermissions(role))) {
|
||||
server.setPermissions(role, {
|
||||
server: perm[0],
|
||||
channel: perm[1],
|
||||
});
|
||||
}
|
||||
|
||||
if (
|
||||
!isEqual(name, roleName) ||
|
||||
!isEqual(colour, roleColour) ||
|
||||
!isEqual(hoist, roleHoist) ||
|
||||
!isEqual(rank, roleRank)
|
||||
) {
|
||||
server.editRole(role, { name, colour, hoist, rank });
|
||||
}
|
||||
};
|
||||
|
||||
const deleteRole = () => {
|
||||
setRole("default");
|
||||
server.deleteRole(role);
|
||||
};
|
||||
// Delete the role from this server.
|
||||
function deleteRole() {
|
||||
setSelected("default");
|
||||
server.deleteRole(selected);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.roles}>
|
||||
<div className={styles.list}>
|
||||
<div className={styles.title}>
|
||||
<h1>
|
||||
<Text id="app.settings.server_pages.roles.title" />
|
||||
</h1>
|
||||
<Plus
|
||||
size={22}
|
||||
onClick={() =>
|
||||
openScreen({
|
||||
id: "special_input",
|
||||
type: "create_role",
|
||||
server,
|
||||
callback: (id) => setRole(id),
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
{["default", ...Object.keys(roles)].map((id) =>
|
||||
id === "default" ? (
|
||||
<ButtonItem
|
||||
active={role === "default"}
|
||||
onClick={() => setRole("default")}>
|
||||
<Text id="app.settings.permissions.default_role" />
|
||||
</ButtonItem>
|
||||
) : (
|
||||
<ButtonItem
|
||||
key={id}
|
||||
active={role === id}
|
||||
onClick={() => setRole(id)}
|
||||
style={{
|
||||
color: roles[id].colour,
|
||||
}}>
|
||||
{roles[id].name}
|
||||
</ButtonItem>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
<div className={styles.permissions}>
|
||||
<div className={styles.title}>
|
||||
<h2>
|
||||
{role === "default" ? (
|
||||
<Text id="app.settings.permissions.default_role" />
|
||||
) : (
|
||||
roles[role].name
|
||||
)}
|
||||
</h2>
|
||||
<Button contrast disabled={!modified} onClick={save}>
|
||||
Save
|
||||
</Button>
|
||||
</div>
|
||||
{role !== "default" && (
|
||||
<>
|
||||
<section>
|
||||
<Overline type="subtle">Role Name</Overline>
|
||||
<p>
|
||||
<InputBox
|
||||
value={name}
|
||||
onChange={(e) =>
|
||||
setName(e.currentTarget.value)
|
||||
}
|
||||
contrast
|
||||
/>
|
||||
</p>
|
||||
</section>
|
||||
<section>
|
||||
<Overline type="subtle">Role Colour</Overline>
|
||||
<p>
|
||||
<ColourSwatches
|
||||
value={colour ?? "gray"}
|
||||
onChange={(value) => setColour(value)}
|
||||
/>
|
||||
</p>
|
||||
</section>
|
||||
<section>
|
||||
<Overline type="subtle">Role Options</Overline>
|
||||
<p>
|
||||
<Checkbox
|
||||
checked={hoist ?? false}
|
||||
onChange={(v) => setHoist(v)}
|
||||
description="Display this role above others.">
|
||||
Hoist Role
|
||||
</Checkbox>
|
||||
</p>
|
||||
</section>
|
||||
</>
|
||||
)}
|
||||
<section>
|
||||
<Overline type="subtle">
|
||||
<Text id="app.settings.permissions.server" />
|
||||
</Overline>
|
||||
{Object.keys(ServerPermission).map((key) => {
|
||||
if (key === "View") return;
|
||||
const value =
|
||||
ServerPermission[
|
||||
key as keyof typeof ServerPermission
|
||||
];
|
||||
|
||||
return (
|
||||
<div style={{ height: "100%", overflowY: "scroll" }}>
|
||||
<h1>Select Role</h1>
|
||||
<RoleSelection
|
||||
selected={selected}
|
||||
onSelect={(id) => {
|
||||
setValue({});
|
||||
setSelected(id);
|
||||
}}
|
||||
roles={currentRoles}
|
||||
/>
|
||||
{selected !== "default" && (
|
||||
<>
|
||||
<hr />
|
||||
<h1>Edit Role</h1>
|
||||
<section>
|
||||
<Overline type="subtle">Role Name</Overline>
|
||||
<p>
|
||||
<InputBox
|
||||
value={currentRoleValue.name}
|
||||
onChange={(e) =>
|
||||
setValue({
|
||||
...value,
|
||||
name: e.currentTarget.value,
|
||||
})
|
||||
}
|
||||
contrast
|
||||
/>
|
||||
</p>
|
||||
</section>
|
||||
<section>
|
||||
<Overline type="subtle">Role Colour</Overline>
|
||||
<p>
|
||||
<ColourSwatches
|
||||
value={currentRoleValue.colour ?? "gray"}
|
||||
onChange={(colour) =>
|
||||
setValue({ ...value, colour })
|
||||
}
|
||||
/>
|
||||
</p>
|
||||
</section>
|
||||
<section>
|
||||
<Overline type="subtle">Role Options</Overline>
|
||||
<p>
|
||||
<Checkbox
|
||||
key={key}
|
||||
checked={(perm[0] & value) > 0}
|
||||
onChange={() =>
|
||||
setPerm([perm[0] ^ value, perm[1]])
|
||||
checked={currentRoleValue.hoist ?? false}
|
||||
onChange={(hoist) =>
|
||||
setValue({ ...value, hoist })
|
||||
}
|
||||
disabled={!(clientPermissions & value)}
|
||||
description={
|
||||
<Text id={`permissions.server.${key}.d`} />
|
||||
}>
|
||||
<Text id={`permissions.server.${key}.t`} />
|
||||
description="Display this role above others.">
|
||||
Hoist Role
|
||||
</Checkbox>
|
||||
);
|
||||
})}
|
||||
</section>
|
||||
<section>
|
||||
<Overline type="subtle">
|
||||
<Text id="app.settings.permissions.channel" />
|
||||
</Overline>
|
||||
{Object.keys(ChannelPermission).map((key) => {
|
||||
if (key === "ManageChannel") return;
|
||||
const value =
|
||||
ChannelPermission[
|
||||
key as keyof typeof ChannelPermission
|
||||
];
|
||||
|
||||
return (
|
||||
<Checkbox
|
||||
key={key}
|
||||
checked={((perm[1] >>> 0) & value) > 0}
|
||||
onChange={() =>
|
||||
setPerm([perm[0], perm[1] ^ value])
|
||||
</p>
|
||||
</section>
|
||||
<section>
|
||||
<Overline type="subtle">
|
||||
Experimental Role Ranking
|
||||
</Overline>
|
||||
<p>
|
||||
<InputBox
|
||||
value={currentRoleValue.rank ?? 0}
|
||||
onChange={(e) =>
|
||||
setValue({
|
||||
...value,
|
||||
rank: parseInt(e.currentTarget.value),
|
||||
})
|
||||
}
|
||||
disabled={
|
||||
key === "View" ||
|
||||
!(clientPermissions & value)
|
||||
}
|
||||
description={
|
||||
<Text id={`permissions.channel.${key}.d`} />
|
||||
}>
|
||||
<Text id={`permissions.channel.${key}.t`} />
|
||||
</Checkbox>
|
||||
);
|
||||
})}
|
||||
</section>
|
||||
<div className={styles.actions}>
|
||||
<Button contrast disabled={!modified} onClick={save}>
|
||||
Save
|
||||
contrast
|
||||
/>
|
||||
</p>
|
||||
</section>
|
||||
</>
|
||||
)}
|
||||
{!isEqual(currentRole, currentRoleValue) && (
|
||||
<>
|
||||
<hr />
|
||||
<UnsavedChanges save={save} />
|
||||
</>
|
||||
)}
|
||||
<hr />
|
||||
<h1>Edit Permissions</h1>
|
||||
<PermissionList
|
||||
value={currentRoleValue.permissions}
|
||||
onChange={(permissions) =>
|
||||
setValue({ ...value, permissions } as RoleOrDefault)
|
||||
}
|
||||
/>
|
||||
{selected !== "default" && (
|
||||
<>
|
||||
<hr />
|
||||
<h1>Danger Zone</h1>
|
||||
<Button contrast error onClick={deleteRole}>
|
||||
Delete Role
|
||||
</Button>
|
||||
{role !== "default" && (
|
||||
<Button contrast error onClick={deleteRole}>
|
||||
Delete
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
{role !== "default" && (
|
||||
<>
|
||||
<section>
|
||||
<Overline type="subtle">
|
||||
Experimental Role Ranking
|
||||
</Overline>
|
||||
<p>
|
||||
<InputBox
|
||||
value={rank ?? 0}
|
||||
onChange={(e) =>
|
||||
setRank(parseInt(e.currentTarget.value))
|
||||
}
|
||||
contrast
|
||||
/>
|
||||
</p>
|
||||
</section>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3656,6 +3656,11 @@ lodash@4.17.21, lodash@^4.17.11, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.
|
|||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
|
||||
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
|
||||
|
||||
long@^5.2.0:
|
||||
version "5.2.0"
|
||||
resolved "https://registry.yarnpkg.com/long/-/long-5.2.0.tgz#2696dadf4b4da2ce3f6f6b89186085d94d52fd61"
|
||||
integrity sha512-9RTUNjK60eJbx3uz+TEGF7fUr29ZDxR5QzXcyDpeSfeH28S9ycINflOgOlppit5U+4kNTe83KQnMEerw7GmE8w==
|
||||
|
||||
loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
|
||||
version "1.4.0"
|
||||
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
|
||||
|
|
|
|||
Loading…
Reference in a new issue