Registered users can log into the system through a login interface.

Add Attribute into application.properties file

Add the image path on the file server into application.properties file:

1

fileserver.img_path=http://127.0.0.1:8089/images

Add Property into User Service

Add following property into the UserService.java file under the service/src/main/java/co.dongchen.shop/service directory:

1
2

    @Value("${fileserver.img_path}")
    private String imgPath;

Add Methods into the User Service

Add following methods into the UserService.java file under the service/src/main/java/co.dongchen.shop/service directory:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

    public User authenticate(String email, String password) {
        User user = new User();
        user.setEmail(email);
        user.setIsEnabled(1);
        List<User> list = queryUserByCondition(user);
        if ( ! list.isEmpty() && bCryptPasswordEncoder.matches(password, list.get(0).getPassword()) ) {
            return list.get(0);
        }
        return null;
    }

    public List<User> queryUserByCondition(User user) {
        List<User> list = userMapper.queryUsersByCondition(user);
        list.forEach(u -> u.setAvatar(imgPath + u.getAvatar()));
        return list;
    }

Create Constants Class

  • Right click common/src/main/java directory: New > Package
  • Fill in “co.dongchen.shop.common.constant”
  • Click “OK” button
img
  • Right click common/src/main/java/co.dongchen.shop.common/constant directory: New > Java Class
  • Fill in “Constants”
  • Click “OK” button
img

Copy and paste the following content into Constants.java:

1
2
3
4
5

package co.dongchen.shop.common.constant;

public class Constants {
    public static final String LOGGED_ON_USER = "LOGGED_ON_USER";
}

Add Method into the User Controller

Add following methods into the UserController.java file under the controller/src/main/java/co.dongchen.shop/controller directory:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

    @RequestMapping("/user/login")
    public String login(HttpServletRequest req) {
        String email = req.getParameter("email");
        String password = req.getParameter("password");
        String dest = req.getParameter("dest");
        if (email == null || password == null) {
            req.setAttribute("dest", dest);
            return "/user/login";
        }
        User user = userService.authenticate(email, password);
        if (user == null) {
            return "redirect:/user/login?" + "dest=" + dest + "&email=" + email + "&" + ResultMsg.errorMsg("Email or Password Incorrect").asUrlParams();
        } else {
            HttpSession session = req.getSession(true);
            session.setAttribute(Constants.LOGGED_ON_USER, user);
        }
        return StringUtils.isNotBlank(dest) ? "redirect:" + dest : "/user/login_succeeded";
    }

    @RequestMapping("/user/logout")
    public String logout(HttpServletRequest req) {
        HttpSession session = req.getSession(true);
        session.invalidate();
        return "redirect:/";
    }

Create Templates

Create Login Template

  • Right click controller/src/main/resources/templates/user directory: New > File
  • Fill in “login.ftl”
  • Click “OK” button
img

Copy and paste the following content into login.ftl:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

<html lang="en-NZ">
<@common.header/>
<body>
  ${errorMsg!}
  ${successMsg!}
  <form method="post" action="/user/login">
      <div>
          <label>Email:</label>
          <input type="text"  name="email" value="${email!}" required>
      </div>
      <div>
          <label>Password:</label>
          <input type="password" name="password" value="${password!}" required>
      </div>
      <input type="hidden" value="${dest!}" name="dest" />
      <div>
          <button type="submit">Login</button>
      </div>
  </form>
</body>
<@common.footer/>
</html>

Create Login Succeeded Template

  • Right click controller/src/main/resources/templates/user directory: New > File
  • Fill in “login_succeeded.ftl”
  • Click “OK” button
img

Copy and paste the following content into login_succeeded.ftl:

1
2
3
4
5
6
7
8

<html lang="en-NZ">
<@common.header/>
<body>
    <h1>Login Succeeded!</h1>
    <p>Welcome back</p>
</body>
<@common.footer/>
</html>

Verify

Run the App

1
2

// Short Cut for "Run the Program"
Alt + Shift + F10
img

Choose the correspondent option and press enter.

View Login Page in the Browser

1

http://localhost:8080/user/login
img
  • Fill in the Information and click login:
img
  • We will see a login succeeded page:
img

Buy me a coffeeBuy me a coffee