基本完成登录与注册功能

pom.xml

@@ -78,6 +78,11 @@
             <artifactId>mysql-connector-java</artifactId>
             <version>8.0.19</version>
         </dependency>
+        <dependency>
+            <groupId>commons-codec</groupId>
+            <artifactId>commons-codec</artifactId>
+            <version>1.11</version>
+        </dependency>
     </dependencies>
 
     <build>

src/main/java/com/bktus/iserver/component/form/RegisterForm.java

@@ -0,0 +1,21 @@
+package com.bktus.iserver.component.form;
+
+import lombok.Data;
+import org.hibernate.validator.constraints.Length;
+
+import javax.validation.constraints.NotEmpty;
+
+@Data
+public class RegisterForm {
+
+    @NotEmpty
+    @Length(min = 6, max = 24)
+    private String username;
+
+    @Length(min = 6, max = 24)
+    private String password;
+
+    @Length(min = 6, max = 24)
+    private  String retryPassword;
+
+}

src/main/java/com/bktus/iserver/configure/CustomWebSecurityConfig.java

@@ -1,25 +1,82 @@
 package com.bktus.iserver.configure;
 
+import com.bktus.iserver.configure.security.IServerPasswordEncoder;
+import com.bktus.iserver.configure.security.IServerSecurityAuthenticationProvider;
+import com.bktus.iserver.configure.security.IServerUsernamePasswordAuthenticationFilter;
+import com.bktus.iserver.service.IServerUserDetailService;
+import com.bktus.iserver.service.IUserService;
+import org.springframework.context.annotation.Bean;
 import org.springframework.context.annotation.Configuration;
 import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
 import org.springframework.security.config.annotation.web.builders.HttpSecurity;
 import org.springframework.security.config.annotation.web.builders.WebSecurity;
 import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
+import org.springframework.security.web.authentication.UsernamePasswordAuthenticationFilter;
+import org.springframework.security.web.util.matcher.AntPathRequestMatcher;
+
+import javax.annotation.Resource;
 
 @Configuration
 public class CustomWebSecurityConfig extends WebSecurityConfigurerAdapter {
+
+    @Resource
+    private IServerUserDetailService userDetailService;
+
+    @Resource
+    private IServerSecurityAuthenticationProvider authenticationProvider;
+
+    @Resource
+    private IServerPasswordEncoder passwordEncoder;
+
     @Override
     protected void configure(HttpSecurity http) throws Exception {
-        super.configure(http);
+        http.
+                authorizeRequests().anyRequest().authenticated()
+                .and()
+                .csrf().disable()
+                .formLogin().loginPage("/login")
+                .usernameParameter("username")
+                .passwordParameter("password")
+                .successForwardUrl("/")
+                .failureForwardUrl("/login?error")
+                .and()
+                .logout().permitAll();
+
+        http.addFilterAt(authenticationFilter(), UsernamePasswordAuthenticationFilter.class);
+
     }
 
     @Override
     protected void configure(AuthenticationManagerBuilder auth) throws Exception {
-        super.configure(auth);
+        auth
+                .authenticationProvider(authenticationProvider)
+                .userDetailsService(userDetailService)
+                .passwordEncoder(passwordEncoder);
     }
 
     @Override
     public void configure(WebSecurity web) throws Exception {
-        super.configure(web);
+        web
+                .ignoring()
+                .antMatchers(
+                        "/",
+                        "/build/**",
+                        "/dist/**",
+                        "/plugins/**",
+                        "/login/**",
+                        "/register/**");
     }
+
+    //注册自定义的UsernamePasswordAuthenticationFilter
+    @Bean
+    IServerUsernamePasswordAuthenticationFilter authenticationFilter() throws Exception {
+        IServerUsernamePasswordAuthenticationFilter filter = new IServerUsernamePasswordAuthenticationFilter();
+        filter.setAllowSessionCreation(true);
+        filter.setRequiresAuthenticationRequestMatcher(
+                new AntPathRequestMatcher("/login", "POST"));
+
+        filter.setAuthenticationManager(authenticationManagerBean());
+        return filter;
+    }
+
 }

src/main/java/com/bktus/iserver/configure/security/IServerPasswordEncoder.java

@@ -0,0 +1,18 @@
+package com.bktus.iserver.configure.security;
+
+import org.apache.commons.codec.digest.DigestUtils;
+import org.springframework.security.crypto.password.PasswordEncoder;
+import org.springframework.stereotype.Component;
+
+@Component
+public class IServerPasswordEncoder implements PasswordEncoder {
+    @Override
+    public String encode(CharSequence charSequence) {
+        return DigestUtils.sha256Hex(charSequence.toString());
+    }
+
+    @Override
+    public boolean matches(CharSequence charSequence, String s) {
+        return s.equals(DigestUtils.sha256Hex(charSequence.toString()));
+    }
+}

src/main/java/com/bktus/iserver/configure/security/IServerSecurityAuthenticationProvider.java

@@ -0,0 +1,46 @@
+package com.bktus.iserver.configure.security;
+
+import com.bktus.iserver.repository.UserRepository;
+import org.springframework.security.authentication.AuthenticationProvider;
+import org.springframework.security.authentication.BadCredentialsException;
+import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
+import org.springframework.security.core.Authentication;
+import org.springframework.security.core.AuthenticationException;
+import org.springframework.security.core.userdetails.UserDetails;
+import org.springframework.security.core.userdetails.UserDetailsService;
+import org.springframework.stereotype.Component;
+
+import javax.annotation.Resource;
+
+@Component
+public class IServerSecurityAuthenticationProvider implements AuthenticationProvider {
+    @Resource
+    private IServerPasswordEncoder encoder;
+
+    @Resource
+    private UserDetailsService detailsService;
+
+
+    @Override
+    public Authentication authenticate(Authentication authentication) throws AuthenticationException {
+
+        String username = authentication.getName();
+        String password = (String) authentication.getCredentials();
+
+        password = encoder.encode(password);
+
+        UserDetails details =  detailsService.loadUserByUsername(username);
+
+        if(!details.getPassword().equals(password)){
+            throw new BadCredentialsException("Password IS Uncorrected");
+        }
+
+        return new UsernamePasswordAuthenticationToken(username, password, details.getAuthorities());
+    }
+
+    @Override
+    public boolean supports(Class<?> aClass) {
+        if(aClass.equals(UsernamePasswordAuthenticationToken.class)) return true;
+        else return false;
+    }
+}

src/main/java/com/bktus/iserver/configure/security/IServerUsernamePasswordAuthenticationFilter.java

@@ -0,0 +1,34 @@
+package com.bktus.iserver.configure.security;
+
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
+import org.springframework.security.core.Authentication;
+import org.springframework.security.core.AuthenticationException;
+import org.springframework.security.web.authentication.UsernamePasswordAuthenticationFilter;
+
+import javax.servlet.http.HttpServletRequest;
+import javax.servlet.http.HttpServletResponse;
+
+@Slf4j
+public class IServerUsernamePasswordAuthenticationFilter extends UsernamePasswordAuthenticationFilter {
+    @Override
+    public Authentication attemptAuthentication(HttpServletRequest request, HttpServletResponse response)
+            throws AuthenticationException
+    {
+        String username = request.getParameter("username");
+        String password = request.getParameter("password");
+
+        if(username == null) username = "";
+        if(password == null) password = "";
+
+        username = username.trim();
+        password = password.trim();
+
+        UsernamePasswordAuthenticationToken authRequest =
+                new UsernamePasswordAuthenticationToken(username, password);
+
+        setDetails(request, authRequest);
+
+        return this.getAuthenticationManager().authenticate(authRequest);
+    }
+}

src/main/java/com/bktus/iserver/controller/IndexController.java

@@ -0,0 +1,15 @@
+package com.bktus.iserver.controller;
+
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.RequestMapping;
+
+@Controller
+@RequestMapping(value = "/")
+public class IndexController {
+
+    @RequestMapping(value = "/")
+    public String indexView(){
+        return "index";
+    }
+
+}

src/main/java/com/bktus/iserver/controller/LoginController.java

@@ -0,0 +1,16 @@
+package com.bktus.iserver.controller;
+
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+
+@Controller
+@RequestMapping(value = "/login")
+public class LoginController {
+
+    @RequestMapping(value = "")
+    public String printLoginView(){
+        return "login";
+    }
+
+}

src/main/java/com/bktus/iserver/controller/RegisterController.java

