the sliding login panel is a simply sliding div all you need to do to use it is make merge the demo page with your login page.
I'd put all the css,javascript files in the same folder as your login page or change your paths to where you store the files.
Here's a sample of mergin the two files:
<?
require_once(dirname(__FILE__) . "/globals.php");
$ffForm = new FfForm();
$ffForm->addField(new UsernameField("user", "Username", REQUIRED));
$ffForm->addField(new EnterPasswordField("pwd", "Password", REQUIRED));
$ffForm->addField(new SubmitField("submit", "Login"));
$ffForm->setEnterTabs(false);
$ffForm->getParameters();
if ($ffForm->getValue("submit")) {
if ($ffForm->checkValues()) {
$user = getSimpleValues(
"SELECT user_id,status from " . SECURE_TABLE_PREFIX . "users "
. "WHERE username=" . $ffForm->getDbValue("user") . " "
. "AND password=MD5(" . $ffForm->getDbValue("pwd") . ")"
);
$userId = $user["user_id"];
if ($userId != null && $user["status"] === "Active") {
login($userId, $ffForm->getValue("user"));
if ($_REQUEST["goTo"]) {
header("Location: " . $_REQUEST["goTo"]);
} else {
// GET 1st start_url
$db = &FfDb::s();
$startUrl = $db->getSimpleValue("
SELECT start_url
FROM " . SECURE_TABLE_PREFIX . "group_members as group_members," . SECURE_TABLE_PREFIX . "groups as groups
WHERE group_members.user_id='" . $userId . "'
AND group_members.group_id=groups.group_id
");
if (!$startUrl)
$startUrl = "user/index.php";
header("Location: " . $startUrl);
}
} else {
$ffForm->clearValue("pwd");
}
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- The main style sheet -->
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<!-- START Fx.Slide -->
<!-- The CSS -->
<link rel="stylesheet" href="fx.slide.css" type="text/css" media="screen" />
<!-- Mootools - the core -->
<script type="text/javascript" src="js/mootools-1.2-core-yc.js"></script>
<!--Toggle effect (show/hide login form) -->
<script type="text/javascript" src="js/mootools-1.2-more.js"></script>
<script type="text/javascript" src="js/fx.slide.js"></script>
<!-- END Fx.Slide -->
<title>SciCom - Login</title>
<? require_once(dirname(__FILE__) . "/section1.php"); ?>
<style type="text/css">
<!--
.style1 {
color: #37511E
}
-->
</style>
<link rel="stylesheet" type="text/css" href="../new/screen.css" media="screen" />
<style type="text/css">
<!--
.style11 {color: #F0F0F0}
.style103 {
font-size: 24px
}
.style104 {font-family: Geneva, Arial, Helvetica, sans-serif}
-->
</style>
</head>
<body class="thrColLiqHdr">
<!-- Login -->
<div id="login">
<div class="loginContent">
<!-- secure login -->
<form action="" method="post">
<table width="100%" style="text-align:left;">
<tr style="vertical-align:center;">
<td width="51%" style="width:50%;">
<h2 class="style1">SciCom Login </h2>
<p>
<? if ($ffForm->getValue("submit") && !$ffForm->isError && !isLoggedIn()) { ?>
</p>
<div class="pageErrors">
<?= ($user["status"] === "Disabled" ? "This User Account Has Been Disabled!" : "Invalid Username or Password!") ?>
</div>
<? } ?>
<?= $ffForm->getTableTag() ?> </td>
<td width="49%" style="padding-left:20px;">
<h4 class="secure style1">Need a user account?</h4>
<a href="signUp.php<?= ($_REQUEST["goTo"] ? "?goTo=" . urlencode($_REQUEST["goTo"]) : "") ?>">Sign Up</a>
<h4 class="secure style1">Forgot your password or username?</h4>
<div>
<ul style="margin-top:0px;">
<li><a href="forgotPwd.php">I forgot my password</a></li>
<li><a href="forgotUsername.php">I forgot my username</a></li>
</ul>
</div> </td>
</tr>
</table>
</center>
</form>
<!-- end secure login -->
</div>
<div class="loginClose"><a href="#" id="closeLogin">Close Panel</a></div>
</div> <!-- /login -->
<div id="container">
<div id="top">
<!-- login -->
<ul class="login">
<li class="left"> </li>
<li>Hello Guest!</li>
<li>|</li>
<li><a id="toggleLogin" href="#">Log In</a></li>
</ul> <!-- / login -->
</div> <!-- / top -->
<div class="clearfix"></div>
<div id="content"><p>Page content goes here</p></div><!-- / content -->
<div class="clearfix"></div>
</div><!-- / container -->
<? require_once(dirname(__FILE__) . "/section3.php"); ?>
</body>
</html>
All I've done is copy the paths to the js and css and copy the login div and place the secure login form inside the div.
