PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Updated visuals for cross-signing bootstrap

Browse source 
* Use Fields rather than plain inputs
 * Update padding & alignment to match designs
 * Add Skip buttons
 * Update copy as per designs

Part of https://github.com/vector-im/riot-web/issues/11902
Based on https://github.com/matrix-org/matrix-react-sdk/pull/3897
This commit is contained in:
David Baker 2020-01-22 18:08:39 +00:00
parent e98269822c
commit 78654cc693
3 changed files with 65 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
res/css/views/dialogs/secretstorage/_CreateSecretStorageDialog.scss
View file

@ -1,6 +1,6 @@
/* /*
Copyright 2018 New Vector Ltd 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"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with 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 { .mx_CreateSecretStorageDialog_primaryContainer {
/* FIXME: plinth colour in new theme(s). background-color: $accent-color; */ /* FIXME: plinth colour in new theme(s). background-color: $accent-color; */
padding: 20px; padding-top: 20px;
} }
.mx_CreateSecretStorageDialog_primaryContainer::after { .mx_CreateSecretStorageDialog_primaryContainer::after {
@ -36,9 +36,13 @@ limitations under the License.
align-items: flex-start; align-items: flex-start;
} }
.mx_Field.mx_CreateSecretStorageDialog_passPhraseField {
margin-top: 0px;
}
.mx_CreateSecretStorageDialog_passPhraseHelp { .mx_CreateSecretStorageDialog_passPhraseHelp {
flex: 1; flex: 1;
height: 85px; height: 64px;
margin-left: 20px; margin-left: 20px;
font-size: 80%; font-size: 80%;
} }
@ -47,16 +51,8 @@ limitations under the License.
width: 100%; 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 { .mx_CreateSecretStorageDialog_passPhraseMatch {
width: 200px;
margin-left: 20px; margin-left: 20px;
} }

88
src/async-components/views/dialogs/secretstorage/CreateSecretStorageDialog.js
View file

