Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Implement new design on security setup & login #4831

Merged
merged 19 commits into from
Jun 30, 2020

Conversation

dbkr
Copy link
Member

@dbkr dbkr commented Jun 25, 2020

This implements the new designs for choosing between passphrase and recovery key, and entering the passphrase/key. We wanted these to land together so I've bundled the changes together, but kept the changes to key entry fairly minimal and cosmetic. Most notably, they still appear in a separate dialog on top of the original rather than being in the same dialog. I've also split other bits like the 'show passphrase' eye icon and moving the passphrase & conform boxes onto the same screen out to separate bugs.

Setting up:
Screenshot 2020-06-30 at 10 21 17
Screenshot 2020-06-25 at 12 43 33
Screenshot 2020-06-25 at 12 43 43
Screenshot 2020-06-25 at 12 43 55

Logging in:
Screenshot 2020-06-25 at 15 36 26
Screenshot 2020-06-25 at 12 30 42

(I'll add the placeholder when adding the upload button)

Also adds a border to the radio buttons on the appearance tab because they share a component and the one for the security screen needed a border:
Screenshot 2020-06-23 at 13 46 48

Fixes element-hq/element-web#13825

@dbkr dbkr requested review from a team June 25, 2020 13:00
Copy link
Member

@turt2live turt2live left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

generally seems fine from a code perspective, also that's a lot of strings.

res/css/views/elements/_StyledRadioButton.scss Outdated Show resolved Hide resolved
@@ -259,22 +284,15 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
await cli.bootstrapSecretStorage({
authUploadDeviceSigningKeys: this._doBootstrapUIAuth,
createSecretStorageKey: async () => this._recoveryKey,
setupNewKeyBackup: this.state.useKeyBackup,
setupNewKeyBackup: true,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do we not support this option anymore?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This will shortly be part of dialog for setting up SSSS rather than cross-signing, so you'll either set up both SSSS storage and key backup or neither, as they're both basically server-side key backup. They'll be independent of cross-signing.

Copy link
Contributor

@nadonomy nadonomy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dbkr these are looking great. We could do with some more padding between the icons & titles, and the icons/titles & micro copy in the radio interactions. Approving for now to avoid bitrot but lmk if you want to fix these before merging or not— happy to jump on a call to pixel tweak together at runtime.

@dbkr
Copy link
Member Author

dbkr commented Jun 30, 2020

[screenshot updated]

Copy link
Member

@turt2live turt2live left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!

@dbkr dbkr merged commit 21c5c74 into develop Jun 30, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Use recovery keys rather than recovery pass phrases
3 participants