Do pre-submit availability check on username during registration

src/components/structures/auth/Registration.tsx

@@ -507,6 +507,7 @@ export default class Registration extends React.Component<IProps, IState> {
                     flows={this.state.flows}
                     serverConfig={this.props.serverConfig}
                     canSubmit={!this.state.serverErrorIsFatal}
+                    matrixClient={this.state.matrixClient}
                 />
             </React.Fragment>;
         }

src/components/views/auth/RegistrationForm.tsx

@@ -16,6 +16,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import { MatrixClient } from 'matrix-js-sdk/src/client';
 
 import * as Email from '../../../email';
 import { looksValid as phoneNumberLooksValid } from '../../../phonenumber';
@@ -56,6 +57,7 @@ interface IProps {
     }[];
     serverConfig: ValidatedServerConfig;
     canSubmit?: boolean;
+    matrixClient: MatrixClient;
 
     onRegisterClick(params: {
         username: string;
@@ -367,7 +369,11 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
     };
 
     private validateUsernameRules = withValidation({
-        description: () => _t("Use lowercase letters, numbers, dashes and underscores only"),
+        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,
         rules: [
             {
@@ -380,6 +386,24 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
                 test: ({ value }) => !value || SAFE_LOCALPART_REGEX.test(value),
                 invalid: () => _t("Some characters not allowed"),
             },
+            {
+                key: "available",
+                final: true,
+                test: async ({ value }) => {
+                    if (!value) {
+                        return true;
+                    }
+
+                    try {
+                        await this.props.matrixClient.isUsernameAvailable(value);
+                        return true;
+                    } catch (err) {
+                        return false;
+                    }
+                },
+                invalid: () => _t("That username already exists, please try another. " +
+                    "If it belongs to you then click 'Sign in here' below"),
+            },
         ],
     });
 

src/components/views/elements/Validation.tsx

@@ -21,6 +21,12 @@ import classNames from "classnames";
 
 type Data = Pick<IFieldState, "value" | "allowEmpty">;
 
+interface IResult {
+    key: string;
+    valid: boolean;
+    text: string;
+}
+
 interface IRule<T, D = void> {
     key: string;
     final?: boolean;
@@ -32,7 +38,7 @@ interface IRule<T, D = void> {
 
 interface IArgs<T, D = void> {
     rules: IRule<T, D>[];
-    description?(this: T, derivedData: D): React.ReactChild;
+    description?(this: T, derivedData: D, results: IResult[]): React.ReactChild;
     hideDescriptionIfValid?: boolean;
     deriveData?(data: Data): Promise<D>;
 }
@@ -88,7 +94,7 @@ export default function withValidation<T = undefined, D = void>({
         const data = { value, allowEmpty };
         const derivedData = deriveData ? await deriveData(data) : undefined;
 
-        const results = [];
+        const results: IResult[] = [];
         let valid = true;
         if (rules && rules.length) {
             for (const rule of rules) {
@@ -164,8 +170,8 @@ export default function withValidation<T = undefined, D = void>({
         if (description && (details || !hideDescriptionIfValid)) {
             // We're setting `this` to whichever component holds the validation
             // function. That allows rules to access the state of the component.
-            const content = description.call(this, derivedData);
-            summary = <div className="mx_Validation_description">{ content }</div>;
+            const content = description.call(this, derivedData, results);
+            summary = content ? <div className="mx_Validation_description">{ content }</div> : undefined;
         }
 
         let feedback;

src/i18n/strings/en_EN.json

@@ -2768,6 +2768,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",
+    "That username already exists, please try another. If it belongs to you then click 'Sign in here' below": "That username already exists, please try another. If it belongs to you then click 'Sign in here' below",
     "Phone (optional)": "Phone (optional)",
     "Register": "Register",
     "Add an email to be able to reset your password.": "Add an email to be able to reset your password.",