Merge remote-tracking branch 'origin/develop' into develop

res/css/_components.scss

@@ -33,7 +33,6 @@
 @import "./views/dialogs/_ChatInviteDialog.scss";
 @import "./views/dialogs/_ConfirmUserActionDialog.scss";
 @import "./views/dialogs/_CreateGroupDialog.scss";
-@import "./views/dialogs/_CreateKeyBackupDialog.scss";
 @import "./views/dialogs/_CreateRoomDialog.scss";
 @import "./views/dialogs/_DeactivateAccountDialog.scss";
 @import "./views/dialogs/_DevtoolsDialog.scss";

res/css/views/dialogs/_CreateKeyBackupDialog.scss

@@ -1,25 +0,0 @@
-/*
-Copyright 2018 New Vector Ltd
-
-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.
-*/
-
-.mx_CreateKeyBackupDialog {
-    padding-right: 40px;
-}
-
-.mx_CreateKeyBackupDialog_recoveryKey {
-    padding: 20px;
-    color: $info-plinth-fg-color;
-    background-color: $info-plinth-bg-color;
-}

res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss

@@ -13,7 +13,11 @@ 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.
 */
- 
+
+.mx_CreateKeyBackupDialog {
+    padding-right: 40px;
+}
+
 .mx_CreateKeyBackupDialog_primaryContainer {
     /*FIXME: plinth colour in new theme(s). background-color: $accent-color;*/
     padding: 20px
@@ -25,9 +29,13 @@ limitations under the License.
     display: block;
 }
 
+.mx_CreateKeyBackupDialog_passPhraseContainer {
+    display: flex;
+    align-items: start;
+}
+
 .mx_CreateKeyBackupDialog_passPhraseHelp {
-    float: right;
+    flex: 1;
-    width: 230px;
     height: 85px;
     margin-left: 20px;
     font-size: 80%;
@@ -38,20 +46,36 @@ limitations under the License.
 }
 
 .mx_CreateKeyBackupDialog_passPhraseInput {
+    flex: none;
     width: 250px;
     border: 1px solid $accent-color;
     border-radius: 5px;
     padding: 10px;
+    margin-bottom: 1em;
 }
 
 .mx_CreateKeyBackupDialog_passPhraseMatch {
-    float: right;
+    margin-left: 20px;
 }
 
