286 lines
8.2 KiB
TypeScript
286 lines
8.2 KiB
TypeScript
/*
|
|
GoToSocial
|
|
Copyright (C) GoToSocial Authors admin@gotosocial.org
|
|
SPDX-License-Identifier: AGPL-3.0-or-later
|
|
|
|
This program is free software: you can redistribute it and/or modify
|
|
it under the terms of the GNU Affero General Public License as published by
|
|
the Free Software Foundation, either version 3 of the License, or
|
|
(at your option) any later version.
|
|
|
|
This program is distributed in the hope that it will be useful,
|
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
GNU Affero General Public License for more details.
|
|
|
|
You should have received a copy of the GNU Affero General Public License
|
|
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
*/
|
|
|
|
import React from "react";
|
|
|
|
import { useMemo } from "react";
|
|
import { useLocation, useParams, useSearch } from "wouter";
|
|
|
|
import { useTextInput, useBoolInput } from "../../../lib/form";
|
|
|
|
import useFormSubmit from "../../../lib/form/submit";
|
|
|
|
import { TextInput, Checkbox, TextArea } from "../../../components/form/inputs";
|
|
|
|
import Loading from "../../../components/loading";
|
|
import BackButton from "../../../components/back-button";
|
|
import MutationButton from "../../../components/form/mutation-button";
|
|
|
|
import { useDomainAllowsQuery, useDomainBlocksQuery } from "../../../lib/query/admin/domain-permissions/get";
|
|
import { useAddDomainAllowMutation, useAddDomainBlockMutation, useRemoveDomainAllowMutation, useRemoveDomainBlockMutation } from "../../../lib/query/admin/domain-permissions/update";
|
|
import { DomainPerm } from "../../../lib/types/domain-permission";
|
|
import { NoArg } from "../../../lib/types/query";
|
|
import { Error } from "../../../components/error";
|
|
import { useBaseUrl } from "../../../lib/navigation/util";
|
|
import { PermType } from "../../../lib/types/perm";
|
|
import { useCapitalize } from "../../../lib/util";
|
|
import { formDomainValidator } from "../../../lib/util/formvalidators";
|
|
|
|
export default function DomainPermDetail() {
|
|
const baseUrl = useBaseUrl();
|
|
const search = useSearch();
|
|
|
|
// Parse perm type from routing params, converting
|
|
// "blocks" => "block" and "allows" => "allow".
|
|
const params = useParams();
|
|
const permTypeRaw = params.permType;
|
|
if (permTypeRaw !== "blocks" && permTypeRaw !== "allows") {
|
|
throw "unrecognized perm type " + params.permType;
|
|
}
|
|
const permType = useMemo(() => {
|
|
return permTypeRaw.slice(0, -1) as PermType;
|
|
}, [permTypeRaw]);
|
|
|
|
// Conditionally fetch either domain blocks or domain
|
|
// allows depending on which perm type we're looking at.
|
|
const {
|
|
data: blocks = {},
|
|
isLoading: loadingBlocks,
|
|
isFetching: fetchingBlocks,
|
|
} = useDomainBlocksQuery(NoArg, { skip: permType !== "block" });
|
|
const {
|
|
data: allows = {},
|
|
isLoading: loadingAllows,
|
|
isFetching: fetchingAllows,
|
|
} = useDomainAllowsQuery(NoArg, { skip: permType !== "allow" });
|
|
|
|
// Wait until we're done loading.
|
|
const loading = permType === "block"
|
|
? loadingBlocks || fetchingBlocks
|
|
: loadingAllows || fetchingAllows;
|
|
if (loading) {
|
|
return <Loading />;
|
|
}
|
|
|
|
// Parse domain from routing params.
|
|
let domain = params.domain ?? "unknown";
|
|
if (domain === "view") {
|
|
// Retrieve domain from form field submission.
|
|
const searchParams = new URLSearchParams(search);
|
|
const searchDomain = searchParams.get("domain");
|
|
if (!searchDomain) {
|
|
throw "empty view domain";
|
|
}
|
|
|
|
domain = searchDomain;
|
|
}
|
|
|
|
// Normalize / decode domain
|
|
// (it may be URL-encoded).
|
|
domain = decodeURIComponent(domain);
|
|
|
|
// Check if we already have a perm
|
|
// of the desired type for this domain.
|
|
const existingPerm = permType === "block"
|
|
? blocks[domain]
|
|
: allows[domain];
|
|
|
|
// Render different into content depending on
|
|
// if we have a perm already for this domain.
|
|
let infoContent: React.JSX.Element;
|
|
if (existingPerm === undefined) {
|
|
infoContent = (
|
|
<span>
|
|
No stored {permType} yet, you can add one below:
|
|
</span>
|
|
);
|
|
} else {
|
|
infoContent = (
|
|
<div className="info">
|
|
<i className="fa fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
|
|
<b>Editing existing domain {permTypeRaw} isn't implemented yet, <a href="https://github.com/superseriousbusiness/gotosocial/issues/1198" target="_blank" rel="noopener noreferrer">check here for progress</a></b>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<h1 className="text-cutoff">
|
|
<BackButton to={`~${baseUrl}/${permTypeRaw}`} />
|
|
{" "}
|
|
Domain {permType} for {domain}
|
|
</h1>
|
|
{infoContent}
|
|
<DomainPermForm
|
|
defaultDomain={domain}
|
|
perm={existingPerm}
|
|
permType={permType}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface DomainPermFormProps {
|
|
defaultDomain: string;
|
|
perm?: DomainPerm;
|
|
permType: PermType;
|
|
}
|
|
|
|
function DomainPermForm({ defaultDomain, perm, permType }: DomainPermFormProps) {
|
|
const isExistingPerm = perm !== undefined;
|
|
const disabledForm = isExistingPerm
|
|
? {
|
|
disabled: true,
|
|
title: "Domain permissions currently cannot be edited."
|
|
}
|
|
: {
|
|
disabled: false,
|
|
title: "",
|
|
};
|
|
|
|
const form = {
|
|
domain: useTextInput("domain", {
|
|
source: perm,
|
|
defaultValue: defaultDomain,
|
|
validator: formDomainValidator,
|
|
}),
|
|
obfuscate: useBoolInput("obfuscate", { source: perm }),
|
|
commentPrivate: useTextInput("private_comment", { source: perm }),
|
|
commentPublic: useTextInput("public_comment", { source: perm })
|
|
};
|
|
|
|
// Check which perm type we're meant to be handling
|
|
// here, and use appropriate mutations and results.
|
|
// We can't call these hooks conditionally because
|
|
// react is like "weh" (mood), but we can decide
|
|
// which ones to use conditionally.
|
|
const [ addBlock, addBlockResult ] = useAddDomainBlockMutation();
|
|
const [ removeBlock, removeBlockResult] = useRemoveDomainBlockMutation({ fixedCacheKey: perm?.id });
|
|
const [ addAllow, addAllowResult ] = useAddDomainAllowMutation();
|
|
const [ removeAllow, removeAllowResult ] = useRemoveDomainAllowMutation({ fixedCacheKey: perm?.id });
|
|
|
|
const [
|
|
addTrigger,
|
|
addResult,
|
|
removeTrigger,
|
|
removeResult,
|
|
] = useMemo(() => {
|
|
return permType == "block"
|
|
? [
|
|
addBlock,
|
|
addBlockResult,
|
|
removeBlock,
|
|
removeBlockResult,
|
|
]
|
|
: [
|
|
addAllow,
|
|
addAllowResult,
|
|
removeAllow,
|
|
removeAllowResult,
|
|
];
|
|
}, [permType,
|
|
addBlock, addBlockResult, removeBlock, removeBlockResult,
|
|
addAllow, addAllowResult, removeAllow, removeAllowResult,
|
|
]);
|
|
|
|
// Use appropriate submission params for this permType.
|
|
const [submitForm, submitFormResult] = useFormSubmit(form, [addTrigger, addResult], { changedOnly: false });
|
|
|
|
// Uppercase first letter of given permType.
|
|
const permTypeUpper = useCapitalize(permType);
|
|
|
|
const [location, setLocation] = useLocation();
|
|
|
|
function verifyUrlThenSubmit(e) {
|
|
// Adding a new domain permissions happens on a url like
|
|
// "/settings/admin/domain-permissions/:permType/domain.com",
|
|
// but if domain input changes, that doesn't match anymore
|
|
// and causes issues later on so, before submitting the form,
|
|
// silently change url, and THEN submit.
|
|
let correctUrl = `/${permType}s/${form.domain.value}`;
|
|
if (location != correctUrl) {
|
|
setLocation(correctUrl);
|
|
}
|
|
return submitForm(e);
|
|
}
|
|
|
|
return (
|
|
<form onSubmit={verifyUrlThenSubmit}>
|
|
<TextInput
|
|
field={form.domain}
|
|
label="Domain"
|
|
placeholder="example.com"
|
|
autoCapitalize="none"
|
|
spellCheck="false"
|
|
{...disabledForm}
|
|
/>
|
|
|
|
<Checkbox
|
|
field={form.obfuscate}
|
|
label="Obfuscate domain in public lists"
|
|
{...disabledForm}
|
|
/>
|
|
|
|
<TextArea
|
|
field={form.commentPrivate}
|
|
label="Private comment"
|
|
autoCapitalize="sentences"
|
|
rows={3}
|
|
{...disabledForm}
|
|
/>
|
|
|
|
<TextArea
|
|
field={form.commentPublic}
|
|
label="Public comment"
|
|
autoCapitalize="sentences"
|
|
rows={3}
|
|
{...disabledForm}
|
|
/>
|
|
|
|
<div className="action-buttons row">
|
|
<MutationButton
|
|
label={permTypeUpper}
|
|
result={submitFormResult}
|
|
showError={false}
|
|
{...disabledForm}
|
|
/>
|
|
|
|
{
|
|
isExistingPerm &&
|
|
<MutationButton
|
|
type="button"
|
|
onClick={() => removeTrigger(perm.id?? "")}
|
|
label="Remove"
|
|
result={removeResult}
|
|
className="button danger"
|
|
showError={false}
|
|
disabled={!isExistingPerm}
|
|
/>
|
|
}
|
|
</div>
|
|
|
|
<>
|
|
{addResult.error && <Error error={addResult.error} />}
|
|
{removeResult.error && <Error error={removeResult.error} />}
|
|
</>
|
|
|
|
</form>
|
|
);
|
|
}
|