@@ -0,0 +1,44 @@
+package com.bktus.iserver.controller;
+
+import com.bktus.iserver.component.form.RegisterForm;
+import com.bktus.iserver.model.User;
+import com.bktus.iserver.service.UserService;
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.ModelAttribute;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+
+import javax.annotation.Resource;
+
+@Controller
+@RequestMapping(value = "/register")
+public class RegisterController {
+
+    @Resource
+    private UserService userService;
+
+    @RequestMapping(value = "")
+    public String printRegisterView(Model model){
+        model.addAttribute("registerForm", new RegisterForm());
+        return "register";
+    }
+
+    @PostMapping(value = "")
+    public String doRegisterAction(@ModelAttribute RegisterForm registerForm){
+        if(!registerForm.getPassword().equals(registerForm.getRetryPassword())){
+            return "register";
+        }
+
+        if(userService.checkUsernameRegistered(registerForm.getUsername())){
+            return "register";
+        }
+
+        User user = userService.createUser(registerForm.getUsername(), registerForm.getPassword());
+
+        userService.save(user);
+
+        return "login";
+    }
+
+}

src/main/java/com/bktus/iserver/repository/UserRepository.java

@@ -0,0 +1,11 @@
+package com.bktus.iserver.repository;
+
+import com.bktus.iserver.model.User;
+import org.springframework.boot.autoconfigure.security.SecurityProperties;
+import org.springframework.data.repository.CrudRepository;
+
+import java.util.Optional;
+
+public interface UserRepository extends CrudRepository<User, Integer> {
+    Optional<User> findByUsername(String username);
+}

src/main/java/com/bktus/iserver/service/IServerUserDetailService.java

@@ -0,0 +1,25 @@
+package com.bktus.iserver.service;
+
+import com.bktus.iserver.model.User;
+import com.bktus.iserver.repository.UserRepository;
+import org.springframework.security.authentication.AuthenticationServiceException;
+import org.springframework.security.core.userdetails.UserDetails;
+import org.springframework.security.core.userdetails.UserDetailsService;
+import org.springframework.security.core.userdetails.UsernameNotFoundException;
+import org.springframework.stereotype.Service;
+
+import javax.annotation.Resource;
+import java.util.Optional;
+
+@Service
+public class IServerUserDetailService implements UserDetailsService {
+    @Resource
+    UserRepository userRepository;
+
+    @Override
+    public UserDetails loadUserByUsername(String s) throws UsernameNotFoundException {
+            Optional<User> user = userRepository.findByUsername(s);
+            if(!user.isPresent()) throw new UsernameNotFoundException("Username NOT Found In Database");
+            return user.get();
+    }
+}

src/main/java/com/bktus/iserver/service/IUserService.java

@@ -0,0 +1,12 @@
+package com.bktus.iserver.service;
+
+import com.bktus.iserver.model.User;
+
+public interface IUserService {
+
+    boolean checkUsernameRegistered(String username);
+
+    User createUser(String username, String password);
+
+    User save(User user);
+}

src/main/java/com/bktus/iserver/service/UserService.java

@@ -0,0 +1,36 @@
+package com.bktus.iserver.service;
+
+import com.bktus.iserver.configure.security.IServerPasswordEncoder;
+import com.bktus.iserver.model.User;
+import com.bktus.iserver.repository.UserRepository;
+import org.springframework.stereotype.Service;
+
+import javax.annotation.Resource;
+
+@Service
+public class UserService implements IUserService {
+
+    @Resource
+    private UserRepository userRepository;
+
+    @Resource
+    private IServerPasswordEncoder passwordEncoder;
+
+    @Override
+    public boolean checkUsernameRegistered(String username) {
+        return userRepository.findByUsername(username).isPresent();
+    }
+
+    @Override
+    public User createUser(String username, String password) {
+        User user = new User();
+        user.setUsername(username);
+        user.setPassword(passwordEncoder.encode(password));
+        return user;
+    }
+
+    @Override
+    public User save(User user) {
+        return userRepository.save(user);
+    }
+}

src/main/resources/application.properties

@@ -15,7 +15,7 @@ spring.jpa.properties.hibernate.enable_lazy_load_no_trans=true
 spring.datasource.url=jdbc:mysql://rm-wz92c8o3nd7sq2xq14o.mysql.rds.aliyuncs.com:3306/iserver?useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC
 spring.datasource.username=iserver
 spring.datasource.password=3SnL7FUTm9L8Z#g
-spring.datasource.driver-class-name=com.mysql.jdbc.Driver
+spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
 
 server.error.whitelabel.enabled=false
 

src/main/resources/static/dist/css/alt/adminlte.pages.css

