move su password form into proper lightbox + some fixes (because prev…

…ious form acquired a bug preventing it from displaying above everything else)

Gemfile

@@ -31,6 +31,8 @@ gem 'whenever', :require => false # for cron jobs
 gem 'squeel' # (NEW GEM) use lightly - only using in ability.rb, until it is more established (Jan 2012)  ---------> supersedes meta_where
 gem 'tilt'
 gem 'simple-navigation', :git => 'git://github.com/ronalchn/simple-navigation.git', :branch => 'render_navigation.takes.block'
+gem 'simple_form'
+gem 'facebox-rails'
 
 gem 'pg'
 # Use unicorn as the web server

Gemfile.lock

@@ -95,6 +95,9 @@ GEM
     erubis (2.7.0)
     execjs (1.4.0)
       multi_json (~> 1.0)
+    facebox-rails (0.1.2)
+      railties (~> 3.0)
+      thor (~> 0.14)
     factory_girl (2.6.4)
       activesupport (>= 2.3.9)
     factory_girl_rails (1.7.0)
@@ -185,6 +188,9 @@ GEM
       libwebsocket (~> 0.1.3)
       multi_json (~> 1.0)
       rubyzip
+    simple_form (2.0.2)
+      actionpack (~> 3.0)
+      activemodel (~> 3.0)
     sprockets (2.1.3)
       hike (~> 1.2)
       rack (~> 1.0)
@@ -227,6 +233,7 @@ DEPENDENCIES
   coffee-rails (~> 3.2.1)
   debugger
   devise (~> 2.1.2)
+  facebox-rails
   factory_girl
   factory_girl_rails
   has_scope
@@ -245,6 +252,7 @@ DEPENDENCIES
   sass
   sass-rails (~> 3.2.3)
   simple-navigation!
+  simple_form
   sqlite3
   squeel
   strong_parameters!

app/assets/javascripts/application.js

@@ -2,16 +2,18 @@
 //= require jquery_ujs
 //= require jquery-ui.min
 //= require jquery-ui-timepicker-addon
+//= require jquery.event.hover-1.0
 //= require jquery.fileinput
-//= require jquery.countdown.js
+//= require jquery.countdown
 //= require jquery.ba-bbq
 //= require jquery.markitup
-//= require jquery.url.js
-//= require sets/markdown/set.js
+//= require jquery.url
+//= require sets/markdown/set
 //= require superfish
-//= require jquery.event.hover-1.0
 //= require history
 //= require ajax_pagination
+//= require jquery.facebox
+//= require jquery.facebox.adapter
 //= require_self
 
 

app/assets/javascripts/jquery.event.hover-1.0.js

