abner/for-legacy-web
1
0
Fork 1
mirror of https://github.com/stoatchat/for-legacy-web.git synced 2026-03-06 17:11:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add permissions / roles settings.

Browse Source
This commit is contained in:
Paul
2021-07-01 17:36:34 +01:00
parent 471b4b0847
commit ff21d4efa8
13 changed files with 239 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/pages/settings/ChannelSettings.tsx
View File

@@ -1,12 +1,13 @@
import { Text } from "preact-i18n";
import { ListUl } from "@styled-icons/boxicons-regular";
import Category from "../../components/ui/Category";
import { GenericSettings } from "./GenericSettings";
import { getChannelName } from "../../context/revoltjs/util";
import { Route, useHistory, useParams } from "react-router-dom";
import { ListCheck, ListUl } from "@styled-icons/boxicons-regular";
import { useChannel, useForceUpdate } from "../../context/revoltjs/hooks";
import { Overview } from "./channel/Overview";
import Overview from "./channel/Overview";
import Permissions from "./channel/Permissions";
export default function ChannelSettings() {
const { channel: cid } = useParams<{ channel: string; }>();
@@ -17,10 +18,17 @@ export default function ChannelSettings() {
const history = useHistory();
function switchPage(to?: string) {
let base_url;
switch (channel?.channel_type) {
case 'TextChannel':
case 'VoiceChannel': base_url = `/server/${channel.server}/channel/${cid}/settings`; break;
default: base_url = `/channel/${cid}/settings`;
}
if (to) {
history.replace(`/channel/${cid}/settings/${to}`);
history.replace(`${base_url}/${to}`);
} else {
history.replace(`/channel/${cid}/settings`);
history.replace(base_url);
}
}
@@ -32,9 +40,17 @@ export default function ChannelSettings() {
id: 'overview',
icon: <ListUl size={20} />,
title: <Text id="app.settings.channel_pages.overview.title" />
},
{
id: 'permissions',
icon: <ListCheck size={20} />,
title: <Text id="app.settings.channel_pages.permissions.title" />
}
]}
children={[
<Route path="/server/:server/channel/:channel/settings/permissions"><Permissions channel={channel} /></Route>,
<Route path="/channel/:channel/settings/permissions"><Permissions channel={channel} /></Route>,
<Route path="/"><Overview channel={channel} /></Route>
]}
category="channel_pages"

10
src/pages/settings/channel/Overview.tsx
View File

@@ -12,7 +12,7 @@ interface Props {
channel: Channels.GroupChannel | Channels.TextChannel | Channels.VoiceChannel;
}
export function Overview({ channel }: Props) {
export default function Overview({ channel }: Props) {
const client = useContext(AppContext);
const [name, setName] = useState(channel.name);
@@ -81,9 +81,11 @@ export function Overview({ channel }: Props) {
if (!changed) setChanged(true)
}}
/>
<Button onClick={save} contrast disabled={!changed}>
<Text id="app.special.modals.actions.save" />
</Button>
<p>
<Button onClick={save} contrast disabled={!changed}>
<Text id="app.special.modals.actions.save" />
</Button>
</p>
</div>
);
}

91
src/pages/settings/channel/Permissions.tsx Normal file
View File

