Add a new component to back various settings

Signed-off-by: Travis Ralston <travpc@gmail.com>

src/components/structures/UserSettings.js

@@ -78,8 +78,6 @@ const SIMPLE_SETTINGS = [
     { id: "VideoView.flipVideoHorizontally" },
 ];
 
-// TODO: {Travis} Consider making generic setting handler to support `label` and `fn` optionally (backed by SettingsStore)
-
 const ANALYTICS_SETTINGS_LABELS = [
     {
         id: 'analyticsOptOut',
@@ -682,54 +680,31 @@ module.exports = React.createClass({
          UserSettingsStore.setUrlPreviewsDisabled(e.target.checked);
     },
 
-    // TODO: {Travis} Make this a component (<CheckboxSetting name='' [label]='' [fn]=() level=''>)
     _renderSyncedSetting: function(setting) {
-        // TODO: this ought to be a separate component so that we don't need
-        // to rebind the onChange each time we render
-
-        const onChange = (e) => {
-            SettingsStore.setValue(setting.id, null, "account", e.target.checked);
-            if (setting.fn) setting.fn(e.target.checked);
-        };
-
-        return <div className="mx_UserSettings_toggle" key={setting.id}>
-            <input id={setting.id}
-                   type="checkbox"
-                   defaultChecked={SettingsStore.getValueAt("account", setting.id)}
-                   onChange={onChange}
-            />
-            <label htmlFor={setting.id}>
-                { setting.label ? _t(setting.label) : SettingsStore.getDisplayName(setting.id) }
-            </label>
-        </div>;
+        const SettingsCheckbox = sdk.getComponent("elements.SettingsCheckbox");
+        return (
+            <div className="mx_UserSettings_toggle" key={setting.id}>
+                <SettingsCheckbox name={setting.id}
+                                  label={setting.label}
+                                  level="account"
+                                  onChange={setting.fn} />
+            </div>
+        );
     },
 
-    // TODO: {Travis} Make this a component (<RadioSetting name='' [label]='' [fn]=() level='' group='theme'>)
-    // {Travis} Maybe make that part of CheckboxSetting somehow?
     _renderThemeSelector: function(setting) {
-        // TODO: this ought to be a separate component so that we don't need
-        // to rebind the onChange each time we render
-        const onChange = (e) => {
-            if (e.target.checked) {
-                SettingsStore.setValue("theme", null, "account", setting.value);
-            }
-            dis.dispatch({
-                action: 'set_theme',
-                value: setting.value,
-            });
-        };
-        return <div className="mx_UserSettings_toggle" key={"theme_" + setting.value}>
-            <input id={"theme_" + setting.value}
-                   type="radio"
-                   name="theme"
-                   value={setting.value}
-                   checked={SettingsStore.getValueAt("account", "theme") === setting.value}
-                   onChange={onChange}
-            />
-            <label htmlFor={"theme_" + setting.value}>
-                { _t(setting.label) }
-            </label>
-        </div>;
+        const SettingsCheckbox = sdk.getComponent("elements.SettingsCheckbox");
+        const onChange = (v) => dis.dispatch({action: 'set_theme', value: setting.value});
+        return (
+            <div className="mx_UserSettings_toggle" key={setting.id + '_' + setting.value}>
+                <SettingsCheckbox name="theme"
+                                  label={setting.label}
+                                  level="account"
+                                  onChange={onChange}
+                                  group="theme"
+                                  value={setting.value} />
+            </div>
+        );
     },
 
     _renderCryptoInfo: function() {
@@ -797,25 +772,16 @@ module.exports = React.createClass({
         } else return (<div />);
     },
 
-    // TODO: {Travis} Make this a component (<CheckboxSetting name='' [label]='' [fn]=() level=''>)
     _renderLocalSetting: function(setting) {
-        // TODO: this ought to be a separate component so that we don't need
-        // to rebind the onChange each time we render
-        const onChange = (e) => {
-            SettingsStore.setValue(setting.id, null, "device", e.target.checked);
-            if (setting.fn) setting.fn(e.target.checked);
-        };
-
-        return <div className="mx_UserSettings_toggle" key={setting.id}>
-            <input id={setting.id}
-                   type="checkbox"
-                   defaultChecked={SettingsStore.getValueAt("device", setting.id)}
-                   onChange={onChange}
-            />
-            <label htmlFor={setting.id}>
-                { setting.label ? _t(setting.label) : SettingsStore.getDisplayName(setting.id) }
-            </label>
-        </div>;
+        const SettingsCheckbox = sdk.getComponent("elements.SettingsCheckbox");
+        return (
+            <div className="mx_UserSettings_toggle" key={setting.id}>
+                <SettingsCheckbox name={setting.id}
+                                  label={setting.label}
+                                  level="device"
+                                  onChange={setting.fn} />
+            </div>
+        );
     },
 
     _renderDevicesPanel: function() {

src/components/views/elements/SettingsCheckbox.js

@@ -0,0 +1,80 @@
+/*
+Copyright 2017 Travis Ralston
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import SettingsStore from "../../../settings/SettingsStore";
+import { _t } from '../../../languageHandler';
+
+module.exports = React.createClass({
+    displayName: 'SettingsCheckbox',
+    propTypes: {
+        name: React.PropTypes.string.isRequired,
+        level: React.PropTypes.string.isRequired,
+        roomId: React.PropTypes.string, // for per-room settings
+        label: React.PropTypes.string, // untranslated
+        onChange: React.PropTypes.func,
+
+        // If group is supplied, then this will create a radio button instead.
+        group: React.PropTypes.string,
+        value: React.PropTypes.any, // the value for the radio button
+    },
+
+    onChange: function(e) {
+        if (this.props.group && !e.target.checked) return;
+
+        const newState = this.props.group ? this.props.value : e.target.checked;
+        SettingsStore.setValue(this.props.name, this.props.roomId, this.props.level, newState);
+        if (this.props.onChange) this.props.onChange(newState);
+    },
+
+    render: function() {
+        let val = SettingsStore.getValueAt(this.props.level, this.props.name, this.props.roomId);
+
+        let label = this.props.label;
+        if (!label) label = SettingsStore.getDisplayName(this.props.name);
+        else label = _t(label);
+
+        let id = this.props.name;
+        let checkbox = (
+            <input id={this.props.name}
+                   type="checkbox"
+                   defaultChecked={val}
+                   onChange={this.onChange}
+            />
+        );
+        if (this.props.group) {
+            id = this.props.group + '_' + this.props.name;
+            checkbox = (
+                <input id={id}
+                       type="radio"
+                       name={this.props.group}
+                       value={this.props.value}
+                       checked={val === this.props.value}
+                       onChange={this.onChange}
+                       />
+            );
+        }
+
+        return (
+            <div className="mx_SettingCheckbox">
+                { checkbox }
+                <label htmlFor={id}>
+                    { label }
+                </label>
+            </div>
+        );
+    },
+});

src/settings/SettingsStore.js

@@ -159,7 +159,7 @@ const SETTINGS = {
         default: "light",
     },
     "webRtcForceTURN": {
-        supportedLevels: ['device'],
+        supportedLevels: ['device', 'config'],
         default: false,
         displayName: _td('Disable Peer-to-Peer for 1:1 calls'),
     },
@@ -170,28 +170,29 @@ const SETTINGS = {
         supportedLevels: ['device'],
     },
     "language": {
-        supportedLevels: ['device'],
+        supportedLevels: ['device', 'config'],
         default: "en"
     },
     "analyticsOptOut": {
-        supportedLevels: ['device'],
+        supportedLevels: ['device', 'config'],
         default: false,
         displayName: _td('Opt out of analytics'),
     },
     "autocompleteDelay": {
-        supportedLevels: ['device'],
+        supportedLevels: ['device', 'config'],
         default: 200,
     },
     "blacklistUnverifiedDevicesPerRoom": {
         // TODO: {Travis} Write a migration path to support blacklistUnverifiedDevices
         supportedLevels: ['device'],
         default: {},
+        displayName: _td('Never send encrypted messages to unverified devices from this device'),
     },
     "blacklistUnverifiedDevices": {
         // TODO: {Travis} Write a migration path to support blacklistUnverifiedDevices
         supportedLevels: ['device'],
         default: false,
-        label: _td('Never send encrypted messages to unverified devices from this device'),
+        displayName: _td('Never send encrypted messages to unverified devices from this device'),
     },
 };