authentication - Separators in user config screen (Polymer/material)

I managed to create a usable screen to manage credentials. It's a bit tricky, because users can set login/password pair, as well as Facebook. However, a user could have just facebook, just login/pass, or both (all linked to the same account).

Here is what it looks like when both user/pass pair and Facebook are linked:

Here is what it looks like when login/pass are linked, but Facebook isn't:

Here is what it looks like when only Facebook is linked:

The screens are "usable" (meaning that they pass some rather strict usability tests I ran this morning) mainly thanks to @plainclothes who gave some important feedback. However... now that usability is done, I really want this form to look pretty.

I think the main issue is that it needs separation for the three different sections. if I use

---

s, they get confused with the input fields. And I could't find anything in material that would tell me how to face this.

Ideas will be amazingly welcome. I have no aesthetic taste...

Answer

You can try Material Design's expansion panels. They will give you strict separation of the three sections, enhance readability, enhance the information architecture and also make the screen more aesthetically pleasing.

The following is my advice on implementing the expansion panels:

1. 
   

   First panel should have a label Username and in the collapsed state should show the current username. Expanded it should allow the user to update the username with save and cancel buttons.

   
   


2. 
   

   Second panel should have the label Password and in the collapsed state can possibly show password set. Expanded it should allow the user to update the password with update and cancel buttons.

   
   


3. 
   

   Third panel should have the label Password login and in the collapsed state should show Active. Expanded it should present disable password login and cancel buttons.

   
   
   


4. 
   

   Fourth panel should have the label Facebook login and in the collapsed state should show Linked or Unlinked depending on the state. Expanded it should present Link Facebook (or Unlink Facebook login) and cancel buttons.

   
   


5. 
   

   The ordering and presence of panels should of course depend on the enabled login methods.

   
   

List alternative (edit)

To reduce the interaction complexity of this design you can opt for a list instead of expansion panels. Instead of panels you will use list items. Instead of collapsing and expansion states, all list items will take the user to a secondary page when clicked. This will allow you to keep the benefits of expansion panels but reduce the implementation costs.

Additional suggestions

1. 
   

   I would also suggest presenting a confirmation prompt for all login disabling actions. These are destructive actions that the user would not want to accidentally perform.

   
   


2. 
   

   You allow users to link Facebook yet don't give them the ability to add password login. I would suggest making this an option as well, since users who originally registered with Facebook may want to create a login.

   
   


3. 
   

   I don't see it here or in your previous post but I hope you have logic and an error state that handle users trying to remove all forms of login.