|
<?xml version="1.0" encoding="utf-8" ?> |
|
<!DOCTYPE html |
|
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" |
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" |
|
> |
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-NZ" lang="en-NZ"> |
|
<head> |
|
<title>Electronic resource login</title> |
|
|
|
<style type="text/css"> |
|
/* <![CDATA[ */ |
|
.login { |
|
padding: 1em; |
|
} |
|
|
|
#login1 { |
|
background-color: lightyellow; |
|
} |
|
|
|
#login2 { |
|
background-color: lightblue; |
|
} |
|
/* ]]> */ |
|
</style> |
|
|
|
<script type="application/ecmascript"> |
|
// <![CDATA[ |
|
window.onload = function() { |
|
|
|
var selectionForm = document.createElement('form'); |
|
selectionForm.setAttribute('name', 'logintype'); |
|
selectionForm.setAttribute('id', 'logintype'); |
|
|
|
var container = document.getElementById('authforms'); |
|
authforms = container.getElementsByTagName('form'); // NB. global scope here |
|
|
|
for (i in labels = ['AUTH1','AUTH2']) { |
|
var seq = parseInt(i) + 1; |
|
var id = 'auth' + seq; |
|
var lbl = document.createElement('label'); |
|
lbl.setAttribute('for', id); |
|
var txt = document.createTextNode(labels[i] + ":\n"); |
|
lbl.appendChild(txt); |
|
selectionForm.appendChild(lbl); |
|
var rdo = document.createElement('input'); |
|
rdo.setAttribute('type', 'radio'); |
|
rdo.setAttribute('id', id); |
|
rdo.setAttribute('name', 'authtype'); |
|
// NB checked spec and @value not strictly required to be valid |
|
if ( authforms[i].getAttribute('class').indexOf('default') > 0 ) { |
|
rdo.setAttribute('checked', 'checked'); |
|
} else { |
|
authforms[i].style.display = 'none'; // not sure why but I couldn't just call showForm(authforms[i]) within if block - won't rehide |
|
} |
|
rdo.setAttribute('onchange', 'showForm(authforms[' + i + '])'); |
|
selectionForm.appendChild(rdo); |
|
} |
|
|
|
container.parentNode.insertBefore(selectionForm, container); |
|
|
|
} |
|
|
|
showForm = function(frm) { |
|
if (authforms === undefined) { |
|
authforms = frm.parentNode.getElementsByTagName('form'); |
|
} |
|
|
|
for (i=0; i < authforms.length; i++) { |
|
authforms[i].style.display = ( authforms[i] === frm ? 'block' : 'none' ); |
|
} |
|
} |
|
// ]]> |
|
</script> |
|
|
|
</head> |
|
|
|
<body> |
|
|
|
<h1>Electronic Resource Login</h1> |
|
|
|
<p class="lead-in instruction"> |
|
Please login using <strong>one</strong> of these methods: |
|
</p> |
|
|
|
<div id="authforms"> |
|
<form class="login default" id="login1" method="post" action="action1"> |
|
<fieldset> |
|
<legend>Auth method 1</legend> |
|
<label for="user1">Username1:</label> |
|
<input id="user1" name="user1" type="text" /> |
|
<label for="pass1">Password1:</label> |
|
<input id="pass1" name="pass1" type="password" /> |
|
</fieldset> |
|
<div> |
|
<input type="hidden" name="auth" value="auth1" /> |
|
<input name="submit1" type="submit" value="Login1" /> |
|
</div> |
|
</form> |
|
|
|
<form class="login" id="login2" method="post" action="action2"> |
|
<fieldset> |
|
<legend>Auth method 2</legend> |
|
<label for="user2">Username2:</label> |
|
<input id="user2" name="user2" type="text" /> |
|
<label for="pass2">Password2:</label> |
|
<input id="pass2" name="pass2" type="password" /> |
|
</fieldset> |
|
<div> |
|
<input type="hidden" name="auth" value="auth2" /> |
|
<input name="submit2" type="submit" value="Login2" /> |
|
</div> |
|
</form> |
|
</div> |
|
|
|
</body> |
|
</html> |
