Reactify & Redesign Account Management Screen

[legrego]

The account management page should be converted from angular to React/EUI. As part of this effort, the new page should support:

• Optionally showing "Change Password" functionality if the current account supports this.
• Optionally showing "Token Management" functionality if the Token service is enabled in Elasticsearch.
• Optionally showing "API Key Management" functionality if the API Key feature is enabled in Elasticsearch. (see also, API Key Management #25729)
• Should be designed in a way to support user preferences, which aren't available yet, but could be in the future.

To start the conversation, here's a quick mockup I did:

Code for mockup above is here: https://github.com/legrego/kibana/tree/security/reactify-account-screen

Once it gets closer and we agree an an overall approach, I'll open a PR from that branch.

Design team, I pinged you so you were aware of this. I welcome as much involvement as you're willing to give, but don't want to force any of this on you. There's no rush on my end, this is just a "downtime" side project of mine.

[elasticmachine]

Pinging @elastic/kibana-design

[elasticmachine]

Pinging @elastic/kibana-security

[cchaos]

I'm so glad someone finally recognized this page needs help 😄

I think you have a good start, but I think we can combine the two areas into one panel and just always display the change password form even if they don't use it. There's no real necessity to hiding it.

Here's an idea:

[legrego]

I like it!

Here's an updated sample:

What do you think we should do for accounts where password change isn't an option? The old form shows a message explaining that password change is not available for this account. This was a recent enhancement...before, we would always show the change password form, even if the account didn't support it. I copied the message over from the old form, but it's repetitive with the description at the moment:

[cchaos]

I would honestly just leave the right column empty and let the left column describe that it cannot be changed.

[legrego]

That works for me!