Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Convert account screen to React/EUI #30977

Merged
merged 27 commits into from Apr 15, 2019

Conversation

legrego
Copy link
Member

@legrego legrego commented Feb 13, 2019

Summary

This converts the account management screen to React/EUI.

Closes #30844

Account with no Full Name or email address

image

Account with Full Name and email address

image

Account with password change disabled (e.g., SAML):

image

i18n test:

image

TODO

  • functional test updates
  • a11y testing
  • i18n verification
  • design review
  • copy review

"Release note: Refreshed the look-and-feel of the account management screen."

@legrego legrego added WIP Work in progress Team:Security Team focused on: Auth, Users, Roles, Spaces, Audit Logging, and more! labels Feb 13, 2019
@legrego legrego requested a review from a team as a code owner February 13, 2019 17:29
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-security

@elasticmachine

This comment has been minimized.

@elasticmachine

This comment has been minimized.

@legrego legrego changed the title [WIP] - Convert account screen to React/EUI Convert account screen to React/EUI Feb 14, 2019
@legrego legrego added this to In progress in Security UX Feb 14, 2019
@spalger
Copy link
Contributor

spalger commented Feb 14, 2019

retest

@elasticmachine

This comment has been minimized.

@elasticmachine

This comment has been minimized.

@elasticmachine

This comment has been minimized.

@elasticmachine

This comment has been minimized.

@elasticmachine
Copy link
Contributor

💔 Build Failed

@legrego
Copy link
Member Author

legrego commented Feb 15, 2019

this is what I get for pushing updates without testing 😐

Copy link
Contributor

@kobelb kobelb left a comment

Choose a reason for hiding this comment

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

nit: When changing your own password, if you enter an incorrect password the validation error is initially displayed correctly, but if you click "Change password" again, it clears the validation error:

change-password

}

public static async getUser(username: string): Promise<User> {
const url = `${usersUrl}/${username}`;
Copy link
Contributor

Choose a reason for hiding this comment

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

We weren't doing so previously, and the validation on the forms themselves is likely mitigating against this, but can we use encodeURIComponent here, and else-where in this file, when building URLs just to be safe?

Copy link
Member Author

Choose a reason for hiding this comment

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

You got it! a03183d

@legrego
Copy link
Member Author

legrego commented Apr 15, 2019

nit: When changing your own password, if you enter an incorrect password the validation error is initially displayed correctly, but if you click "Change password" again, it clears the validation error

Good catch, fixed in 08b0ac5. Thanks!

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

Security UX automation moved this from Needs review to Reviewer approved Apr 15, 2019
@legrego legrego merged commit 031682d into elastic:master Apr 15, 2019
Security UX automation moved this from Reviewer approved to Done Apr 15, 2019
@legrego legrego deleted the security/reactify-account-screen branch April 15, 2019 20:56
legrego added a commit to legrego/kibana that referenced this pull request Apr 15, 2019
* WIP account management redesign

* style updates

* start implementing change password logic

* restyle

* remove api key management section

* improved change password validation

* first round of design edits

* cleanup and testing

* fix import

* fix translations

* fix error handling on user management page

* consolidate password change logic

* fix tests

* happy linter, happy life

* finish change password test

* removes unused translations

* fix typo in test

* fix change password functional test

* Design edits (#19)

- Made `fullWidth`
- Added a consistent password requirement help text
- Use `title` for toast
- Change username/email to us `dl`
- Don’t use html elements in tests

* clear password form on success

* copy edits

* fix handling of Change Password button

* use encodeURIComponent for user supplied data
@legrego legrego removed the review label Apr 15, 2019
@spalger
Copy link
Contributor

spalger commented Apr 15, 2019

Reverted in a70a2cd

spalger pushed a commit that referenced this pull request Apr 15, 2019
@legrego
Copy link
Member Author

legrego commented Apr 16, 2019

Resubmitted in #35151

legrego added a commit that referenced this pull request Apr 16, 2019
## Summary

This is a resubmission of #30977, which was reverted due to a functional test failure after merging.

"Release note: Refreshed the look-and-feel of the account management screen."
legrego added a commit to legrego/kibana that referenced this pull request Apr 16, 2019
## Summary

This is a resubmission of elastic#30977, which was reverted due to a functional test failure after merging.

"Release note: Refreshed the look-and-feel of the account management screen."
walterra pushed a commit to walterra/kibana that referenced this pull request Apr 23, 2019
* WIP account management redesign

* style updates

* start implementing change password logic

* restyle

* remove api key management section

* improved change password validation

* first round of design edits

* cleanup and testing

* fix import

* fix translations

* fix error handling on user management page

* consolidate password change logic

* fix tests

* happy linter, happy life

* finish change password test

* removes unused translations

* fix typo in test

* fix change password functional test

* Design edits (elastic#19)

- Made `fullWidth`
- Added a consistent password requirement help text
- Use `title` for toast
- Change username/email to us `dl`
- Don’t use html elements in tests

* clear password form on success

* copy edits

* fix handling of Change Password button

* use encodeURIComponent for user supplied data
walterra pushed a commit to walterra/kibana that referenced this pull request Apr 23, 2019
walterra pushed a commit to walterra/kibana that referenced this pull request Apr 23, 2019
## Summary

This is a resubmission of elastic#30977, which was reverted due to a functional test failure after merging.

"Release note: Refreshed the look-and-feel of the account management screen."
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
release_note:enhancement reverted Team:Security Team focused on: Auth, Users, Roles, Spaces, Audit Logging, and more! v7.2.0 v8.0.0
Projects
No open projects
Security UX
  
Done
Development

Successfully merging this pull request may close these issues.

Reactify & Redesign Account Management Screen
6 participants