Login management

I have written a really cool app that allows you to login and register using Facebook and/or login/password pair. The login and registration screens are the usual story:

Up to this point, users know what to do, and it's pretty much business as usual.

The problem is with the "management" screen. Users in my app are able to:

1) Change their login/pass, or disable login/pass login altogether 2) Link/unlink a facebook account, or disable facebook login altogether

The screen that manages this is this:

Yes, it's messy. At this point:

• users can change their username
• users can change their password
• They will activate the changes by pressing "save".
• If the password fields are empty, the password is left untouched
• If they click on the rubbish bin next to "save", login via login/password pair will no longer be possible
• users can activate facebook login by clicking on the facebook login
• if they click on the rubbish bin next to the facebook button, login via facebook will no longer be possible

This is what the screen looks like when Facebook is active:

It's terrible and it fails a huge number of usability tests. I am thinking along these lines:

• Separate the UI in two sections:

• Username.

  • If a username is NOT set, then show the form as it is, with user, password and password confirmation.
  • If a username is set, then have username screen split into three:
  • Change your username
  • Delete your username
  • Change your password

• Facebook. The current interface is a disgrace, with the buttons going opaque. What would a better way be?

Ideas welcome!