Add radio button for setting group is_joinable

which dictates whether the group can be joined without invitation.

src/components/structures/GroupView.js

@@ -545,6 +545,9 @@ export default React.createClass({
         this.setState({
             editing: true,
             profileForm: Object.assign({}, this.state.summary.profile),
+            joinableForm: {
+                isJoinable: this.state.summary.profile.is_joinable,
+            },
         });
         dis.dispatch({
             action: 'panel_disable',
@@ -607,11 +610,15 @@ export default React.createClass({
         }).done();
     },
 
+    _onJoinableChange: function(ev) {
+        this.setState({
+            joinableForm: { isJoinable: ev.target.value === "true" },
+        });
+    },
+
     _onSaveClick: function() {
         this.setState({saving: true});
-        const savePromise = this.state.isUserPrivileged ?
+        const savePromise = this.state.isUserPrivileged ? this._saveGroup() : Promise.resolve();
-            this._matrixClient.setGroupProfile(this.props.groupId, this.state.profileForm) :
-            Promise.resolve();
         savePromise.then((result) => {
             this.setState({
                 saving: false,
@@ -642,6 +649,11 @@ export default React.createClass({
         }).done();
     },
 
+    _saveGroup: async function() {
+        await this._matrixClient.setGroupProfile(this.props.groupId, this.state.profileForm);
+        await this._matrixClient.setGroupJoinable(this.props.groupId, this.state.joinableForm.isJoinable);
+    },
+
     _onAcceptInviteClick: function() {
         this.setState({membershipBusy: true});
         this._groupStore.acceptGroupInvite().then(() => {
@@ -715,6 +727,7 @@ export default React.createClass({
         return <div className={groupSettingsSectionClasses}>
             { header }
             { changeDelayWarning }
+            { this._getJoinableNode() }
             { this._getLongDescriptionNode() }
             { this._getRoomsNode() }
         </div>;
@@ -925,6 +938,41 @@ export default React.createClass({
         return null;
     },
 
+    _getJoinableNode: function() {
+        return this.state.editing ? <div>
+            <h3>
+                { _t('Who can join this community?') }
+                { this.state.groupJoinableLoading ?
+                    <InlineSpinner /> : <div />
+                }
+            </h3>
+            <div>
+                <label>
+                    <input type="radio"
+                        value="false"
+                        checked={!this.state.joinableForm.isJoinable}
+                        onClick={this._onJoinableChange}
+                    />
+                    <div className="mx_GroupView_label_text">
+                        { _t('Only people who have been invited') }
+                    </div>
+                </label>
+            </div>
+            <div>
+                <label>
+                    <input type="radio"
+                        value="true"
+                        checked={this.state.joinableForm.isJoinable}
+                        onClick={this._onJoinableChange}
+                    />
+                    <div className="mx_GroupView_label_text">
+                        { _t('Everyone') }
+                    </div>
+                </label>
+            </div>
+        </div> : null;
+    },
+
     _getLongDescriptionNode: function() {
         const summary = this.state.summary;
         let description = null;

src/i18n/strings/en_EN.json

@@ -776,6 +776,8 @@
     "%(inviter)s has invited you to join this community": "%(inviter)s has invited you to join this community",
     "You are an administrator of this community": "You are an administrator of this community",
     "You are a member of this community": "You are a member of this community",
+    "Who can join this community?": "Who can join this community?",
+    "Everyone": "Everyone",
     "Your community hasn't got a Long Description, a HTML page to show to community members.<br />Click here to open settings and give it one!": "Your community hasn't got a Long Description, a HTML page to show to community members.<br />Click here to open settings and give it one!",
     "Long Description (HTML)": "Long Description (HTML)",
     "Description": "Description",