Installation instructions for "YubiKey Login module v1.0.3 - subsilver2 modifications"
Introduction
The YubiKey phpBB module provides YubiKey based strong two-factor user authentication capabilities to phpBB forum.
The purpose of this document is to guide readers through the steps to install subsilver2 modifications for the YubiKey Login module v1.0.3
Additional Guides
Installation
Download and extract the Yubikey_Login-1.0.3.tar.gz file using the following link:
http://code.google.com/p/yforum/downloads/detail?name=Yubikey_Login-1.0.3.tar.gz
Once you have downloaded and extracted the above file, you need to perform the file copy/edits described in the following sections.
However, we recommend that you open the Yubikey_Login-1.0.3/contrib/subsilver2.xml file in the browser to follow the remaining instructions as it is easier to copy and paste the code from there.
File copy
- Copy: root/styles/subsilver2/template/ucp_yubikey_login.html
To: styles/subsilver2/template/ucp_yubikey_login.html - Copy: root/styles/subsilver2/template/ucp_yubikey_reportlost.html
To: styles/subsilver2/template/ucp_yubikey_reportlost.html - Copy: root/styles/subsilver2/template/ucp_yubikey_reset.html
To: styles/subsilver2/template/ucp_yubikey_reset.html - Copy: root/styles/subsilver2/theme/images/yubico-icon-small.gif
To: styles/subsilver2/theme/images/yubico-icon-small.gif
Edits
Open:styles/subsilver2/template/index_body.html
Find
Tip: This may be a partial find and not the whole line.
Code:
<!-- INCLUDE ucp_header.html -->
Add after
Tip: Add these lines on a new blank line after the preceding line(s) to find.
Code:
<script type="text/javascript">
// <![CDATA[
<!-- IF S_YUBIKEY_LOGIN_ENABLED -->
function handle_enter(event)
{
var evt = event || window.event;
var code = evt.which || evt.keyCode || evt.charCode;
if (13 == code)
{
if(evt.which)
{
evt.preventDefault();
}
else if (evt.keyCode)
{
evt.keyCode = 9;
}
else
{
evt.charCode = 9;
}
document.getElementsByName('login')[0].click();
}
}
<!-- ENDIF -->
// ]]>
</script>
Find
Tip: This may be a partial find and not the whole line.
Code:
<td class="row1" align="center"><span class="genmed">{L_USERNAME}:</span> <input class="post" type="text" name="username" size="10" /> <span class="genmed">{L_PASSWORD}:</span> <input class="post" type="password" name="password" size="10" /> <!-- IF S_AUTOLOGIN_ENABLED --> <span class="gensmall">{L_LOG_ME_IN}</span> <input type="checkbox" class="radio" name="autologin" /><!-- ENDIF --> <input type="submit" class="btnmain" name="login" value="{L_LOGIN}" /></td>
Replace with
Tip: Replace the preceding line(s) to find with the following lines.
Code:
<td class="row1" align="center"><!-- IF S_LOGIN_UN_REQD --><span class="genmed">{L_USERNAME}:</span> <input class="post" type="text" name="username" size="10" /> <!-- ENDIF --><!-- IF S_LOGIN_PWD_REQD --> <span class="genmed">{L_PASSWORD}:</span> <input class="post" type="password" name="password" size="10" /> <!-- ENDIF --><!-- IF S_YUBIKEY_LOGIN_ENABLED --><span class="genmed">{L_YUBIKEY_OTP}<!-- IF S_YUBIKEY_IS_OPTIONAL --> {L_YUBIKEY_IS_OPTIONAL_UNTIL_REGISTERED}<!-- ENDIF -->:</span> <input class="yubikey-otp" type="text" name="yubikey_otp" size="44" onkeypress="javascript:handle_enter(event);" /> <!-- ENDIF --><!-- IF S_AUTOLOGIN_ENABLED --> <span class="gensmall">{L_LOG_ME_IN}</span> <input type="checkbox" class="radio" name="autologin" /><!-- ENDIF --> <input type="submit" class="btnmain" name="login" value="{L_LOGIN}" /></td>
Open:styles/subsilver2/template/login_body.html
Find
Tip: This may be a partial find and not the whole line.
Code:
<!-- INCLUDE overall_header.html -->
Add after
Tip: Add these lines on a new blank line after the preceding line(s) to find.
Code:
<script type="text/javascript">
// <![CDATA[
<!-- IF S_YUBIKEY_LOGIN_ENABLED -->
function handle_enter(event)
{
var evt = event || window.event;
var code = evt.which || evt.keyCode || evt.charCode;
if (13 == code)
{
if(evt.which)
{
evt.preventDefault();
}
else if (evt.keyCode)
{
evt.keyCode = 9;
}
else
{
evt.charCode = 9;
}
document.getElementsByName('login')[0].click();
}
}
<!-- ENDIF -->
// ]]>
</script>
Find
Tip: This may be a partial find and not the whole line.
Code:
<tr>
<td valign="top" <!-- IF S_ADMIN_AUTH -->style="width: 50%; text-align: {S_CONTENT_FLOW_END};"<!-- ENDIF -->><b class="gensmall">{L_USERNAME}:</b></td>
Add before
Tip: Add these lines on a new blank line before the preceding line(s) to find.
Code:
<!-- IF S_LOGIN_UN_REQD -->
Find
Tip: This may be a partial find and not the whole line.
Code:
<tr>
<td valign="top" <!-- IF S_ADMIN_AUTH -->style="width: 50%; text-align: {S_CONTENT_FLOW_END};"<!-- ENDIF -->><b class="gensmall">{L_PASSWORD}:</b></td>
Add before
Tip: Add these lines on a new blank line before the preceding line(s) to find.
Code:
<!-- ELSE -->
<tr>
<td colspan="2"><input type="hidden" name="{USERNAME_CREDENTIAL}" id="{USERNAME_CREDENTIAL}" value="{USERNAME}"/></td>
</tr>
<!-- ENDIF -->
<!-- IF S_LOGIN_PWD_REQD -->
Find
Tip: This may be a partial find and not the whole line.
Code:
<!-- IF U_RESEND_ACTIVATION and not S_ADMIN_AUTH --><br /><a class="gensmall" href="{U_RESEND_ACTIVATION}">{L_RESEND_ACTIVATION}</a><!-- ENDIF -->
</td>
</tr>
Add after
Tip: Add these lines on a new blank line after the preceding line(s) to find.
Code:
<!-- ENDIF -->
<!-- IF S_YUBIKEY_LOGIN_ENABLED -->
<tr>
<td valign="top" <!-- IF S_ADMIN_AUTH -->style="width: 50%; text-align: {S_CONTENT_FLOW_END};"<!-- ENDIF -->><b class="gensmall"><a href="http://www.yubico.com/products/yubikey/">{L_YUBIKEY_OTP}</a>:</b><!-- IF S_YUBIKEY_IS_OPTIONAL --><br/>{L_YUBIKEY_IS_OPTIONAL_UNTIL_REGISTERED}<!-- ENDIF --></td>
<td>
<input class="yubikey-otp" type="text" name="{YUBIKEY_CREDENTIAL}" size="44" tabindex="3" onkeypress="javascript:handle_enter(event);" />
<br /><a class="gensmall" href="{U_YUBIKEY_REPORTLOST}">{L_LOST_YUBIKEY}</a>
</td>
</tr>
<!-- ENDIF -->
Open:styles/subsilver2/template/ucp_register.html
Find
Tip: This may be a partial find and not the whole line.
Code:
document.forms['register'].submit.click();
}
Add after
Tip: Add these lines on a new blank line after the preceding line(s) to find.
Code:
<!-- IF S_YUBIKEY_LOGIN_ENABLED -->
function handle_enter(event)
{
var evt = event || window.event;
var code = evt.which || evt.keyCode || evt.charCode;
if (13 == code)
{
if(evt.which)
{
evt.preventDefault();
}
else if (evt.keyCode)
{
evt.keyCode = 9;
}
else
{
evt.charCode = 9;
}
}
}
<!-- ENDIF -->
Find
Tip: This may be a partial find and not the whole line.
Code:
<td class="row2"><input class="post" type="password" name="password_confirm" size="25" value="{PASSWORD_CONFIRM}" /></td>
</tr>
Add after
Tip: Add these lines on a new blank line after the preceding line(s) to find.
Code:
<!-- IF S_YUBIKEY_LOGIN_ENABLED -->
<tr>
<td class="row1"><b><a class="genmed" href="http://www.yubico.com/products/yubikey/">{L_YUBIKEY_OTP}</a>: </b><br /><span class="gensmall">{L_YUBIKEY_OTP_FULL_EXPLAIN}</span></td>
<td class="row2"><input class="yubikey-otp" type="text" name="yubikey_otp" size="44" maxlength="44" onkeypress="javascript:handle_enter(event);" /><!-- IF S_YUBIKEY_IS_OPTIONAL --> {L_YUBIKEY_IS_OPTIONAL}<!-- ENDIF --></td>
</tr>
<!-- ENDIF -->
Open:styles/subsilver2/theme/stylesheet.css
Find
Tip: This may be a partial find and not the whole line.
Code:
.username-coloured {
font-weight: bold;
}
Add after
Tip: Add these lines on a new blank line after the preceding line(s) to find.
Code:
.yubikey-otp {
background-image: url("images/yubico-icon-small.gif");
background-position: 2px 50%;
background-repeat: no-repeat;
border: 1px solid #c0c0c0;
padding: 2px;
padding-left: 20px;
vertical-align: middle;
cursor: text;
}
DIY instructions
Save all files
You have finished the installation for this MOD. Upload all changed files to your website. If the installation went bad, simply restore your backed up files.
