summaryrefslogtreecommitdiff
path: root/resources/src/mediawiki.special/mediawiki.special.userlogin.common.js
blob: f5289deea015939d100b6b41dda185ea0559f0f0 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
/*!
 * JavaScript for login and signup forms.
 */
( function ( mw, $ ) {
	// Move the FancyCaptcha image into a more attractive container.
	// The CAPTCHA is in a <div class="captcha"> at the top of the form. If it's a FancyCaptcha,
	// then we remove it and insert it lower down, in a customized div with just what we need (e.g.
	// no 'fancycaptcha-createaccount' message).
	function adjustFancyCaptcha( $content, buttonSubmit ) {
		var $submit = $content.find( buttonSubmit ),
			tabIndex,
			$captchaStuff,
			$captchaImageContainer,
			// JavaScript can't yet parse the message 'createacct-imgcaptcha-help' when it
			// contains a MediaWiki transclusion, so PHP parses it and sends the HTML.
			// This is only set for the signup form (and undefined for login).
			helpMsg = mw.config.get( 'wgCreateacctImgcaptchaHelp' ),
			helpHtml = '';

		if ( !$submit.length ) {
			return;
		}
		tabIndex = $submit.prop( 'tabIndex' ) - 1;
		$captchaStuff = $content.find( '.captcha' );

		if ( $captchaStuff.length ) {
			// The FancyCaptcha has this class in the ConfirmEdit extension since 2013-04-18.
			$captchaImageContainer = $captchaStuff.find( '.fancycaptcha-image-container' );
			if ( $captchaImageContainer.length !== 1 ) {
				return;
			}

			$captchaStuff.remove();

			if ( helpMsg ) {
				helpHtml = '<small class="mw-createacct-captcha-assisted">' + helpMsg + '</small>';
			}

			// Insert another div before the submit button that will include the
			// repositioned FancyCaptcha div, an input field, and possible help.
			$submit.closest( 'div' ).before( [
				'<div>',
					'<label for="wpCaptchaWord">' + mw.message( 'createacct-captcha' ).escaped() + '</label>',
					'<div class="mw-createacct-captcha-container">',
						'<div class="mw-createacct-captcha-and-reload" />',
						'<input id="wpCaptchaWord" class="mw-ui-input" name="wpCaptchaWord" type="text" placeholder="' +
							mw.message( 'createacct-imgcaptcha-ph' ).escaped() +
							'" tabindex="' + tabIndex + '" autocapitalize="off" autocorrect="off">',
							helpHtml,
					'</div>',
				'</div>'
			].join( '' ) );

			// Stick the FancyCaptcha container inside our bordered and framed parents.
			$captchaImageContainer
				.prependTo( $content.find( '.mw-createacct-captcha-and-reload' ) );

			// Find the input field, add the text (if any) of the existing CAPTCHA
			// field (although usually it's blanked out on every redisplay),
			// and after it move over the hidden field that tells the CAPTCHA
			// what to do.
			$content.find( '#wpCaptchaWord' )
				.val( $captchaStuff.find( '#wpCaptchaWord' ).val() )
				.after( $captchaStuff.find( '#wpCaptchaId' ) );
		}
	}

	$( function () {
		// Work with both login and signup form
		adjustFancyCaptcha( $( '#mw-content-text' ), '#wpCreateaccount, #wpLoginAttempt' );
	} );
}( mediaWiki, jQuery ) );