[feature] Admin accounts endpoints; approve/reject sign-ups (#2826)

* update settings panels, add pending overview + approve/deny functions

* add admin accounts get, approve, reject

* send approved/rejected emails

* use signup URL

* docs!

* email

* swagger

* web linting

* fix email tests

* wee lil fixerinos

* use new paging logic for GetAccounts() series of admin endpoints, small changes to query building

* shuffle useAccountIDIn check *before* adding to query

* fix parse from toot react error

* use `netip.Addr`

* put valid slices in globals

* optimistic updates for account state

---------

Co-authored-by: kim <grufwub@gmail.com>

web/source/settings/admin/reports/detail.tsx

@@ -17,26 +17,23 @@
 	along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-const React = require("react");
-const { useRoute, Redirect } = require("wouter");
+import React, { useState } from "react";
+import { useRoute, Redirect } from "wouter";
 
-const FormWithData = require("../../lib/form/form-with-data").default;
-const BackButton = require("../../components/back-button");
+import FormWithData from "../../lib/form/form-with-data";
+import BackButton from "../../components/back-button";
 
-const { useValue, useTextInput } = require("../../lib/form");
-const useFormSubmit = require("../../lib/form/submit").default;
+import { useValue, useTextInput } from "../../lib/form";
+import useFormSubmit from "../../lib/form/submit";
 
-const { TextArea } = require("../../components/form/inputs");
+import { TextArea } from "../../components/form/inputs";
 
-const MutationButton = require("../../components/form/mutation-button");
-const Username = require("./username");
-const { useBaseUrl } = require("../../lib/navigation/util");
-const {
-	useGetReportQuery,
-	useResolveReportMutation,
-} = require("../../lib/query/admin/reports");
+import MutationButton from "../../components/form/mutation-button";
+import Username from "./username";
+import { useBaseUrl } from "../../lib/navigation/util";
+import { useGetReportQuery, useResolveReportMutation } from "../../lib/query/admin/reports";
 
-module.exports = function ReportDetail({ }) {
+export default function ReportDetail({ }) {
 	const baseUrl = useBaseUrl();
 	let [_match, params] = useRoute(`${baseUrl}/:reportId`);
 	if (params?.reportId == undefined) {
@@ -55,7 +52,7 @@ module.exports = function ReportDetail({ }) {
 			</div>
 		);
 	}
-};
+}
 
 function ReportDetailForm({ data: report }) {
 	const from = report.account;
@@ -131,7 +128,11 @@ function ReportActionForm({ report }) {
 				field={form.comment}
 				label="Comment"
 			/>
-			<MutationButton label="Resolve" result={result} />
+			<MutationButton
+				disabled={false}
+				label="Resolve"
+				result={result}
+			/>
 		</form>
 	);
 }
@@ -170,10 +171,10 @@ function ReportedToot({ toot }) {
 				}
 			</section>
 			<aside className="status-info">
-				<dl class="status-stats">
-					<div class="stats-grouping">
-						<div class="stats-item published-at text-cutoff">
-							<dt class="sr-only">Published</dt>
+				<dl className="status-stats">
+					<div className="stats-grouping">
+						<div className="stats-item published-at text-cutoff">
+							<dt className="sr-only">Published</dt>
 							<dd>
 								<time dateTime={toot.created_at}>{new Date(toot.created_at).toLocaleString()}</time>
 							</dd>
@@ -186,7 +187,7 @@ function ReportedToot({ toot }) {
 }
 
 function TootCW({ note, content }) {
-	const [visible, setVisible] = React.useState(false);
+	const [visible, setVisible] = useState(false);
 
 	function toggleVisible() {
 		setVisible(!visible);
@@ -217,12 +218,12 @@ function TootMedia({ media, sensitive }) {
 						<input id={`sensitiveMedia-${m.id}`} type="checkbox" className="sensitive-checkbox hidden" />
 						<div className="sensitive">
 							<div className="open">
-								<label htmlFor={`sensitiveMedia-${m.id}`} className="button" role="button" tabIndex="0">
+								<label htmlFor={`sensitiveMedia-${m.id}`} className="button" role="button" tabIndex={0}>
 									<i className="fa fa-eye-slash" title="Hide sensitive media"></i>
 								</label>
 							</div>
 							<div className="closed" title={m.description}>
-								<label htmlFor={`sensitiveMedia-${m.id}`} className="button" role="button" tabIndex="0">
+								<label htmlFor={`sensitiveMedia-${m.id}`} className="button" role="button" tabIndex={0}>
 									Show sensitive media
 								</label>
 							</div>
@@ -241,12 +242,11 @@ function TootMedia({ media, sensitive }) {
 							alt={m.description}
 							src={m.url}
 							// thumb={m.preview_url}
-							size={m.meta?.original}
-							type={m.type}
+							sizes={m.meta?.original}
 						/>
 					</a>
 				</div>
 			))}
 		</div>
 	);
-}
+}

web/source/settings/admin/reports/index.tsx

@@ -17,17 +17,17 @@
 	along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-const React = require("react");
-const { Link, Switch, Route } = require("wouter");
+import React from "react";
+import { Link, Switch, Route } from "wouter";
 
-const FormWithData = require("../../lib/form/form-with-data").default;
+import FormWithData from "../../lib/form/form-with-data";
 
-const ReportDetail = require("./detail");
-const Username = require("./username");
-const { useBaseUrl } = require("../../lib/navigation/util");
-const { useListReportsQuery } = require("../../lib/query/admin/reports");
+import ReportDetail from "./detail";
+import Username from "./username";
+import { useBaseUrl } from "../../lib/navigation/util";
+import { useListReportsQuery } from "../../lib/query/admin/reports";
 
-module.exports = function Reports({ baseUrl }) {
+export default function Reports({ baseUrl }) {
 	return (
 		<div className="reports">
 			<Switch>
@@ -38,7 +38,7 @@ module.exports = function Reports({ baseUrl }) {
 			</Switch>
 		</div>
 	);
-};
+}
 
 function ReportOverview({ }) {
 	return (
@@ -100,4 +100,4 @@ function ReportEntry({ report }) {
 			</a>
 		</Link>
 	);
-}
+}

web/source/settings/admin/reports/username.tsx

@@ -17,10 +17,10 @@
 	along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-const React = require("react");
-const { Link } = require("wouter");
+import React from "react";
+import { Link } from "wouter";
 
-module.exports = function Username({ user, link = true }) {
+export default function Username({ user, link = true }) {
 	let className = "user";
 	let isLocal = user.domain == null;
 
@@ -36,8 +36,8 @@ module.exports = function Username({ user, link = true }) {
 		? { fa: "fa-home", info: "Local user" }
 		: { fa: "fa-external-link-square", info: "Remote user" };
 
-	let Element = "div";
-	let href = null;
+	let Element: any = "div";
+	let href: any = null;
 
 	if (link) {
 		Element = Link;
@@ -51,4 +51,4 @@ module.exports = function Username({ user, link = true }) {
 			<span className="sr-only">{icon.info}</span>
 		</Element>
 	);
-};
+}