@@ -44,7 +44,7 @@ function hoverHandler( event ){
 	var data = event.data || event;
 	switch ( event.type ){
 		case 'mouseenter': // mouseover
-			data.dist2 = 0; // init mouse distance²
+			data.dist2 = 0; // init mouse distance^2
 			data.event = event; // store the event
 			event.type = "hoverstart"; // hijack event
 			if ( $.event.handle.call( this, event ) !== false ){ // handle "hoverstart"
@@ -53,7 +53,7 @@ function hoverHandler( event ){
 				data.timer = setTimeout( compare, data.delay ); // start async compare
 				}
 			break;
-		case 'mousemove': // track the event, mouse distance² = x² + y²
+		case 'mousemove': // track the event, mouse distance^2 = x^2 + y^2
 			data.dist2 += Math.pow( event.pageX-data.event.pageX, 2 ) 
 				+ Math.pow( event.pageY-data.event.pageY, 2 ); 
 			data.event = event; // store current event
@@ -67,15 +67,15 @@ function hoverHandler( event ){
 				}
 			else $.event.remove( data.elem, "mousemove", hoverHandler ); // untrack
 			break;
-		default: // timeout compare // distance² = x² + y²  = ( speed * time )²
+		default: // timeout compare // distance^2 = x^2 + y^2  = ( speed * time )^2
 			if ( data.dist2 <= Math.pow( data.speed*( data.delay/1e3 ), 2 ) ){ // speed acceptable
 				$.event.remove( data.elem, "mousemove", hoverHandler ); // untrack
 				data.event.type = "hover"; // hijack event
 				if ( $.event.handle.call( data.elem, data.event ) !== false ) // handle "hover"
 					data.hovered++; // flag for "hoverend"
 				}
 			else data.timer = setTimeout( compare, data.delay ); // async recurse
-			data.dist2 = 0; // reset distance² for next compare
+			data.dist2 = 0; // reset distance^2 for next compare
 			break;
 		}
 	function compare(){ hoverHandler( data ); }; // timeout/recursive function

app/assets/javascripts/jquery.facebox.adapter.js

@@ -0,0 +1,14 @@
+/*
+// This file is used to delegate <a rel="facebox" /> links to the facebox jquery plugin.
+// This is preferred over binding on page-load, in case any additional facebox links are
+// loaded via AJAX.
+*/
+
+jQuery(document).ready(function($) {
+  $(document).on('click.facebox', 'a[rel*=facebox]', function(e) {
+    if (!this.href.match(/#/)) $(this).attr('href',$.param.querystring(this.href,{ajax_section:'lightbox'}));
+    $(this).facebox();
+    $(this).trigger('click.facebox');
+    return false;
+  });
+});

app/assets/stylesheets/application.css

@@ -1,14 +1,15 @@
 /*
-*= require style
-*= require nav-superfish
-*= require tab_box
 *= require skins/markitup/style
 *= require sets/markdown/style
 *= require jquery.countdown
 *= require jquery-ui-1.8.16.custom
 *= require fileinput
 *= require scaffold
 *= require ajax_pagination
+*= require jquery.facebox
+*= require style
+*= require nav-superfish
+*= require tab_box
 */
 
 

app/controllers/users_controller.rb

@@ -69,12 +69,19 @@ def destroy
   end
 
   def su
-    if current_user.valid_password?(params[:password])
-      session[:su] = (session[:su]||[]).push(current_user.id)
-      sign_in @user
-      redirect_to root_url, :notice => "su #{@user.username}"
+    if request.post?
+      if current_user.valid_password?(params[:password])
+        session[:su] = (session[:su]||[]).push(current_user.id)
+        sign_in @user
+        redirect_to root_url, :notice => "su #{@user.username}"
+      else
+        redirect_to request.referrer, :alert => "Password incorrect"
+      end
     else
-      redirect_to request.referrer, :alert => "Password incorrect"
+      respond_to do |format|
+        format.html
+        ajax_respond format, :section_id => "lightbox", :render => { :template => "users/su" }
+      end
     end
   end
 

app/views/layouts/application.html.erb

@@ -105,19 +105,5 @@
 	  </div>
         </div>
 </div>
-<div id="password-popup" style="display: none; position: fixed; background-color: rgba(1,1,1,0.5); width: 100%; height: 100%; z-index: 100;">
-  <div style="position: absolute; height: 100px; width: 300px; margin-top: -50px; margin-left: -150px; top: 50%; left: 50%; border: 1px solid black; background-color: white; text-align: center; padding: 20px;">
-    <%= form_tag(:method => 'post') do %>
-      <div class="field">
-        <%= label_tag :password %><br />
-        <%= password_field_tag :password, '', :autocomplete => 'off' %>
-      </div>
-      <div class="actions">
-        <input type="button" value="Cancel" style="margin-right: 20px;" onClick="this.form.reset(); $('#password-popup').css({'display':'none'});">
-        <%= submit_tag('Confirm', :style => "margin-left: 20px;") %>
-      </div>
-    <% end %>
-  </div>
-</div>
 </body>
 </html>

app/views/users/index.html.erb

@@ -47,7 +47,7 @@
         <td><%= link_to 'Destroy', user, :data => { :confirm => 'Are you sure?' }, :method => :delete if can? :destroy, user %></td>
       <% end %>
       <% if can? :su, user %>
-        <td><a href="#" onClick="su(<%= user.id %>); return false;">su</a></td>
+        <td><%= link_to "su", su_user_path(user), :rel => "facebox" %></td>
       <% end %>
     </tr>
   <% end %>

app/views/users/su.html.erb

@@ -0,0 +1,10 @@
+<%= form_tag su_user_path(@user), :method => 'post', :style => 'text-align: center;' do %>
+  <div class="field">
+    <%= label_tag :password %><br />
+    <%= password_field_tag :password, '', :autocomplete => 'off' %>
+  </div>
+  <div class="actions" style="padding: 0px; margin: 0px;">
+    <input type="button" value="Cancel" style="margin-right: 20px;" onClick="<%= (@_ajax_section == :lightbox) ? "jQuery(document).trigger(\"close.facebox\");" : "History.back();" %>">
+    <%= submit_tag('Confirm', :style => "margin-left: 20px;") %>
+  </div>
+<% end %>

config/routes.rb

@@ -50,6 +50,7 @@
       put 'add_role'
       put 'remove_role'
       post 'su'
+      get 'su'
       get 'admin_email'
       post 'admin_email', :action => :send_admin_email
       post 'add_brownie'