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
<hr>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...