Move template header inside form so CAPTCHA works

Also wrap it inside a section tag so the form's styling of gray labels
and full-width input fields doesn't apply to the CAPTCHA.  The same fix
is in the new Create account form (though that uses JavaScript to
reposition the FancyCaptcha image).

CSS gives the section a small bottom margin to space it from the form
contents, small enough to not affect form layout if there is nothing
in the template header.

Bug: 47371
Change-Id: I1523fe6551585ba731b0ca4207e22d614d0a46d8

diff --git a/includes/templates/UserloginVForm.php b/includes/templates/UserloginVForm.php
index a944c0a..0948a20 100644 (file)
--- a/includes/templates/UserloginVForm.php
+++ b/includes/templates/UserloginVForm.php
@@ -31,8 +31,6 @@ class UserloginTemplateVForm extends BaseTemplate {
 ?>
 <div class="mw-ui-container">
        <?php
-       // Some extensions including CAPTCHAs add content to header on UserLoginForm hook.
-       $this->html( 'header' );
        if ( $this->haveData( 'languages' ) ) {
        ?>
                <div id="languagelinks">
@@ -43,6 +41,9 @@ class UserloginTemplateVForm extends BaseTemplate {
        ?>
 <div id="userloginForm">
 <form name="userlogin" class="mw-ui-vform" method="post" action="<?php $this->text( 'action' ); ?>">
+       <section class="mw-form-header">
+               <?php $this->html( 'header' ); /* extensions such as ConfirmEdit add form HTML here */ ?>
+       </section>
        <?php
 
        if ( $this->data['message'] ) {

diff --git a/resources/mediawiki.special/mediawiki.special.vforms.css b/resources/mediawiki.special/mediawiki.special.vforms.css
index d9b950b..ca9fc91 100644 (file)
--- a/resources/mediawiki.special/mediawiki.special.vforms.css
+++ b/resources/mediawiki.special/mediawiki.special.vforms.css
@@ -16,6 +16,11 @@
        font-size: 0.8em;
 }
 
+/* Put some space under template's header, which may contain CAPTCHA HTML.*/
+section.mw-form-header {
+       margin-bottom: 10px;
+}
+
 /*
  * Besides errorbox there could be warningbox, successbox, msgbox, though
  * spage has never seen these in practice.