diff options
Diffstat (limited to 'web/source/settings/views/moderation/domain-permissions/drafts')
4 files changed, 665 insertions, 0 deletions
diff --git a/web/source/settings/views/moderation/domain-permissions/drafts/common.tsx b/web/source/settings/views/moderation/domain-permissions/drafts/common.tsx new file mode 100644 index 000000000..af919dc57 --- /dev/null +++ b/web/source/settings/views/moderation/domain-permissions/drafts/common.tsx @@ -0,0 +1,43 @@ +/* + 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"; + +export function DomainPermissionDraftHelpText() { + return ( + <> + Domain permission drafts are domain block or domain allow entries that are not yet in force. + <br/> + You can choose to accept or remove a draft. + </> + ); +} + +export function DomainPermissionDraftDocsLink() { + return ( + <a + href="https://docs.gotosocial.org/en/latest/admin/settings/#domain-permission-drafts" + target="_blank" + className="docslink" + rel="noreferrer" + > + Learn more about domain permission drafts (opens in a new tab) + </a> + ); +} diff --git a/web/source/settings/views/moderation/domain-permissions/drafts/detail.tsx b/web/source/settings/views/moderation/domain-permissions/drafts/detail.tsx new file mode 100644 index 000000000..a5ba325f0 --- /dev/null +++ b/web/source/settings/views/moderation/domain-permissions/drafts/detail.tsx @@ -0,0 +1,210 @@ +/* + 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 { useLocation, useParams } from "wouter"; +import Loading from "../../../../components/loading"; +import { useBaseUrl } from "../../../../lib/navigation/util"; +import BackButton from "../../../../components/back-button"; +import { + useAcceptDomainPermissionDraftMutation, + useGetDomainPermissionDraftQuery, + useRemoveDomainPermissionDraftMutation +} from "../../../../lib/query/admin/domain-permissions/drafts"; +import { Error as ErrorC } from "../../../../components/error"; +import UsernameLozenge from "../../../../components/username-lozenge"; +import MutationButton from "../../../../components/form/mutation-button"; +import { useBoolInput, useTextInput } from "../../../../lib/form"; +import { Checkbox, Select } from "../../../../components/form/inputs"; +import { PermType } from "../../../../lib/types/perm"; + +export default function DomainPermissionDraftDetail() { + const baseUrl = useBaseUrl(); + const backLocation: string = history.state?.backLocation ?? `~${baseUrl}`; + const params = useParams(); + + let id = params.permDraftId as string | undefined; + if (!id) { + throw "no perm ID"; + } + + const { + data: permDraft, + isLoading, + isFetching, + isError, + error, + } = useGetDomainPermissionDraftQuery(id); + + if (isLoading || isFetching) { + return <Loading />; + } else if (isError) { + return <ErrorC error={error} />; + } else if (permDraft === undefined) { + return <ErrorC error={new Error("permission draft was undefined")} />; + } + + const created = permDraft.created_at ? new Date(permDraft.created_at).toDateString(): "unknown"; + const domain = permDraft.domain; + const permType = permDraft.permission_type; + if (!permType) { + return <ErrorC error={new Error("permission_type was undefined")} />; + } + const publicComment = permDraft.public_comment ?? "[none]"; + const privateComment = permDraft.private_comment ?? "[none]"; + const subscriptionID = permDraft.subscription_id ?? "[none]"; + + return ( + <div className="domain-permission-draft-details"> + <h1><BackButton to={backLocation} /> Domain Permission Draft Detail</h1> + <dl className="info-list"> + <div className="info-list-entry"> + <dt>Created</dt> + <dd><time dateTime={permDraft.created_at}>{created}</time></dd> + </div> + <div className="info-list-entry"> + <dt>Created By</dt> + <dd> + <UsernameLozenge + account={permDraft.created_by} + linkTo={`~/settings/moderation/accounts/${permDraft.created_by}`} + backLocation={`~${location}`} + /> + </dd> + </div> + <div className="info-list-entry"> + <dt>Domain</dt> + <dd>{domain}</dd> + </div> + <div className="info-list-entry"> + <dt>Permission type</dt> + <dd className={`permission-type ${permType}`}> + <i + aria-hidden={true} + className={`fa fa-${permType === "allow" ? "check" : "close"}`} + ></i> + {permType} + </dd> + </div> + <div className="info-list-entry"> + <dt>Private comment</dt> + <dd>{privateComment}</dd> + </div> + <div className="info-list-entry"> + <dt>Public comment</dt> + <dd>{publicComment}</dd> + </div> + <div className="info-list-entry"> + <dt>Subscription ID</dt> + <dd>{subscriptionID}</dd> + </div> + </dl> + <HandleDraft + id={id} + permType={permType} + backLocation={backLocation} + /> + </div> + ); +} + +function HandleDraft({ id, permType, backLocation }: { id: string, permType: PermType, backLocation: string }) { + const [ accept, acceptResult ] = useAcceptDomainPermissionDraftMutation(); + const [ remove, removeResult ] = useRemoveDomainPermissionDraftMutation(); + const [_location, setLocation] = useLocation(); + const form = { + acceptOrRemove: useTextInput("accept_or_remove", { defaultValue: "accept" }), + overwrite: useBoolInput("overwrite"), + exclude_target: useBoolInput("exclude_target"), + }; + + const onClick = (e) => { + e.preventDefault(); + if (form.acceptOrRemove.value === "accept") { + const overwrite = form.overwrite.value; + accept({id, overwrite, permType}).then(res => { + if ("data" in res) { + setLocation(backLocation); + } + }); + } else { + const exclude_target = form.exclude_target.value; + remove({id, exclude_target}).then(res => { + if ("data" in res) { + setLocation(backLocation); + } + }); + } + }; + + return ( + <form> + <Select + field={form.acceptOrRemove} + label="Accept or remove draft" + options={ + <> + <option value="accept">Accept</option> + <option value="remove">Remove</option> + </> + } + ></Select> + + { form.acceptOrRemove.value === "accept" && + <> + <Checkbox + field={form.overwrite} + label={`Overwrite any existing ${permType} for this domain`} + /> + </> + } + + { form.acceptOrRemove.value === "remove" && + <> + <Checkbox + field={form.exclude_target} + label={`Add a domain permission exclude for this domain`} + /> + </> + } + + <MutationButton + label={ + form.acceptOrRemove.value === "accept" + ? `Accept ${permType}` + : "Remove draft" + } + type="button" + className={ + form.acceptOrRemove.value === "accept" + ? "button" + : "button danger" + } + onClick={onClick} + disabled={false} + showError={true} + result={ + form.acceptOrRemove.value === "accept" + ? acceptResult + : removeResult + } + /> + </form> + ); +} diff --git a/web/source/settings/views/moderation/domain-permissions/drafts/index.tsx b/web/source/settings/views/moderation/domain-permissions/drafts/index.tsx new file mode 100644 index 000000000..19dbe0d88 --- /dev/null +++ b/web/source/settings/views/moderation/domain-permissions/drafts/index.tsx @@ -0,0 +1,293 @@ +/* + 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, { ReactNode, useEffect, useMemo } from "react"; + +import { useTextInput } from "../../../../lib/form"; +import { PageableList } from "../../../../components/pageable-list"; +import MutationButton from "../../../../components/form/mutation-button"; +import { useLocation, useSearch } from "wouter"; +import { useAcceptDomainPermissionDraftMutation, useLazySearchDomainPermissionDraftsQuery, useRemoveDomainPermissionDraftMutation } from "../../../../lib/query/admin/domain-permissions/drafts"; +import { DomainPerm } from "../../../../lib/types/domain-permission"; +import { Error as ErrorC } from "../../../../components/error"; +import { Select, TextInput } from "../../../../components/form/inputs"; +import { formDomainValidator } from "../../../../lib/util/formvalidators"; +import { useCapitalize } from "../../../../lib/util"; +import { DomainPermissionDraftDocsLink, DomainPermissionDraftHelpText } from "./common"; + +export default function DomainPermissionDraftsSearch() { + return ( + <div className="domain-permission-drafts-view"> + <div className="form-section-docs"> + <h1>Domain Permission Drafts</h1> + <p> + You can use the form below to search through domain permission drafts. + <br/> + <DomainPermissionDraftHelpText /> + </p> + <DomainPermissionDraftDocsLink /> + </div> + <DomainPermissionDraftsSearchForm /> + </div> + ); +} + +function DomainPermissionDraftsSearchForm() { + const [ location, setLocation ] = useLocation(); + const search = useSearch(); + const urlQueryParams = useMemo(() => new URLSearchParams(search), [search]); + const hasParams = urlQueryParams.size != 0; + const [ searchDrafts, searchRes ] = useLazySearchDomainPermissionDraftsQuery(); + + const form = { + subscription_id: useTextInput("subscription_id", { defaultValue: urlQueryParams.get("subscription_id") ?? "" }), + domain: useTextInput("domain", { + defaultValue: urlQueryParams.get("domain") ?? "", + validator: formDomainValidator, + }), + permission_type: useTextInput("permission_type", { defaultValue: urlQueryParams.get("permission_type") ?? "" }), + limit: useTextInput("limit", { defaultValue: urlQueryParams.get("limit") ?? "20" }) + }; + + // On mount, if urlQueryParams were provided, + // trigger the search. For example, if page + // was accessed at /search?origin=local&limit=20, + // then run a search with origin=local and + // limit=20 and immediately render the results. + // + // If no urlQueryParams set, trigger default + // search (first page, no filtering). + useEffect(() => { + if (hasParams) { + searchDrafts(Object.fromEntries(urlQueryParams)); + } else { + setLocation(location + "?limit=20"); + } + }, [ + urlQueryParams, + hasParams, + searchDrafts, + location, + setLocation, + ]); + + // Rather than triggering the search directly, + // the "submit" button changes the location + // based on form field params, and lets the + // useEffect hook above actually do the search. + function submitQuery(e) { + e.preventDefault(); + + // Parse query parameters. + const entries = Object.entries(form).map(([k, v]) => { + // Take only defined form fields. + if (v.value === undefined || v.value.length === 0 || v.value === "any") { + return null; + } + return [[k, v.value]]; + }).flatMap(kv => { + // Remove any nulls. + return kv || []; + }); + + const searchParams = new URLSearchParams(entries); + setLocation(location + "?" + searchParams.toString()); + } + + // Location to return to when user clicks "back" on the detail view. + const backLocation = location + (hasParams ? `?${urlQueryParams}` : ""); + + // Function to map an item to a list entry. + function itemToEntry(draft: DomainPerm): ReactNode { + return ( + <DraftListEntry + key={draft.id} + permDraft={draft} + linkTo={`/drafts/${draft.id}`} + backLocation={backLocation} + /> + ); + } + + return ( + <> + <form + onSubmit={submitQuery} + // Prevent password managers + // trying to fill in fields. + autoComplete="off" + > + <Select + field={form.permission_type} + label="Permission type" + options={ + <> + <option value="">Any</option> + <option value="block">Block</option> + <option value="allow">Allow</option> + </> + } + ></Select> + <TextInput + field={form.domain} + label={`Domain (without "https://" prefix)`} + placeholder="example.org" + autoCapitalize="none" + spellCheck="false" + /> + <Select + field={form.limit} + label="Items per page" + options={ + <> + <option value="20">20</option> + <option value="50">50</option> + <option value="100">100</option> + </> + } + ></Select> + <MutationButton + disabled={false} + label={"Search"} + result={searchRes} + /> + </form> + <PageableList + isLoading={searchRes.isLoading} + isFetching={searchRes.isFetching} + isSuccess={searchRes.isSuccess} + items={searchRes.data?.drafts} + itemToEntry={itemToEntry} + isError={searchRes.isError} + error={searchRes.error} + emptyMessage={<b>No drafts found that match your query.</b>} + prevNextLinks={searchRes.data?.links} + /> + </> + ); +} + +interface DraftEntryProps { + permDraft: DomainPerm; + linkTo: string; + backLocation: string; +} + +function DraftListEntry({ permDraft, linkTo, backLocation }: DraftEntryProps) { + const [ _location, setLocation ] = useLocation(); + const [ accept, acceptResult ] = useAcceptDomainPermissionDraftMutation(); + const [ remove, removeResult ] = useRemoveDomainPermissionDraftMutation(); + + const domain = permDraft.domain; + const permType = permDraft.permission_type; + const permTypeUpper = useCapitalize(permType); + if (!permType) { + return <ErrorC error={new Error("permission_type was undefined")} />; + } + + const publicComment = permDraft.public_comment ?? "[none]"; + const privateComment = permDraft.private_comment ?? "[none]"; + const subscriptionID = permDraft.subscription_id ?? "[none]"; + const id = permDraft.id; + if (!id) { + return <ErrorC error={new Error("id was undefined")} />; + } + + const title = `${permTypeUpper} ${domain}`; + + return ( + <span + className={`pseudolink domain-permission-draft entry ${permType}`} + aria-label={title} + title={title} + onClick={() => { + // When clicking on a draft, direct + // to the detail view for that draft. + setLocation(linkTo, { + // Store the back location in history so + // the detail view can use it to return to + // this page (including query parameters). + state: { backLocation: backLocation } + }); + }} + role="link" + tabIndex={0} + > + <h3>{title}</h3> + <dl className="info-list"> + <div className="info-list-entry"> + <dt>Domain:</dt> + <dd className="text-cutoff">{domain}</dd> + </div> + <div className="info-list-entry"> + <dt>Permission type:</dt> + <dd className={`permission-type ${permType}`}> + <i + aria-hidden={true} + className={`fa fa-${permType === "allow" ? "check" : "close"}`} + ></i> + {permType} + </dd> + </div> + <div className="info-list-entry"> + <dt>Private comment:</dt> + <dd className="text-cutoff">{privateComment}</dd> + </div> + <div className="info-list-entry"> + <dt>Public comment:</dt> + <dd>{publicComment}</dd> + </div> + <div className="info-list-entry"> + <dt>Subscription:</dt> + <dd className="text-cutoff">{subscriptionID}</dd> + </div> + </dl> + <div className="action-buttons"> + <MutationButton + label={`Accept ${permType}`} + title={`Accept ${permType}`} + type="button" + className="button" + onClick={(e) => { + e.preventDefault(); + e.stopPropagation(); + accept({ id, permType }); + }} + disabled={false} + showError={true} + result={acceptResult} + /> + <MutationButton + label={`Remove draft`} + title={`Remove draft`} + type="button" + className="button danger" + onClick={(e) => { + e.preventDefault(); + e.stopPropagation(); + remove({ id }); + }} + disabled={false} + showError={true} + result={removeResult} + /> + </div> + </span> + ); +} diff --git a/web/source/settings/views/moderation/domain-permissions/drafts/new.tsx b/web/source/settings/views/moderation/domain-permissions/drafts/new.tsx new file mode 100644 index 000000000..c78f8192a --- /dev/null +++ b/web/source/settings/views/moderation/domain-permissions/drafts/new.tsx @@ -0,0 +1,119 @@ +/* + 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 useFormSubmit from "../../../../lib/form/submit"; +import { useCreateDomainPermissionDraftMutation } from "../../../../lib/query/admin/domain-permissions/drafts"; +import { useBoolInput, useRadioInput, useTextInput } from "../../../../lib/form"; +import { formDomainValidator } from "../../../../lib/util/formvalidators"; +import MutationButton from "../../../../components/form/mutation-button"; +import { Checkbox, RadioGroup, TextArea, TextInput } from "../../../../components/form/inputs"; +import { useLocation } from "wouter"; +import { DomainPermissionDraftDocsLink, DomainPermissionDraftHelpText } from "./common"; + +export default function DomainPermissionDraftNew() { + const [ _location, setLocation ] = useLocation(); + + const form = { + domain: useTextInput("domain", { + validator: formDomainValidator, + }), + permission_type: useRadioInput("permission_type", { + options: { + block: "Block domain", + allow: "Allow domain", + } + }), + obfuscate: useBoolInput("obfuscate"), + public_comment: useTextInput("public_comment"), + private_comment: useTextInput("private_comment"), + }; + + const [formSubmit, result] = useFormSubmit( + form, + useCreateDomainPermissionDraftMutation(), + { + changedOnly: false, + onFinish: (res) => { + if (res.data) { + // Creation successful, + // redirect to drafts overview. + setLocation(`/drafts/search`); + } + }, + }); + + return ( + <form + onSubmit={formSubmit} + // Prevent password managers + // trying to fill in fields. + autoComplete="off" + > + <div className="form-section-docs"> + <h2>New Domain Permission Draft</h2> + <p><DomainPermissionDraftHelpText /></p> + <DomainPermissionDraftDocsLink /> + </div> + + <RadioGroup + field={form.permission_type} + /> + + <TextInput + field={form.domain} + label={`Domain (without "https://" prefix)`} + placeholder="example.org" + autoCapitalize="none" + spellCheck="false" + /> + + <TextArea + field={form.private_comment} + label={"Private comment"} + placeholder="This domain is like unto a clown car full of clowns, I suggest we block it forthwith." + autoCapitalize="sentences" + rows={3} + /> + + <TextArea + field={form.public_comment} + label={"Public comment"} + placeholder="Bad posters" + autoCapitalize="sentences" + rows={3} + /> + + <Checkbox + field={form.obfuscate} + label="Obfuscate domain in public lists" + /> + + <MutationButton + label="Save" + result={result} + disabled={ + !form.domain.value || + !form.domain.valid || + !form.permission_type.value + } + /> + </form> + ); +} |