diff --git a/res/css/views/dialogs/secretstorage/_CreateSecretStorageDialog.scss b/res/css/views/dialogs/secretstorage/_CreateSecretStorageDialog.scss index 5899abdf73..ed5aaa05a3 100644 --- a/res/css/views/dialogs/secretstorage/_CreateSecretStorageDialog.scss +++ b/res/css/views/dialogs/secretstorage/_CreateSecretStorageDialog.scss @@ -1,6 +1,6 @@ /* Copyright 2018 New Vector Ltd -Copyright 2019 The Matrix.org Foundation C.I.C. +Copyright 2019, 2020 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -22,7 +22,7 @@ limitations under the License. .mx_CreateSecretStorageDialog_primaryContainer { /* FIXME: plinth colour in new theme(s). background-color: $accent-color; */ - padding: 20px; + padding-top: 20px; } .mx_CreateSecretStorageDialog_primaryContainer::after { @@ -36,9 +36,13 @@ limitations under the License. align-items: flex-start; } +.mx_Field.mx_CreateSecretStorageDialog_passPhraseField { + margin-top: 0px; +} + .mx_CreateSecretStorageDialog_passPhraseHelp { flex: 1; - height: 85px; + height: 64px; margin-left: 20px; font-size: 80%; } @@ -47,16 +51,8 @@ limitations under the License. width: 100%; } -.mx_CreateSecretStorageDialog_passPhraseInput { - flex: none; - width: 250px; - border: 1px solid $accent-color; - border-radius: 5px; - padding: 10px; - margin-bottom: 1em; -} - .mx_CreateSecretStorageDialog_passPhraseMatch { + width: 200px; margin-left: 20px; } diff --git a/src/async-components/views/dialogs/secretstorage/CreateSecretStorageDialog.js b/src/async-components/views/dialogs/secretstorage/CreateSecretStorageDialog.js index a56a1ee905..8fd881fc32 100644 --- a/src/async-components/views/dialogs/secretstorage/CreateSecretStorageDialog.js +++ b/src/async-components/views/dialogs/secretstorage/CreateSecretStorageDialog.js @@ -75,6 +75,9 @@ export default class CreateSecretStorageDialog extends React.PureComponent { canUploadKeysWithPasswordOnly: null, accountPassword: '', accountPasswordCorrect: null, + // set if we are 'upgrading' encryption (making an SSSS store from + // an existing key backup secret). + doingUpgrade: null, }; this._fetchBackupInfo(); @@ -99,6 +102,8 @@ export default class CreateSecretStorageDialog extends React.PureComponent { phase, backupInfo, backupSigStatus, + // remember this after this phase so we can use appropriate copy + doingUpgrade: phase === PHASE_MIGRATE, }); } @@ -405,6 +410,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent { _renderPhasePassPhrase() { const DialogButtons = sdk.getComponent('views.elements.DialogButtons'); + const Field = sdk.getComponent('views.elements.Field'); let strengthMeter; let helpText; @@ -430,39 +436,39 @@ export default class CreateSecretStorageDialog extends React.PureComponent { return
{_t( - "Warning: You should only set up secret storage from a trusted computer.", {}, - { b: sub => {sub} }, + "Set up encryption on this device to allow it to verify other devices, " + + "granting them access to encrypted messages and marking them as trusted for other users.", )}
{_t( - "We'll use secret storage to optionally store an encrypted copy of " + - "your cross-signing identity for verifying other devices and message " + - "keys on our server. Protect your access to encrypted messages with a " + - "passphrase to keep it secure.", + "Secure your encryption keys with a passphrase. For maximum security " + + "this should be different to your account password:", )}
-{_t("For maximum security, this should be different from your account password.")}
-{_t( - "Please enter your passphrase a second time to confirm.", + "Enter your passphrase a second time to confirm it.", )}
-