A twitter + facebook connection wrapper.

socialism.css

  [data-state=disconnected] legend:after { content:'connect' }
  [data-state=connected] legend:after { content:'disconnect' }
  [data-state=disconnecting] legend:after { content:'cancel' }
  .connect, .connected, .disconnecting { display:none }
  [data-state=connected] .connected, 
  [data-state=disconnected] .connect,
  [data-state=disconnecting] .disconnecting { display:block }

socialism.html

<section id=connections>
    <form action="/users/me#facebook" method=post class=active data-callback=disconnect>
      <fieldset>
        <legend data-ga="#legend">Facebook</legend>
        <p>
          <em>Sign in with your Facebook <br> or Twitter account</em>
          Link your accounts here to sign in with one click and share effortlessly.
        </p>
        <p class=connect>
          <button type=button>Connect my Facebook account</button>
        </p>
        <p class=connected>Connected</p>
        <p class=disconnecting>
          <em class=error>
            This account has no password! You&rsquo;ll need to create one before
            you disconnect so you can continue to sign into Small Demons.
          </em>
          <input name=password type=password required id=fbpasswordinput
                 placeholder="${c.validate['password']['placeholder']}"
                 minlength="${c.validate['password']['minlength']}"
                 maxlength="${c.validate['password']['maxlength']}"  />
          <button>Disconnect</button>
          <button title=Close data-ga="#cancel-facebook-connect" type=button>Cancel</button>
        </p>
      </fieldset>
    </form>
    
    <form action="/users/me#twitter" method=post class=active data-callback=disconnect>
      <fieldset>
        <legend data-ga="#legend">Twitter</legend>
        <p></p>
        <p class=connect>
          <button type=button id=tw_connect>Connect my Twitter account</button>
        </p>
        <p class=connected>Connected</p>
        <p class=disconnecting>
          <em class=error>
            This account has no password! You&rsquo;ll need to create one before
            you disconnect so you can continue to sign into Small Demons.
          </em>
          <input name=password type=password required id=twpasswordinput
                 placeholder="${c.validate['password']['placeholder']}"
                 minlength="${c.validate['password']['minlength']}"
                 maxlength="${c.validate['password']['maxlength']}"  />
          <button>Disconnect</button>
          <button title=Close data-ga="#cancel-twitter-connect" type=button>Cancel</button>
        </p>
      </fieldset>
    </form>
  </section>

socialism.js

// socialism
$.ajax({
  url: '/users/me',
  headers: { 'X-SD-Ajax-Token': SmallDemons.AjaxToken },
  success: function(user){
    
    // set initial states
    $('[action$=facebook]').attr('data-state', user.fb_user_id? 'connected' : 'disconnected');
    $('[action$=twitter]').attr('data-state', user.tw_user_id? 'connected': 'disconnected');
    
    // define connect events
    $('[action$=facebook], [action$=twitter]')
      .on('connect disconnect', function(event){
        var form = this,
            site = $(form).attr('action').match(/(twitter|facebook)/)[0];
        ({
          connect: function(yield){
            // get permissions
            ({ twitter: SmallDemons.Twitter.connect,
              facebook: SmallDemons.Facebook.connect
            })[site](function(authResponse){
              
              // notify server
              yield(({
                twitter: { 
                  tw_access_token: authResponse.access_token, 
                  tw_access_token_secret: authResponse.access_token_secret
                },
                facebook: { fb_access_token: authResponse.accessToken }
              })[site], 'connected');
            });
            
          },
          disconnect: function(yield){
            if (!user.has_password)
              return $(this).attr('data-state', 'disconnecting');
            
            // notify server
            yield(({
              twitter: { tw_access_token:'', tw_access_token_secret: '' },
              facebook: { fb_access_token: '' }
            })[site], 'disconnected');
            
          }
        })[event.type](function(post_data, data_state){
          $.ajax({
            type: 'POST',
            url: '/users/me',
            data: post_data,
            headers: { 'X-SD-Ajax-Token': SmallDemons.AjaxToken },
            success: function(){ $(form).attr('data-state', data_state); },
            error: function(jqXHR){
              jqXHR.responseText.replace(/no_password_set/, function(){
                $(form).attr('data-state', 'disconnecting');
              }); 
            }
          });
        });
        
      })
      
      // bind events
      .on('click', '.connect button, [data-state=disconnected] legend', function(){
        $(this).closest('form').trigger('connect');
      })
      .on('click', '[data-state=connected] legend', function(){
        $(this).closest('form').trigger('disconnect');
      })
      .on('click', '.disconnecting [type=button], [data-state=disconnecting] legend', function(){
        $(this).closest('form').attr('data-state', 'connected');
      });
  }
});