Fix room alias address isn't checked for validity before being shown as added

src/components/views/elements/RoomAliasField.tsx

@@ -18,12 +18,12 @@ import React, { createRef, KeyboardEventHandler } from "react";
 
 import { _t } from '../../../languageHandler';
 import withValidation from './Validation';
-import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import Field, { IValidateOpts } from "./Field";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
 
 interface IProps {
-    domain: string;
+    domain?: string;
     value: string;
     label?: string;
     placeholder?: string;
@@ -39,6 +39,9 @@ interface IState {
 // Controlled form component wrapping Field for inputting a room alias scoped to a given domain
 @replaceableComponent("views.elements.RoomAliasField")
 export default class RoomAliasField extends React.PureComponent<IProps, IState> {
+    static contextType = MatrixClientContext;
+    public context!: React.ContextType<typeof MatrixClientContext>;
+
     private fieldRef = createRef<Field>();
 
     constructor(props, context) {
@@ -50,25 +53,38 @@ export default class RoomAliasField extends React.PureComponent<IProps, IState>
     }
 
     private asFullAlias(localpart: string): string {
-        return `#${localpart}:${this.props.domain}`;
+        const hashAlias = `#${ localpart }`;
+        if (this.props.domain) {
+            return `${hashAlias}:${this.props.domain}`;
+        }
+        return hashAlias;
+    }
+
+    private get domainProps() {
+        const { domain } = this.props;
+        const prefix = <span>#</span>;
+        const postfix = domain ? (<span title={`:${domain}`}>{ `:${domain}` }</span>) : <span />;
+        const maxlength = domain ? 255 - domain.length - 2 : 255 - 1;   // 2 for # and :
+        const value = domain ?
+            this.props.value.substring(1, this.props.value.length - this.props.domain.length - 1) :
+            this.props.value.substring(1);
+
+        return { prefix, postfix, value, maxlength };
     }
 
     render() {
-        const poundSign = (<span>#</span>);
-        const aliasPostfix = ":" + this.props.domain;
-        const domain = (<span title={aliasPostfix}>{ aliasPostfix }</span>);
-        const maxlength = 255 - this.props.domain.length - 2;   // 2 for # and :
+        const { prefix, postfix, value, maxlength } = this.domainProps;
         return (
             <Field
                 label={this.props.label || _t("Room address")}
                 className="mx_RoomAliasField"
-                prefixComponent={poundSign}
-                postfixComponent={domain}
+                prefixComponent={prefix}
+                postfixComponent={postfix}
                 ref={this.fieldRef}
                 onValidate={this.onValidate}
                 placeholder={this.props.placeholder || _t("e.g. my-room")}
                 onChange={this.onChange}
-                value={this.props.value.substring(1, this.props.value.length - this.props.domain.length - 1)}
+                value={value}
                 maxLength={maxlength}
                 disabled={this.props.disabled}
                 autoComplete="off"
@@ -91,16 +107,57 @@ export default class RoomAliasField extends React.PureComponent<IProps, IState>
 
     private validationRules = withValidation({
         rules: [
+            { key: "hasSingleDomain",
+                test: async ({ value }) => {
+                    if (!value) {
+                        return true;
+                    }
+                    // Ignore if we have passed domain
+                    if (this.props.domain) {
+                        return true;
+                    }
+                    const split = value.split(':');
+                    if (split.length < 2) {
+                        return false;
+                    }
+                    return true;
+                },
+                invalid: () => _t("Missing domain separator e.g. (:domain.org)"),
+            },
+            {
+                key: "hasMultipleDomains",
+                test: async ({ value }) => {
+                    if (!value) {
+                        return true;
+                    }
+                    // Ignore if we have passed domain
+                    if (this.props.domain) {
+                        return true;
+                    }
+                    const split = value.split(':');
+                    if (split.length > 2) {
+                        return false;
+                    }
+                    return true;
+                },
+                invalid: () => _t("Multiple domain separators (:) provided, provide an alias with a single domain."),
+            },
             {
                 key: "safeLocalpart",
                 test: async ({ value }) => {
                     if (!value) {
                         return true;
                     }
-                    const fullAlias = this.asFullAlias(value);
-                    // XXX: FIXME https://github.com/matrix-org/matrix-doc/issues/668
-                    return !value.includes("#") && !value.includes(":") && !value.includes(",") &&
-                        encodeURI(fullAlias) === fullAlias;
+                    if (!this.props.domain) {
+                        return true;
+                    } else {
+                        const fullAlias = this.asFullAlias(value);
+                        // XXX: FIXME https://github.com/matrix-org/matrix-doc/issues/668
+                        return !value.includes("#") &&
+                        this.props.domain ? !value.includes(":") : true &&
+                        !value.includes(",") &&
+                            encodeURI(fullAlias) === fullAlias;
+                    }
                 },
                 invalid: () => _t("Some characters not allowed"),
             }, {
@@ -114,20 +171,23 @@ export default class RoomAliasField extends React.PureComponent<IProps, IState>
                     if (!value) {
                         return true;
                     }
-                    const client = MatrixClientPeg.get();
+                    const client = this.context;
                     try {
                         await client.getRoomIdForAlias(this.asFullAlias(value));
                         // we got a room id, so the alias is taken
                         return false;
                     } catch (err) {
+                        console.log(err);
                         // any server error code will do,
                         // either it M_NOT_FOUND or the alias is invalid somehow,
                         // in which case we don't want to show the invalid message
                         return !!err.errcode;
                     }
                 },
                 valid: () => _t("This address is available to use"),
-                invalid: () => _t("This address is already in use"),
+                invalid: () => this.props.domain ?
+                    _t("This address is already in use") :
+                    _t("This address had invalid server or is already in use"),
             },
         ],
     });

src/components/views/room_settings/AliasSettings.tsx

@@ -51,11 +51,6 @@ class EditableAliasesList extends EditableItemList<IEditableAliasesListProps> {
     };
 
     protected renderNewItemField() {
-        // if we don't need the RoomAliasField,
-        // we don't need to overriden version of renderNewItemField
-        if (!this.props.domain) {
-            return super.renderNewItemField();
-        }
         const onChange = (alias) => this.onNewItemChanged({ target: { value: alias } });
         return (
             <form