From 666c28f420c52e8f7511d436d501f4ddaf5eeaf7 Mon Sep 17 00:00:00 2001 From: sua yoo Date: Wed, 8 Mar 2023 09:21:48 -0800 Subject: [PATCH] Limit organization name length (#671) --- .../src/components/crawl-metadata-editor.ts | 9 ++-- frontend/src/index.ts | 7 ++- frontend/src/pages/home.ts | 6 +++ frontend/src/pages/org/crawl-config-editor.ts | 6 ++- frontend/src/pages/org/settings.ts | 47 ++++++++++--------- frontend/src/theme.ts | 38 +++++++++++++++ 6 files changed, 81 insertions(+), 32 deletions(-) diff --git a/frontend/src/components/crawl-metadata-editor.ts b/frontend/src/components/crawl-metadata-editor.ts index 8616c73c..ea2399f0 100644 --- a/frontend/src/components/crawl-metadata-editor.ts +++ b/frontend/src/components/crawl-metadata-editor.ts @@ -9,8 +9,6 @@ import LiteElement, { html } from "../utils/LiteElement"; import { maxLengthValidator } from "../utils/form"; import type { Crawl } from "../types/crawler"; -const CRAWL_NOTES_MAXLENGTH = 500; - /** * Usage: * ```ts @@ -55,6 +53,8 @@ export class CrawlMetadataEditor extends LiteElement { threshold: 0.2, // stricter; default is 0.6 }); + private validateCrawlNotesMax = maxLengthValidator(500); + willUpdate(changedProperties: Map) { if (changedProperties.has("open") && this.open) { this.fetchTags(); @@ -81,7 +81,7 @@ export class CrawlMetadataEditor extends LiteElement { private renderEditMetadata() { if (!this.crawl) return; - const { helpText, validate } = maxLengthValidator(CRAWL_NOTES_MAXLENGTH); + const { helpText, validate } = this.validateCrawlNotesMax; return html`
${selectedOption.name}${selectedOption.name.slice(0, orgNameLength)} { @@ -414,7 +417,7 @@ export class App extends LiteElement { ${org.name}${org.name.slice(0, orgNameLength)} ` )} diff --git a/frontend/src/pages/home.ts b/frontend/src/pages/home.ts index 4d6958a3..6f3c9da8 100644 --- a/frontend/src/pages/home.ts +++ b/frontend/src/pages/home.ts @@ -8,6 +8,7 @@ import type { CurrentUser } from "../types/user"; import type { OrgData } from "../utils/orgs"; import LiteElement, { html } from "../utils/LiteElement"; import type { APIPaginatedList } from "../types/api"; +import { maxLengthValidator } from "../utils/form"; @localized() export class Home extends LiteElement { @@ -35,6 +36,8 @@ export class Home extends LiteElement { @state() private isSubmittingNewOrg = false; + private validateOrgNameMax = maxLengthValidator(50); + connectedCallback() { if (this.authState) { super.connectedCallback(); @@ -190,11 +193,14 @@ export class Home extends LiteElement { >
diff --git a/frontend/src/pages/org/crawl-config-editor.ts b/frontend/src/pages/org/crawl-config-editor.ts index 69fb378f..723d09a3 100644 --- a/frontend/src/pages/org/crawl-config-editor.ts +++ b/frontend/src/pages/org/crawl-config-editor.ts @@ -233,6 +233,8 @@ export class CrawlConfigEditor extends LiteElement { threshold: 0.2, // stricter; default is 0.6 }); + private validateNameMax = maxLengthValidator(50); + private get formHasError() { return ( !this.hasRequiredFields() || @@ -1437,10 +1439,11 @@ https://archiveweb.page/images/${"logo.svg"}`} }; private renderJobMetadata() { - const { helpText, validate } = maxLengthValidator(50); + const { helpText, validate } = this.validateNameMax; return html` ${this.renderFormCol(html` `)} diff --git a/frontend/src/pages/org/settings.ts b/frontend/src/pages/org/settings.ts index 63bdb835..04fda573 100644 --- a/frontend/src/pages/org/settings.ts +++ b/frontend/src/pages/org/settings.ts @@ -10,6 +10,7 @@ import { isAdmin, isCrawler, AccessCode } from "../../utils/orgs"; import type { OrgData } from "../../utils/orgs"; import type { CurrentUser } from "../../types/user"; import type { APIPaginatedList } from "../../types/api"; +import { maxLengthValidator } from "../../utils/form"; type Tab = "information" | "members"; type User = { @@ -90,6 +91,8 @@ export class OrgSettings extends LiteElement { }; } + private validateOrgNameMax = maxLengthValidator(50); + async willUpdate(changedProperties: Map) { if (changedProperties.has("isAddingMember") && this.isAddingMember) { this.isAddMemberFormVisible = true; @@ -162,29 +165,27 @@ export class OrgSettings extends LiteElement { private renderInformation() { return html`
- -
-
- -
-
- ${msg("Save Changes")} -
-
+ + + ${msg("Save Changes")}
`; } diff --git a/frontend/src/theme.ts b/frontend/src/theme.ts index 2a3aba80..a8241cb2 100644 --- a/frontend/src/theme.ts +++ b/frontend/src/theme.ts @@ -181,6 +181,44 @@ const theme = css` min-width: min-content; } + /* For single-input forms with submit button inline */ + /* Requires form control and button to be direct children */ + .inline-control-input, + .inline-control-input::part(form-control) { + display: contents; + } + + .inline-control-form { + display: grid; + grid-template-areas: + "label ." + "input button" + "help-text ."; + grid-template-columns: 1fr max-content; + column-gap: var(--sl-spacing-small); + } + + .inline-control-input::part(form-control-label) { + grid-area: label; + } + + .inline-control-input::part(form-control-input) { + grid-area: input; + } + + .inline-control-input::part(form-control-help-text) { + grid-area: help-text; + } + + .inline-control-button { + grid-area: button; + } + + /* Inputs with "Max N characters" help text */ + .with-max-help-text { + --help-text-align: right; + } + /* Aesthetically closer to monospaced font: */ .font-monostyle { font-family: var(--font-monostyle-family);