Adding a user registration system to my blog

Adding a comment system to a Domino web template is easy. The tricky part is making a Cookie based security system to restrict actions to registered users only. Since this blog is one of the many websites on my company's hosting server, I wanted to avoid having real Notes security with users registering in the Name and Adress book.

Allow users to register

I used a registation page with a nice XHTML form. When you use content type 'text/html', you cannot have Notes forms or documents in edit mode. When you create your own HTML form however, you still can create and update documents! So I used a dummy navigator with a navigator template to hold the form HTML: 'registration'.

<form method="post" action="<Computed Value>" name="_User" class="niceform">
<ul>
    <li>
        <label for="usernamefld">Name:</label>
        <input name="InputUserName" id="usernamefld" value="" />
        required
    </li>
    <li>
        <label for="pwfld">Password:</label>
        <input type="password" name="InputPassword" id="pwfld" value="" />
        6 characters minimum
    </li>
    <li>
        <label for="pw2fld">Again:</label>
        <input type="password" name="InputPassword2" id="pw2fld" value="" />
        your password again
    </li>
    <li>
        <label for="emailfld">E-mail: </label>
        <input name="InputEmailAddress" id="emailfld" value="" />
        required, never published
    </li>
    <li>
        <label for="websitefld">Website: </label>
        <input name="InputWebsite" id="websitefld" value="http://" />
    </li>
    <li>
        <label for=""></label>
        <input type="checkbox" name="RememberMe" class="check" checked="checked" value="1" />
        Remember me on this computer
    </li>
</ul>
<p class="buttons">
    <input type="submit" value="Submit" />
    <input type="button" value="Cancel" onclick="location='<Computed Value>'" />
</p>
</form>



Styling the registration form with CSS

/* nice form */
.niceform{background:#ddd;border:solid 1px #c90;padding:5px}
.niceform ul{margin:5px 0;padding:0}
.niceform li{list-style:none;clear:both}
label{display:block;float:left;width:70px}
input{width:300px}
input.check{width:auto}
textarea{display:block;width:540px;height:100px;font-family:arial,helvetica,sans-serif;}
#newcomment p{text-align:center;margin:0}
p.buttons{text-align:center}
p.buttons input{width:80px}


Validating the user

The registration form posts to user?createdocument. Three computed for display fields hold all the action: Validation, SaveOptions and $$Return. I just used a very simple validation method: when everything is ok, the document saves and the user is returned to where he came from. When not validated, a simple (ugly) message is shown. Later on, I will use Ajax to do this much nicer and without getting pages from the server.

rem "Validation";

a:=InputUserName;
a1:=@DbLookup(""; ""; "(users)"; @LowerCase(a);2);
@If(@Length(a)>5 & !@IsError(a1); @Return("The username <em>"+a+"</em> already exists. You have to choose another one."); "");
ch1:=@If(@Length(a)<5 | !@Contains(a; " "); "You have to enter your full name."; "");
b:=InputPassword;
ch2:=@If(@Length(b)<6 | b!=InputPassword2; "The password was not valid. "; "");
c:=InputEmailAddress;
ch3:=@If(@Length(c)<9 | !@Contains(c; "@") | !@Contains(c; "."); "not a valid e-mail address"; "");
@Trim(ch1:ch2:ch3)

rem "SaveOptions";
@If(Validation=""; "1"; "0")

rem "$$Return";

a:="<h1>Registration error</h1>"+@NewLine
+"<p>Please go back and check the following:</p>"+@NewLine
+"<ul>"+@Implode("<li>"+Validation+"</li>";@NewLine)+"</ul>"+@NewLine
+"<a href=\"javascript:history.go(-1)\">< Back</a>";

@If(SaveOptions="0"; @Return(a); "");

cookieForEver:="; expires=Fri, 1 Jan 2106 11:00:00 UTC; path=/;";
id:=@Text(@DocumentUniqueID);
b:=@SetHTTPHeader("Set-Cookie"; "username="+@URLEncode("Domino"; InputUserName)+cookieForEver);
a:=@SetHTTPHeader("Set-Cookie"; "usr="+id+cookieForEver);
c:=@SetHTTPHeader("Set-Cookie"; "remember="+RememberMe+cookieForEver);
"["+@Middle(Query_String_Decoded; "&b_to="; "&")+"]"


The login page

The login is treated the same way: a navigator to hold the login form. It posts to a form weblogin that never saves. And again: this will be Ajax in the near future. Why not build the user registration in Ajax from the start? It's called non-obtrusive JavaScript: the pages have to be usable without it.