From f4842688f880c324acdd1819d2fea05f15415b4b Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Tue, 28 Jan 2020 11:10:15 +0000 Subject: [PATCH 1/6] Add reciprocate to verification methods --- src/MatrixClientPeg.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/MatrixClientPeg.js b/src/MatrixClientPeg.js index 450bec8e77..53dd63d805 100644 --- a/src/MatrixClientPeg.js +++ b/src/MatrixClientPeg.js @@ -217,7 +217,7 @@ class _MatrixClientPeg { timelineSupport: true, forceTURN: !SettingsStore.getValue('webRtcAllowPeerToPeer', false), fallbackICEServerAllowed: !!SettingsStore.getValue('fallbackICEServerAllowed'), - verificationMethods: [verificationMethods.SAS, verificationMethods.QR_CODE_SHOW], + verificationMethods: [verificationMethods.SAS, verificationMethods.QR_CODE_SHOW, verificationMethods.RECIPROCATE_QR_CODE], unstableClientRelationAggregation: true, identityServer: new IdentityAuthClient(), }; From 7d1c61fa550c1fda3a601a678ca44742e6786d06 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Wed, 29 Jan 2020 09:29:45 +0000 Subject: [PATCH 2/6] Use new constant for QR code verification --- src/MatrixClientPeg.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/MatrixClientPeg.js b/src/MatrixClientPeg.js index 53dd63d805..db99f38738 100644 --- a/src/MatrixClientPeg.js +++ b/src/MatrixClientPeg.js @@ -32,6 +32,7 @@ import MatrixClientBackedSettingsHandler from "./settings/handlers/MatrixClientB import * as StorageManager from './utils/StorageManager'; import IdentityAuthClient from './IdentityAuthClient'; import { crossSigningCallbacks } from './CrossSigningManager'; +import {SHOW_QR_CODE_METHOD} from "matrix-js-sdk/src/crypto/verification/QRCode"; interface MatrixClientCreds { homeserverUrl: string, @@ -217,7 +218,7 @@ class _MatrixClientPeg { timelineSupport: true, forceTURN: !SettingsStore.getValue('webRtcAllowPeerToPeer', false), fallbackICEServerAllowed: !!SettingsStore.getValue('fallbackICEServerAllowed'), - verificationMethods: [verificationMethods.SAS, verificationMethods.QR_CODE_SHOW, verificationMethods.RECIPROCATE_QR_CODE], + verificationMethods: [verificationMethods.SAS, SHOW_QR_CODE_METHOD, verificationMethods.RECIPROCATE_QR_CODE], unstableClientRelationAggregation: true, identityServer: new IdentityAuthClient(), }; From 00fa7cce57498d0c2ab1963f75029baa4ff5956e Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Wed, 29 Jan 2020 15:02:52 +0000 Subject: [PATCH 3/6] Appease the linter --- src/MatrixClientPeg.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/MatrixClientPeg.js b/src/MatrixClientPeg.js index db99f38738..98fcc85d60 100644 --- a/src/MatrixClientPeg.js +++ b/src/MatrixClientPeg.js @@ -218,7 +218,11 @@ class _MatrixClientPeg { timelineSupport: true, forceTURN: !SettingsStore.getValue('webRtcAllowPeerToPeer', false), fallbackICEServerAllowed: !!SettingsStore.getValue('fallbackICEServerAllowed'), - verificationMethods: [verificationMethods.SAS, SHOW_QR_CODE_METHOD, verificationMethods.RECIPROCATE_QR_CODE], + verificationMethods: [ + verificationMethods.SAS, + SHOW_QR_CODE_METHOD, + verificationMethods.RECIPROCATE_QR_CODE, + ], unstableClientRelationAggregation: true, identityServer: new IdentityAuthClient(), }; From 33ec73095e3a35b3399f9414753faee8d97f10ea Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 29 Jan 2020 22:44:49 +0000 Subject: [PATCH 4/6] Apply the Olympic effect to SAS Emoji Verification Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- .../verification/_VerificationShowSas.scss | 27 ++++++++++++++++--- .../views/verification/VerificationShowSas.js | 6 +++-- 2 files changed, 28 insertions(+), 5 deletions(-) diff --git a/res/css/views/verification/_VerificationShowSas.scss b/res/css/views/verification/_VerificationShowSas.scss index a0da7e2539..72213072f9 100644 --- a/res/css/views/verification/_VerificationShowSas.scss +++ b/res/css/views/verification/_VerificationShowSas.scss @@ -28,21 +28,42 @@ limitations under the License. .mx_VerificationShowSas_emojiSas { text-align: center; + display: flex; + flex-wrap: wrap; + justify-content: center; + margin: 25px 0; } .mx_VerificationShowSas_emojiSas_block { display: inline-block; - margin-left: 15px; - margin-right: 15px; text-align: center; - margin-bottom: 20px; + margin-bottom: 30px; + position: relative; + // allow the blocks to grow to space themselves evenly up to a limit of 100px + flex-grow: 1; + max-width: 100px; } .mx_VerificationShowSas_emojiSas_emoji { font-size: 48px; } +.mx_UserInfo .mx_VerificationShowSas_emojiSas_emoji { + font-size: 32px; // in UserInfo use a smaller font-size to fit in a smaller space + width: 43px; + margin: 0 auto; +} + .mx_VerificationShowSas_emojiSas_label { text-align: center; font-weight: bold; + // allow the text to overflow the parent by 15px on each side + // this is to keep the width of the parent consistent for spacing centrally via flexbox + position: absolute; + left: -15px; + right: -15px; +} + +.mx_VerificationShowSas_emojiSas_break { + flex-basis: 100%; } diff --git a/src/components/views/verification/VerificationShowSas.js b/src/components/views/verification/VerificationShowSas.js index 40d3b96beb..38bc1bb40a 100644 --- a/src/components/views/verification/VerificationShowSas.js +++ b/src/components/views/verification/VerificationShowSas.js @@ -62,7 +62,9 @@ export default class VerificationShowSas extends React.Component { , ); sasDisplay =
- {emojiBlocks} + {emojiBlocks.slice(0, 4)} +
+ {emojiBlocks.slice(4)}
; sasCaption = _t( "Verify this user by confirming the following emoji appear on their screen.", @@ -105,8 +107,8 @@ export default class VerificationShowSas extends React.Component { return

{sasCaption}

-

{_t("To be secure, do this in person or use a trusted way to communicate.")}

{sasDisplay} +

{_t("To be secure, do this in person or use a trusted way to communicate.")}

{confirm}
; } From d17a2ff80c6f89674323796bca82f3eacfcc80e3 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 29 Jan 2020 22:54:45 +0000 Subject: [PATCH 5/6] clean up unused CSS rules Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/views/verification/_VerificationShowSas.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/res/css/views/verification/_VerificationShowSas.scss b/res/css/views/verification/_VerificationShowSas.scss index 72213072f9..32401bc446 100644 --- a/res/css/views/verification/_VerificationShowSas.scss +++ b/res/css/views/verification/_VerificationShowSas.scss @@ -36,7 +36,6 @@ limitations under the License. .mx_VerificationShowSas_emojiSas_block { display: inline-block; - text-align: center; margin-bottom: 30px; position: relative; // allow the blocks to grow to space themselves evenly up to a limit of 100px @@ -50,12 +49,9 @@ limitations under the License. .mx_UserInfo .mx_VerificationShowSas_emojiSas_emoji { font-size: 32px; // in UserInfo use a smaller font-size to fit in a smaller space - width: 43px; - margin: 0 auto; } .mx_VerificationShowSas_emojiSas_label { - text-align: center; font-weight: bold; // allow the text to overflow the parent by 15px on each side // this is to keep the width of the parent consistent for spacing centrally via flexbox From afecaa16622f4d2e42ee1842b19519df0cd154e9 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 29 Jan 2020 22:54:56 +0000 Subject: [PATCH 6/6] fix left margins in UserInfo Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/views/right_panel/_UserInfo.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/right_panel/_UserInfo.scss b/res/css/views/right_panel/_UserInfo.scss index 5e5b66f58a..81e4c396e7 100644 --- a/res/css/views/right_panel/_UserInfo.scss +++ b/res/css/views/right_panel/_UserInfo.scss @@ -211,7 +211,7 @@ limitations under the License. padding-bottom: 16px; } - .mx_UserInfo_scrollContainer:not(.mx_UserInfo_separator) { + .mx_UserInfo_container:not(.mx_UserInfo_separator) { padding-top: 16px; padding-bottom: 0;