Skip to content

Instantly share code, notes, and snippets.

@LincolnUniLTL

LincolnUniLTL/login.html

Last active September 15, 2023 12:43
Show Gist options
  • Save LincolnUniLTL/d19700b8be66d4f1ad6d to your computer and use it in GitHub Desktop.
Save LincolnUniLTL/d19700b8be66d4f1ad6d to your computer and use it in GitHub Desktop.
Download ZIP
Dual (or more) authentication method login form
Raw
readme.md

Template of HTML form created to enable dual authentication login methods.

Created to unobtrusively allow different authentication methods to electronic resources for different kinds of library patrons.

  • progressively enhanced (so works without Javascript)
  • semantic markup
  • valid XHTML 1 markup
  • accessible - works with keyboard only, uses field labels properly

The idea as implemented is that the different auth forms target different scripts. Not sure which form a JS-disabled User Agent would submit on Enter key, so this may be an unsafe setup. May be preferable to submit a single form (with JS-toggled hidden fieldsets) to a single intermediary target and determine the processing requirements based on fields populated.

Potential enhancement

Set cookies to make preferred auth method setting sticky.

Originating author

Hugh Barnes, Lincoln University Library, Teaching and Learning

Raw
login.html
<?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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment