Merge pull request #305 from aviraldg/feature-labs

Add experimental "Labs" section to settings

src/UserSettingsStore.js

@@ -112,4 +112,12 @@ module.exports = {
             append: true,  // We always append for email pushers since we don't want to stop other accounts notifying to the same email address
         });
     },
+
+    isFeatureEnabled: function(feature: string): boolean {
+        return localStorage.getItem(`mx_labs_feature_${feature}`) === 'true';
+    },
+
+    setFeatureEnabled: function(feature: string, enabled: boolean) {
+        localStorage.setItem(`mx_labs_feature_${feature}`, enabled);
+    }
 };

src/components/structures/UserSettings.js

@@ -26,6 +26,17 @@ var GeminiScrollbar = require('react-gemini-scrollbar');
 var Email = require('../../email');
 var AddThreepid = require('../../AddThreepid');
 
+const LABS_FEATURES = [
+    {
+        name: 'Rich Text Editor',
+        id: 'rich_text_editor'
+    },
+    {
+        name: 'End-to-End Encryption',
+        id: 'e2e_encryption'
+    }
+];
+
 module.exports = React.createClass({
     displayName: 'UserSettings',
 
@@ -357,6 +368,30 @@ module.exports = React.createClass({
             </div>);
         }
 
+        this._renderLabs = function () {
+            let features = LABS_FEATURES.map(feature => (
+                <div key={feature.id}>
+                    <input
+                           type="checkbox"
+                           id={feature.id}
+                           name={feature.id}
+                           defaultChecked={UserSettingsStore.isFeatureEnabled(feature.id)}
+                           onChange={e => UserSettingsStore.setFeatureEnabled(feature.id, e.target.checked)} />
+                    <label htmlFor={feature.id}>{feature.name}</label>
+                </div>
+            ));
+            return (
+                <div>
+                    <h3>Labs</h3>
+
+                    <div className="mx_UserSettings_section">
+                        <p>These are experimental features that may break in unexpected ways. Use with caution.</p>
+                        {features}
+                    </div>
+                </div>
+            )
+        };
+
         return (
             <div className="mx_UserSettings">
                 <SimpleRoomHeader title="Settings" onCancelClick={ this.props.onClose }/>
@@ -411,6 +446,8 @@ module.exports = React.createClass({
 
                 {this._renderDeviceInfo()}
 
+                {this._renderLabs()}
+
                 <h3>Advanced</h3>
 
                 <div className="mx_UserSettings_section">