DG MS; popup on services, inlined in the composer

app/assets/javascripts/app/models/user.js

@@ -11,5 +11,9 @@ app.models.User = Backbone.Model.extend({
 
   expProfileUrl : function(){
     return "/people/" + app.currentUser.get("guid") + "?ex=true"
+  },
+
+  isServiceConfigured : function(providerName) {
+    return _.include(this.get("configured_services"), providerName)
   }
 });

app/assets/javascripts/app/views/services_selector_view.js

@@ -1,5 +1,28 @@
 app.views.ServicesSelector = app.views.Base.extend({
 
-  templateName : "services-selector"
+  templateName : "services-selector",
+
+  events : {
+    "click label" : "askForAuth"
+  },
+
+  services : [
+    'facebook',
+    'twitter',
+    'tumblr'
+  ],
+
+  presenter : function() {
+    return _.extend(this.defaultPresenter(), {services : this.services})
+  },
+
+  askForAuth : function(evt){
+    var $target = $(evt.target);
+
+    if(app.currentUser.isServiceConfigured($target.data('provider'))) { return }
+
+    var serviceUrl = $target.data('url')
+    window.open(serviceUrl, 'popup', 'height=400,width=500')
+  }
 
 });

app/assets/stylesheets/new_styles/_base.scss

@@ -416,17 +416,29 @@ div[data-template=flow] {
   label { display : inline;}
 
   img {
+    @include transition(opacity);
+
     cursor : pointer;
     height : 28px;
     width : 28px;
+  }
 
-    &:hover {
+  input + label {
-      @include opacity(0.6);
+    &:hover img {
+      @include box-shadow(0, 0, 10px, rgba(255,255,255,0.6))
     }
   }
 
   input:not(:checked) + label {
-    @include opacity(0.4);
+    img {
+      @include opacity(0.4);
+    }
+  }
+
+  input:checked + label {
+    &:hover img {
+      @include opacity(1);
+    }
   }
 
   input {

app/assets/templates/services-selector.jst.hbs

@@ -1,8 +1,8 @@
 <!--*CSS MAGIC* CHECKBOX IS HIDDEN AND IS CHECKED BY CLICKING THE LABEL, CHANGE THIS AT YOUR OWN PERIL, RUN JASMINE AFTER-->
 <div class="magic-service-selector">
-    {{#each current_user.services}}
+    {{#each services}}
-        <input id="service_toggle_{{provider}}" type="checkbox" name="services" class="service" value="{{provider}}" />
+        <input id="service_toggle_{{this}}" type="checkbox" name="services" class="service" value="{{this}}" />
-        <label for="service_toggle_{{provider}}"><img class="legacy-provider-image" src="/assets/social_media_logos/{{provider}}-32x32.png" data-provider="{{provider}}" /></label>
+        <label for="service_toggle_{{this}}"><img class="legacy-provider-image" src="/assets/social_media_logos/{{this}}-32x32.png" data-provider="{{this}}" data-url="/auth/{{this}}" /></label>
     {{/each}}
 </div>
 

app/controllers/services_controller.rb

@@ -49,11 +49,7 @@ class ServicesController < ApplicationController
       end
     end
 
-    if current_user.getting_started
+    render :text => ("<script>window.close()</script>")
-      redirect_to  getting_started_path
-    else
-      redirect_to services_url
-    end
   end
 
   def failure

app/presenters/user_presenter.rb

@@ -12,7 +12,8 @@ class UserPresenter
         :admin => admin,
         :aspects => aspects,
         :services => services,
-        :following_count => self.user.contacts.receiving.count
+        :following_count => self.user.contacts.receiving.count,
+        :configured_services => self.configured_services
       }
     ).to_json(options)
   end
@@ -21,6 +22,10 @@ class UserPresenter
     ServicePresenter.as_collection(user.services)
   end
 
+  def configured_services
+    user.services.map{|service| service.provider }
+  end
+
   def aspects
     AspectPresenter.as_collection(user.aspects)
   end

app/views/shared/_add_remove_services.haml

@@ -16,4 +16,4 @@
 
 - AppConfig.configured_services.each do |service|
   - unless @services.any?{|x| x.provider == service}
-    %h4= link_to t("services.index.connect_to_#{service}"), "/auth/#{service}"
+    %h4= link_to t("services.index.connect_to_#{service}"), "#", :onclick => "window.open('/auth/#{service}', 'popup', 'height=400,width=500')"

config/initializers/omniauth.rb

@@ -20,7 +20,7 @@ Rails.application.config.middleware.use OmniAuth::Builder do
     provider :tumblr, SERVICES['tumblr']['consumer_key'], SERVICES['tumblr']['consumer_secret']
   end
   if SERVICES['facebook'] && SERVICES['facebook']['app_id'] && SERVICES['facebook']['app_secret']
-    provider :facebook, SERVICES['facebook']['app_id'], SERVICES['facebook']['app_secret'],  { :scope => "publish_stream,email,offline_access",
+    provider :facebook, SERVICES['facebook']['app_id'], SERVICES['facebook']['app_secret'],  { :display => "popup", :scope => "publish_stream,email,offline_access",
                                                                                                :client_options => {:ssl => {:ca_file => EnviromentConfiguration.ca_cert_file_location}}}  
   end
 end

spec/controllers/services_controller_spec.rb

@@ -47,18 +47,6 @@ describe ServicesController do
         }.to change(@user.services, :count).by(1)
       end
 
-      it 'redirects to getting started if the user is getting started' do
-        @user.getting_started = true
-        post :create, :provider => 'twitter'
-        response.should redirect_to getting_started_path
-      end
-
-      it 'redirects to services url if user is not getting started' do
-        @user.getting_started = false
-        post :create, :provider => 'twitter'
-        response.should redirect_to services_url
-      end
-
       it 'creates a twitter service' do
         Service.delete_all
         @user.getting_started = false

spec/javascripts/app/models/user_spec.js

@@ -12,7 +12,14 @@ describe("app.models.User", function(){
       this.user.set({id : 1})
       expect(this.user.authenticated()).toBeTruthy();
     });
+  });
 
+  describe("isServiceConnected", function(){
+    it("checks to see if the sent provider name is a configured service", function(){
+      this.user.set({configured_services : ["facebook"]})
+      expect(this.user.isServiceConfigured("facebook")).toBeTruthy()
+      expect(this.user.isServiceConfigured("tumblr")).toBeFalsy()
+    });
   });
 });
 

spec/javascripts/app/views/services_selector_view_spec.js

@@ -23,12 +23,33 @@ describe("app.views.ServicesSelector", function(){
     // this tests the crazy css we have in a bassackwards way
     // check out toggling the services on the new publisher and make sure it works if you change stuff.
     it("selects the checkbox when the image is clicked", function(){
-      expect($("label[for=service_toggle_facebook]").css("opacity")).toBeLessThan(0.8) //floating point weirdness, be safe.
+      expect($("label[for=service_toggle_facebook] img").css("opacity")).toBeLessThan(0.8) //floating point weirdness, be safe.
       this.view.$("input[value='facebook']").select()
 
         waitsFor(function(){
-          return $("label[for=service_toggle_facebook]").css("opacity") == 1
+          return $("label[for=service_toggle_facebook] img").css("opacity") == 1
       })
     })
   });
+
+  describe("askForAuth", function() {
+    beforeEach( function(){
+      this.evt = jQuery.Event("click");
+      this.evt.target = "<label data-url='testing' data-provider='facebook'>"
+
+      spyOn(window, "open")
+    });
+
+    it("opens a window if app.currentUser does not have the service configured", function() {
+      app.currentUser.set({configured_services : []})
+      this.view.askForAuth(this.evt)
+      expect(window.open).toHaveBeenCalled()
+    });
+
+    it("doesn't open a window if app.currentUser has the service already configured", function() {
+      app.currentUser.set({configured_services : ['facebook']})
+      this.view.askForAuth(this.evt)
+      expect(window.open).not.toHaveBeenCalled()
+    });
+  })
 });

spec/presenters/user_presenter_spec.rb

@@ -26,4 +26,12 @@ describe UserPresenter do
       @presenter.services.should include(:provider => 'fakebook')
     end
   end
+
+  describe '#configured_services' do
+    it 'displays a list of the users configured services' do
+      fakebook = stub(:provider => 'fakebook')
+      bob.stub(:services).and_return([fakebook])
+      @presenter.configured_services.should include("fakebook")
+    end
+  end
 end