8c4e481bd3
Directs user that doesn't belong to any orgs to account settings page, with banner. Also contains some minor out-of-scope changes: - Refactors `isAdmin` key to `isSuperAdmin` for more legibility on whether current user is superadmin or regular user without orgs - Adds "cancel" button to change password form
68 lines
1.8 KiB
TypeScript
68 lines
1.8 KiB
TypeScript
import { msg, str } from "@lit/localize";
|
|
import type { SlInput, SlTextarea } from "@shoelace-style/shoelace";
|
|
|
|
import { getLocale } from "./localization";
|
|
|
|
// TODO listen for localize changes and update
|
|
const numberFormatter = new Intl.NumberFormat(getLocale());
|
|
|
|
export type MaxLengthValidator = {
|
|
helpText: string;
|
|
validate: (e: CustomEvent) => void;
|
|
};
|
|
|
|
export function getHelpText(maxLength: number, currentLength: number) {
|
|
const helpText = msg(
|
|
str`Maximum ${numberFormatter.format(maxLength)} characters`,
|
|
);
|
|
|
|
if (currentLength > maxLength) {
|
|
const overMax = currentLength - maxLength;
|
|
return overMax === 1
|
|
? msg(str`${numberFormatter.format(overMax)} character over limit`)
|
|
: msg(str`${numberFormatter.format(overMax)} characters over limit`);
|
|
}
|
|
|
|
return helpText;
|
|
}
|
|
|
|
/**
|
|
* Validate field max length and set custom message in Shoelace inputs.
|
|
* Usage:
|
|
* ```
|
|
* const { helpText, validate } = maxLengthValidator(10)
|
|
*
|
|
* <sl-input
|
|
* help-text=${helpText}
|
|
* @sl-input=${validate}
|
|
* ></sl-input>
|
|
* ```
|
|
*/
|
|
export function maxLengthValidator(maxLength: number): MaxLengthValidator {
|
|
const validityHelpText = msg(str`Maximum ${maxLength} characters`);
|
|
let origHelpText: null | string = null;
|
|
|
|
const validate = (e: CustomEvent) => {
|
|
const el = e.target as SlTextarea | SlInput;
|
|
|
|
if (origHelpText === null && el.helpText) {
|
|
origHelpText = el.helpText;
|
|
}
|
|
|
|
const validityText = getHelpText(maxLength, el.value.length);
|
|
const isInvalid = el.value.length > maxLength;
|
|
|
|
el.setCustomValidity(
|
|
isInvalid
|
|
? msg(
|
|
str`Please shorten this text to ${maxLength} or fewer characters.`,
|
|
)
|
|
: "",
|
|
);
|
|
|
|
el.helpText = isInvalid ? validityText : origHelpText || validityHelpText;
|
|
};
|
|
|
|
return { helpText: validityHelpText, validate };
|
|
}
|