Early support for alias modification in room settings

src/components/views/room_settings/AliasSettings.js

@@ -22,6 +22,7 @@ const ObjectUtils = require("../../../ObjectUtils");
 const MatrixClientPeg = require('../../../MatrixClientPeg');
 const sdk = require("../../../index");
 import { _t } from '../../../languageHandler';
+import Field from "../elements/Field";
 const Modal = require("../../../Modal");
 
 module.exports = React.createClass({
@@ -222,7 +223,8 @@ module.exports = React.createClass({
             let found = false;
             const canonicalValue = this.state.canonicalAlias || "";
             canonical_alias_section = (
-                <select onChange={this.onCanonicalAliasChange} value={canonicalValue}>
+                <Field onChange={this.onCanonicalAliasChange} value={canonicalValue}
+                       element='select' id='canonicalAlias' label={_t('Main address')}>
                     <option value="" key="unset">{ _t('not specified') }</option>
                     {
                         Object.keys(self.state.domainToAliases).map((domain, i) => {
@@ -242,7 +244,7 @@ module.exports = React.createClass({
                             { this.state.canonicalAlias }
                         </option>
                     }
-                </select>
+                </Field>
             );
         } else {
             canonical_alias_section = (
@@ -278,10 +280,7 @@ module.exports = React.createClass({
 
         return (
             <div>
-                <h3>{ _t('Addresses') }</h3>
+                {canonical_alias_section}
-                <div className="mx_RoomSettings_aliasLabel">
-                    { _t('The main address for this room is') }: { canonical_alias_section }
-                </div>
                 <EditableItemList
                     className={"mx_RoomSettings_localAliases"}
                     items={this.state.domainToAliases[localDomain] || []}

src/components/views/settings/tabs/GeneralRoomSettingsTab.js

@@ -18,19 +18,48 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {_t} from "../../../../languageHandler";
 import RoomProfileSettings from "../RoomProfileSettings";
+import MatrixClientPeg from "../../../../MatrixClientPeg";
+import sdk from "../../../../index";
+import AccessibleButton from "../../elements/AccessibleButton";
 
 export default class GeneralRoomSettingsTab extends React.Component {
     static propTypes = {
         roomId: PropTypes.string.isRequired,
     };
 
+    _saveAliases = (e) => {
+        // TODO: Live modification of aliases?
+        if (!this.refs.aliasSettings) return;
+        this.refs.aliasSettings.saveSettings();
+    };
+
     render() {
+        const AliasSettings = sdk.getComponent("room_settings.AliasSettings");
+
+        const client = MatrixClientPeg.get();
+        const room = client.getRoom(this.props.roomId);
+
+        const canSetAliases = true; // Previously, we arbitrarily only allowed admins to do this
+        const canSetCanonical = room.currentState.mayClientSendStateEvent("m.room.canonical_alias", client);
+        const canonicalAliasEv = room.currentState.getStateEvents("m.room.canonical_alias", '');
+        const aliasEvents = room.currentState.getStateEvents("m.room.aliases");
+
         return (
             <div className="mx_SettingsTab mx_GeneralRoomSettingsTab">
                 <div className="mx_SettingsTab_heading">{_t("General")}</div>
                 <div className='mx_SettingsTab_section mx_GeneralRoomSettingsTab_profileSection'>
                     <RoomProfileSettings roomId={this.props.roomId} />
                 </div>
+
+                <span className='mx_SettingsTab_subheading'>{_t("Room Addresses")}</span>
+                <div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
+                    <AliasSettings ref="aliasSettings" roomId={this.props.roomId}
+                                   canSetCanonicalAlias={canSetCanonical} canSetAliases={canSetAliases}
+                                   canonicalAliasEvent={canonicalAliasEv} aliasEvents={aliasEvents} />
+                    <AccessibleButton onClick={this._saveAliases} kind='primary'>
+                        {_t("Save")}
+                    </AccessibleButton>
+                </div>
             </div>
         );
     }

src/i18n/strings/en_EN.json

@@ -436,6 +436,7 @@
     "Room Name": "Room Name",
     "Room Topic": "Room Topic",
     "General": "General",
+    "Room Addresses": "Room Addresses",
     "Failed to change password. Is your password correct?": "Failed to change password. Is your password correct?",
     "Success": "Success",
     "Your password was successfully changed. You will not receive push notifications on other devices until you log back in to them": "Your password was successfully changed. You will not receive push notifications on other devices until you log back in to them",
@@ -765,11 +766,10 @@
     "'%(alias)s' is not a valid format for an alias": "'%(alias)s' is not a valid format for an alias",
     "Invalid address format": "Invalid address format",
     "'%(alias)s' is not a valid format for an address": "'%(alias)s' is not a valid format for an address",
+    "Main address": "Main address",
     "not specified": "not specified",
     "not set": "not set",
     "Remote addresses for this room:": "Remote addresses for this room:",
-    "Addresses": "Addresses",
-    "The main address for this room is": "The main address for this room is",
     "Local addresses for this room:": "Local addresses for this room:",
     "This room has no local addresses": "This room has no local addresses",
     "New address (e.g. #foo:%(localDomain)s)": "New address (e.g. #foo:%(localDomain)s)",