@@ -0,0 +1,91 @@
import Tip from "../../../components/ui/Tip";
import Button from "../../../components/ui/Button";
import { Channels } from "revolt.js/dist/api/objects";
import Checkbox from "../../../components/ui/Checkbox";
import { useServer } from "../../../context/revoltjs/hooks";
import { useContext, useEffect, useState } from "preact/hooks";
import { ChannelPermission } from "revolt.js/dist/api/permissions";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
// ! FIXME: export from revolt.js
const DEFAULT_PERMISSION_DM = ChannelPermission.View
+ ChannelPermission.SendMessage
+ ChannelPermission.ManageChannel
+ ChannelPermission.VoiceCall
+ ChannelPermission.InviteOthers
+ ChannelPermission.EmbedLinks
+ ChannelPermission.UploadFiles;
interface Props {
channel: Channels.GroupChannel | Channels.TextChannel | Channels.VoiceChannel;
}
// ! FIXME: bad code :)
export default function Permissions({ channel }: Props) {
const [ selected, setSelected ] = useState('default');
const client = useContext(AppContext);
type R = { name: string, permissions: number };
let roles: { [key: string]: R } = {};
if (channel.channel_type !== 'Group') {
const server = useServer(channel.server);
const a = server?.roles ?? {};
for (let b of Object.keys(a)) {
roles[b] = {
name: a[b].name,
permissions: a[b].permissions[1]
};
}
}
const keys = [ 'default', ...Object.keys(roles) ];
const defaultRole = { name: 'Default', permissions: (channel.channel_type === 'Group' ? channel.permissions : channel.default_permissions) ?? DEFAULT_PERMISSION_DM };
const selectedRole = selected === 'default' ? defaultRole : roles[selected];
if (!selectedRole) {
useEffect(() => setSelected('default'), [ ]);
return null;
}
const [ p, setPerm ] = useState(selectedRole.permissions >>> 0);
useEffect(() => {
setPerm(selectedRole.permissions >>> 0);
}, [ selected, selectedRole.permissions ]);
return (
<div>
<Tip warning>This section is under construction.</Tip>
<h2>select role</h2>
{ selected }
{ keys
.map(id => {
let role: R = id === 'default' ? defaultRole : roles[id];
return (
<Checkbox checked={selected === id} onChange={selected => selected && setSelected(id)}>
{ role.name }
</Checkbox>
)
})
}
<h2>channel per??issions</h2>
{ Object.keys(ChannelPermission)
.map(perm => {
let value = ChannelPermission[perm as keyof typeof ChannelPermission];
if (value & DEFAULT_PERMISSION_DM) {
return (
<Checkbox checked={(p & value) > 0} onChange={c => setPerm(c ? (p | value) : (p ^ value))}>
{ perm }
</Checkbox>
)
}
})
}
<Button contrast onClick={() => {
client.channels.setPermissions(channel._id, selected, p);
}}>click here to save permissions for role</Button>
</div>
);
}

10
src/pages/settings/panes/Feedback.tsx
View File

@@ -69,7 +69,7 @@ export function Feedback() {
</Radio> }
<Radio
disabled={state === "sending"}
checked={checked === "__other_option__"}
checked={checked === "__other_option__" && other !== "Revite"}
onSelect={() => setChecked("__other_option__")}>
<Localizer>
<InputBox
@@ -96,9 +96,11 @@ export function Feedback() {
disabled={state === "sending"}
onChange={ev => setDescription(ev.currentTarget.value)}
/>
<Button type="submit" contrast>
<Text id="app.settings.pages.feedback.send" />
</Button>
<p>
<Button type="submit" contrast>
<Text id="app.settings.pages.feedback.send" />
</Button>
</p>
</form>
);
}

18
src/pages/settings/panes/Profile.tsx
View File

@@ -113,14 +113,16 @@ export function Profile() {
intl.dictionary
)}
/>
<Button contrast
onClick={() => {
setChanged(false);
ctx.client.users.editUser({ profile: { content: profile?.content } })
}}
disabled={!changed}>
<Text id="app.special.modals.actions.save" />
</Button>
<p>
<Button contrast
onClick={() => {
setChanged(false);
ctx.client.users.editUser({ profile: { content: profile?.content } })
}}
disabled={!changed}>
<Text id="app.special.modals.actions.save" />
</Button>
</p>
</div>
);
}

2
src/pages/settings/server/Bans.tsx
View File

