13696af194
* Split translations between EW and shared components Uses update module API with global TranslationKey type that can be overridden. WIP. * Removed the wrong script (for now) * Add the type files * Add shared components i18n file * More i18n strings * Add i18n check for shared conmponents * Needs a different name * rerun i18n for merge from develop, fix test * Move translated strings to shared components file NB. there are lots of removed strings for a few languages where we seem to have hit a localazy bug or something where the key/value for plurals got switched, making the translations invalid. They've been missing for a while so I'm removing them rather than trying to restore them, * Add shared components files to localazy * Merge element web & shared component translations for the built app * Use right translations for shared component tests and fix missign en_EN strings * Pull shared components translations too * Fix/disable warnings * We can now remove the build:res call ...right? (right?) * Remove webpack import for languages index ..and just load it using a relative path which we do for the individual language files and also did anyway for the index because even in non-test it was an object, not a string, so we always usesd the 'test' code path. * Make the storybook language selector work ...without referring to the parent app's files * Revert unnecessary yarn lock change * Typo Co-authored-by: Michael Telatynski <7t3chguy@gmail.com> * Add comment on why we use merge * Fix localazy download config to actually put the translations in the right place * Better typescript syntax Co-authored-by: Michael Telatynski <7t3chguy@gmail.com> * Watch both translations files --------- Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
88 lines
2.8 KiB
TypeScript
88 lines
2.8 KiB
TypeScript
/*
|
|
Copyright 2024 New Vector Ltd.
|
|
Copyright 2021 The Matrix.org Foundation C.I.C.
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
|
Please see LICENSE files in the repository root for full details.
|
|
*/
|
|
|
|
import React, { type ComponentProps, PureComponent, type Ref } from "react";
|
|
|
|
import Field, { type IInputProps } from "../elements/Field";
|
|
import { _t, _td } from "../../../languageHandler";
|
|
import withValidation, { type IFieldState, type IValidationResult } from "../elements/Validation";
|
|
import * as Email from "../../../email";
|
|
|
|
interface IProps extends Omit<IInputProps, "onValidate" | "element"> {
|
|
id?: string;
|
|
fieldRef?: Ref<Field>;
|
|
value: string;
|
|
autoFocus?: boolean;
|
|
|
|
label: TranslationKey;
|
|
labelRequired: TranslationKey;
|
|
labelInvalid: TranslationKey;
|
|
tooltipAlignment?: ComponentProps<typeof Field>["tooltipAlignment"];
|
|
|
|
// When present, completely overrides the default validation rules.
|
|
validationRules?: (fieldState: IFieldState) => Promise<IValidationResult>;
|
|
|
|
onChange(ev: React.FormEvent<HTMLElement>): void;
|
|
onValidate?(result: IValidationResult): void;
|
|
}
|
|
|
|
class EmailField extends PureComponent<IProps> {
|
|
public static defaultProps = {
|
|
label: _td("auth|email_field_label"),
|
|
labelRequired: _td("auth|email_field_label_required"),
|
|
labelInvalid: _td("auth|email_field_label_invalid"),
|
|
};
|
|
|
|
public readonly validate = withValidation({
|
|
rules: [
|
|
{
|
|
key: "required",
|
|
test: ({ value, allowEmpty }) => allowEmpty || !!value,
|
|
invalid: () => _t(this.props.labelRequired),
|
|
},
|
|
{
|
|
key: "email",
|
|
test: ({ value }) => !value || Email.looksValid(value),
|
|
invalid: () => _t(this.props.labelInvalid),
|
|
},
|
|
],
|
|
});
|
|
|
|
public onValidate = async (fieldState: IFieldState): Promise<IValidationResult> => {
|
|
let validate = this.validate;
|
|
if (this.props.validationRules) {
|
|
validate = this.props.validationRules;
|
|
}
|
|
|
|
const result = await validate(fieldState);
|
|
if (this.props.onValidate) {
|
|
this.props.onValidate(result);
|
|
}
|
|
|
|
return result;
|
|
};
|
|
|
|
public render(): React.ReactNode {
|
|
return (
|
|
<Field
|
|
id={this.props.id}
|
|
ref={this.props.fieldRef}
|
|
type="text"
|
|
label={_t(this.props.label)}
|
|
value={this.props.value}
|
|
autoFocus={this.props.autoFocus}
|
|
onChange={this.props.onChange}
|
|
onValidate={this.onValidate}
|
|
tooltipAlignment={this.props.tooltipAlignment}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default EmailField;
|