Difference between revisions of "Login to a Mediawiki without leaving your page"

From Organic Design wiki
m
(Change source-code blocks to standard format)
 
Line 4: Line 4:
  
 
There are two parts, the javascript in the head and a form in the body.
 
There are two parts, the javascript in the head and a form in the body.
{{code|<php>
+
<source lang="php">
 
// JAVASCRIPT
 
// JAVASCRIPT
  
Line 69: Line 69:
 
<?php } ?>
 
<?php } ?>
 
</ul>
 
</ul>
</php>}}
+
</source>

Latest revision as of 18:11, 22 May 2015

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>