@@ -0,0 +1,445 @@
+/*!
+ *   AdminLTE v3.0.2
+ *     Only Pages
+ *   Author: Colorlib
+ *   Website: AdminLTE.io <http://adminlte.io>
+ *   License: Open source - MIT <http://opensource.org/licenses/MIT>
+ */
+.close, .mailbox-attachment-close {
+  float: right;
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 1;
+  color: #000;
+  text-shadow: 0 1px 0 #ffffff;
+  opacity: .5;
+}
+
+.close:hover, .mailbox-attachment-close:hover {
+  color: #000;
+  text-decoration: none;
+}
+
+.close:not(:disabled):not(.disabled):hover, .mailbox-attachment-close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus, .mailbox-attachment-close:not(:disabled):not(.disabled):focus {
+  opacity: .75;
+}
+
+button.close, button.mailbox-attachment-close {
+  padding: 0;
+  background-color: transparent;
+  border: 0;
+  appearance: none;
+}
+
+a.close.disabled, a.disabled.mailbox-attachment-close {
+  pointer-events: none;
+}
+
+.mailbox-messages > .table {
+  margin: 0;
+}
+
+.mailbox-controls {
+  padding: 5px;
+}
+
+.mailbox-controls.with-border {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+}
+
+.mailbox-read-info {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+  padding: 10px;
+}
+
+.mailbox-read-info h3 {
+  font-size: 20px;
+  margin: 0;
+}
+
+.mailbox-read-info h5 {
+  margin: 0;
+  padding: 5px 0 0;
+}
+
+.mailbox-read-time {
+  color: #999;
+  font-size: 13px;
+}
+
+.mailbox-read-message {
+  padding: 10px;
+}
+
+.mailbox-attachments {
+  padding-left: 0;
+  list-style: none;
+}
+
+.mailbox-attachments li {
+  border: 1px solid #eee;
+  float: left;
+  margin-bottom: 10px;
+  margin-right: 10px;
+  width: 200px;
+}
+
+.mailbox-attachment-name {
+  color: #666;
+  font-weight: bold;
+}
+
+.mailbox-attachment-icon,
+.mailbox-attachment-info,
+.mailbox-attachment-size {
+  display: block;
+}
+
+.mailbox-attachment-info {
+  background: #f8f9fa;
+  padding: 10px;
+}
+
+.mailbox-attachment-size {
+  color: #999;
+  font-size: 12px;
+}
+
+.mailbox-attachment-size > span {
+  display: inline-block;
+  padding-top: 0.75rem;
+}
+
+.mailbox-attachment-icon {
+  color: #666;
+  font-size: 65px;
+  max-height: 132.5px;
+  padding: 20px 10px;
+  text-align: center;
+}
+
+.mailbox-attachment-icon.has-img {
+  padding: 0;
+}
+
+.mailbox-attachment-icon.has-img > img {
+  height: auto;
+  max-width: 100%;
+}
+
+.lockscreen {
+  background: #e9ecef;
+}
+
+.lockscreen .lockscreen-name {
+  font-weight: 600;
+  text-align: center;
+}
+
+.lockscreen-logo {
+  font-size: 35px;
+  font-weight: 300;
+  margin-bottom: 25px;
+  text-align: center;
+}
+
+.lockscreen-logo a {
+  color: #495057;
+}
+
+.lockscreen-wrapper {
+  margin: 0 auto;
+  margin-top: 10%;
+  max-width: 400px;
+}
+
+.lockscreen-item {
+  border-radius: 4px;
+  background: #ffffff;
+  margin: 10px auto 30px;
+  padding: 0;
+  position: relative;
+  width: 290px;
+}
+
+.lockscreen-image {
+  border-radius: 50%;
+  background: #ffffff;
+  left: -10px;
+  padding: 5px;
+  position: absolute;
+  top: -25px;
+  z-index: 10;
+}
+
+.lockscreen-image > img {
+  border-radius: 50%;
+  height: 70px;
+  width: 70px;
+}
+
+.lockscreen-credentials {
+  margin-left: 70px;
+}
+
+.lockscreen-credentials .form-control {
+  border: 0;
+}
+
+.lockscreen-credentials .btn {
+  background-color: #ffffff;
+  border: 0;
+  padding: 0 10px;
+}
+
+.lockscreen-footer {
+  margin-top: 10px;
+}
+
+.login-logo,
+.register-logo {
+  font-size: 2.1rem;
+  font-weight: 300;
+  margin-bottom: .9rem;
+  text-align: center;
+}
+
+.login-logo a,
+.register-logo a {
+  color: #495057;
+}
+
+.login-page,
+.register-page {
+  align-items: center;
+  background: #e9ecef;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  justify-content: center;
+}
+
+.login-box,
+.register-box {
+  width: 360px;
+}
+
+@media (max-width: 576px) {
+  .login-box,
+  .register-box {
+    margin-top: 20px;
+    width: 90%;
+  }
+}
+
+.login-card-body,
+.register-card-body {
+  background: #ffffff;
+  border-top: 0;
+  color: #666;
+  padding: 20px;
+}
+
+.login-card-body .input-group .form-control,
+.register-card-body .input-group .form-control {
+  border-right: 0;
+}
+
+.login-card-body .input-group .form-control:focus,
+.register-card-body .input-group .form-control:focus {
+  box-shadow: none;
+}
+
+.login-card-body .input-group .form-control:focus ~ .input-group-append .input-group-text,
+.register-card-body .input-group .form-control:focus ~ .input-group-append .input-group-text {
+  border-color: #80bdff;
+}
+
+.login-card-body .input-group .form-control.is-valid:focus,
+.register-card-body .input-group .form-control.is-valid:focus {
+  box-shadow: none;
+}
+
+.login-card-body .input-group .form-control.is-valid ~ .input-group-append .input-group-text,
+.register-card-body .input-group .form-control.is-valid ~ .input-group-append .input-group-text {
+  border-color: #28a745;
+}
+
+.login-card-body .input-group .form-control.is-invalid:focus,
+.register-card-body .input-group .form-control.is-invalid:focus {
+  box-shadow: none;
+}
+
+.login-card-body .input-group .form-control.is-invalid ~ .input-group-append .input-group-text,
+.register-card-body .input-group .form-control.is-invalid ~ .input-group-append .input-group-text {
+  border-color: #dc3545;
+}
+
+.login-card-body .input-group .input-group-text,
+.register-card-body .input-group .input-group-text {
+  background-color: transparent;
+  border-bottom-right-radius: 0.25rem;
+  border-left: 0;
+  border-top-right-radius: 0.25rem;
+  color: #777;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.login-box-msg,
+.register-box-msg {
+  margin: 0;
+  padding: 0 20px 20px;
+  text-align: center;
+}
+
+.social-auth-links {
+  margin: 10px 0;
+}
+
+.error-page {
+  margin: 20px auto 0;
+  width: 600px;
+}
+
+@media (max-width: 767.98px) {
+  .error-page {
+    width: 100%;
+  }
+}
+
+.error-page > .headline {
+  float: left;
+  font-size: 100px;
+  font-weight: 300;
+}
+
+@media (max-width: 767.98px) {
+  .error-page > .headline {
+    float: none;
+    text-align: center;
+  }
+}
+
+.error-page > .error-content {
+  display: block;
+  margin-left: 190px;
+}
+
+@media (max-width: 767.98px) {
+  .error-page > .error-content {
+    margin-left: 0;
+  }
+}
+
+.error-page > .error-content > h3 {
+  font-size: 25px;
+  font-weight: 300;
+}
+
+@media (max-width: 767.98px) {
+  .error-page > .error-content > h3 {
+    text-align: center;
+  }
+}
+
+.invoice {
+  background: #ffffff;
+  border: 1px solid rgba(0, 0, 0, 0.125);
+  position: relative;
+}
+
+.invoice-title {
+  margin-top: 0;
+}
+
+.profile-user-img {
+  border: 3px solid #adb5bd;
+  margin: 0 auto;
+  padding: 3px;
+  width: 100px;
+}
+
+.profile-username {
+  font-size: 21px;
+  margin-top: 5px;
+}
+
+.post {
+  border-bottom: 1px solid #adb5bd;
+  color: #666;
+  margin-bottom: 15px;
+  padding-bottom: 15px;
+}
+
+.post:last-of-type {
+  border-bottom: 0;
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+
+.post .user-block {
+  margin-bottom: 15px;
+  width: 100%;
+}
+
+.post .row {
+  width: 100%;
+}
+
+.product-image {
+  max-width: 100%;
+  height: auto;
+  width: 100%;
+}
+
+.product-image-thumbs {
+  align-items: stretch;
+  display: flex;
+  margin-top: 2rem;
+}
+
+.product-image-thumb {
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
+  border-radius: 0.25rem;
+  background-color: #ffffff;
+  border: 1px solid #dee2e6;
+  display: flex;
+  margin-right: 1rem;
+  max-width: 7rem;
+  padding: 0.5rem;
+}
+
+.product-image-thumb img {
+  max-width: 100%;
+  height: auto;
+  align-self: center;
+}
+
+.product-image-thumb:hover {
+  opacity: 0.5;
+}
+
+.product-share a {
+  margin-right: .5rem;
+}
+
+.projects td {
+  vertical-align: middle;
+}
+
+.projects .list-inline {
+  margin-bottom: 0;
+}
+
+.projects img.table-avatar,
+.projects .table-avatar img {
+  border-radius: 50%;
+  display: inline;
+  width: 2.5rem;
+}
+
+.projects .project-state {
+  text-align: center;
+}
+
+/*# sourceMappingURL=adminlte.pages.css.map */

src/main/resources/static/dist/js/demo.js

@@ -0,0 +1,419 @@
+/**
+ * AdminLTE Demo Menu
+ * ------------------
+ * You should not use this file in production.
+ * This file is for demo purposes only.
+ */
+(function ($) {
+  'use strict'
+
+  var $sidebar   = $('.control-sidebar')
+  var $container = $('<div />', {
+    class: 'p-3 control-sidebar-content'
+  })
+
+  $sidebar.append($container)
+
+  var navbar_dark_skins = [
+    'navbar-primary',
+    'navbar-secondary',
+    'navbar-info',
+    'navbar-success',
+    'navbar-danger',
+    'navbar-indigo',
+    'navbar-purple',
+    'navbar-pink',
+    'navbar-navy',
+    'navbar-lightblue',
+    'navbar-teal',
+    'navbar-cyan',
+    'navbar-dark',
+    'navbar-gray-dark',
+    'navbar-gray',
+  ]
+
+  var navbar_light_skins = [
+    'navbar-light',
+    'navbar-warning',
+    'navbar-white',
+    'navbar-orange',
+  ]
+
+  $container.append(
+    '<h5>Customize AdminLTE</h5><hr class="mb-2"/>'
+  )
+
+  var $no_border_checkbox = $('<input />', {
+    type   : 'checkbox',
+    value  : 1,
+    checked: $('.main-header').hasClass('border-bottom-0'),
+    'class': 'mr-1'
+  }).on('click', function () {
+    if ($(this).is(':checked')) {
+      $('.main-header').addClass('border-bottom-0')
+    } else {
+      $('.main-header').removeClass('border-bottom-0')
+    }
+  })
+  var $no_border_container = $('<div />', {'class': 'mb-1'}).append($no_border_checkbox).append('<span>No Navbar border</span>')
+  $container.append($no_border_container)
+
+  var $text_sm_body_checkbox = $('<input />', {
+    type   : 'checkbox',
+    value  : 1,
+    checked: $('body').hasClass('text-sm'),
+    'class': 'mr-1'
+  }).on('click', function () {
+    if ($(this).is(':checked')) {
+      $('body').addClass('text-sm')
+    } else {
+      $('body').removeClass('text-sm')
+    }
+  })
+  var $text_sm_body_container = $('<div />', {'class': 'mb-1'}).append($text_sm_body_checkbox).append('<span>Body small text</span>')
+  $container.append($text_sm_body_container)
+
+  var $text_sm_header_checkbox = $('<input />', {
+    type   : 'checkbox',
+    value  : 1,
+    checked: $('.main-header').hasClass('text-sm'),
+    'class': 'mr-1'
+  }).on('click', function () {
+    if ($(this).is(':checked')) {
+      $('.main-header').addClass('text-sm')
+    } else {
+      $('.main-header').removeClass('text-sm')
+    }
+  })
+  var $text_sm_header_container = $('<div />', {'class': 'mb-1'}).append($text_sm_header_checkbox).append('<span>Navbar small text</span>')
+  $container.append($text_sm_header_container)
+
+  var $text_sm_sidebar_checkbox = $('<input />', {
+    type   : 'checkbox',
+    value  : 1,
+    checked: $('.nav-sidebar').hasClass('text-sm'),
+    'class': 'mr-1'
+  }).on('click', function () {
+    if ($(this).is(':checked')) {
+      $('.nav-sidebar').addClass('text-sm')
+    } else {
+      $('.nav-sidebar').removeClass('text-sm')
+    }
+  })
+  var $text_sm_sidebar_container = $('<div />', {'class': 'mb-1'}).append($text_sm_sidebar_checkbox).append('<span>Sidebar nav small text</span>')
+  $container.append($text_sm_sidebar_container)
+
+  var $text_sm_footer_checkbox = $('<input />', {
+    type   : 'checkbox',
+    value  : 1,
+    checked: $('.main-footer').hasClass('text-sm'),
+    'class': 'mr-1'
+  }).on('click', function () {
+    if ($(this).is(':checked')) {
+      $('.main-footer').addClass('text-sm')
+    } else {
+      $('.main-footer').removeClass('text-sm')
+    }
+  })
+  var $text_sm_footer_container = $('<div />', {'class': 'mb-1'}).append($text_sm_footer_checkbox).append('<span>Footer small text</span>')
+  $container.append($text_sm_footer_container)
+
+  var $flat_sidebar_checkbox = $('<input />', {
+    type   : 'checkbox',
+    value  : 1,
+    checked: $('.nav-sidebar').hasClass('nav-flat'),
+    'class': 'mr-1'
+  }).on('click', function () {
+    if ($(this).is(':checked')) {
+      $('.nav-sidebar').addClass('nav-flat')
+    } else {
+      $('.nav-sidebar').removeClass('nav-flat')
+    }
+  })
+  var $flat_sidebar_container = $('<div />', {'class': 'mb-1'}).append($flat_sidebar_checkbox).append('<span>Sidebar nav flat style</span>')
+  $container.append($flat_sidebar_container)
+
+  var $legacy_sidebar_checkbox = $('<input />', {
+    type   : 'checkbox',
+    value  : 1,
+    checked: $('.nav-sidebar').hasClass('nav-legacy'),
+    'class': 'mr-1'
+  }).on('click', function () {
+    if ($(this).is(':checked')) {
+      $('.nav-sidebar').addClass('nav-legacy')
+    } else {
+      $('.nav-sidebar').removeClass('nav-legacy')
+    }
+  })
+  var $legacy_sidebar_container = $('<div />', {'class': 'mb-1'}).append($legacy_sidebar_checkbox).append('<span>Sidebar nav legacy style</span>')
+  $container.append($legacy_sidebar_container)
+
+  var $compact_sidebar_checkbox = $('<input />', {
+    type   : 'checkbox',
+    value  : 1,
+    checked: $('.nav-sidebar').hasClass('nav-compact'),
+    'class': 'mr-1'
+  }).on('click', function () {
+    if ($(this).is(':checked')) {
+      $('.nav-sidebar').addClass('nav-compact')
+    } else {
+      $('.nav-sidebar').removeClass('nav-compact')
+    }
+  })
+  var $compact_sidebar_container = $('<div />', {'class': 'mb-1'}).append($compact_sidebar_checkbox).append('<span>Sidebar nav compact</span>')
+  $container.append($compact_sidebar_container)
+
+  var $child_indent_sidebar_checkbox = $('<input />', {
+    type   : 'checkbox',
+    value  : 1,
+    checked: $('.nav-sidebar').hasClass('nav-child-indent'),
+    'class': 'mr-1'
+  }).on('click', function () {
+    if ($(this).is(':checked')) {
+      $('.nav-sidebar').addClass('nav-child-indent')
+    } else {
+      $('.nav-sidebar').removeClass('nav-child-indent')
+    }
+  })
+  var $child_indent_sidebar_container = $('<div />', {'class': 'mb-1'}).append($child_indent_sidebar_checkbox).append('<span>Sidebar nav child indent</span>')
+  $container.append($child_indent_sidebar_container)
+
+  var $no_expand_sidebar_checkbox = $('<input />', {
+    type   : 'checkbox',
+    value  : 1,
+    checked: $('.main-sidebar').hasClass('sidebar-no-expand'),
+    'class': 'mr-1'
+  }).on('click', function () {
+    if ($(this).is(':checked')) {
+      $('.main-sidebar').addClass('sidebar-no-expand')
+    } else {
+      $('.main-sidebar').removeClass('sidebar-no-expand')
+    }
+  })
+  var $no_expand_sidebar_container = $('<div />', {'class': 'mb-1'}).append($no_expand_sidebar_checkbox).append('<span>Main Sidebar disable hover/focus auto expand</span>')
+  $container.append($no_expand_sidebar_container)
+
+  var $text_sm_brand_checkbox = $('<input />', {
+    type   : 'checkbox',
+    value  : 1,
+    checked: $('.brand-link').hasClass('text-sm'),
+    'class': 'mr-1'
+  }).on('click', function () {
+    if ($(this).is(':checked')) {
+      $('.brand-link').addClass('text-sm')
+    } else {
+      $('.brand-link').removeClass('text-sm')
+    }
+  })
+  var $text_sm_brand_container = $('<div />', {'class': 'mb-4'}).append($text_sm_brand_checkbox).append('<span>Brand small text</span>')
+  $container.append($text_sm_brand_container)
+
+  $container.append('<h6>Navbar Variants</h6>')
+
+  var $navbar_variants        = $('<div />', {
+    'class': 'd-flex'
+  })
+  var navbar_all_colors       = navbar_dark_skins.concat(navbar_light_skins)
+  var $navbar_variants_colors = createSkinBlock(navbar_all_colors, function (e) {
+    var color = $(this).data('color')
+    var $main_header = $('.main-header')
+    $main_header.removeClass('navbar-dark').removeClass('navbar-light')
+    navbar_all_colors.map(function (color) {
+      $main_header.removeClass(color)
+    })
+
+    if (navbar_dark_skins.indexOf(color) > -1) {
+      $main_header.addClass('navbar-dark')
+    } else {
+      $main_header.addClass('navbar-light')
+    }
+
+    $main_header.addClass(color)
+  })
+
+  $navbar_variants.append($navbar_variants_colors)
+
+  $container.append($navbar_variants)
+
+  var sidebar_colors = [
+    'bg-primary',
+    'bg-warning',
+    'bg-info',
+    'bg-danger',
+    'bg-success',
+    'bg-indigo',
+    'bg-lightblue',
+    'bg-navy',
+    'bg-purple',
+    'bg-fuchsia',
+    'bg-pink',
+    'bg-maroon',
+    'bg-orange',
+    'bg-lime',
+    'bg-teal',
+    'bg-olive'
+  ]
+
+  var accent_colors = [
+    'accent-primary',
+    'accent-warning',
+    'accent-info',
+    'accent-danger',
+    'accent-success',
+    'accent-indigo',
+    'accent-lightblue',
+    'accent-navy',
+    'accent-purple',
+    'accent-fuchsia',
+    'accent-pink',
+    'accent-maroon',
+    'accent-orange',
+    'accent-lime',
+    'accent-teal',
+    'accent-olive'
+  ]
+
+  var sidebar_skins = [
+    'sidebar-dark-primary',
+    'sidebar-dark-warning',
+    'sidebar-dark-info',
+    'sidebar-dark-danger',
+    'sidebar-dark-success',
+    'sidebar-dark-indigo',
+    'sidebar-dark-lightblue',
+    'sidebar-dark-navy',
+    'sidebar-dark-purple',
+    'sidebar-dark-fuchsia',
+    'sidebar-dark-pink',
+    'sidebar-dark-maroon',
+    'sidebar-dark-orange',
+    'sidebar-dark-lime',
+    'sidebar-dark-teal',
+    'sidebar-dark-olive',
+    'sidebar-light-primary',
+    'sidebar-light-warning',
+    'sidebar-light-info',
+    'sidebar-light-danger',
+    'sidebar-light-success',
+    'sidebar-light-indigo',
+    'sidebar-light-lightblue',
+    'sidebar-light-navy',
+    'sidebar-light-purple',
+    'sidebar-light-fuchsia',
+    'sidebar-light-pink',
+    'sidebar-light-maroon',
+    'sidebar-light-orange',
+    'sidebar-light-lime',
+    'sidebar-light-teal',
+    'sidebar-light-olive'
+  ]
+
+  $container.append('<h6>Accent Color Variants</h6>')
+  var $accent_variants = $('<div />', {
+    'class': 'd-flex'
+  })
+  $container.append($accent_variants)
+  $container.append(createSkinBlock(accent_colors, function () {
+    var color         = $(this).data('color')
+    var accent_class = color
+    var $body      = $('body')
+    accent_colors.map(function (skin) {
+      $body.removeClass(skin)
+    })
+
+    $body.addClass(accent_class)
+  }))
+
+  $container.append('<h6>Dark Sidebar Variants</h6>')
+  var $sidebar_variants_dark = $('<div />', {
+    'class': 'd-flex'
+  })
+  $container.append($sidebar_variants_dark)
+  $container.append(createSkinBlock(sidebar_colors, function () {
+    var color         = $(this).data('color')
+    var sidebar_class = 'sidebar-dark-' + color.replace('bg-', '')
+    var $sidebar      = $('.main-sidebar')
+    sidebar_skins.map(function (skin) {
+      $sidebar.removeClass(skin)
+    })
+
+    $sidebar.addClass(sidebar_class)
+  }))
+
+  $container.append('<h6>Light Sidebar Variants</h6>')
+  var $sidebar_variants_light = $('<div />', {
+    'class': 'd-flex'
+  })
+  $container.append($sidebar_variants_light)
+  $container.append(createSkinBlock(sidebar_colors, function () {
+    var color         = $(this).data('color')
+    var sidebar_class = 'sidebar-light-' + color.replace('bg-', '')
+    var $sidebar      = $('.main-sidebar')
+    sidebar_skins.map(function (skin) {
+      $sidebar.removeClass(skin)
+    })
+
+    $sidebar.addClass(sidebar_class)
+  }))
+
+  var logo_skins = navbar_all_colors
+  $container.append('<h6>Brand Logo Variants</h6>')
+  var $logo_variants = $('<div />', {
+    'class': 'd-flex'
+  })
+  $container.append($logo_variants)
+  var $clear_btn = $('<a />', {
+    href: 'javascript:void(0)'
+  }).text('clear').on('click', function () {
+    var $logo = $('.brand-link')
+    logo_skins.map(function (skin) {
+      $logo.removeClass(skin)
+    })
+  })
+  $container.append(createSkinBlock(logo_skins, function () {
+    var color = $(this).data('color')
+    var $logo = $('.brand-link')
+    logo_skins.map(function (skin) {
+      $logo.removeClass(skin)
+    })
+    $logo.addClass(color)
+  }).append($clear_btn))
+
+  function createSkinBlock(colors, callback) {
+    var $block = $('<div />', {
+      'class': 'd-flex flex-wrap mb-3'
+    })
+
+    colors.map(function (color) {
+      var $color = $('<div />', {
+        'class': (typeof color === 'object' ? color.join(' ') : color).replace('navbar-', 'bg-').replace('accent-', 'bg-') + ' elevation-2'
+      })
+
+      $block.append($color)
+
+      $color.data('color', color)
+
+      $color.css({
+        width       : '40px',
+        height      : '20px',
+        borderRadius: '25px',
+        marginRight : 10,
+        marginBottom: 10,
+        opacity     : 0.8,
+        cursor      : 'pointer'
+      })
+
+      $color.hover(function () {
+        $(this).css({ opacity: 1 }).removeClass('elevation-2').addClass('elevation-4')
+      }, function () {
+        $(this).css({ opacity: 0.8 }).removeClass('elevation-4').addClass('elevation-2')
+      })
+
+      if (callback) {
+        $color.on('click', callback)
+      }
+    })
+
+    return $block
+  }
+})(jQuery)

src/main/resources/static/dist/js/pages/dashboard.js

@@ -0,0 +1,264 @@
+/*
+ * Author: Abdullah A Almsaeed
+ * Date: 4 Jan 2014
+ * Description:
+ *      This is a demo file used only for the main dashboard (index.html)
+ **/
+
+$(function () {
+
+  'use strict'
+
+  // Make the dashboard widgets sortable Using jquery UI
+  $('.connectedSortable').sortable({
+    placeholder         : 'sort-highlight',
+    connectWith         : '.connectedSortable',
+    handle              : '.card-header, .nav-tabs',
+    forcePlaceholderSize: true,
+    zIndex              : 999999
+  })
+  $('.connectedSortable .card-header, .connectedSortable .nav-tabs-custom').css('cursor', 'move')
+
+  // jQuery UI sortable for the todo list
+  $('.todo-list').sortable({
+    placeholder         : 'sort-highlight',
+    handle              : '.handle',
+    forcePlaceholderSize: true,
+    zIndex              : 999999
+  })
+
+  // bootstrap WYSIHTML5 - text editor
+  $('.textarea').summernote()
+
+  $('.daterange').daterangepicker({
+    ranges   : {
+      'Today'       : [moment(), moment()],
+      'Yesterday'   : [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
+      'Last 7 Days' : [moment().subtract(6, 'days'), moment()],
+      'Last 30 Days': [moment().subtract(29, 'days'), moment()],
+      'This Month'  : [moment().startOf('month'), moment().endOf('month')],
+      'Last Month'  : [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
+    },
+    startDate: moment().subtract(29, 'days'),
+    endDate  : moment()
+  }, function (start, end) {
+    window.alert('You chose: ' + start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'))
+  })
+
+  /* jQueryKnob */
+  $('.knob').knob()
+
+  // jvectormap data
+  var visitorsData = {
+    'US': 398, //USA
+    'SA': 400, //Saudi Arabia
+    'CA': 1000, //Canada
+    'DE': 500, //Germany
+    'FR': 760, //France
+    'CN': 300, //China
+    'AU': 700, //Australia
+    'BR': 600, //Brazil
+    'IN': 800, //India
+    'GB': 320, //Great Britain
+    'RU': 3000 //Russia
+  }
+  // World map by jvectormap
+  $('#world-map').vectorMap({
+    map              : 'usa_en',
+    backgroundColor  : 'transparent',
+    regionStyle      : {
+      initial: {
+        fill            : 'rgba(255, 255, 255, 0.7)',
+        'fill-opacity'  : 1,
+        stroke          : 'rgba(0,0,0,.2)',
+        'stroke-width'  : 1,
+        'stroke-opacity': 1
+      }
+    },
+    series           : {
+      regions: [{
+        values           : visitorsData,
+        scale            : ['#ffffff', '#0154ad'],
+        normalizeFunction: 'polynomial'
+      }]
+    },
+    onRegionLabelShow: function (e, el, code) {
+      if (typeof visitorsData[code] != 'undefined')
+        el.html(el.html() + ': ' + visitorsData[code] + ' new visitors')
+    }
+  })
+
+  // Sparkline charts
+  var sparkline1 = new Sparkline($("#sparkline-1")[0], {width: 80, height: 50, lineColor: '#92c1dc', endColor: '#ebf4f9'});
+  var sparkline2 = new Sparkline($("#sparkline-2")[0], {width: 80, height: 50, lineColor: '#92c1dc', endColor: '#ebf4f9'});
+  var sparkline3 = new Sparkline($("#sparkline-3")[0], {width: 80, height: 50, lineColor: '#92c1dc', endColor: '#ebf4f9'});
+
+  sparkline1.draw([1000, 1200, 920, 927, 931, 1027, 819, 930, 1021]);
+  sparkline2.draw([515, 519, 520, 522, 652, 810, 370, 627, 319, 630, 921]);
+  sparkline3.draw([15, 19, 20, 22, 33, 27, 31, 27, 19, 30, 21]);
+
+  // The Calender
+  $('#calendar').datetimepicker({
+    format: 'L',
+    inline: true
+  })
+
+  // SLIMSCROLL FOR CHAT WIDGET
+  $('#chat-box').overlayScrollbars({
+    height: '250px'
+  })
+
+  /* Chart.js Charts */
+  // Sales chart
+  var salesChartCanvas = document.getElementById('revenue-chart-canvas').getContext('2d');
+  //$('#revenue-chart').get(0).getContext('2d');
+
+  var salesChartData = {
+    labels  : ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+    datasets: [
+      {
+        label               : 'Digital Goods',
+        backgroundColor     : 'rgba(60,141,188,0.9)',
+        borderColor         : 'rgba(60,141,188,0.8)',
+        pointRadius          : false,
+        pointColor          : '#3b8bba',
+        pointStrokeColor    : 'rgba(60,141,188,1)',
+        pointHighlightFill  : '#fff',
+        pointHighlightStroke: 'rgba(60,141,188,1)',
+        data                : [28, 48, 40, 19, 86, 27, 90]
+      },
+      {
+        label               : 'Electronics',
+        backgroundColor     : 'rgba(210, 214, 222, 1)',
+        borderColor         : 'rgba(210, 214, 222, 1)',
+        pointRadius         : false,
+        pointColor          : 'rgba(210, 214, 222, 1)',
+        pointStrokeColor    : '#c1c7d1',
+        pointHighlightFill  : '#fff',
+        pointHighlightStroke: 'rgba(220,220,220,1)',
+        data                : [65, 59, 80, 81, 56, 55, 40]
+      },
+    ]
+  }
+
+  var salesChartOptions = {
+    maintainAspectRatio : false,
+    responsive : true,
+    legend: {
+      display: false
+    },
+    scales: {
+      xAxes: [{
+        gridLines : {
+          display : false,
+        }
+      }],
+      yAxes: [{
+        gridLines : {
+          display : false,
+        }
+      }]
+    }
+  }
+
+  // This will get the first returned node in the jQuery collection.
+  var salesChart = new Chart(salesChartCanvas, { 
+      type: 'line', 
+      data: salesChartData, 
+      options: salesChartOptions
+    }
+  )
+
+  // Donut Chart
+  var pieChartCanvas = $('#sales-chart-canvas').get(0).getContext('2d')
+  var pieData        = {
+    labels: [
+        'Instore Sales', 
+        'Download Sales',
+        'Mail-Order Sales', 
+    ],
+    datasets: [
+      {
+        data: [30,12,20],
+        backgroundColor : ['#f56954', '#00a65a', '#f39c12'],
+      }
+    ]
+  }
+  var pieOptions = {
+    legend: {
+      display: false
+    },
+    maintainAspectRatio : false,
+    responsive : true,
+  }
+  //Create pie or douhnut chart
+  // You can switch between pie and douhnut using the method below.
+  var pieChart = new Chart(pieChartCanvas, {
+    type: 'doughnut',
+    data: pieData,
+    options: pieOptions      
+  });
+
+  // Sales graph chart
+  var salesGraphChartCanvas = $('#line-chart').get(0).getContext('2d');
+  //$('#revenue-chart').get(0).getContext('2d');
+
+  var salesGraphChartData = {
+    labels  : ['2011 Q1', '2011 Q2', '2011 Q3', '2011 Q4', '2012 Q1', '2012 Q2', '2012 Q3', '2012 Q4', '2013 Q1', '2013 Q2'],
+    datasets: [
+      {
+        label               : 'Digital Goods',
+        fill                : false,
+        borderWidth         : 2,
+        lineTension         : 0,
+        spanGaps : true,
+        borderColor         : '#efefef',
+        pointRadius         : 3,
+        pointHoverRadius    : 7,
+        pointColor          : '#efefef',
+        pointBackgroundColor: '#efefef',
+        data                : [2666, 2778, 4912, 3767, 6810, 5670, 4820, 15073, 10687, 8432]
+      }
+    ]
+  }
+
+  var salesGraphChartOptions = {
+    maintainAspectRatio : false,
+    responsive : true,
+    legend: {
+      display: false,
+    },
+    scales: {
+      xAxes: [{
+        ticks : {
+          fontColor: '#efefef',
+        },
+        gridLines : {
+          display : false,
+          color: '#efefef',
+          drawBorder: false,
+        }
+      }],
+      yAxes: [{
+        ticks : {
+          stepSize: 5000,
+          fontColor: '#efefef',
+        },
+        gridLines : {
+          display : true,
+          color: '#efefef',
+          drawBorder: false,
+        }
+      }]
+    }
+  }
+
+  // This will get the first returned node in the jQuery collection.
+  var salesGraphChart = new Chart(salesGraphChartCanvas, { 
+      type: 'line', 
+      data: salesGraphChartData, 
+      options: salesGraphChartOptions
+    }
+  )
+
+})

src/main/resources/static/dist/js/pages/dashboard2.js

@@ -0,0 +1,267 @@
+$(function () {
+
+  'use strict'
+
+  /* ChartJS
+   * -------
+   * Here we will create a few charts using ChartJS
+   */
+
+  //-----------------------
+  //- MONTHLY SALES CHART -
+  //-----------------------
+
+  // Get context with jQuery - using jQuery's .get() method.
+  var salesChartCanvas = $('#salesChart').get(0).getContext('2d')
+
+  var salesChartData = {
+    labels  : ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+    datasets: [
+      {
+        label               : 'Digital Goods',
+        backgroundColor     : 'rgba(60,141,188,0.9)',
+        borderColor         : 'rgba(60,141,188,0.8)',
+        pointRadius          : false,
+        pointColor          : '#3b8bba',
+        pointStrokeColor    : 'rgba(60,141,188,1)',
+        pointHighlightFill  : '#fff',
+        pointHighlightStroke: 'rgba(60,141,188,1)',
+        data                : [28, 48, 40, 19, 86, 27, 90]
+      },
+      {
+        label               : 'Electronics',
+        backgroundColor     : 'rgba(210, 214, 222, 1)',
+        borderColor         : 'rgba(210, 214, 222, 1)',
+        pointRadius         : false,
+        pointColor          : 'rgba(210, 214, 222, 1)',
+        pointStrokeColor    : '#c1c7d1',
+        pointHighlightFill  : '#fff',
+        pointHighlightStroke: 'rgba(220,220,220,1)',
+        data                : [65, 59, 80, 81, 56, 55, 40]
+      },
+    ]
+  }
+
+  var salesChartOptions = {
+    maintainAspectRatio : false,
+    responsive : true,
+    legend: {
+      display: false
+    },
+    scales: {
+      xAxes: [{
+        gridLines : {
+          display : false,
+        }
+      }],
+      yAxes: [{
+        gridLines : {
+          display : false,
+        }
+      }]
+    }
+  }
+
+  // This will get the first returned node in the jQuery collection.
+  var salesChart = new Chart(salesChartCanvas, { 
+      type: 'line', 
+      data: salesChartData, 
+      options: salesChartOptions
+    }
+  )
+
+  //---------------------------
+  //- END MONTHLY SALES CHART -
+  //---------------------------
+
+  //-------------
+  //- PIE CHART -
+  //-------------
+  // Get context with jQuery - using jQuery's .get() method.
+    var pieChartCanvas = $('#pieChart').get(0).getContext('2d')
+    var pieData        = {
+      labels: [
+          'Chrome', 
+          'IE',
+          'FireFox', 
+          'Safari', 
+          'Opera', 
+          'Navigator', 
+      ],
+      datasets: [
+        {
+          data: [700,500,400,600,300,100],
+          backgroundColor : ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de'],
+        }
+      ]
+    }
+    var pieOptions     = {
+      legend: {
+        display: false
+      }
+    }
+    //Create pie or douhnut chart
+    // You can switch between pie and douhnut using the method below.
+    var pieChart = new Chart(pieChartCanvas, {
+      type: 'doughnut',
+      data: pieData,
+      options: pieOptions      
+    })
+
+  //-----------------
+  //- END PIE CHART -
+  //-----------------
+
+  /* jVector Maps
+   * ------------
+   * Create a world map with markers
+   */
+  $('#world-map-markers').mapael({
+      map: {
+        name : "usa_states",
+        zoom: {
+          enabled: true,
+          maxLevel: 10
+        },
+      },
+    }
+  );
+
+  // $('#world-map-markers').vectorMap({
+  //   map              : 'world_en',
+  //   normalizeFunction: 'polynomial',
+  //   hoverOpacity     : 0.7,
+  //   hoverColor       : false,
+  //   backgroundColor  : 'transparent',
+  //   regionStyle      : {
+  //     initial      : {
+  //       fill            : 'rgba(210, 214, 222, 1)',
+  //       'fill-opacity'  : 1,
+  //       stroke          : 'none',
+  //       'stroke-width'  : 0,
+  //       'stroke-opacity': 1
+  //     },
+  //     hover        : {
+  //       'fill-opacity': 0.7,
+  //       cursor        : 'pointer'
+  //     },
+  //     selected     : {
+  //       fill: 'yellow'
+  //     },
+  //     selectedHover: {}
+  //   },
+  //   markerStyle      : {
+  //     initial: {
+  //       fill  : '#00a65a',
+  //       stroke: '#111'
+  //     }
+  //   },
+  //   markers          : [
+  //     {
+  //       latLng: [41.90, 12.45],
+  //       name  : 'Vatican City'
+  //     },
+  //     {
+  //       latLng: [43.73, 7.41],
+  //       name  : 'Monaco'
+  //     },
+  //     {
+  //       latLng: [-0.52, 166.93],
+  //       name  : 'Nauru'
+  //     },
+  //     {
+  //       latLng: [-8.51, 179.21],
+  //       name  : 'Tuvalu'
+  //     },
+  //     {
+  //       latLng: [43.93, 12.46],
+  //       name  : 'San Marino'
+  //     },
+  //     {
+  //       latLng: [47.14, 9.52],
+  //       name  : 'Liechtenstein'
+  //     },
+  //     {
+  //       latLng: [7.11, 171.06],
+  //       name  : 'Marshall Islands'
+  //     },
+  //     {
+  //       latLng: [17.3, -62.73],
+  //       name  : 'Saint Kitts and Nevis'
+  //     },
+  //     {
+  //       latLng: [3.2, 73.22],
+  //       name  : 'Maldives'
+  //     },
+  //     {
+  //       latLng: [35.88, 14.5],
+  //       name  : 'Malta'
+  //     },
+  //     {
+  //       latLng: [12.05, -61.75],
+  //       name  : 'Grenada'
+  //     },
+  //     {
+  //       latLng: [13.16, -61.23],
+  //       name  : 'Saint Vincent and the Grenadines'
+  //     },
+  //     {
+  //       latLng: [13.16, -59.55],
+  //       name  : 'Barbados'
+  //     },
+  //     {
+  //       latLng: [17.11, -61.85],
+  //       name  : 'Antigua and Barbuda'
+  //     },
+  //     {
+  //       latLng: [-4.61, 55.45],
+  //       name  : 'Seychelles'
+  //     },
+  //     {
+  //       latLng: [7.35, 134.46],
+  //       name  : 'Palau'
+  //     },
+  //     {
+  //       latLng: [42.5, 1.51],
+  //       name  : 'Andorra'
+  //     },
+  //     {
+  //       latLng: [14.01, -60.98],
+  //       name  : 'Saint Lucia'
+  //     },
+  //     {
+  //       latLng: [6.91, 158.18],
+  //       name  : 'Federated States of Micronesia'
+  //     },
+  //     {
+  //       latLng: [1.3, 103.8],
+  //       name  : 'Singapore'
+  //     },
+  //     {
+  //       latLng: [1.46, 173.03],
+  //       name  : 'Kiribati'
+  //     },
+  //     {
+  //       latLng: [-21.13, -175.2],
+  //       name  : 'Tonga'
+  //     },
+  //     {
+  //       latLng: [15.3, -61.38],
+  //       name  : 'Dominica'
+  //     },
+  //     {
+  //       latLng: [-20.2, 57.5],
+  //       name  : 'Mauritius'
+  //     },
+  //     {
+  //       latLng: [26.02, 50.55],
+  //       name  : 'Bahrain'
+  //     },
+  //     {
+  //       latLng: [0.33, 6.73],
+  //       name  : 'São Tomé and Príncipe'
+  //     }
+  //   ]
+  // })
+
+})

src/main/resources/static/dist/js/pages/dashboard3.js

@@ -0,0 +1,140 @@
+$(function () {
+  'use strict'
+
+  var ticksStyle = {
+    fontColor: '#495057',
+    fontStyle: 'bold'
+  }
+
+  var mode      = 'index'
+  var intersect = true
+
+  var $salesChart = $('#sales-chart')
+  var salesChart  = new Chart($salesChart, {
+    type   : 'bar',
+    data   : {
+      labels  : ['JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
+      datasets: [
+        {
+          backgroundColor: '#007bff',
+          borderColor    : '#007bff',
+          data           : [1000, 2000, 3000, 2500, 2700, 2500, 3000]
+        },
+        {
+          backgroundColor: '#ced4da',
+          borderColor    : '#ced4da',
+          data           : [700, 1700, 2700, 2000, 1800, 1500, 2000]
+        }
+      ]
+    },
+    options: {
+      maintainAspectRatio: false,
+      tooltips           : {
+        mode     : mode,
+        intersect: intersect
+      },
+      hover              : {
+        mode     : mode,
+        intersect: intersect
+      },
+      legend             : {
+        display: false
+      },
+      scales             : {
+        yAxes: [{
+          // display: false,
+          gridLines: {
+            display      : true,
+            lineWidth    : '4px',
+            color        : 'rgba(0, 0, 0, .2)',
+            zeroLineColor: 'transparent'
+          },
+          ticks    : $.extend({
+            beginAtZero: true,
+
+            // Include a dollar sign in the ticks
+            callback: function (value, index, values) {
+              if (value >= 1000) {
+                value /= 1000
+                value += 'k'
+              }
+              return '$' + value
+            }
+          }, ticksStyle)
+        }],
+        xAxes: [{
+          display  : true,
+          gridLines: {
+            display: false
+          },
+          ticks    : ticksStyle
+        }]
+      }
+    }
+  })
+
+  var $visitorsChart = $('#visitors-chart')
+  var visitorsChart  = new Chart($visitorsChart, {
+    data   : {
+      labels  : ['18th', '20th', '22nd', '24th', '26th', '28th', '30th'],
+      datasets: [{
+        type                : 'line',
+        data                : [100, 120, 170, 167, 180, 177, 160],
+        backgroundColor     : 'transparent',
+        borderColor         : '#007bff',
+        pointBorderColor    : '#007bff',
+        pointBackgroundColor: '#007bff',
+        fill                : false
+        // pointHoverBackgroundColor: '#007bff',
+        // pointHoverBorderColor    : '#007bff'
+      },
+        {
+          type                : 'line',
+          data                : [60, 80, 70, 67, 80, 77, 100],
+          backgroundColor     : 'tansparent',
+          borderColor         : '#ced4da',
+          pointBorderColor    : '#ced4da',
+          pointBackgroundColor: '#ced4da',
+          fill                : false
+          // pointHoverBackgroundColor: '#ced4da',
+          // pointHoverBorderColor    : '#ced4da'
+        }]
+    },
+    options: {
+      maintainAspectRatio: false,
+      tooltips           : {
+        mode     : mode,
+        intersect: intersect
+      },
+      hover              : {
+        mode     : mode,
+        intersect: intersect
+      },
+      legend             : {
+        display: false
+      },
+      scales             : {
+        yAxes: [{
+          // display: false,
+          gridLines: {
+            display      : true,
+            lineWidth    : '4px',
+            color        : 'rgba(0, 0, 0, .2)',
+            zeroLineColor: 'transparent'
+          },
+          ticks    : $.extend({
+            beginAtZero : true,
+            suggestedMax: 200
+          }, ticksStyle)
+        }],
+        xAxes: [{
+          display  : true,
+          gridLines: {
+            display: false
+          },
+          ticks    : ticksStyle
+        }]
+      }
+    }
+  })
+})

src/main/resources/static/docs/.npmignore

@@ -0,0 +1 @@
+*

src/main/resources/static/docs/404.html

@@ -0,0 +1,26 @@
+---
+layout: default
+title: Error 404
+---
+
+  <div class="content-wrapper">
+    <section class="content-header">
+      <div class="container-fluid">
+        <div class="row mb-2">
+        </div>
+      </div>
+    </section>
+
+    <section class="content">
+      <div class="error-page">
+        <h2 class="headline text-warning"> 404</h2>
+        <div class="error-content">
+          <h3><i class="fas fa-exclamation-triangle text-warning"></i> Oops! Page not found.</h3>
+          <p>
+            We could not find the page you were looking for.
+            Meanwhile, you may <a href="{{ site.baseurl }}{% link index.md %}">return to index</a>.
+          </p>
+        </div>
+      </div>
+    </section>
+  </div>

src/main/resources/static/docs/Gemfile

@@ -0,0 +1,7 @@
+source 'https://rubygems.org'
+
+gem "jekyll", "~> 3.8.5"
+
+gem "rouge"
+
+gem 'github-pages', group: :jekyll_plugins

src/main/resources/static/docs/_config.yml

@@ -0,0 +1,106 @@
+# Welcome to Jekyll!
+#
+# This config file is meant for settings that affect your whole blog, values
+# which you are expected to set up once and rarely edit after that. If you find
+# yourself editing this file very often, consider using Jekyll's data files
+# feature for the data you need to update frequently.
+#
+# For technical reasons, this file is *NOT* reloaded automatically when you use
+# 'bundle exec jekyll serve'. If you change this file, please restart the server process.
+
+# Site settings
+# These are used to personalize your new site. If you look in the HTML files,
+# you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
+# You can create any custom variable you would like, and they will be accessible
+# in the templates via {{ site.myvariable }}.
+markdown:  kramdown
+kramdown:
+  auto_ids: false
+
+highlighter: rouge
+plugins:
+  - jekyll-seo-tag
+
+title: AdminLTE v3 Documentaion
+version: v3.0.2
+description: >- # this means to ignore newlines until "baseurl:"
+  AdminLTE v3 Documentaion
+
+navigation:
+- title: Installation
+  url: index.html
+  icon: fas fa-microchip
+- title: Dependencies & Plugins
+  url: dependencies.html
+  icon: fas fa-handshake
+- title: Layout
+  url: layout.html
+  icon: fas fa-copy
+- title: Components
+  icon: fas fa-th
+  url: components
+  subitems: 
+    - title: Main Header
+      url: components/main-header.html
+    - title: Main Sidebar
+      url: components/main-sidebar.html
+    - title: Control Sidebar
+      url: components/control-sidebar.html
+    - title: Card
+      url: components/cards.html
+    - title: Small-/ Info-Box
+      url: components/boxes.html
+    - title: Direct Chat
+      url: components/direct-chat.html
+    - title: Timeline
+      url: components/timeline.html
+    - title: Ribbons
+      url: components/ribbons.html
+    - title: Miscellaneous
+      url: components/miscellaneous.html
+    - title: Plugins
+      url: components/plugins.html
+- title: JavaScript
+  icon: fas fa-code
+  url: javascript
+  subitems: 
+    - title: Layout
+      url: javascript/layout.html
+    - title: Push Menu
+      url: javascript/push-menu.html
+    - title: Treeview
+      url: javascript/treeview.html
+    - title: Card Widget
+      url: javascript/card-widget.html
+    - title: CardRefresh
+      url: javascript/card-refresh.html
+    - title: Control Sidebar
+      url: javascript/control-sidebar.html
+    - title: Direct Chat
+      url: javascript/direct-chat.html
+    - title: Todo List
+      url: javascript/todo-list.html
+    - title: Toasts
+      url: javascript/toasts.html
+- title: Browser Support
+  url: browser-support.html
+  icon: fab fa-chrome
+- title: Upgrade Guide
+  url: upgrade-guide.html
+  icon: fas fa-hand-point-up
+- title: Implementations
+  url: implementations.html
+  icon: fas fa-bookmark
+- title: FAQ
+  url: faq.html
+  icon: fas fa-question-circle
+- title: License
+  url: license.html
+  icon: fas fa-file-alt
+
+# Exclude from processing.
+# The following items will not be processed, by default. Create a custom list
+# to override the default setting.
+exclude:
+  - Gemfile
+  - Gemfile.lock

src/main/resources/static/docs/_includes/foot.html

@@ -0,0 +1,5 @@
+
+  <script src="{{ 'assets/plugins/jquery/jquery.min.js' | absolute_url }}"></script>
+  <script src="{{ 'assets/plugins/bootstrap/js/bootstrap.bundle.min.js' | absolute_url }}"></script>
+  <script src="{{ 'assets/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js' | absolute_url }}"></script>
+  <script src="{{ 'assets/js/adminlte.min.js' | absolute_url }}"></script>

src/main/resources/static/docs/_includes/footer.html

@@ -0,0 +1,6 @@
+    <footer class="main-footer">
+      <div class="float-right d-none d-sm-inline">
+        {{site.version}}
+      </div>
+      <strong>Copyright &copy; 2014-{{ site.time | date: '%Y' }} <a href="https://adminlte.io">AdminLTE.io</a>.</strong> All rights reserved.
+    </footer>

src/main/resources/static/docs/_includes/head.html

@@ -0,0 +1,15 @@
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+
+    <title>{{ page.title }} | AdminLTE 3 Documentation</title>
+    {% seo %}
+    
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700">
+    <link rel="stylesheet" href="{{'assets/plugins/fontawesome-free/css/all.min.css' | absolute_url}}">
+    <link rel="stylesheet" href="{{'assets/plugins/overlayScrollbars/css/OverlayScrollbars.min.css' | absolute_url}}">
+    <link rel="stylesheet" href="{{'assets/css/docs.css' | absolute_url}}">
+    <link rel="stylesheet" href="{{'assets/css/highlighter.css' | absolute_url}}">
+    <link rel="stylesheet" href="{{'assets/css/adminlte.min.css' | absolute_url}}">
+</head>

src/main/resources/static/docs/_includes/navbar.html

@@ -0,0 +1,36 @@
+  <nav class="main-header navbar navbar-expand navbar-white navbar-light">
+    <ul class="navbar-nav">
+      <li class="nav-item">
+        <a class="nav-link" data-widget="pushmenu" href="#"><i class="fa fa-bars"></i></a>
+      </li>
+      <li class="nav-item dropdown">
+        <a class="nav-link bg-info rounded dropdown-toggle" href="#" id="navbarVersionDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          v3.0
+        </a>
+        <div class="dropdown-menu py-0" aria-labelledby="navbarVersionDropdown">
+          <a class="dropdown-item bg-info disabled" href="#">v3.0</a>
+          <div class="dropdown-divider"></div>
+          <a class="dropdown-item" href="https://adminlte.io/docs/2.4/installation">v2.4</a>
+          <a class="dropdown-item" href="https://adminlte.io/themes/AdminLTE/documentation/index.html"><= v2.3</a>
+        </div>
+      </li>
+    </ul>
+
+    <ul class="navbar-nav ml-auto">
+      <!-- <li class="nav-item d-none d-sm-inline-block">
+        <a href="index3.html" class="nav-link">Home</a>
+      </li> -->
+    </ul>
+
+    <!-- SEARCH FORM -->
+    <!-- <form class="form-check-inline ml-3">
+      <div class="input-group input-group-sm">
+        <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
+        <div class="input-group-append">
+          <button class="btn btn-navbar" type="submit">
+            <i class="fa fa-search"></i>
+          </button>
+        </div>
+      </div>
+    </form> -->
+    </nav>

src/main/resources/static/docs/_includes/sidebar.html

@@ -0,0 +1,51 @@
+  <aside class="main-sidebar sidebar-dark-primary elevation-4">
+    <a href="{{'index.html' | absolute_url}}" class="brand-link logo-switch">
+      <img src="{{'assets/img/logo-xs.png' | absolute_url}}" alt="AdminLTE Docs Logo Small" class="brand-image-xl logo-xs">
+      <img src="{{'assets/img/logo-xl.png' | absolute_url}}" alt="AdminLTE Docs Logo Large" class="brand-image-xs logo-xl" style="left: 12px">
+    </a>
+    <div class="sidebar">
+      <nav class="mt-2">
+        <ul class="nav nav-pills nav-sidebar nav-child-indent flex-column" data-widget="treeview" role="menu">
+         {% for item in site.navigation %}
+            {% assign subitem_active = 'false' %}
+            {% for subitem in item.subitems %}
+              {% assign subitem_url = '/' | append: subitem.url %}
+              {% if subitem_url == page.url %}
+                {% assign subitem_active = 'true' %}
+              {% endif %}
+            {% endfor %}
+
+            <li class="nav-item {% if item.subitems %}has-treeview{% endif %} {% if subitem_active == 'true' %}menu-open{% endif %}">
+              {% if item.url == 'index.html' %}
+                {% assign item_url = '/' %}
+              {% else %}
+                {% assign item_url = '/' | append: item.url %}
+              {% endif %}
+
+              <a href="{% if item.url %}{{item.url | absolute_url}}{% else %}#{% endif %}" class="nav-link {% if item_url == page.url %}active{% endif %}{% if subitem_active == 'true'%}active{% endif %}">
+                <i class="nav-icon {{item.icon}}"></i>
+                <p>
+                  {{item.title}}
+                  {% if item.subitems %}<i class="right fas fa-angle-left"></i>{% endif %}
+                </p>
+              </a>
+
+              {% if item.subitems %}
+                <ul class="nav nav-treeview">
+                {% for subitem in item.subitems %}
+                  {% assign subitem_url = '/' | append: subitem.url %}
+                  <li class="nav-item">
+                    <a href="{{subitem.url | absolute_url}}" class="nav-link {% if subitem_url == page.url %}active{% endif %}">
+                      <i class="far fa-circle nav-icon"></i>
+                      <p>{{subitem.title}}</p>
+                    </a>
+                  </li>
+                {% endfor %}
+                </ul>
+              {% endif %}
+            </li>
+         {% endfor %}
+        </ul>
+      </nav>
+    </div>
+  </aside>

src/main/resources/static/docs/_layouts/default.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: site.lang | default: "en" }}">
+
+  {%- include head.html -%}
+
+  <body class="hold-transition sidebar-mini layout-fixed layout-navbar-fixed">
+    <div class="wrapper">
+
+      {%- include navbar.html -%}
+      {%- include sidebar.html -%}
+
+      {{content}}
+    
+      {%- include footer.html -%}
+    </div>
+  
+    {%- include foot.html -%}
+  </body>
+</html>

src/main/resources/static/docs/_layouts/home.html

@@ -0,0 +1,41 @@
+---
+layout: default
+---
+
+<div>
+
+  {%- if page.title -%}
+  <header>
+    <h1>{{ page.title }}</h1>
+  </header>
+  {%- endif -%}
+
+  <section>
+    {{ content }}
+  </section>
+
+  {%- if site.posts.size > 0 -%}
+    <p class="h4">{{ page.list_title | default: "Posts" }}</p>
+    <ul class="list-unstyled">
+      {%- for post in site.posts -%}
+      <li>
+        <span class="text-muted">
+          {%- assign date_format = "%b %-d, %Y" -%}
+          {{ post.date | date: date_format }}
+        </span>
+        <p class="h5">
+          <a href="{{ post.url | relative_url }}">
+            {{ post.title | escape }}
+          </a>
+        </p>
+        {%- if site.show_excerpts -%}
+          {{ post.excerpt }}
+        {%- endif -%}
+      </li>
+      {%- endfor -%}
+    </ul>
+
+    <p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | relative_url }}">via RSS</a></p>
+  {%- endif -%}
+
+</div>

src/main/resources/static/docs/_layouts/page.html

@@ -0,0 +1,13 @@
+---
+layout: default
+---
+
+<div class="content-wrapper px-4 py-2">
+	<div class="content-header">
+		<h1 class="text-dark">{{page.title}}</h1>
+    </div>
+
+    <div class="content px-2">
+		{{content}}
+    </div>
+</div>

src/main/resources/static/docs/_layouts/post.html

@@ -0,0 +1,13 @@
+---
+layout: default
+---
+
+<div class="content-wrapper px-4 py-2">
+  <div class="content-header">
+    <h1 class="text-dark">{{page.title}}</h1>
+    </div>
+
+    <div class="content px-2">
+    {{content}}
+    </div>
+</div>