-.mx_CreateKeyBackupDialog_recoveryKeyButtons {
+.mx_CreateKeyBackupDialog_recoveryKeyHeader {
-    float: right;
+    margin-bottom: 1em;
+}
+
+.mx_CreateKeyBackupDialog_recoveryKeyContainer {
+    display: flex;
 }
 
 .mx_CreateKeyBackupDialog_recoveryKey {
-    width: 300px;
+    width: 262px;
+    padding: 20px;
+    color: $info-plinth-fg-color;
+    background-color: $info-plinth-bg-color;
+    margin-right: 12px;
+}
+
+.mx_CreateKeyBackupDialog_recoveryKeyButtons {
+    flex: 1;
+    display: flex;
+    align-items: center;
 }

src/async-components/views/dialogs/keybackup/CreateKeyBackupDialog.js

@@ -239,17 +239,19 @@ export default React.createClass({
             <p>{_t("You'll need it if you log out or lose access to this device.")}</p>
 
             <div className="mx_CreateKeyBackupDialog_primaryContainer">
-                <div className="mx_CreateKeyBackupDialog_passPhraseHelp">
+                <div className="mx_CreateKeyBackupDialog_passPhraseContainer">
-                    {strengthMeter}
+                    <input type="password"
-                    {helpText}
+                        onChange={this._onPassPhraseChange}
+                        onKeyPress={this._onPassPhraseKeyPress}
+                        value={this.state.passPhrase}
+                        className="mx_CreateKeyBackupDialog_passPhraseInput"
+                        placeholder={_t("Enter a passphrase...")}
+                    />
+                    <div className="mx_CreateKeyBackupDialog_passPhraseHelp">
+                        {strengthMeter}
+                        {helpText}
+                    </div>
                 </div>
-                <input type="password"
-                    onChange={this._onPassPhraseChange}
-                    onKeyPress={this._onPassPhraseKeyPress}
-                    value={this.state.passPhrase}
-                    className="mx_CreateKeyBackupDialog_passPhraseInput"
-                    placeholder={_t("Enter a passphrase...")}
-                />
             </div>
 
             <DialogButtons primaryButton={_t('Next')}
@@ -317,16 +319,18 @@ export default React.createClass({
                 "somewhere safe.",
             )}</p>
             <div className="mx_CreateKeyBackupDialog_primaryContainer">
-                {passPhraseMatch}
+                <div className="mx_CreateKeyBackupDialog_passPhraseContainer">
-                <div>
+                    <div>
-                    <input type="password"
+                        <input type="password"
-                        onChange={this._onPassPhraseConfirmChange}
+                            onChange={this._onPassPhraseConfirmChange}
-                        onKeyPress={this._onPassPhraseConfirmKeyPress}
+                            onKeyPress={this._onPassPhraseConfirmKeyPress}
-                        value={this.state.passPhraseConfirm}
+                            value={this.state.passPhraseConfirm}
-                        className="mx_CreateKeyBackupDialog_passPhraseInput"
+                            className="mx_CreateKeyBackupDialog_passPhraseInput"
-                        placeholder={_t("Repeat your passphrase...")}
+                            placeholder={_t("Repeat your passphrase...")}
-                        autoFocus={true}
+                            autoFocus={true}
-                    />
+                        />
+                    </div>
+                    {passPhraseMatch}
                 </div>
             </div>
             <DialogButtons primaryButton={_t('Next')}
@@ -351,21 +355,21 @@ export default React.createClass({
             <p>{_t("Make a copy of this Recovery Key and keep it safe.")}</p>
             <p>{bodyText}</p>
             <p className="mx_CreateKeyBackupDialog_primaryContainer">
-                <div>{_t("Your Recovery Key")}</div>
+                <div className="mx_CreateKeyBackupDialog_recoveryKeyHeader">
-                <div className="mx_CreateKeyBackupDialog_recoveryKeyButtons">
+                    {_t("Your Recovery Key")}
-                    <button onClick={this._onCopyClick}>
-                        {_t("Copy to clipboard")}
-                    </button>
-                    {
-                        // FIXME REDESIGN: buttons should be adjacent but insufficient room in current design
-                    }
-                    <br /><br />
-                    <button onClick={this._onDownloadClick}>
-                        {_t("Download")}
-                    </button>
                 </div>
-                <div className="mx_CreateKeyBackupDialog_recoveryKey">
+                <div className="mx_CreateKeyBackupDialog_recoveryKeyContainer">
-                    <code ref={this._collectRecoveryKeyNode}>{this._keyBackupInfo.recovery_key}</code>
+                    <div className="mx_CreateKeyBackupDialog_recoveryKey">
+                        <code ref={this._collectRecoveryKeyNode}>{this._keyBackupInfo.recovery_key}</code>
+                    </div>
+                    <div className="mx_CreateKeyBackupDialog_recoveryKeyButtons">
+                        <button className="mx_Dialog_primary" onClick={this._onCopyClick}>
+                            {_t("Copy to clipboard")}
+                        </button>
+                        <button className="mx_Dialog_primary" onClick={this._onDownloadClick}>
+                            {_t("Download")}
+                        </button>
+                    </div>
                 </div>
             </p>
             <br />

src/i18n/strings/en_EN.json

@@ -250,6 +250,8 @@
     "A word by itself is easy to guess": "A word by itself is easy to guess",
     "Names and surnames by themselves are easy to guess": "Names and surnames by themselves are easy to guess",
     "Common names and surnames are easy to guess": "Common names and surnames are easy to guess",
+    "Straight rows of keys are easy to guess": "Straight rows of keys are easy to guess",
+    "Short keyboard patterns are easy to guess": "Short keyboard patterns are easy to guess",
     "There was an error joining the room": "There was an error joining the room",
     "Sorry, your homeserver is too old to participate in this room.": "Sorry, your homeserver is too old to participate in this room.",
     "Please contact your homeserver administrator.": "Please contact your homeserver administrator.",

src/utils/PasswordScorer.js

@@ -52,6 +52,8 @@ _td("This is similar to a commonly used password");
 _td("A word by itself is easy to guess");
 _td("Names and surnames by themselves are easy to guess");
 _td("Common names and surnames are easy to guess");
+_td("Straight rows of keys are easy to guess");
+_td("Short keyboard patterns are easy to guess");
 
 /**
  * Wrapper around zxcvbn password strength estimation