Loginout plugin/macro

Reenen

unread,

Nov 13, 2012, 3:27:40 AM11/13/12

to tiddly...@googlegroups.com

Hi

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)

Currently I have a tiddler called LoginLogoutPlugin, with the systemConfig tag, which looks like this:

//{{{

config.macros.loginout = {

handler: function(place,macroName,params,wikifier,paramString,tiddler) {

if (config.options.txtUserName == 'GUEST') {

jQuery("<span/>").text('<a href="http://pepdnf1.pepstores.com/challenge/cookie_form">Login</a>').appendTo(place);

} else {

jQuery("<span/>").text('<form method="POST" action="/logout"> <input type="submit" value="logout"> </form>').appendTo(place);

}

};

//}}}

No the problem is that the text is not interpreted but is displayed verbatim on my wiki.

Also I'd prefer having both my login and my logout as buttons if you guys could help me with that.

Regards,

-Reenen

chris...@gmail.com

unread,

Nov 13, 2012, 6:13:47 AM11/13/12

to tiddly...@googlegroups.com

On Tue, 13 Nov 2012, Reenen wrote:

> No the problem is that the text is not interpreted but is displayed
> verbatim on my wiki.

Try changing the calls text() to html().

--
Chris Dent http://burningchrome.com/
[...]

Reenen

unread,

Nov 13, 2012, 9:12:15 AM11/13/12

to tiddly...@googlegroups.com

This seems to work 95%, however, when logging out or in, the cookie (or wherever the setting is saved) is only updated after the load happens, so I need an additional F5 to get the correct...

Also I've beet trying to get the login link to be a button, but failed.

This works (but is link): jQuery("<span/>").html('<a href="http://pepdnf1.pepstores.com/challenge/cookie_form">Login</a>').appendTo(place);

One of my (many) tries: Query("<span/>").html('<button onclick="window.location.href=''http://pepdnf1.pepstores.com/challenge/cookie_form''">Click me</button>').appendTo(place);

Anyone have a clue how to make a button rather than a link to my login url?

Eric Shulman

unread,

Nov 13, 2012, 10:52:58 AM11/13/12

to TiddlyWikiDev

> One of my (many) tries: Query("<span/>").html('<button
> onclick="window.location.href=''http://pepdnf1.pepstores.com/challenge/cookie_form''">Click
> me</button>').appendTo(place);
> Anyone have a clue how to make a button rather than a link to my login url?

in HTML, buttons are created using
<input type="button" value="text to show" onclick="...">

note: in some very old browsers, <input> elements are only permitted
when they are within a containing <form>...</form> element. However,
current browsers will render the button even if it is outside a <form>
container.

enjoy,
-e
Eric Shulman
TiddlyTools / ELS Design Studios

HELP ME TO HELP YOU - MAKE A CONTRIBUTION TO MY "TIP JAR"...
http://www.TiddlyTools.com/#Donations

Professional TiddlyWiki Consulting Services...
Analysis, Design, and Custom Solutions:
http://www.TiddlyTools.com/#Contact

Jon

unread,

Nov 14, 2012, 12:25:20 PM11/14/12

to tiddly...@googlegroups.com

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; }

Reply all

Reply to author

Forward