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.")}

-
-
- -
- {strengthMeter} - {helpText} -
+
+ +
+ {strengthMeter} + {helpText}
- + > + +
{_t("Advanced")} @@ -475,6 +481,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent { _renderPhasePassPhraseConfirm() { const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); + const Field = sdk.getComponent('views.elements.Field'); let matchText; if (this.state.passPhraseConfirm === this.state.passPhrase) { @@ -492,7 +499,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent { let passPhraseMatch = null; if (matchText) { - passPhraseMatch =
+ passPhraseMatch =
{matchText}
@@ -504,28 +511,32 @@ export default class CreateSecretStorageDialog extends React.PureComponent { const DialogButtons = sdk.getComponent('views.elements.DialogButtons'); return

{_t( - "Please enter your passphrase a second time to confirm.", + "Enter your passphrase a second time to confirm it.", )}

-
-
-
- -
+
+ +
{passPhraseMatch}
- + > + +
; } @@ -650,9 +661,9 @@ export default class CreateSecretStorageDialog extends React.PureComponent { case PHASE_MIGRATE: return _t('Upgrade your encryption'); case PHASE_PASSPHRASE: - return _t('Secure your encrypted messages with a passphrase'); + return _t('Set up encryption'); case PHASE_PASSPHRASE_CONFIRM: - return _t('Confirm your passphrase'); + return _t('Confirm passphrase'); case PHASE_OPTOUT_CONFIRM: return _t('Warning!'); case PHASE_SHOWKEY: @@ -662,7 +673,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent { case PHASE_STORING: return _t('Storing secrets...'); case PHASE_DONE: - return _t('Encryption upgraded'); + return this.state.doingUpgrade ? _t('Encryption upgraded') : _t('Encryption setup complete'); default: return ''; } diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 2e92cbd282..62373e8092 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1980,16 +1980,15 @@ "You'll need to authenticate with the server to confirm the upgrade.": "You'll need to authenticate with the server to confirm the upgrade.", "Upgrade this device to allow it to verify other devices, granting them access to encrypted messages and marking them as trusted for other users.": "Upgrade this device to allow it to verify other devices, granting them access to encrypted messages and marking them as trusted for other users.", "Great! This passphrase looks strong enough.": "Great! This passphrase looks strong enough.", - "Warning: You should only set up secret storage from a trusted computer.": "Warning: You should only set up secret storage from a trusted computer.", - "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.": "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.", - "For maximum security, this should be different from your account password.": "For maximum security, this should be different from your account password.", - "Enter a passphrase...": "Enter a passphrase...", + "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.": "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.", + "Secure your encryption keys with a passphrase. For maximum security this should be different to your account password:": "Secure your encryption keys with a passphrase. For maximum security this should be different to your account password:", + "Enter a passphrase": "Enter a passphrase", "Set up with a recovery key": "Set up with a recovery key", "That matches!": "That matches!", "That doesn't match.": "That doesn't match.", "Go back to set it again.": "Go back to set it again.", - "Please enter your passphrase a second time to confirm.": "Please enter your passphrase a second time to confirm.", - "Repeat your passphrase...": "Repeat your passphrase...", + "Enter your passphrase a second time to confirm it.": "Enter your passphrase a second time to confirm it.", + "Confirm your passphrase": "Confirm your passphrase", "As a safety net, you can use it to restore your access to encrypted messages if you forget your passphrase.": "As a safety net, you can use it to restore your access to encrypted messages if you forget your passphrase.", "As a safety net, you can use it to restore your access to encrypted messages.": "As a safety net, you can use it to restore your access to encrypted messages.", "Your recovery key is a safety net - you can use it to restore access to your encrypted messages if you forget your passphrase.": "Your recovery key is a safety net - you can use it to restore access to your encrypted messages if you forget your passphrase.", @@ -2008,16 +2007,20 @@ "Set up secret storage": "Set up secret storage", "Restore your Key Backup": "Restore your Key Backup", "Upgrade your encryption": "Upgrade your encryption", - "Secure your encrypted messages with a passphrase": "Secure your encrypted messages with a passphrase", - "Confirm your passphrase": "Confirm your passphrase", + "Set up encryption": "Set up encryption", "Recovery key": "Recovery key", "Keep it safe": "Keep it safe", "Storing secrets...": "Storing secrets...", "Encryption upgraded": "Encryption upgraded", + "Encryption setup complete": "Encryption setup complete", "Unable to set up secret storage": "Unable to set up secret storage", "Retry": "Retry", "We'll store an encrypted copy of your keys on our server. Protect your backup with a passphrase to keep it secure.": "We'll store an encrypted copy of your keys on our server. Protect your backup with a passphrase to keep it secure.", + "For maximum security, this should be different from your account password.": "For maximum security, this should be different from your account password.", + "Enter a passphrase...": "Enter a passphrase...", "Set up with a Recovery Key": "Set up with a Recovery Key", + "Please enter your passphrase a second time to confirm.": "Please enter your passphrase a second time to confirm.", + "Repeat your passphrase...": "Repeat your passphrase...", "As a safety net, you can use it to restore your encrypted message history if you forget your Recovery Passphrase.": "As a safety net, you can use it to restore your encrypted message history if you forget your Recovery Passphrase.", "As a safety net, you can use it to restore your encrypted message history.": "As a safety net, you can use it to restore your encrypted message history.", "Your keys are being backed up (the first backup could take a few minutes).": "Your keys are being backed up (the first backup could take a few minutes).",