From bbbf6ebe376c7b6c3a64e14571a3a477b880e3ad Mon Sep 17 00:00:00 2001
From: tobi <31960611+tsmethurst@users.noreply.github.com>
Date: Mon, 8 Jul 2024 09:38:27 +0200
Subject: [frontend] Better autocapitalize/spellcheck settings on forms (#3077)

---
 .../views/moderation/domain-permissions/detail.tsx | 32 +++++++++++++++++++++-
 .../views/moderation/domain-permissions/form.tsx   |  5 +++-
 .../moderation/domain-permissions/overview.tsx     | 10 ++++---
 3 files changed, 41 insertions(+), 6 deletions(-)

(limited to 'web/source/settings/views/moderation/domain-permissions')

diff --git a/web/source/settings/views/moderation/domain-permissions/detail.tsx b/web/source/settings/views/moderation/domain-permissions/detail.tsx
index 47072b8cb..2b27b534d 100644
--- a/web/source/settings/views/moderation/domain-permissions/detail.tsx
+++ b/web/source/settings/views/moderation/domain-permissions/detail.tsx
@@ -39,6 +39,7 @@ import { NoArg } from "../../../lib/types/query";
 import { Error } from "../../../components/error";
 import { useBaseUrl } from "../../../lib/navigation/util";
 import { PermType } from "../../../lib/types/perm";
+import isValidDomain from "is-valid-domain";
 
 export default function DomainPermDetail() {
 	const baseUrl = useBaseUrl();
@@ -139,7 +140,32 @@ function DomainPermForm({ defaultDomain, perm, permType }: DomainPermFormProps)
 		};
 
 	const form = {
-		domain: useTextInput("domain", { source: perm, defaultValue: defaultDomain }),
+		domain: useTextInput("domain", {
+			source: perm,
+			defaultValue: defaultDomain,
+			validator: (v: string) => {
+				if (v.length === 0) {
+					return "";
+				}
+
+				if (v[v.length-1] === ".") {
+					return "invalid domain";
+				}
+
+				const valid = isValidDomain(v, {
+					subdomain: true,
+					wildcard: false,
+					allowUnicode: true,
+					topLevel: false,
+				});
+
+				if (valid) {
+					return "";
+				}
+
+				return "invalid domain";
+			}
+		}),
 		obfuscate: useBoolInput("obfuscate", { source: perm }),
 		commentPrivate: useTextInput("private_comment", { source: perm }),
 		commentPublic: useTextInput("public_comment", { source: perm })
@@ -208,6 +234,8 @@ function DomainPermForm({ defaultDomain, perm, permType }: DomainPermFormProps)
 				field={form.domain}
 				label="Domain"
 				placeholder="example.com"
+				autoCapitalize="none"
+				spellCheck="false"
 				{...disabledForm}
 			/>
 
@@ -220,6 +248,7 @@ function DomainPermForm({ defaultDomain, perm, permType }: DomainPermFormProps)
 			<TextArea
 				field={form.commentPrivate}
 				label="Private comment"
+				autoCapitalize="sentences"
 				rows={3}
 				{...disabledForm}
 			/>
@@ -227,6 +256,7 @@ function DomainPermForm({ defaultDomain, perm, permType }: DomainPermFormProps)
 			<TextArea
 				field={form.commentPublic}
 				label="Public comment"
+				autoCapitalize="sentences"
 				rows={3}
 				{...disabledForm}
 			/>
diff --git a/web/source/settings/views/moderation/domain-permissions/form.tsx b/web/source/settings/views/moderation/domain-permissions/form.tsx
index ea7fdbc23..204e9510c 100644
--- a/web/source/settings/views/moderation/domain-permissions/form.tsx
+++ b/web/source/settings/views/moderation/domain-permissions/form.tsx
@@ -80,9 +80,12 @@ export default function ImportExportForm({ form, submitParse, parseResult }: Imp
 			<div className="import-export">
 				<TextArea
 					field={form.domains}
-					label="Domains"
+					label="Domains (newline-separated)"
 					placeholder={`google.com\nfacebook.com`}
 					rows={8}
+					autoCapitalize="none"
+					spellCheck="false"
+					className={"monospace"}
 				/>
 
 				<RadioGroup
diff --git a/web/source/settings/views/moderation/domain-permissions/overview.tsx b/web/source/settings/views/moderation/domain-permissions/overview.tsx
index 1c919c14d..78560ba34 100644
--- a/web/source/settings/views/moderation/domain-permissions/overview.tsx
+++ b/web/source/settings/views/moderation/domain-permissions/overview.tsx
@@ -66,9 +66,11 @@ export default function DomainPermissionsOverview() {
 	}
 	
 	return (
-		<>
-			<h1>Domain {permTypeUpper}s</h1>
-			{ permType == "block" ? <BlockHelperText/> : <AllowHelperText/> }
+		<div className={`domain-${permType}`}>
+			<div className="form-section-docs">
+				<h1>Domain {permTypeUpper}s</h1>
+				{ permType == "block" ? <BlockHelperText/> : <AllowHelperText/> }
+			</div>
 			<DomainPermsList
 				data={data}
 				permType={permType}
@@ -77,7 +79,7 @@ export default function DomainPermissionsOverview() {
 			<Link to={`~${baseUrl}/import-export`}>
 				Or use the bulk import/export interface
 			</Link>
-		</>
+		</div>
 	);
 }
 
-- 
cgit v1.3