Merge pull request #3903 from matrix-org/dbkr/bootstrap_visuals_1
Updated visuals for cross-signing bootstrap
This commit is contained in:
David Baker
GitHub
commit
8d59cb4632
3 changed files with 72 additions and 62 deletions
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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,25 +436,21 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
|
|||
|
||||
return <div>
|
||||
<p>{_t(
|
||||
"<b>Warning</b>: You should only set up secret storage from a trusted computer.", {},
|
||||
{ b: sub => <b>{sub}</b> },
|
||||
"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.",
|
||||
)}</p>
|
||||
<p>{_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:",
|
||||
)}</p>
|
||||
<p>{_t("For maximum security, this should be different from your account password.")}</p>
|
||||
|
||||
<div className="mx_CreateSecretStorageDialog_primaryContainer">
|
||||
<div className="mx_CreateSecretStorageDialog_passPhraseContainer">
|
||||
<input type="password"
|
||||
<Field type="password"
|
||||
className="mx_CreateSecretStorageDialog_passPhraseField"
|
||||
onChange={this._onPassPhraseChange}
|
||||
onKeyPress={this._onPassPhraseKeyPress}
|
||||
value={this.state.passPhrase}
|
||||
className="mx_CreateSecretStorageDialog_passPhraseInput"
|
||||
placeholder={_t("Enter a passphrase...")}
|
||||
label={_t("Enter a passphrase")}
|
||||
autoFocus={true}
|
||||
/>
|
||||
<div className="mx_CreateSecretStorageDialog_passPhraseHelp">
|
||||
|
|
@ -456,13 +458,17 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
|
|||
{helpText}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogButtons primaryButton={_t('Next')}
|
||||
<DialogButtons primaryButton={_t('Continue')}
|
||||
onPrimaryButtonClick={this._onPassPhraseNextClick}
|
||||
hasCancel={false}
|
||||
disabled={!this._passPhraseIsValid()}
|
||||
/>
|
||||
>
|
||||
<button type="button"
|
||||
onClick={this._onCancel}
|
||||
className="danger"
|
||||
>{_t("Skip")}</button>
|
||||
</DialogButtons>
|
||||
|
||||
<details>
|
||||
<summary>{_t("Advanced")}</summary>
|
||||
|
|
@ -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 = <div className="mx_CreateSecretStorageDialog_passPhraseMatch">
|
||||
passPhraseMatch = <div>
|
||||
<div>{matchText}</div>
|
||||
<div>
|
||||
<AccessibleButton element="span" className="mx_linkButton" onClick={this._onSetAgainClick}>
|
||||
|
|
@ -504,28 +511,32 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
|
|||
const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
|
||||
return <div>
|
||||
<p>{_t(
|
||||
"Please enter your passphrase a second time to confirm.",
|
||||
"Enter your passphrase a second time to confirm it.",
|
||||
)}</p>
|
||||
<div className="mx_CreateSecretStorageDialog_primaryContainer">
|
||||
<div className="mx_CreateSecretStorageDialog_passPhraseContainer">
|
||||
<div>
|
||||
<input type="password"
|
||||
<Field type="password"
|
||||
id="mx_CreateSecretStorageDialog_passPhraseField"
|
||||
onChange={this._onPassPhraseConfirmChange}
|
||||
onKeyPress={this._onPassPhraseConfirmKeyPress}
|
||||
value={this.state.passPhraseConfirm}
|
||||
className="mx_CreateSecretStorageDialog_passPhraseInput"
|
||||
placeholder={_t("Repeat your passphrase...")}
|
||||
className="mx_CreateSecretStorageDialog_passPhraseField"
|
||||
label={_t("Confirm your passphrase")}
|
||||
autoFocus={true}
|
||||
/>
|
||||
</div>
|
||||
<div className="mx_CreateSecretStorageDialog_passPhraseMatch">
|
||||
{passPhraseMatch}
|
||||
</div>
|
||||
</div>
|
||||
<DialogButtons primaryButton={_t('Next')}
|
||||
<DialogButtons primaryButton={_t('Continue')}
|
||||
onPrimaryButtonClick={this._onPassPhraseConfirmNextClick}
|
||||
hasCancel={false}
|
||||
disabled={this.state.passPhrase !== this.state.passPhraseConfirm}
|
||||
/>
|
||||
>
|
||||
<button type="button"
|
||||
onClick={this._onCancel}
|
||||
className="danger"
|
||||
>{_t("Skip")}</button>
|
||||
</DialogButtons>
|
||||
</div>;
|
||||
}
|
||||
|
||||
|
|
@ -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 '';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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.",
|
||||
"<b>Warning</b>: You should only set up secret storage from a trusted computer.": "<b>Warning</b>: 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).",
|
||||
|
|
|
|||
Loading…
Reference in a new issue