To integrate EzyLogin into your plugin, you need to follow these steps:
  1. Run the following command to link EzyLogin:
// Linux
ezy.sh link ezylogin

// Windows
ezy.bat link ezylogin

You can refer to the documentation for more information on linking a plugin.

  1. Create an interceptor.
  2. Update the page.html file.
  3. Create controllers that inherit from EzyLogin's controllers.
  4. Create template files to provide to the controllers.
  5. Declare i18n messages.
  6. Use the available APIs.

Create an Interceptor

To intercept requests that require login, you can create an interceptor. For example: 

@Interceptor
public class WebStackAskAuthenticationInterceptor
    extends WebAuthenticationInterceptor {}

Note: If you have already created an interceptor that inherits from WebAuthenticationInterceptor, you don't need to create another one.

Update the page.html File

You will need to update this file to import EzyLogin's fragments for registration, login, forgot password popups, and related JavaScript code: 

<!DOCTYPE html>
<html
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	xmlns:ezy="http://www.ezyplatform.com/thymeleaf/layout">

<head th:remove="tag">
<!-- Other tags -->
<link rel="stylesheet" type="text/css" ezy:vhref="/ezylogin/css/style.css" />
</head>

<!-- Other div tags -->
<th:block th:if="${loggedIn != true}">
<div th:replace="ezylogin/login :: content"></div>
<div th:replace="ezylogin/register :: content"></div>
<div th:replace="ezylogin/forgot-password :: content"></div>
</th:block>

<script th:inline="javascript">
/*<![CDATA[*/
var showRegister = /*[[${showRegister}]]*/ '';
var showLogin = /*[[${showLogin}]]*/ '';
var loggedIn = /*[[${loggedIn}]]*/ '';
var userStatus = /*[[${user != null ? user.status : ''}]]*/ '';
/*]]>*/
</script>

<!-- Other script tags -->
<th:block th:if="${loggedIn != true}">
<script th:replace="ezylogin/login :: scripts"></script>
<script th:replace="ezylogin/register :: scripts"></script>
<script th:replace="ezylogin/forgot-password :: scripts"></script>
</th:block>
</body>
</html>

Create Controllers

Create a Controller Inheriting from RegisterController

For example: 

@Controller
public class StackAskRegisterController extends RegisterController {

    public StackAskRegisterController(
        WebUserService userService,
        WebEzyLoginSettingService settingService
    ) {
        super(userService, settingService);
    }
}

This controller will provide the successful registration page with the path /register-success.

Create a Controller Inheriting from LoginAccountController

For example: 

@Controller
public class StackAskLoginAccountController extends LoginAccountController {

    public StackAskLoginAccountController(
        WebUserService userService,
        LoginAccountValidator loginAccountValidator
    ) {
        super(userService, loginAccountValidator);
    }
}

This controller will provide:

  1. The account activation page with the path: /account/activate.
  2. The password reset page with the path: /account/reset-password.

Create Template Files

EzyLogin has already created some fragments using Thymeleaf and Bootstrap. You can create fragments in the resources/templates/account folder of your theme.

Successful Registration Page

The template for this page is named register-success.html, and its content can be like this: 

<!DOCTYPE html>
<html
        xmlns="http://www.w3.org/1999/xhtml"
        xmlns:th="http://www.thymeleaf.org"
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
        layout:decorate="~{ezytheme}">
<body>
<div layout:fragment="content" th:replace="~{ezylogin/register-success :: content}">
</div>
<th:block layout:fragment="post-scripts">
    <script th:replace="~{ezylogin/register-success :: scripts}"></script>
</th:block>
</body>
</html>

Account Activation Page

The template for this page is named activation.html, and its content can be like this: 

<!DOCTYPE html>
<html
        xmlns="http://www.w3.org/1999/xhtml"
        xmlns:th="http://www.thymeleaf.org"
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
        layout:decorate="~{ezytheme}">
<body>
<div layout:fragment="content" th:replace="ezylogin/activation :: content">
</div>
</body>
</html>

Password Reset Page

The template for this page is named reset-password.html, and its content can be like this: 

<!DOCTYPE html>
<html
        xmlns="http://www.w3.org/1999/xhtml"
        xmlns:th="http://www.thymeleaf.org"
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
        layout:decorate="~{ezytheme}">
<body>
<div layout:fragment="content" th:replace="ezylogin/reset-password :: content">
</div>
<th:block layout:fragment="post-scripts">
    <script th:replace="ezylogin/reset-password :: scripts"></script>
</th:block>
</body>
</html>

Declare Messages

EzyLogin's login and register popups use two messages, so you need to declare them in the corresponding language-specific messages.properties files. For example, in English: 

register_description=Sign Up to our social questions and Answers Engine to ask questions, answer peopleu2019s questions, and connect with other people.
sign_in_description=Login to our social questions & Answers Engine to ask questions answer peopleu2019s questions & connect with other people.

APIs

You can refer to the available APIs here.