WebLoginPE Simple

Services

These are the services the the "simple" type provides. The service required is specified in the form by the value attribute in the form's submit button elements.

  • login (log the user in)
  • logout (log the user out)
  • profile (display the user's edit profile form)
  • saveprofilesimple (save the user's edit profile form)
  • deleteprofilesimple (delete the user's profile)
  • confirmdeleteprofilesimple (request delete confirmation)
  • registernew (display the registration form)
  • register (save the registration form)
  • forgot (display the forgot password form)
  • resetpassword (reset the user's password)
  • activate (require user activation via a link in an email)
  • activated (activate the user's account)
  • default (display login form or welcome message if user is logged in)

The desired service is indicated in the form button's value attribute. This example is taken from the default login form:

<button type="submit" id="wlpeLoginButton" name="service" value="login">Login</button>
<button type="submit" id="wlpeReminderButton" name="service" value="forgot">Forgot Password>/button>
<button type="submit" id="wlpeRegisterButton" name="service" value="registernew">Register</button>

Note that the name attribute must be "service", while the value attribute specifies which service. That is why buttons are used instead of submit input fields.

This is a basic snippet call in simple mode:

[!WebLoginPE? &type=`simple`!]
Web User Login Form

Customizing the Login

What if all you want is a simple login form and logout link? This is where WebLoginPE shines. You can specify a mini-template to use for every bit of its output. So simply create a chunk with the form you want, and tell WebLoginPE to use that chunk for the login form. Likewise, another chunk can be used for the logout link. Style as you please with your .css file.

Login form

<form id="wlpeLoginForm" action="article-wlpe-simple.html" method="POST">
<input id="wlpeUsername" type="text" name="username" />
<input id="wlpePassword" type="password" name="password" />
<button type="submit" id="wlpeLoginButton" name="service" value="login">Login</button>
</form>

Logout link

<form id="wlpeUserForm" action="article-wlpe-simple.html" method="POST">
<span>Welcome, [+user.username+]</span>
<button type="submit" id="wlpeLogoutButton" name="service" value="logout">Log Out</button>
</form>

The snippet call:

[!WebLoginPE? &type=`simple` &disableServices=`profile,register,forgot` &loginFormTpl=`loginTpl` &successTpl=`logoutTpl`!]

Styling

Here's what a stylesheet for the default login and logout forms would look like:

/** Simple Type - login **/
#wlpeLogin {} /* outer container div */
#wlpeLoginForm {} /* login form */
#wlpeLoginFieldset {} /* login fieldset */
#wlpeLegend {} /* legend for login fieldset */
#wlpeUsernameLabel {} /* label for username field */
#wlpeUsername {} /* username field */
#wlpePasswordLabel {} /* label for password field */
#wlpePassword {} /* password field */
#wlpeStayLoggedInLabel {} /* label for stay logged in select */
#wlpeStayLoggedIn {} /* stay logged in select */
#wlpeLoginButtons {} /* fieldset for buttons */
#wlpeLoginButton {} /* button to log in */
#wlpeReminderButton {} /* button to activate new password form */
#wlpeRegisterButton {} /* button to activate registration form */
/** Simple type - logout **/
#wlpeUser {} /* outer div container */
#wlpeUserInfo {} /* user info div container */
#wlpeWelcome {} /* user welcome message div container */
#wlpeMyProfileImg {} /* user image */
#wlpeWelcomeParagraph {} /* welcome message paragraph */
#wlpeLoginCount {} /* login count and last loging date paragraph */
#wlpeUserForm {} /* form buttons */
#wlpeUserButtons {} /* button fieldset */
#wlpeLogoutButton {} /* button to logout */
#wlpeProfileButton {} /* button to activate user profile editor */
/** Simple type - reset password **/
#wlpeReset {} /* outer div container */
#wlpeResetForm {} /* reset password form */
#wlpeResetFieldset {} /* reset form fieldset */
#wlpeResetInfo {} /* h3 header title */
#wlpeResetEmail {} /* input field for user email */
#wlpeResetButtonFieldset {} /* buttons fieldset */
#wlpeResetButton {} /* submit button */
#wlpeResetCancelButton {} /* cancel button */

Of course, if you are using the default forms with all of their options active, you'll also want directives for the new password form, the register form and the edit profile form. But we'll consider stylesheets for those forms and responses when we get to the register and profile types.