Adding a 'login' box

Add the following to your JS code (probably the main file)

import * as wrdauth from '@mod-wrd/js/auth';

Add a login form (either always visible or in some sort of dialog, as long as dompack.register can eventually see it)

<form class="wh-wrdauth__loginform" method="post" action="javascript:"> 
  Login: <input name="login" required type="email"><br/> 
  Password: <input name="password" required type="password"><br/> 
  <input name="persistent" type="checkbox">Keep me logged in <button type="submit">Log in</button> 

(In WebHare 4.16 and below, the class 'whplugin-wrdauth-loginform' was used)

Set login to type email or text depending on your wrd configuration.

The 'persistent' input is optional.

You can hide a loginform as above to loggedin users by adding the following CSS rule:

html.wh-wrdauth--isloggedin .wh-wrdauth__loginform { display:none; }

Adding a 'logout' button

Any element with the class wh-wrdauth__logout functions as a logout button so to add a logout link:

<a href="#" class="wh-wrdauth__logout">Logout</a>

(In WebHare 4.16 and below, the class 'whplugin-wrdauth-logout' was used)

Logout links set up this way will refresh the current page after logging out

HTML/CSS helpers

The class wh-wrdauth--isloggedin (in 4.16 and below, wh-wrdauth-loggedin) is applied to the <html> element when a user is logged in. This can be used to selectively show/hide login status without requiring dynamic pages.

Security considerations

Authentication and authorization systems cannot be fully enforced on the client. The wrdauth JS api is intended to ease integration into websites, but you should not rely on eg the 'wh-wrdauth--isloggedin' class to hide sensitive information from users who are not logged in.

Please note that the wrdauth JS api cannot access the real login cookies - these are all marked as 'HttpOnly' to prevent the cookies from escaping in a XSS attack.