Fix complete profile button to workaround css bugs < Fx 8

apps/users/templates/users/profile_form.html

@@ -15,6 +15,6 @@
     </ul>
   </fieldset>
   <p class="footer-submit">
-    <button type="submit">{{ _('Complete Profile') }}</button>
+    <a class="complete-profile button">{{ _('Complete Profile') }}</a>
   </p>
 </form>

media/js/zamboni/browserid_support.js

@@ -125,17 +125,17 @@ function completeUserProfile(options) {
 function loadProfileCompletionForm($root, options) {
     if (!options) options = {};
     var $error = $('.notification-box.error', $root),
-        win = options.window || window;
-
+        win = options.window || window,
+        $form = $('form', $root),
+        handler;
     $('#browserid-login').hide(); // Don't let people log in twice; will cause error
+    $root.slideDown();
     $(window).trigger('resize'); // I hate this so much. I vow to someday fix this properly.
-
     $('input[type="text"]', $root).eq(0).focus();
-    $('form', $root).submit(function(evt) {
-        var $form = $(this);
+    function handler(evt) {
         evt.preventDefault();
         $error.hide();
-        $('button[type="submit"]', $form).addClass('loading-submit');
+        $('a.complete-profile', $form).addClass('loading-submit');
         $.ajax({url: $form.attr('action'),
                 type: 'POST',
                 data: $form.serialize(),
@@ -176,7 +176,9 @@ function loadProfileCompletionForm($root, options) {
                    $error.html(ul).show();
                    $form.trigger('badresponse.profile_completion');
                });
-    });
+    }
+    $('a.complete-profile', $root).click(handler);
+    $form.submit(handler);
 }
 
 $(document).ready(function () {initBrowserID(window);});

media/js/zamboni/tests/profile_tests.js

@@ -24,7 +24,7 @@ asyncTest('success -> redirect', function() {
         $.mockjaxClear(resultMock);
         start();
     });
-    $form.trigger('submit');
+    $('.complete-profile', sb).trigger('click');
 });
 
 asyncTest('success -> callback', function() {
@@ -43,7 +43,7 @@ asyncTest('success -> callback', function() {
     $form.attr('action', '/complete-profile-cb');
     loadProfileCompletionForm(sb, {'window': mockWindow,
                                    to: {on: redirectOb, fire: 'finish'}});
-    $form.trigger('submit');
+    $('.complete-profile', sb).trigger('click');
 });
 
 asyncTest('success -> object redirect', function() {
@@ -61,7 +61,7 @@ asyncTest('success -> object redirect', function() {
     });
     $form.attr('action', '/complete-profile-cb-to');
     loadProfileCompletionForm(sb, {'window': mockWindow, to: '/to-elsewhere'});
-    $form.trigger('submit');
+    $('.complete-profile', sb).trigger('click');
 });
 
 asyncTest('form error', function() {
@@ -79,7 +79,7 @@ asyncTest('form error', function() {
         $.mockjaxClear(resultMock);
         start();
     });
-    $form.trigger('submit');
+    $('.complete-profile', sb).trigger('click');
 });
 
 asyncTest('internal error', function() {
@@ -95,7 +95,7 @@ asyncTest('internal error', function() {
         $.mockjaxClear(resultMock);
         start();
     });
-    $form.trigger('submit');
+    $('.complete-profile', sb).trigger('click');
 });
 
 module('profile form load', {

templates/qunit/qunit.html

@@ -186,7 +186,7 @@
         <input type="text" name="username" id="id_username">
         <label for="id_display_name">Display Name</label>
         <input type="text" name="display_name" id="id_display_name">
-        <button type="submit">Complete Profile</button>
+        <a class="complete-profile">Complete Profile</a>
       </form>
     </div>
   </div>
@@ -201,7 +201,7 @@
           data-post-login-url="/elsewhere">
       <input type="text" name="username">
       <input type="text" name="display_name">
-      <button type="submit">Complete Profile</button>
+      <a class="complete-profile">Complete Profile</a>
     </form>
   </div>
   <div id="profile-form-modal-test">