mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-28 12:28:50 +03:00
Code Issues Projects Releases Packages Wiki Activity

Improve taken username warning in registration for when request fails (#7621)

Browse source
This commit is contained in:
Michael Telatynski 2022-01-25 10:45:41 +00:00 committed by GitHub
parent 68024c156a
commit 1d02e61655
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 29 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
src/components/views/auth/RegistrationForm.tsx
View file

@ -44,6 +44,13 @@ enum RegistrationField {
PasswordConfirm = "field_password_confirm",
}
enum UsernameAvailableStatus {
Unknown,
Available,
Unavailable,
Error,
}
export const PASSWORD_MIN_SCORE = 3; // safely unguessable: moderate protection from offline slow-hash scenario.
interface IProps {
@ -348,13 +355,25 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
return result;
};
private validateUsernameRules = withValidation({
private validateUsernameRules = withValidation<this, UsernameAvailableStatus>({
description: (_, results) => {
// omit the description if the only failing result is the `available` one as it makes no sense for it.
if (results.every(({ key, valid }) => key === "available" || valid)) return;
return _t("Use lowercase letters, numbers, dashes and underscores only");
},
hideDescriptionIfValid: true,
async deriveData(this: RegistrationForm, { value }) {
if (!value) {
return UsernameAvailableStatus.Unknown;
}
try {
const available = await this.props.matrixClient.isUsernameAvailable(value);
return available ? UsernameAvailableStatus.Available : UsernameAvailableStatus.Unavailable;
} catch (err) {
return UsernameAvailableStatus.Error;
}
},
rules: [
{
key: "required",
@ -369,19 +388,16 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
{
key: "available",
final: true,
test: async ({ value }) => {
test: async ({ value }, usernameAvailable) => {
if (!value) {
return true;
}
try {
await this.props.matrixClient.isUsernameAvailable(value);
return true;
} catch (err) {
return false;
}
return usernameAvailable === UsernameAvailableStatus.Available;
},
invalid: () => _t("Someone already has that username. Try another or if it is you, sign in below."),
invalid: (usernameAvailable) => usernameAvailable === UsernameAvailableStatus.Error
? _t("Unable to check if username has been taken. Try again later.")
: _t("Someone already has that username. Try another or if it is you, sign in below."),
},
],
});

6
src/components/views/elements/Validation.tsx
View file

@ -92,7 +92,7 @@ export default function withValidation<T = undefined, D = void>({
}
const data = { value, allowEmpty };
const derivedData = deriveData ? await deriveData(data) : undefined;
const derivedData: D | undefined = deriveData ? await deriveData.call(this, data) : undefined;
const results: IResult[] = [];
let valid = true;
@ -106,13 +106,13 @@ export default function withValidation<T = undefined, D = void>({
continue;
}
if (rule.skip && rule.skip.call(this, data, derivedData)) {
if (rule.skip?.call(this, data, derivedData)) {
continue;
}
// We're setting `this` to whichever component holds the validation
// function. That allows rules to access the state of the component.
const ruleValid = await rule.test.call(this, data, derivedData);
const ruleValid: boolean = await rule.test.call(this, data, derivedData);
valid = valid && ruleValid;
if (ruleValid && rule.valid) {
// If the rule's result is valid and has text to show for

1
src/i18n/strings/en_EN.json
View file

@ -2939,6 +2939,7 @@
"Other users can invite you to rooms using your contact details": "Other users can invite you to rooms using your contact details",
"Enter phone number (required on this homeserver)": "Enter phone number (required on this homeserver)",
"Use lowercase letters, numbers, dashes and underscores only": "Use lowercase letters, numbers, dashes and underscores only",
"Unable to check if username has been taken. Try again later.": "Unable to check if username has been taken. Try again later.",
"Someone already has that username. Try another or if it is you, sign in below.": "Someone already has that username. Try another or if it is you, sign in below.",
"Phone (optional)": "Phone (optional)",
"Register": "Register",