Login to a Mediawiki without leaving your page

The wiki must have jquery.js linked to. From 1.16 onwards this comes with the MW package. Also dropclick.js if you want to use this fancy dropdown.

This code was written for a 1.16 skin. It uses ajax and api.php.

There are two parts, the javascript in the head and a form in the body.

// JAVASCRIPT

$out->addScript(
	'<script type="text/javascript">
			function ajaxLogin() { // clears boxes if username or password is wrong
				var lgname = $("#wpName").attr("value"); // username
				var lgpassword = $("#wpPassword").attr("value"); // password
				var action = "login";
				if ( document.getElementById("fe3").checked == true ) { 
					location.href = "' . $wgScriptPath . '/index.php?title=Special:UserLogin&wpName=" + lgname + "&wpPassword=" + lgpassword + "&wpRemember=1&returnto=" + "' . $wgTitle->getText() .'"; // go to login page for remember me
				}
				else { 
					$.post("' . $wgScriptPath . '/api.php?action=" + action + "&lgname=" + lgname + "&lgpassword=" + lgpassword, // deliver login + password to api using ajax
						function(data) { // callback function passed as parameter, called on success
							var lgtoken = data.replace(/([\s\S]*token=&quot;)([\s\S]*)(&quot; cookie[\s\S]*)/, "$2"); // extract login token
							$.post("' . $wgScriptPath . '/api.php?action=" + action + "&lgname=" + lgname + "&lgpassword=" + lgpassword + "&lgtoken=" + lgtoken);	// re-post with the login token
							window.location.href = window.location.href; // reload page now that user is logged in
						}
					);
				}
			}
			function ajaxLogout() { 
				$.post("' . $wgScriptPath . '/api.php?action=logout"); // logout
				window.location.href = window.location.href; // reload in new unlogged state
			}
	</script>'
);
?>
// HTML

<ul class="log-in" id="menu">
<?php if ( $wgUser->isLoggedIn() ) { ?>
	<li><a class="sign-in" href="" onclick="ajaxLogout()"><span><em>Sign Out</em></span></a></li> 
<?php } else { ?>
	<li><a class="sign-in" href=""><span><em>Sign in</em></span></a>
		<div class="sign-in-pop">
			<div class="t"></div>
			<div class="m">
				<form class="sign-in-form">
					<fieldset>
						<div class="row">
							<label for="wpName" class="label">Username</label>
							<div class="input"><input id="wpName" name="wpName" class="loginText" type="text" /></div>
						</div>
						<div class="row">
							<label for="wpPassword" class="label">Password</label>
							<div class="input"><input id="wpPassword" class="loginPassword" name="wpPassword" type="password" /></div>
						</div>
						<div class="row">
							<input type="button" class="submit" onclick="ajaxLogin()" value="Log In" />
							<div class="remember">
								<input id="fe3" type="checkbox" name="chk1" /><label for="fe3">Remember Me</label>
								<?php print('<a class="forgot" href="'.$wgScriptPath.'/index.php/Special:UserLogin">Email Password</a>'); ?>
							</div>
						</div>
					</fieldset>
				</form>
			</div>
			<div class="b"></div>
		</div>
	</li>

<?php } ?>
</ul>