>
>
> I am trying to create a macro that will, if I am logged out, have a Login
> button/link, and if I am logged in, have a logout. (This is on a TiddlyWeb
> installation)
>
>
I have a pretty simple login system; it's not genuinely secure since anyone
who can download the TW can look at the code, but it works fine for simply
making one set of tiddlers easily accessible to students in a course and
another set easily accessible to instructors. (It would be more secure if I
added one of the plugins that encrypts the TW...) Here's how it works:
(1) In PageTemplate, within the headerShadow div, I include the text of a
tiddler called loginBox:
<div id='loginBox' refresh='content' tiddler='loginBox'></div>
(2) The loginBox tiddler contains EITHER code for a log-in box and button
(stored in a tiddler called loginBoxStore) OR code for a log-out button
(stored in a tiddler called logoutBoxStore). When the TW loads,
loginBoxStore is copied to loginBox (see below), and the text of loginBox
then contains an input box and button with code to handle it (requires
InlineJavascriptPlugin):
<html>
<form class='logForm'>
<input id='loginPass' type='password' class='logField' value=''>
<input type='button' value='log in' id='loginButton' class='logButton'>
</form>
</html>
<script>
var lb = document.getElementById("loginButton");
lb.onclick = function () {
var lt = document.getElementById("loginPass");
var tryPass = lt.value;
var codePass = "";
for ( var i = 0; i<tryPass.length; i++ ) {
codePass += tryPass.charCodeAt(i);
}
lt.value = "";
logMeIn(codePass);
};
jQuery('#loginPass').keypress(function(event) {
if ( event.keyCode == 13 ) { event.preventDefault();
jQuery('#loginButton').click(); }
});
</script>
(3) The logMeIn function that checks the password as well as start-up steps
are in a systemConfig tiddler:
config.options.txtUserType="studentUser"; // set intial user to student
pending login
readOnly = true;
store.setValue("loginBox","text",store.getTiddler("loginBoxStore").text);
function logMeIn(passCode) {
if (passCode == "105761171187710599114111981011153333") {
config.options.txtUserType = "facultyUser";
store.setValue("loginBox","text",store.getTiddler("logoutBoxStore").text);
readOnly = false;
showBackstage = true;
if ( !backstage.button ) { backstage.init() };
if ( !backstage.isVisible() ) { backstage.show(); }
// additional commands here to change text of MainMenu and default
tiddler
}
else {
alert ("Sorry, you don't seem to know the password.");
}
story.closeAllTiddlers();
story.displayDefaultTiddlers();
refreshAll();
};
(4) Upon successful login, the text of logoutBoxStore is copied to loginBox
and the TW is refreshed so now it's a logout button:
<html>
<form class='logForm'>
<span id='logoutSpan'></span>
<input type='button' value='log out' id='logoutButton'
class='logButton'>
</form>
</html>
<script>
if (config.options.txtUserType == "facultyUser" ) {
jQuery("#logoutSpan").html("Faculty user logged in ");
}
var lb = document.getElementById("logoutButton");
lb.onclick = function () {
readOnly = true;
showBackstage = false;
backstage.hide();
backstage.button.style.display = "none"; }
config.options.txtUserType = "studentUser";
store.setValue("loginBox","text",store.getValue("loginBoxStore","text"));
// additional steps here to change MainMenu and default tiddler
story.closeAllTiddlers();
story.displayDefaultTiddlers();
refreshAll();
}
</script>
(5) The login box and buttons are styled in StyleSheet:
.logButton { background: #ccf; border: 1px solid #999; height: 17px;
vertical-align: bottom; color: navy; font-size: 10px; padding: 1px;
-moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px;
border-left: none; cursor: pointer; }
.logForm { display: inline; }
.logField { border: 1px solid #999; background: #fff; width: 75px; height:
13px; font-size: 10px; vertical-align: middle; -moz-border-radius-topleft:
4px; -moz-border-radius-bottomleft: 4px; border-right: none; }
#loginBox { position: absolute; right: 25px; top: 15px; color: white; }
--
You received this message because you are subscribed to the Google Groups
"TiddlyWikiDev" group.
To view this discussion on the web visit
https://groups.google.com/d/msg/tiddlywikidev/-/4971v2Cx8_kJ.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/tiddlywikidev?hl=en.
