mirror of
1
Fork 0

federation blocks

This commit is contained in:
f0x 2022-09-16 13:27:07 +02:00
parent 80c05825ab
commit 397165b5ed
11 changed files with 640 additions and 119 deletions

View File

@ -66,6 +66,10 @@ $button-bg: $blue2;
$button-fg: $gray1;
$button-hover-bg: $blue3;
$button-danger-bg: $orange1;
$button-danger-fg: $gray1;
$button-danger-hover-bg: $orange2;
$toot-focus-bg: $gray5;
$toot-unfocus-bg: $gray3;
@ -82,6 +86,7 @@ $boxshadow-border: 0.08rem solid $gray1;
$avatar-border: $orange2;
$input-bg: $gray4;
$input-disabled-bg: $gray2;
$input-border: $blue1;
$input-focus-border: $blue3;
@ -97,3 +102,6 @@ $settings-nav-fg-active: $gray1;
$error-fg: $error1;
$error-bg: $error2;
$settings-entry-bg: $gray3;
$settings-entry-hover-bg: $gray4;

View File

@ -162,6 +162,15 @@ main {
text-align: center;
font-family: 'Noto Sans', sans-serif;
&.danger {
color: $button-danger-fg;
background: $button-danger-bg;
&:hover {
background: $button-danger-hover-bg;
}
}
&:hover {
background: $button-hover-bg;
}
@ -283,6 +292,10 @@ input, select, textarea {
&:focus {
border-color: $input-focus-border;
}
&:disabled {
background: $input-disabled-bg;
}
}
::placeholder {
@ -290,11 +303,6 @@ input, select, textarea {
color: $fg-reduced
}
input, textarea {
padding-top: 0.1rem;
padding-bottom: 0.1rem;
}
hr {
color: transparent;
width: 100%;

View File

@ -18,6 +18,7 @@
"browserlist": "^1.0.1",
"create-error": "^0.3.1",
"css-extract": "^2.0.0",
"default-value": "^1.0.0",
"dotty": "^0.1.2",
"eslint-plugin-react": "^7.24.0",
"express": "^4.18.1",
@ -25,6 +26,7 @@
"from2-string": "^1.1.0",
"icssify": "^2.0.0",
"is-plain-object": "^5.0.0",
"is-valid-domain": "^0.1.6",
"js-file-download": "^0.4.12",
"modern-normalize": "^1.1.0",
"photoswipe": "^5.3.0",

View File

@ -21,12 +21,13 @@
const Promise = require("bluebird");
const React = require("react");
const Redux = require("react-redux");
const {Switch, Route, Link, useRoute} = require("wouter");
const {Switch, Route, Link, Redirect, useRoute, useLocation} = require("wouter");
const fileDownload = require("js-file-download");
const Submit = require("../components/submit");
const { formFields } = require("../components/form-fields");
const api = require("../lib/api");
const adminActions = require("../redux/reducers/instances").actions;
const adminActions = require("../redux/reducers/admin").actions;
const base = "/settings/admin/federation";
@ -39,26 +40,17 @@ const base = "/settings/admin/federation";
module.exports = function AdminSettings() {
const dispatch = Redux.useDispatch();
// const instance = Redux.useSelector(state => state.instances.adminSettings);
const { blockedInstances } = Redux.useSelector(state => state.admin);
const [errorMsg, setError] = React.useState("");
const [statusMsg, setStatus] = React.useState("");
const [loaded, setLoaded] = React.useState(false);
const loadedBlockedInstances = Redux.useSelector(state => state.admin.loadedBlockedInstances);
React.useEffect(() => {
if (blockedInstances != undefined) {
setLoaded(true);
} else {
if (!loadedBlockedInstances ) {
return Promise.try(() => {
return dispatch(api.admin.fetchDomainBlocks());
}).then(() => {
setLoaded(true);
});
}
}, []);
if (!loaded) {
if (!loadedBlockedInstances) {
return (
<div>
<h1>Federation</h1>
@ -68,29 +60,222 @@ module.exports = function AdminSettings() {
}
return (
<div>
<Switch>
<Route path={`${base}/:domain`}>
<InstancePage blockedInstances={blockedInstances}/>
<InstancePageWrapped />
</Route>
<InstanceOverview blockedInstances={blockedInstances} />
<InstanceOverview />
</Switch>
</div>
);
};
function InstanceOverview({blockedInstances}) {
function InstanceOverview() {
const [filter, setFilter] = React.useState("");
const blockedInstances = Redux.useSelector(state => state.admin.blockedInstances);
const [_location, setLocation] = useLocation();
function filterFormSubmit(e) {
e.preventDefault();
setLocation(`${base}/${filter}`);
}
return (
<div>
<>
<h1>Federation</h1>
{blockedInstances.map((entry) => {
Here you can see an overview of blocked instances.
<div className="instance-list">
<h2>Blocked instances</h2>
<form action={`${base}/view`} className="filter" role="search" onSubmit={filterFormSubmit}>
<input name="domain" value={filter} onChange={(e) => setFilter(e.target.value)}/>
<Link to={`${base}/${filter}`}><a className="button">Add block</a></Link>
</form>
<div className="list">
{Object.values(blockedInstances).filter((a) => a.domain.startsWith(filter)).map((entry) => {
return (
<Link key={entry.domain} to={`${base}/${entry.domain}`}>
<a>{entry.domain}</a>
<a className="entry nounderline">
<span id="domain">
{entry.domain}
</span>
<span id="date">
{new Date(entry.created_at).toLocaleString()}
</span>
</a>
</Link>
);
})}
</div>
</div>
<BulkBlocking/>
</>
);
}
const Bulk = formFields(adminActions.updateBulkBlockVal, (state) => state.admin.bulkBlock);
function BulkBlocking() {
const dispatch = Redux.useDispatch();
const {bulkBlock, blockedInstances} = Redux.useSelector(state => state.admin);
const [errorMsg, setError] = React.useState("");
const [statusMsg, setStatus] = React.useState("");
function importBlocks() {
setStatus("Processing");
setError("");
return Promise.try(() => {
return dispatch(api.admin.bulkDomainBlock());
}).then(({success, invalidDomains}) => {
return Promise.try(() => {
return resetBulk();
}).then(() => {
dispatch(adminActions.updateBulkBlockVal(["list", invalidDomains.join("\n")]));
let stat = "";
if (success == 0) {
return setError("No valid domains in import");
} else if (success == 1) {
stat = "Imported 1 domain";
} else {
stat = `Imported ${success} domains`;
}
if (invalidDomains.length > 0) {
if (invalidDomains.length == 1) {
stat += ", input contained 1 invalid domain.";
} else {
stat += `, input contained ${invalidDomains.length} invalid domains.`;
}
} else {
stat += "!";
}
setStatus(stat);
});
}).catch((e) => {
console.error(e);
setError(e.message);
setStatus("");
});
}
function exportBlocks() {
return Promise.try(() => {
setStatus("Exporting");
setError("");
let asJSON = bulkBlock.exportType.startsWith("json");
let _asCSV = bulkBlock.exportType.startsWith("csv");
let exportList = Object.values(blockedInstances).map((entry) => {
if (asJSON) {
return {
domain: entry.domain,
public_comment: entry.public_comment
};
} else {
return entry.domain;
}
});
if (bulkBlock.exportType == "json") {
return dispatch(adminActions.updateBulkBlockVal(["list", JSON.stringify(exportList)]));
} else if (bulkBlock.exportType == "json-download") {
return fileDownload(JSON.stringify(exportList), "block-export.json");
} else if (bulkBlock.exportType == "plain") {
return dispatch(adminActions.updateBulkBlockVal(["list", exportList.join("\n")]));
}
}).then(() => {
setStatus("Exported!");
}).catch((e) => {
setError(e.message);
setStatus("");
});
}
function resetBulk(e) {
if (e != undefined) {
e.preventDefault();
}
return dispatch(adminActions.resetBulkBlockVal());
}
function disableInfoFields(props={}) {
if (bulkBlock.list[0] == "[") {
return {
...props,
disabled: true,
placeHolder: "Domain list is a JSON import, input disabled"
};
} else {
return props;
}
}
return (
<div className="bulk">
<h2>Import / Export <a onClick={resetBulk}>reset</a></h2>
<Bulk.TextArea
id="list"
name="Domains, one per line"
placeHolder={`google.com\nfacebook.com`}
/>
<Bulk.TextArea
id="public_comment"
name="Public comment"
inputProps={disableInfoFields({rows: 3})}
/>
<Bulk.TextArea
id="private_comment"
name="Private comment"
inputProps={disableInfoFields({rows: 3})}
/>
<Bulk.Checkbox
id="obfuscate"
name="Obfuscate domains? "
inputProps={disableInfoFields()}
/>
<div className="hidden">
<Bulk.File
id="json"
fileType="application/json"
withPreview={false}
/>
</div>
<div className="messagebutton">
<div>
<button type="submit" onClick={importBlocks}>Import</button>
</div>
<div>
<button type="submit" onClick={exportBlocks}>Export</button>
<Bulk.Select id="exportType" name="Export type" options={
<>
<option value="plain">One per line in text field</option>
<option value="json">JSON in text field</option>
<option value="json-download">JSON file download</option>
<option disabled value="csv">CSV in text field (glitch-soc)</option>
<option disabled value="csv-download">CSV file download (glitch-soc)</option>
</>
}/>
</div>
<br/>
<div>
{errorMsg.length > 0 &&
<div className="error accent">{errorMsg}</div>
}
{statusMsg.length > 0 &&
<div className="accent">{statusMsg}</div>
}
</div>
</div>
</div>
);
}
@ -102,27 +287,114 @@ function BackButton() {
);
}
function InstancePage({blockedInstances}) {
function InstancePageWrapped() {
/* We wrap the component to generate formFields with a setter depending on the domain
if formFields() is used inside the same component that is re-rendered with their state,
inputs get re-created on every change, causing them to lose focus, and bad performance
*/
let [_match, {domain}] = useRoute(`${base}/:domain`);
let [status, setStatus] = React.useState("");
let [entry, setEntry] = React.useState(() => {
let entry = blockedInstances.find((a) => a.domain == domain);
if (domain == "view") { // from form field submission
let realDomain = (new URL(document.location)).searchParams.get("domain");
if (realDomain == undefined) {
return <Redirect to={base}/>;
} else {
domain = realDomain;
}
}
function alterDomain([key, val]) {
return adminActions.updateDomainBlockVal([domain, key, val]);
}
const fields = formFields(alterDomain, (state) => state.admin.blockedInstances[domain]);
return <InstancePage domain={domain} Form={fields} />;
}
function InstancePage({domain, Form}) {
const dispatch = Redux.useDispatch();
const { blockedInstances } = Redux.useSelector(state => state.admin);
const entry = blockedInstances[domain];
React.useEffect(() => {
if (entry == undefined) {
return dispatch(adminActions.newDomainBlock(domain));
}
}, []);
const [errorMsg, setError] = React.useState("");
const [statusMsg, setStatus] = React.useState("");
if (entry == undefined) {
setStatus(`No block entry found for ${domain}, but you can create one below:`);
return {
private_comment: ""
};
if (statusMsg == "removed") {
return <Redirect to={base}/>;
} else {
return entry;
return "Loading...";
}
}
function submit() {
setStatus("PATCHing");
setError("");
return Promise.try(() => {
return dispatch(api.admin.updateDomainBlock(domain));
}).then(() => {
setStatus("Saved!");
}).catch((e) => {
setError(e.message);
setStatus("");
});
}
function removeBlock() {
setStatus("removing");
setError("");
return Promise.try(() => {
return dispatch(api.admin.removeDomainBlock(domain));
}).then(() => {
setStatus("removed");
}).catch((e) => {
setError(e.message);
setStatus("");
});
}
return (
<div>
{status}
<h1><BackButton/> Federation settings for: {domain}</h1>
<div>{entry.private_comment}</div>
{entry.new && "No stored block yet, you can add one below:"}
<Form.TextArea
id="public_comment"
name="Public comment"
/>
<Form.TextArea
id="private_comment"
name="Private comment"
/>
<Form.Checkbox
id="obfuscate"
name="Obfuscate domain? "
/>
<div className="messagebutton">
<button type="submit" onClick={submit}>{entry.new ? "Add block" : "Save block"}</button>
{!entry.new &&
<button className="danger" onClick={removeBlock}>Remove block</button>
}
{errorMsg.length > 0 &&
<div className="error accent">{errorMsg}</div>
}
{statusMsg.length > 0 &&
<div className="accent">{statusMsg}</div>
}
</div>
</div>
);
}

View File

@ -36,28 +36,33 @@ function eventListeners(dispatch, setter, obj) {
};
},
onFileChange: function (key) {
onFileChange: function (key, withPreview) {
return function (e) {
let file = e.target.files[0];
if (withPreview) {
let old = d.get(obj, key);
if (old != undefined) {
URL.revokeObjectURL(old); // no error revoking a non-Object URL as provided by instance
}
let file = e.target.files[0];
let objectURL = URL.createObjectURL(file);
dispatch(setter([key, objectURL]));
}
dispatch(setter([`${key}File`, file]));
};
}
};
}
function get(state, id) {
function get(state, id, defaultVal) {
let value;
if (id.includes(".")) {
value = d.get(state, id);
} else {
value = state[id];
}
if (value == undefined) {
value = defaultVal;
}
return value;
}
@ -71,7 +76,10 @@ function get(state, id) {
module.exports = {
formFields: function formFields(setter, selector) {
function FormField({type, id, name, className="", placeHolder="", fileType="", children=null, options=null}) {
function FormField({
type, id, name, className="", placeHolder="", fileType="", children=null,
options=null, inputProps={}, withPreview=true
}) {
const dispatch = Redux.useDispatch();
let state = Redux.useSelector(selector);
let {
@ -83,14 +91,14 @@ module.exports = {
let field;
let defaultLabel = true;
if (type == "text") {
field = <input type="text" id={id} value={get(state, id)} placeholder={placeHolder} className={className} onChange={onTextChange(id)}/>;
field = <input type="text" id={id} value={get(state, id, "")} placeholder={placeHolder} className={className} onChange={onTextChange(id)} {...inputProps}/>;
} else if (type == "textarea") {
field = <textarea type="text" id={id} value={get(state, id)} placeholder={placeHolder} className={className} onChange={onTextChange(id)}/>;
field = <textarea type="text" id={id} value={get(state, id, "")} placeholder={placeHolder} className={className} onChange={onTextChange(id)} rows={8} {...inputProps}/>;
} else if (type == "checkbox") {
field = <input type="checkbox" id={id} checked={get(state, id)} className={className} onChange={onCheckChange(id)}/>;
field = <input type="checkbox" id={id} checked={get(state, id, false)} className={className} onChange={onCheckChange(id)} {...inputProps}/>;
} else if (type == "select") {
field = (
<select id={id} checked={get(state, id)} className={className} onChange={onTextChange(id)}>
<select id={id} value={get(state, id, "")} className={className} onChange={onTextChange(id)} {...inputProps}>
{options}
</select>
);
@ -101,8 +109,8 @@ module.exports = {
<>
<label htmlFor={id} className="file-input button">Browse</label>
<span>{file ? file.name : "no file selected"}</span>
{/* <a onClick={removeFile("header")} href="#">remove</a> */}
<input className="hidden" id={id} type="file" accept={fileType} onChange={onFileChange(id)} />
{/* <a onClick={removeFile("header")}>remove</a> */}
<input className="hidden" id={id} type="file" accept={fileType} onChange={onFileChange(id, withPreview)} {...inputProps}/>
</>
);
} else {

View File

@ -19,12 +19,13 @@
"use strict";
const Promise = require("bluebird");
const isValidDomain = require("is-valid-domain");
const instance = require("../../redux/reducers/instances").actions;
const admin = require("../../redux/reducers/admin").actions;
module.exports = function ({ apiCall, getChanges }) {
return {
const adminAPI = {
updateInstance: function updateInstance() {
return function (dispatch, getState) {
return Promise.try(() => {
@ -50,6 +51,95 @@ module.exports = function ({ apiCall, getChanges }) {
return dispatch(admin.setBlockedInstances(data));
});
};
}
},
updateDomainBlock: function updateDomainBlock(domain) {
return function (dispatch, getState) {
return Promise.try(() => {
const state = getState().admin.blockedInstances[domain];
const update = getChanges(state, {
formKeys: ["domain", "obfuscate", "public_comment", "private_comment"],
});
return dispatch(apiCall("POST", "/api/v1/admin/domain_blocks", update, "form"));
}).then((block) => {
console.log(block);
});
};
},
bulkDomainBlock: function bulkDomainBlock() {
return function (dispatch, getState) {
let invalidDomains = [];
let success = 0;
return Promise.try(() => {
const state = getState().admin.bulkBlock;
let list = state.list;
let domains;
let fields = getChanges(state, {
formKeys: ["obfuscate", "public_comment", "private_comment"]
});
let defaultDate = new Date().toUTCString();
if (list[0] == "[") {
domains = JSON.parse(state.list);
} else {
domains = list.split("\n").map((line_) => {
let line = line_.trim();
if (line.length == 0) {
return null;
}
if (!isValidDomain(line, {wildcard: true, allowUnicode: true})) {
invalidDomains.push(line);
return null;
}
return {
domain: line,
created_at: defaultDate,
...fields
};
}).filter((a) => a != null);
}
if (domains.length == 0) {
return;
}
console.log(domains);
const update = {
domains: new Blob([JSON.stringify(domains)], {type: "application/json"})
};
return dispatch(apiCall("POST", "/api/v1/admin/domain_blocks?import=true", update, "form"));
}).then((blocks) => {
if (blocks != undefined) {
return Promise.each(blocks, (block) => {
success += 1;
return dispatch(admin.setDomainBlock([block.domain, block]));
});
}
}).then(() => {
return {
success,
invalidDomains
};
});
};
},
removeDomainBlock: function removeDomainBlock(domain) {
return function (dispatch, getState) {
return Promise.try(() => {
const id = getState().admin.blockedInstances[domain].id;
return dispatch(apiCall("DELETE", `/api/v1/admin/domain_blocks/${id}`));
});
};
},
};
return adminAPI;
};

View File

@ -35,7 +35,9 @@ function apiCall(method, route, payload, type = "json") {
return Promise.try(() => {
let url = new URL(base);
url.pathname = route;
let [path, query] = route.split("?");
url.pathname = path;
url.search = query;
let body;
let headers = {

View File

@ -18,8 +18,8 @@
"use strict";
const {createSlice} = require("@reduxjs/toolkit");
// const d = require("dotty");
const { createSlice } = require("@reduxjs/toolkit");
const defaultValue = require("default-value");
function sortBlocks(blocks) {
return blocks.sort((a, b) => { // alphabetical sort
@ -27,23 +27,66 @@ function sortBlocks(blocks) {
});
}
// function deduplicateBlocks(blocks) {
// let a = new Map();
// blocks.forEach((block) => {
// a.set(block.id, block);
// });
// return Array.from(a.values());
// }
function emptyBlock() {
return {
public_comment: "",
private_comment: "",
obfuscate: false
};
}
module.exports = createSlice({
name: "admin",
initialState: {
loadedBlockedInstances: false,
blockedInstances: undefined,
blockedInstancesMap: {}
bulkBlock: {
list: "",
exportType: "plain",
...emptyBlock()
}
},
reducers: {
setBlockedInstances: (state, {payload}) => {
state.blockedInstances = sortBlocks(payload);
setBlockedInstances: (state, { payload }) => {
state.blockedInstances = {};
sortBlocks(payload).forEach((entry) => {
state.blockedInstances[entry.domain] = entry;
});
state.loadedBlockedInstances = true;
},
newDomainBlock: (state, { payload: domain }) => {
state.blockedInstances[domain] = {
domain,
new: true,
...emptyBlock()
};
},
setDomainBlock: (state, { payload: [domain, data = {}] }) => {
state.blockedInstances[domain] = data;
},
updateDomainBlockVal: (state, { payload: [domain, key, val] }) => {
state.blockedInstances[domain][key] = val;
},
updateBulkBlockVal: (state, { payload: [key, val] }) => {
state.bulkBlock[key] = val;
},
resetBulkBlockVal: (state, { _payload }) => {
state.bulkBlock = {
list: "",
exportType: "plain",
...emptyBlock()
};
},
exportToField: (state, { _payload }) => {
state.bulkBlock.list = Object.values(state.blockedInstances).map((entry) => {
return entry.domain;
}).join("\n");
}
}
});

View File

@ -38,6 +38,32 @@ section {
border-left: none;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
& > div {
border-left: 0.2rem solid $border-accent;
padding-left: 0.4rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
margin: 2rem 0;
h2 {
margin: 0;
margin-bottom: 0.5rem;
}
&:only-child {
border-left: none;
}
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
}
.sidebar {
@ -156,13 +182,18 @@ input, select, textarea {
display: none;
}
.messagebutton {
margin-top: 1rem;
.messagebutton, .messagebutton > div {
display: flex;
gap: 1rem;
align-items: center;
flex-wrap: wrap;
button {
div.padded {
margin-left: 1rem;
}
button, .button {
margin-top: 1rem;
margin-right: 1rem;
white-space: nowrap;
}
}
@ -203,7 +234,6 @@ section.with-sidebar > div {
textarea {
width: 100%;
height: 8rem;
}
h1 {
@ -324,3 +354,51 @@ section.with-sidebar > div {
}
}
}
.form-field label {
font-weight: bold;
}
.instance-list {
.filter {
display: flex;
gap: 0.5rem;
input {
width: auto;
flex: 1 1 auto;
}
}
.list {
display: flex;
flex-direction: column;
margin-top: 0.5rem;
max-height: 40rem;
overflow: auto;
}
.entry {
padding: 0.3rem;
margin: 0.2rem 0;
background: $settings-entry-bg;
display: flex;
#domain {
flex: 1 1 auto;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
&:hover {
background: $settings-entry-hover-bg;
}
}
}
.bulk h2 {
display: flex;
justify-content: space-between;
}

View File

@ -53,6 +53,7 @@ module.exports = function UserSettings() {
}
return (
<>
<div className="user-settings">
<h1>Post settings</h1>
<Select id="language" name="Default post language" options={
@ -61,7 +62,7 @@ module.exports = function UserSettings() {
</Select>
<Select id="privacy" name="Default post privacy" options={
<>
<option value="private">Private / followers-only)</option>
<option value="private">Private / followers-only</option>
<option value="unlisted">Unlisted</option>
<option value="public">Public</option>
</>
@ -82,9 +83,11 @@ module.exports = function UserSettings() {
/>
<Submit onClick={submit} label="Save post settings" errorMsg={errorMsg} statusMsg={statusMsg}/>
<hr/>
</div>
<div>
<PasswordChange/>
</div>
</>
);
};

View File

@ -3730,6 +3730,13 @@ is-typed-array@^1.1.3, is-typed-array@^1.1.9:
for-each "^0.3.3"
has-tostringtag "^1.0.0"
is-valid-domain@^0.1.6:
version "0.1.6"
resolved "https://registry.yarnpkg.com/is-valid-domain/-/is-valid-domain-0.1.6.tgz#3c85469d2938f170c8f82ce6e52df8ad9fca8105"
integrity sha512-ZKtq737eFkZr71At8NxOFcP9O1K89gW3DkdrGMpp1upr/ueWjj+Weh4l9AI4rN0Gt8W2M1w7jrG2b/Yv83Ljpg==
dependencies:
punycode "^2.1.1"
is-weakref@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.0.2.tgz#9529f383a9338205e89765e0392efc2f100f06f2"
@ -4657,7 +4664,7 @@ punycode@^1.3.2:
resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
integrity sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==
punycode@^2.1.0:
punycode@^2.1.0, punycode@^2.1.1:
version "2.1.1"
resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==