From ada860f163b66a54c0518cb5a21b547b472b5934 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 8 Apr 2020 10:50:22 +0100
Subject: [PATCH 1/4] Add toggle for e2ee when creating private room in
 x-signing world

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 res/css/views/dialogs/_CreateRoomDialog.scss  |  1 +
 .../views/dialogs/CreateRoomDialog.js         | 20 +++++++++++++++++++
 src/i18n/strings/en_EN.json                   |  2 ++
 3 files changed, 23 insertions(+)

diff --git a/res/css/views/dialogs/_CreateRoomDialog.scss b/res/css/views/dialogs/_CreateRoomDialog.scss
index c542741c30..ac46b8e91a 100644
--- a/res/css/views/dialogs/_CreateRoomDialog.scss
+++ b/res/css/views/dialogs/_CreateRoomDialog.scss
@@ -78,6 +78,7 @@ limitations under the License.
 
     .mx_SettingsFlag {
         display: flex;
+        margin-top: 4px;
     }
 
     .mx_SettingsFlag_label {
diff --git a/src/components/views/dialogs/CreateRoomDialog.js b/src/components/views/dialogs/CreateRoomDialog.js
index 77014db21d..2431a4d32f 100644
--- a/src/components/views/dialogs/CreateRoomDialog.js
+++ b/src/components/views/dialogs/CreateRoomDialog.js
@@ -24,6 +24,7 @@ import withValidation from '../elements/Validation';
 import { _t } from '../../../languageHandler';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import {Key} from "../../../Keyboard";
+import SettingsStore from "../../../settings/SettingsStore";
 
 export default createReactClass({
     displayName: 'CreateRoomDialog',
@@ -35,6 +36,7 @@ export default createReactClass({
         const config = SdkConfig.get();
         return {
             isPublic: false,
+            isEncrypted: true,
             name: "",
             topic: "",
             alias: "",
@@ -62,6 +64,11 @@ export default createReactClass({
         if (this.state.noFederate) {
             createOpts.creation_content = {'m.federate': false};
         }
+
+        if (!this.state.isPublic && SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+            createOpts.encryption = this.state.isEncrypted;
+        }
+
         return opts;
     },
 
@@ -127,6 +134,10 @@ export default createReactClass({
         this.setState({isPublic});
     },
 
+    onEncryptedChange(isEncrypted) {
+        this.setState({isEncrypted});
+    },
+
     onAliasChange(alias) {
         this.setState({alias});
     },
@@ -181,6 +192,14 @@ export default createReactClass({
             privateLabel = (<p>{_t("This room is private, and can only be joined by invitation.")}</p>);
         }
 
+        let e2eeSection;
+        if (!this.state.isPublic && SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+            e2eeSection = <React.Fragment>
+                <LabelledToggleSwitch label={ _t("Enable end-to-end encryption")} onChange={this.onEncryptedChange} value={this.state.isEncrypted} />
+                { _t("Bridges and most bots will not function in end-to-end encrypted rooms.") }
+            </React.Fragment>;
+        }
+
         const title = this.state.isPublic ? _t('Create a public room') : _t('Create a private room');
         return (
             <BaseDialog className="mx_CreateRoomDialog" onFinished={this.props.onFinished}
@@ -191,6 +210,7 @@ export default createReactClass({
                         <Field ref={ref => this._nameFieldRef = ref} label={ _t('Name') } onChange={this.onNameChange} onValidate={this.onNameValidate} value={this.state.name} className="mx_CreateRoomDialog_name" />
                         <Field label={ _t('Topic (optional)') } onChange={this.onTopicChange} value={this.state.topic} />
                         <LabelledToggleSwitch label={ _t("Make this room public")} onChange={this.onPublicChange} value={this.state.isPublic} />
+                        { e2eeSection }
                         { privateLabel }
                         { publicLabel }
                         { aliasField }
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index aa2f0aa819..2e33445821 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1555,6 +1555,8 @@
     "Please enter a name for the room": "Please enter a name for the room",
     "Set a room alias to easily share your room with other people.": "Set a room alias to easily share your room with other people.",
     "This room is private, and can only be joined by invitation.": "This room is private, and can only be joined by invitation.",
+    "Enable end-to-end encryption": "Enable end-to-end encryption",
+    "Bridges and most bots will not function in end-to-end encrypted rooms.": "Bridges and most bots will not function in end-to-end encrypted rooms.",
     "Create a public room": "Create a public room",
     "Create a private room": "Create a private room",
     "Name": "Name",

From eec28ce38ad504c3b27555a256e578a2d527f12d Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 8 Apr 2020 13:47:15 +0100
Subject: [PATCH 2/4] Update styling and copy to match Figma

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 res/css/views/dialogs/_CreateRoomDialog.scss  | 22 +++++++++++++++++--
 .../views/dialogs/CreateRoomDialog.js         | 14 +++++-------
 src/i18n/strings/en_EN.json                   |  2 +-
 3 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/res/css/views/dialogs/_CreateRoomDialog.scss b/res/css/views/dialogs/_CreateRoomDialog.scss
index ac46b8e91a..6800722802 100644
--- a/res/css/views/dialogs/_CreateRoomDialog.scss
+++ b/res/css/views/dialogs/_CreateRoomDialog.scss
@@ -15,6 +15,8 @@ limitations under the License.
 */
 
 .mx_CreateRoomDialog_details {
+    margin-top: 15px;
+
     .mx_CreateRoomDialog_details_summary {
         outline: none;
         list-style: none;
@@ -71,14 +73,17 @@ limitations under the License.
 }
 
 .mx_CreateRoomDialog {
-
     &.mx_Dialog_fixedWidth {
         width: 450px;
     }
 
+    p,
+    .mx_Field_input label {
+        color: $muted-fg-color;
+    }
+
     .mx_SettingsFlag {
         display: flex;
-        margin-top: 4px;
     }
 
     .mx_SettingsFlag_label {
@@ -91,5 +96,18 @@ limitations under the License.
         flex: 0 0 auto;
         margin-left: 30px;
     }
+
+    .mx_CreateRoomDialog_topic {
+        margin-bottom: 36px;
+    }
+
+    .mx_Dialog_content > .mx_SettingsFlag {
+        margin-top: 20px;
+    }
+
+    p {
+        margin: 0 85px 0 0;
+        line-height: $font-24px;
+    }
 }
 
diff --git a/src/components/views/dialogs/CreateRoomDialog.js b/src/components/views/dialogs/CreateRoomDialog.js
index 2431a4d32f..5f723234b0 100644
--- a/src/components/views/dialogs/CreateRoomDialog.js
+++ b/src/components/views/dialogs/CreateRoomDialog.js
@@ -177,11 +177,10 @@ export default createReactClass({
         const LabelledToggleSwitch = sdk.getComponent('views.elements.LabelledToggleSwitch');
         const RoomAliasField = sdk.getComponent('views.elements.RoomAliasField');
 
-        let privateLabel;
-        let publicLabel;
+        let publicPrivateLabel;
         let aliasField;
         if (this.state.isPublic) {
-            publicLabel = (<p>{_t("Set a room alias to easily share your room with other people.")}</p>);
+            publicPrivateLabel = (<p>{_t("Set a room alias to easily share your room with other people.")}</p>);
             const domain = MatrixClientPeg.get().getDomain();
             aliasField = (
                 <div className="mx_CreateRoomDialog_aliasContainer">
@@ -189,14 +188,14 @@ export default createReactClass({
                 </div>
             );
         } else {
-            privateLabel = (<p>{_t("This room is private, and can only be joined by invitation.")}</p>);
+            publicPrivateLabel = (<p>{_t("This room is private, and can only be joined by invitation.")}</p>);
         }
 
         let e2eeSection;
         if (!this.state.isPublic && SettingsStore.isFeatureEnabled("feature_cross_signing")) {
             e2eeSection = <React.Fragment>
                 <LabelledToggleSwitch label={ _t("Enable end-to-end encryption")} onChange={this.onEncryptedChange} value={this.state.isEncrypted} />
-                { _t("Bridges and most bots will not function in end-to-end encrypted rooms.") }
+                <p>{ _t("You can’t disable this later. Bridges & most bots currently won’t work.") }</p>
             </React.Fragment>;
         }
 
@@ -208,11 +207,10 @@ export default createReactClass({
                 <form onSubmit={this.onOk} onKeyDown={this._onKeyDown}>
                     <div className="mx_Dialog_content">
                         <Field ref={ref => this._nameFieldRef = ref} label={ _t('Name') } onChange={this.onNameChange} onValidate={this.onNameValidate} value={this.state.name} className="mx_CreateRoomDialog_name" />
-                        <Field label={ _t('Topic (optional)') } onChange={this.onTopicChange} value={this.state.topic} />
+                        <Field label={ _t('Topic (optional)') } onChange={this.onTopicChange} value={this.state.topic} className="mx_CreateRoomDialog_topic" />
                         <LabelledToggleSwitch label={ _t("Make this room public")} onChange={this.onPublicChange} value={this.state.isPublic} />
+                        { publicPrivateLabel }
                         { e2eeSection }
-                        { privateLabel }
-                        { publicLabel }
                         { aliasField }
                         <details ref={this.collectDetailsRef} className="mx_CreateRoomDialog_details">
                             <summary className="mx_CreateRoomDialog_details_summary">{ this.state.detailsOpen ? _t('Hide advanced') : _t('Show advanced') }</summary>
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 2e33445821..4fbb32e241 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1556,7 +1556,7 @@
     "Set a room alias to easily share your room with other people.": "Set a room alias to easily share your room with other people.",
     "This room is private, and can only be joined by invitation.": "This room is private, and can only be joined by invitation.",
     "Enable end-to-end encryption": "Enable end-to-end encryption",
-    "Bridges and most bots will not function in end-to-end encrypted rooms.": "Bridges and most bots will not function in end-to-end encrypted rooms.",
+    "You can’t disable this later. Bridges & most bots currently won’t work.": "You can’t disable this later. Bridges & most bots currently won’t work.",
     "Create a public room": "Create a public room",
     "Create a private room": "Create a private room",
     "Name": "Name",

From 4041c030a559f85d48a35a7db0938bc200073a4f Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 8 Apr 2020 14:44:34 +0100
Subject: [PATCH 3/4] Apply changes from Figma

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 res/css/views/dialogs/_CreateRoomDialog.scss     | 7 ++++++-
 src/components/views/dialogs/CreateRoomDialog.js | 2 +-
 src/i18n/strings/en_EN.json                      | 2 +-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/res/css/views/dialogs/_CreateRoomDialog.scss b/res/css/views/dialogs/_CreateRoomDialog.scss
index 6800722802..2ec0011729 100644
--- a/res/css/views/dialogs/_CreateRoomDialog.scss
+++ b/res/css/views/dialogs/_CreateRoomDialog.scss
@@ -77,6 +77,10 @@ limitations under the License.
         width: 450px;
     }
 
+    .mx_Dialog_content {
+        margin-bottom: 40px;
+    }
+
     p,
     .mx_Field_input label {
         color: $muted-fg-color;
@@ -102,11 +106,12 @@ limitations under the License.
     }
 
     .mx_Dialog_content > .mx_SettingsFlag {
-        margin-top: 20px;
+        margin-top: 12px;
     }
 
     p {
         margin: 0 85px 0 0;
+        font-size: $font-12px;
         line-height: $font-24px;
     }
 }
diff --git a/src/components/views/dialogs/CreateRoomDialog.js b/src/components/views/dialogs/CreateRoomDialog.js
index 5f723234b0..88e90627e8 100644
--- a/src/components/views/dialogs/CreateRoomDialog.js
+++ b/src/components/views/dialogs/CreateRoomDialog.js
@@ -195,7 +195,7 @@ export default createReactClass({
         if (!this.state.isPublic && SettingsStore.isFeatureEnabled("feature_cross_signing")) {
             e2eeSection = <React.Fragment>
                 <LabelledToggleSwitch label={ _t("Enable end-to-end encryption")} onChange={this.onEncryptedChange} value={this.state.isEncrypted} />
-                <p>{ _t("You can’t disable this later. Bridges & most bots currently won’t work.") }</p>
+                <p>{ _t("You can’t disable this later. Bridges & most bots won’t work yet.") }</p>
             </React.Fragment>;
         }
 
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 4fbb32e241..072863c2c4 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1556,7 +1556,7 @@
     "Set a room alias to easily share your room with other people.": "Set a room alias to easily share your room with other people.",
     "This room is private, and can only be joined by invitation.": "This room is private, and can only be joined by invitation.",
     "Enable end-to-end encryption": "Enable end-to-end encryption",
-    "You can’t disable this later. Bridges & most bots currently won’t work.": "You can’t disable this later. Bridges & most bots currently won’t work.",
+    "You can’t disable this later. Bridges & most bots won’t work yet.": "You can’t disable this later. Bridges & most bots won’t work yet.",
     "Create a public room": "Create a public room",
     "Create a private room": "Create a private room",
     "Name": "Name",

From ffecf03b2a12d7f67e032ed64535537a233bfc40 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 8 Apr 2020 14:48:50 +0100
Subject: [PATCH 4/4] Update margins to improve grouping

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 res/css/views/dialogs/_CreateRoomDialog.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/res/css/views/dialogs/_CreateRoomDialog.scss b/res/css/views/dialogs/_CreateRoomDialog.scss
index 2ec0011729..2678f7b4ad 100644
--- a/res/css/views/dialogs/_CreateRoomDialog.scss
+++ b/res/css/views/dialogs/_CreateRoomDialog.scss
@@ -106,13 +106,12 @@ limitations under the License.
     }
 
     .mx_Dialog_content > .mx_SettingsFlag {
-        margin-top: 12px;
+        margin-top: 24px;
     }
 
     p {
         margin: 0 85px 0 0;
         font-size: $font-12px;
-        line-height: $font-24px;
     }
 }