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();