Login to a Mediawiki without leaving your page
From Organic Design wiki
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=")([\s\S]*)(" 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>