Delegate all room alias validation to the RoomAliasField validator

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/components/views/room_settings/AliasSettings.js

@@ -17,7 +17,7 @@ limitations under the License.
 
 import EditableItemList from "../elements/EditableItemList";
 
-const React = require('react');
+import React, {createRef} from 'react';
 import PropTypes from 'prop-types';
 const MatrixClientPeg = require('../../../MatrixClientPeg');
 const sdk = require("../../../index");
@@ -28,22 +28,41 @@ import AccessibleButton from "../elements/AccessibleButton";
 const Modal = require("../../../Modal");
 
 class EditableAliasesList extends EditableItemList {
+    constructor(props) {
+        super(props);
+
+        this._aliasField = createRef();
+    }
+
+    _onAliasAdded = async () => {
+        await this._aliasField.current.validate({ allowEmpty: false });
+
+        if (this._aliasField.current.isValid) {
+            if (this.props.onItemAdded) this.props.onItemAdded(this.props.newItem);
+            return;
+        }
+
+        this._aliasField.current.focus();
+        this._aliasField.current.validate({ allowEmpty: false, focused: true });
+    };
+
     _renderNewItemField() {
         const RoomAliasField = sdk.getComponent('views.elements.RoomAliasField');
         const onChange = (alias) => this._onNewItemChanged({target: {value: alias}});
         return (
             <form
-                onSubmit={this._onItemAdded}
+                onSubmit={this._onAliasAdded}
                 autoComplete="off"
                 noValidate={true}
                 className="mx_EditableItemList_newItem"
             >
                 <RoomAliasField
                     id={`mx_EditableItemList_new_${this.props.id}`}
+                    ref={this._aliasField}
                     onChange={onChange}
                     value={this.props.newItem || ""}
                     domain={this.props.domain} />
-                <AccessibleButton onClick={this._onItemAdded} kind="primary">
+                <AccessibleButton onClick={this._onAliasAdded} kind="primary">
                     { _t("Add") }
                 </AccessibleButton>
             </form>
@@ -99,11 +118,6 @@ export default class AliasSettings extends React.Component {
         return dict;
     }
 
-    isAliasValid(alias) {
-        // XXX: FIXME https://github.com/matrix-org/matrix-doc/issues/668
-        return (alias.match(/^#([^/:,]+?):(.+)$/) && encodeURI(alias) === alias);
-    }
-
     changeCanonicalAlias(alias) {
         if (!this.props.canSetCanonicalAlias) return;
 
@@ -139,7 +153,7 @@ export default class AliasSettings extends React.Component {
 
         const localDomain = MatrixClientPeg.get().getDomain();
         if (!alias.includes(':')) alias += ':' + localDomain;
-        if (this.isAliasValid(alias) && alias.endsWith(localDomain)) {
+
         MatrixClientPeg.get().createAlias(alias, this.props.roomId).then(() => {
             const localAliases = this.state.domainToAliases[localDomain] || [];
             const domainAliases = Object.assign({}, this.state.domainToAliases);
@@ -164,13 +178,6 @@ export default class AliasSettings extends React.Component {
                 ),
             });
         });
-        } else {
-            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-            Modal.createTrackedDialog('Invalid alias format', '', ErrorDialog, {
-                title: _t('Invalid alias format'),
-                description: _t('\'%(alias)s\' is not a valid format for an alias', { alias: alias }),
-            });
-        }
     };
 
     onLocalAliasDeleted = (index) => {