@ -405,6 +405,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
_renderPhasePassPhrase() { _renderPhasePassPhrase() {
const DialogButtons = sdk.getComponent('views.elements.DialogButtons'); const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
const Field = sdk.getComponent('views.elements.Field');
let strengthMeter; let strengthMeter;
let helpText; let helpText;
@ -430,39 +431,39 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
return <div> return <div>
<p>{_t( <p>{_t(
"<b>Warning</b>: You should only set up secret storage from a trusted computer.", {}, "Set up encryption on this device to allow it to verify other devices, " +
{ b: sub => <b>{sub}</b> }, "granting them access to encrypted messages and marking them as trusted for other users.",
)}</p> )}</p>
<p>{_t( <p>{_t(
"We'll use secret storage to optionally store an encrypted copy of " + "Secure your encryption keys with a passphrase. For maximum security " +
"your cross-signing identity for verifying other devices and message " + "this should be different to your account password:"
"keys on our server. Protect your access to encrypted messages with a " +
"passphrase to keep it secure.",
)}</p> )}</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">
<div className="mx_CreateSecretStorageDialog_passPhraseContainer"> <Field type="password"
<input type="password" className="mx_CreateSecretStorageDialog_passPhraseField"
onChange={this._onPassPhraseChange} onChange={this._onPassPhraseChange}
onKeyPress={this._onPassPhraseKeyPress} onKeyPress={this._onPassPhraseKeyPress}
value={this.state.passPhrase} value={this.state.passPhrase}
className="mx_CreateSecretStorageDialog_passPhraseInput" label={_t("Enter a passphrase")}
placeholder={_t("Enter a passphrase...")} autoFocus={true}
autoFocus={true} />
/> <div className="mx_CreateSecretStorageDialog_passPhraseHelp">
<div className="mx_CreateSecretStorageDialog_passPhraseHelp"> {strengthMeter}
{strengthMeter} {helpText}
{helpText}
</div>
</div> </div>
</div> </div>
<DialogButtons primaryButton={_t('Next')} <DialogButtons primaryButton={_t('Continue')}
onPrimaryButtonClick={this._onPassPhraseNextClick} onPrimaryButtonClick={this._onPassPhraseNextClick}
hasCancel={false} hasCancel={false}
disabled={!this._passPhraseIsValid()} disabled={!this._passPhraseIsValid()}
/> >
<button type="button"
onClick={this._onCancel}
className="danger"
>{_t("Skip")}</button>
</DialogButtons>
<details> <details>
<summary>{_t("Advanced")}</summary> <summary>{_t("Advanced")}</summary>
@ -475,6 +476,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
_renderPhasePassPhraseConfirm() { _renderPhasePassPhraseConfirm() {
const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
const Field = sdk.getComponent('views.elements.Field');
let matchText; let matchText;
if (this.state.passPhraseConfirm === this.state.passPhrase) { if (this.state.passPhraseConfirm === this.state.passPhrase) {
@ -492,7 +494,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
let passPhraseMatch = null; let passPhraseMatch = null;
if (matchText) { if (matchText) {
passPhraseMatch = <div className="mx_CreateSecretStorageDialog_passPhraseMatch"> passPhraseMatch = <div>
<div>{matchText}</div> <div>{matchText}</div>
<div> <div>
<AccessibleButton element="span" className="mx_linkButton" onClick={this._onSetAgainClick}> <AccessibleButton element="span" className="mx_linkButton" onClick={this._onSetAgainClick}>
@ -504,28 +506,32 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
const DialogButtons = sdk.getComponent('views.elements.DialogButtons'); const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
return <div> return <div>
<p>{_t( <p>{_t(
"Please enter your passphrase a second time to confirm.", "Enter your passphrase a second time to confirm it.",
)}</p> )}</p>
<div className="mx_CreateSecretStorageDialog_primaryContainer"> <div className="mx_CreateSecretStorageDialog_passPhraseContainer">
<div className="mx_CreateSecretStorageDialog_passPhraseContainer"> <Field type="password"
<div> id="mx_CreateSecretStorageDialog_passPhraseField"
<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_CreateSecretStorageDialog_passPhraseField"
className="mx_CreateSecretStorageDialog_passPhraseInput" label={_t("Confirm your passphrase")}
placeholder={_t("Repeat your passphrase...")} autoFocus={true}
autoFocus={true} />
/> <div className="mx_CreateSecretStorageDialog_passPhraseMatch">
</div>
{passPhraseMatch} {passPhraseMatch}
</div> </div>
</div> </div>
<DialogButtons primaryButton={_t('Next')} <DialogButtons primaryButton={_t('Continue')}
onPrimaryButtonClick={this._onPassPhraseConfirmNextClick} onPrimaryButtonClick={this._onPassPhraseConfirmNextClick}
hasCancel={false} hasCancel={false}
disabled={this.state.passPhrase !== this.state.passPhraseConfirm} disabled={this.state.passPhrase !== this.state.passPhraseConfirm}
/> >
<button type="button"
onClick={this._onCancel}
className="danger"
>{_t("Skip")}</button>
</DialogButtons>
</div>; </div>;
} }
@ -650,9 +656,9 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
case PHASE_MIGRATE: case PHASE_MIGRATE:
return _t('Upgrade your encryption'); return _t('Upgrade your encryption');
case PHASE_PASSPHRASE: case PHASE_PASSPHRASE:
return _t('Secure your encrypted messages with a passphrase'); return _t('Set up encryption');
case PHASE_PASSPHRASE_CONFIRM: case PHASE_PASSPHRASE_CONFIRM:
return _t('Confirm your passphrase'); return _t('Confirm passphrase');
case PHASE_OPTOUT_CONFIRM: case PHASE_OPTOUT_CONFIRM:
return _t('Warning!'); return _t('Warning!');
case PHASE_SHOWKEY: case PHASE_SHOWKEY:

18
src/i18n/strings/en_EN.json
View file

@ -1976,16 +1976,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.", "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.", "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.", "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.", "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.",
"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.", "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:",
"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",
"Enter a passphrase...": "Enter a passphrase...",
"Set up with a recovery key": "Set up with a recovery key", "Set up with a recovery key": "Set up with a recovery key",
"That matches!": "That matches!", "That matches!": "That matches!",
"That doesn't match.": "That doesn't match.", "That doesn't match.": "That doesn't match.",
"Go back to set it again.": "Go back to set it again.", "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.", "Enter your passphrase a second time to confirm it.": "Enter your passphrase a second time to confirm it.",
"Repeat your passphrase...": "Repeat your passphrase...", "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 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.", "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.", "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.",
@ -2004,8 +2003,7 @@
"Set up secret storage": "Set up secret storage", "Set up secret storage": "Set up secret storage",
"Restore your Key Backup": "Restore your Key Backup", "Restore your Key Backup": "Restore your Key Backup",
"Upgrade your encryption": "Upgrade your encryption", "Upgrade your encryption": "Upgrade your encryption",
"Secure your encrypted messages with a passphrase": "Secure your encrypted messages with a passphrase", "Set up encryption": "Set up encryption",
"Confirm your passphrase": "Confirm your passphrase",
"Recovery key": "Recovery key", "Recovery key": "Recovery key",
"Keep it safe": "Keep it safe", "Keep it safe": "Keep it safe",
"Storing secrets...": "Storing secrets...", "Storing secrets...": "Storing secrets...",
@ -2013,7 +2011,11 @@
"Unable to set up secret storage": "Unable to set up secret storage", "Unable to set up secret storage": "Unable to set up secret storage",
"Retry": "Retry", "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.", "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", "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 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.", "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).", "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).",