Site integration

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>
</form>

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

Login errors generated by the above alert form are reported through alert unless overridden, so you probably want to do that:

window.addEventListener("wh:wrdauth-loginfailed", evt =>
{
  evt.preventDefault();
  document.getElementById("loginerror").textContent = evt.detail.message;
});

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>

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.

Merge fields

Any field with a data-wrdauth-text attribute, has its text set to the userinfo field mentioned in its value.

For example, you could set up the plugin like this: <wrdauth cachefields="wrd_fullname" ... /> and then use this in your HTML code:

Logged in as: <b id="loginname" data-wrdauth-text="wrd_fullname"></b>

JavaScript APIs

Use isLoggedIn() on the authentication provider to verify whether the user is logged in.

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

  if(wrdauth.getDefaultAuth().isLoggedIn())
  {
    var userinfo = wrdauth.getDefaultAuth().getUserInfo();
    if(userinfo.avatar)
      document.querySelector('profilepicsmall').src = userinfo.avatar;
  }

Logout:

  wrdauth.getDefaultAuth().logout();