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: [PATCH] [frontend] Better autocapitalize/spellcheck settings on forms (#3077) --- .../views/admin/actions/keys/expireremote.tsx | 32 ++++++++++++-- .../views/admin/debug/apurl/index.tsx | 3 ++ .../views/admin/emoji/category-select.tsx | 2 + .../views/admin/emoji/local/new-emoji.tsx | 2 + .../views/admin/emoji/local/overview.tsx | 2 + .../admin/emoji/remote/steal-this-look.tsx | 3 +- .../admin/http-header-permissions/create.tsx | 9 +++- .../admin/http-header-permissions/detail.tsx | 6 +-- .../views/admin/instance/settings.tsx | 15 ++++++- .../moderation/accounts/detail/actions.tsx | 13 ++++-- .../views/moderation/accounts/index.tsx | 16 ++++--- .../moderation/accounts/pending/index.tsx | 18 +++++++- .../moderation/accounts/search/index.tsx | 44 ++++++++++++++++--- .../moderation/domain-permissions/detail.tsx | 32 +++++++++++++- .../moderation/domain-permissions/form.tsx | 5 ++- .../domain-permissions/overview.tsx | 10 +++-- .../views/moderation/reports/detail.tsx | 12 +++-- web/source/settings/views/user/migration.tsx | 5 +++ web/source/settings/views/user/profile.tsx | 11 ++++- web/template/sign-up.tmpl | 3 ++ 20 files changed, 205 insertions(+), 38 deletions(-) diff --git a/web/source/settings/views/admin/actions/keys/expireremote.tsx b/web/source/settings/views/admin/actions/keys/expireremote.tsx index d695ec0c8..1d62f9439 100644 --- a/web/source/settings/views/admin/actions/keys/expireremote.tsx +++ b/web/source/settings/views/admin/actions/keys/expireremote.tsx @@ -22,9 +22,33 @@ import { TextInput } from "../../../../components/form/inputs"; import MutationButton from "../../../../components/form/mutation-button"; import { useTextInput } from "../../../../lib/form"; import { useInstanceKeysExpireMutation } from "../../../../lib/query/admin/actions"; +import isValidDomain from "is-valid-domain"; export default function ExpireRemote({}) { - const domainField = useTextInput("domain"); + const domainField = useTextInput("domain", { + 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"; + } + }); const [expire, expireResult] = useInstanceKeysExpireMutation(); @@ -52,11 +76,13 @@ export default function ExpireRemote({}) { diff --git a/web/source/settings/views/admin/debug/apurl/index.tsx b/web/source/settings/views/admin/debug/apurl/index.tsx index a0c2fc738..b66794132 100644 --- a/web/source/settings/views/admin/debug/apurl/index.tsx +++ b/web/source/settings/views/admin/debug/apurl/index.tsx @@ -53,6 +53,9 @@ export default function ApURL() { {children} diff --git a/web/source/settings/views/admin/emoji/local/new-emoji.tsx b/web/source/settings/views/admin/emoji/local/new-emoji.tsx index f2f5a56b1..b9c37ca8e 100644 --- a/web/source/settings/views/admin/emoji/local/new-emoji.tsx +++ b/web/source/settings/views/admin/emoji/local/new-emoji.tsx @@ -117,6 +117,8 @@ export default function NewEmojiForm() { diff --git a/web/source/settings/views/admin/emoji/local/overview.tsx b/web/source/settings/views/admin/emoji/local/overview.tsx index b4fa48d74..e9c5fae0c 100644 --- a/web/source/settings/views/admin/emoji/local/overview.tsx +++ b/web/source/settings/views/admin/emoji/local/overview.tsx @@ -116,6 +116,8 @@ function EmojiList({ emoji }: EmojiListParams) { field={filterField} name="emoji-shortcode" placeholder="Search" + autoCapitalize="none" + spellCheck="false" />
diff --git a/web/source/settings/views/admin/emoji/remote/steal-this-look.tsx b/web/source/settings/views/admin/emoji/remote/steal-this-look.tsx index 43d0b83e1..69d7b8bb5 100644 --- a/web/source/settings/views/admin/emoji/remote/steal-this-look.tsx +++ b/web/source/settings/views/admin/emoji/remote/steal-this-look.tsx @@ -52,9 +52,10 @@ export default function StealThisLook({ emojiCodes }) {
diff --git a/web/source/settings/views/admin/http-header-permissions/create.tsx b/web/source/settings/views/admin/http-header-permissions/create.tsx index 6613ac0f1..b3fec4b6d 100644 --- a/web/source/settings/views/admin/http-header-permissions/create.tsx +++ b/web/source/settings/views/admin/http-header-permissions/create.tsx @@ -100,7 +100,7 @@ export default function HeaderPermCreateForm({ permType }: { permType: PermType field={form.header} label={ <> - HTTP Header Name  + Header Name  } placeholder={"User-Agent"} + autoCapitalize="none" + spellCheck="false" + {...{className: "monospace"}} /> - HTTP Header Value RE2 Regex  + Value Regex  } placeholder={"^.*Some-User-Agent.*$"} + autoCapitalize="none" + spellCheck="false" {...{className: "monospace"}} />
ID
-
{perm.id}
+
{perm.id}
Created
@@ -176,10 +176,10 @@ function PermDeets({
Header Name
-
{perm.header}
+
{perm.header}
-
Header Value Regex
+
Value Regex
{perm.regex}
diff --git a/web/source/settings/views/admin/instance/settings.tsx b/web/source/settings/views/admin/instance/settings.tsx index 03a961589..8d377a6ea 100644 --- a/web/source/settings/views/admin/instance/settings.tsx +++ b/web/source/settings/views/admin/instance/settings.tsx @@ -79,7 +79,10 @@ function InstanceSettingsForm({ data: instance }: InstanceSettingsFormProps) { const [submitForm, result] = useFormSubmit(form, useUpdateInstanceMutation()); return ( -
+

Instance Settings

@@ -97,7 +100,8 @@ function InstanceSettingsForm({ data: instance }: InstanceSettingsFormProps) {
@@ -117,6 +121,7 @@ function InstanceSettingsForm({ data: instance }: InstanceSettingsFormProps) { field={form.thumbnailDesc} label="Avatar image description" placeholder="A cute drawing of a smiling sloth." + autoCapitalize="sentences" />
@@ -139,6 +144,7 @@ function InstanceSettingsForm({ data: instance }: InstanceSettingsFormProps) { field={form.shortDesc} label={`Short description (markdown accepted, max ${shortDescLimit} characters)`} placeholder="A small testing instance for the GoToSocial alpha software." + autoCapitalize="sentences" rows={6} /> @@ -146,6 +152,7 @@ function InstanceSettingsForm({ data: instance }: InstanceSettingsFormProps) { field={form.description} label={`Full description (markdown accepted, max ${descLimit} characters)`} placeholder="A small testing instance for the GoToSocial alpha software. Just trying it out, my main instance is https://example.com" + autoCapitalize="sentences" rows={6} /> @@ -153,6 +160,7 @@ function InstanceSettingsForm({ data: instance }: InstanceSettingsFormProps) { field={form.terms} label={`Terms & Conditions (markdown accepted, max ${termsLimit} characters)`} placeholder="Terms and conditions of using this instance, data policy, imprint, GDPR stuff, yadda yadda." + autoCapitalize="sentences" rows={6} /> @@ -172,12 +180,15 @@ function InstanceSettingsForm({ data: instance }: InstanceSettingsFormProps) { field={form.contactUser} label="Contact user (local account username)" placeholder="admin" + autoCapitalize="none" + spellCheck="false" /> diff --git a/web/source/settings/views/moderation/accounts/detail/actions.tsx b/web/source/settings/views/moderation/accounts/detail/actions.tsx index 4132b778a..ddcb1a5de 100644 --- a/web/source/settings/views/moderation/accounts/detail/actions.tsx +++ b/web/source/settings/views/moderation/accounts/detail/actions.tsx @@ -78,14 +78,21 @@ function ModerateAccount({ account }: { account: AdminAccount }) { >

Account Moderation Actions

- Currently only the "suspend" action is implemented.
- Suspending an account will delete it from your server, and remove all of its media, posts, relationships, etc.
- If the suspended account is local, suspending will also send out a "delete" message to other servers, requesting them to remove its data from their instance as well.
+ Currently only the "suspend" action is implemented. +
+ Suspending an account will delete it from your server, + and remove all of its media, posts, relationships, etc. +
+ If the suspended account is local, suspending will also + send out a "delete" message to other servers, requesting + them to remove its data from their instance as well. +
Account suspension cannot be reversed.
-

Accounts Search

- - You can perform actions on an account by clicking - its name in a report, or by searching for the account - using the form below and clicking on its name. - +
+

Accounts Search

+

+ You can perform actions on an account by clicking + its name in a report, or by searching for the account + using the form below and clicking on its name. +
+ All fields in the below form are optional. +

+
); diff --git a/web/source/settings/views/moderation/accounts/pending/index.tsx b/web/source/settings/views/moderation/accounts/pending/index.tsx index d47363954..f03c4800c 100644 --- a/web/source/settings/views/moderation/accounts/pending/index.tsx +++ b/web/source/settings/views/moderation/accounts/pending/index.tsx @@ -44,7 +44,23 @@ export default function AccountsPending() { return (
-

Pending Accounts

+ { + 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"; + } + }), email: useTextInput("email", { defaultValue: urlQueryParams.get("email") ?? ""}), ip: useTextInput("ip", { defaultValue: urlQueryParams.get("ip") ?? ""}), limit: useTextInput("limit", { defaultValue: urlQueryParams.get("limit") ?? "50"}) @@ -109,13 +134,17 @@ export function AccountSearchForm() { >