@@ -1,3 +1,4 @@
import Tip from "../../../components/ui/Tip";
import { Servers } from "revolt.js/dist/api/objects";
import { useContext, useEffect, useState } from "preact/hooks";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
@@ -17,6 +18,7 @@ export function Bans({ server }: Props) {
return (
<div>
<Tip warning>This section is under construction.</Tip>
{ bans?.map(x => <div>{x._id.user}: {x.reason ?? 'no reason'} <button onClick={() => client.servers.unbanUser(server._id, x._id.user)}>unban</button></div>) }
</div>
);

35
src/pages/settings/server/Members.tsx
View File

@@ -1,13 +1,17 @@
import { useEffect, useState } from "preact/hooks";
import { Servers } from "revolt.js/dist/api/objects";
import Checkbox from "../../../components/ui/Checkbox";
import Tip from "../../../components/ui/Tip";
import { useForceUpdate, useUsers } from "../../../context/revoltjs/hooks";
interface Props {
server: Servers.Server;
}
// ! FIXME: bad code :)
export function Members({ server }: Props) {
const [members, setMembers] = useState<Servers.Member[] | undefined>(undefined);
const ctx = useForceUpdate();
const users = useUsers(members?.map(x => x._id.user) ?? [], ctx);
@@ -18,7 +22,36 @@ export function Members({ server }: Props) {
return (
<div>
{ members && members.length > 0 && users?.map(x => x && <div>@{x.username}</div>) }
<Tip warning>This section is under construction.</Tip>
{ members && members.length > 0 && users?.map(x => x && <div>
<br/>
<br/>
<br/>
<span>@{x.username}</span>
{ server.roles && Object.keys(server.roles).map(id => {
let role = server.roles?.[id]!;
let member = members.find(y => x._id === y._id.user)!;
return (
<Checkbox checked={member.roles?.includes(id) ?? false} onChange={selected => {
let roles = (member.roles ?? []).filter(z => z !== id);
if (selected) roles.push(id);
ctx.client.servers.members.editMember(server._id, x._id, { roles });
setMembers(
[
...members.filter(e => e._id.user !== x._id),
{
...member,
roles
}
]
);
}}>{ role.name }</Checkbox>
)
}) }
</div>) }
</div>
);
}

8
src/pages/settings/server/Overview.tsx
View File

@@ -76,9 +76,11 @@ export function Overview({ server }: Props) {
if (!changed) setChanged(true)
}}
/>
<Button onClick={save} contrast disabled={!changed}>
<Text id="app.special.modals.actions.save" />
</Button>
<p>
<Button onClick={save} contrast disabled={!changed}>
<Text id="app.special.modals.actions.save" />
</Button>
</p>
<h3>
<Text id="app.main.servers.custom_banner" />

41
src/pages/settings/server/Roles.tsx
View File

@@ -1,15 +1,20 @@
import { useEffect, useState } from "preact/hooks";
import Tip from "../../../components/ui/Tip";
import Button from "../../../components/ui/Button";
import { Servers } from "revolt.js/dist/api/objects";
import InputBox from "../../../components/ui/InputBox";
import Checkbox from "../../../components/ui/Checkbox";
import { useContext, useEffect, useState } from "preact/hooks";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { ChannelPermission, ServerPermission } from "revolt.js/dist/api/permissions";
interface Props {
server: Servers.Server;
}
// ! FIXME: bad code :)
export function Roles({ server }: Props) {
const [ selected, setSelected ] = useState('default');
const client = useContext(AppContext);
const roles = server.roles ?? {};
const keys = [ 'default', ...Object.keys(roles) ];
@@ -21,10 +26,26 @@ export function Roles({ server }: Props) {
useEffect(() => setSelected('default'), [ ]);
return null;
}
const [ p, setPerm ] = useState([
selectedRole.permissions[0] >>> 0,
selectedRole.permissions[1] >>> 0,
]);
useEffect(() => {
setPerm([
selectedRole.permissions[0] >>> 0,
selectedRole.permissions[1] >>> 0,
]);
}, [ selected, selectedRole.permissions ]);
const [ name, setName ] = useState('');
return (
<div>
<Tip warning>This section is under construction.</Tip>
<h2>select role</h2>
{ selected }
{ keys
.map(id => {
let role: Servers.Role = id === 'default' ? defaultRole : roles[id];
@@ -36,14 +57,21 @@ export function Roles({ server }: Props) {
)
})
}
<Button disabled={selected === 'default'} error onClick={() => {}}>delete role</Button>
<h2>server permmissions</h2>
<Button disabled={selected === 'default'} error onClick={() => {
setSelected('default');
client.servers.deleteRole(server._id, selected);
}}>delete role</Button><br/>
<InputBox placeholder="role name" value={name} onChange={e => setName(e.currentTarget.value)} />
<Button contrast onClick={() => {
client.servers.createRole(server._id, name);
}}>create</Button>
<h2>serverm permmissions</h2>
{ Object.keys(ServerPermission)
.map(perm => {
let value = ServerPermission[perm as keyof typeof ServerPermission];
return (
<Checkbox checked={((selectedRole.permissions[0] >>> 0) & value) > 0} onChange={() => {}}>
<Checkbox checked={(p[0] & value) > 0} onChange={c => setPerm([ c ? (p[0] | value) : (p[0] ^ value), p[1] ])}>
{ perm }
</Checkbox>
)
@@ -55,12 +83,15 @@ export function Roles({ server }: Props) {
let value = ChannelPermission[perm as keyof typeof ChannelPermission];
return (
<Checkbox checked={((selectedRole.permissions[1] >>> 0) & value) > 0} onChange={() => {}}>
<Checkbox checked={((p[1] >>> 0) & value) > 0} onChange={c => setPerm([ p[0], c ? (p[1] | value) : (p[1] ^ value) ])}>
{ perm }
</Checkbox>
)
})
}
<Button contrast onClick={() => {
client.servers.setPermissions(server._id, selected, { server: p[0], channel: p[1] });
}}>click here to save permissions for role</Button>
</div>
);
}