message: Delegate all room alias validation to the RoomAliasField validator
diff: @@ -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) => {
  