dashboard: improve login page and update related document

Signed-off-by: Eric Zhao <sczyh16@gmail.com>

sentinel-dashboard/README.md

@@ -20,29 +20,31 @@ mvn clean package
 
 ```bash
 java -Dserver.port=8080 \
--Dserver.servlet.session.timeout=7200 \
--Dauth.username=sentinel \
--Dauth.password=123456 \
 -Dcsp.sentinel.dashboard.server=localhost:8080 \
 -Dproject.name=sentinel-dashboard \
 -jar target/sentinel-dashboard.jar
 ```
 
-上述命令中我们指定几个 JVM 参数，其中：  
+上述命令中我们指定几个 JVM 参数，其中 `-Dserver.port=8080` 是 Spring Boot 的参数，
-`-Dserver.port=8080` 用于指定 Spring Boot 启动端口为 `8080`；  
+用于指定 Spring Boot 服务端启动端口为 `8080`。其余几个是 Sentinel 客户端的参数。
-`-Dserver.servlet.session.timeout=7200` 用于指定 Spring Boot 服务器端会话的过期时间，如不带后缀的7200表示7200秒，60m表示60分钟，默认为30分钟；  
+
-`-Dauth.username=sentinel`、 `-Dauth.password=123456` 用于指定控制台的登录用户和密码分别为sentinel和123456，如果省略这2个参数，默认用户和密码均为sentinel；      
+为便于演示，我们对控制台本身加入了流量控制功能，具体做法是引入 Sentinel 提供的 `CommonFilter` 这个 Servlet Filter。
-其余几个是 Sentinel 客户端的参数。  
+上述 JVM 参数的含义是：
-为便于演示，我们对控制台本身加入了流量控制功能，具体做法是引入 `CommonFilter` 这个 Sentinel 拦截器。上述 JVM 参数的含义是：
 
 | 参数 | 作用 |
 |--------|--------|
-|`Dcsp.sentinel.dashboard.server=localhost:8080`|向 Sentinel 客户端指定控制台的地址|
+|`Dcsp.sentinel.dashboard.server=localhost:8080`|向 Sentinel 接入端指定控制台的地址|
-|`-Dproject.name=sentinel-dashboard`|向 Sentinel 指定本程序名称|
+|`-Dproject.name=sentinel-dashboard`|向 Sentinel 指定应用名称，比如上面对应的应用名称就为 `sentinel-dashboard`|
 
-全部配置项参考 [启动配置项](https://github.com/alibaba/Sentinel/wiki/%E5%90%AF%E5%8A%A8%E9%85%8D%E7%BD%AE%E9%A1%B9)
+全部的配置项可以参考 [启动配置项文档](https://github.com/alibaba/Sentinel/wiki/%E5%90%AF%E5%8A%A8%E9%85%8D%E7%BD%AE%E9%A1%B9)。
 
-经过上述配置，控制台启动后会自动向自己发送心跳。程序启动后浏览器访问`localhost:8080`即可访问 Sentinel 控制台。
+经过上述配置，控制台启动后会自动向自己发送心跳。程序启动后浏览器访问 `localhost:8080` 即可访问 Sentinel 控制台。
+
+从 Sentinel 1.6.0 开始，Sentinel 控制台支持简单的**登录**功能，默认用户名和密码都是 `sentinel`。用户可以通过如下参数进行配置：
+
+- `-Dsentinel.dashboard.auth.username=sentinel` 用于指定控制台的登录用户名为 `sentinel`；
+- `-Dsentinel.dashboard.auth.password=123456` 用于指定控制台的登录密码为 `123456`；如果省略这两个参数，默认用户和密码均为 `sentinel`；
+- `-Dserver.servlet.session.timeout=7200` 用于指定 Spring Boot 服务端 session 的过期时间，如 `7200` 表示 7200 秒；`60m` 表示 60 分钟，默认为 30 分钟；
 
 ## 2. 客户端接入
 
@@ -53,6 +55,7 @@ java -Dserver.port=8080 \
 
 ## 3. 验证是否接入成功
 
-客户端正确配置并启动后，会主动向控制台发送心跳包，汇报自己的存在；控制台收到客户端心跳包之后，会在左侧导航栏中显示该客户端信息。控制台能够看到客户端的机器信息，则表明客户端接入成功了。
+客户端正确配置并启动后，会**在初次调用后**主动向控制台发送心跳包，汇报自己的存在；
+控制台收到客户端心跳包之后，会在左侧导航栏中显示该客户端信息。如果控制台能够看到客户端的机器信息，则表明客户端接入成功了。
 
 更多：[控制台功能介绍](./Sentinel_Dashboard_Feature.md)。

sentinel-dashboard/Sentinel_Dashboard_Feature.md

@@ -55,8 +55,8 @@ Sentinel 提供了多种规则来保护系统的不同部分。流量控制规
 
 项 | 类型 | 默认值 | 最小值 | 描述
 --- | --- | --- | --- | ---
-sentinel.dashboard.auth.username | String | sentinel | 无 | 登录控制台的用户，默认sentinel
+sentinel.dashboard.auth.username | String | sentinel | 无 | 登录控制台的用户名，默认为 `sentinel`
-sentinel.dashboard.auth.password | String | sentinel | 无 | 登录控制台的密码，默认sentinel
+sentinel.dashboard.auth.password | String | sentinel | 无 | 登录控制台的密码，默认为 `sentinel`
 sentinel.dashboard.app.hideAppNoMachineMillis | Integer | 0 | 60000 | 是否隐藏无健康节点的应用，距离最近一次主机心跳时间的毫秒数，默认关闭
 sentinel.dashboard.removeAppNoMachineMillis | Integer | 0 | 120000 | 是否自动删除无健康节点的应用，距离最近一次其下节点的心跳时间毫秒数，默认关闭
 sentinel.dashboard.unhealthyMachineMillis | Integer | 60000 | 30000 | 主机失联判定，不可关闭

sentinel-dashboard/src/main/java/com/alibaba/csp/sentinel/dashboard/controller/AuthController.java

@@ -23,7 +23,7 @@ import org.apache.commons.lang.StringUtils;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 import org.springframework.beans.factory.annotation.Value;
-import org.springframework.http.MediaType;
+import org.springframework.web.bind.annotation.PostMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RequestMethod;
 import org.springframework.web.bind.annotation.RestController;
@@ -35,7 +35,7 @@ import javax.servlet.http.HttpServletRequest;
  * @since 1.6.0
  */
 @RestController
-@RequestMapping(value = "/auth", produces = MediaType.APPLICATION_JSON_VALUE)
+@RequestMapping("/auth")
 public class AuthController {
 
     private static Logger LOGGER = LoggerFactory.getLogger(AuthController.class);
@@ -46,7 +46,7 @@ public class AuthController {
     @Value("${auth.password:sentinel}")
     private String authPassword;
 
-    @RequestMapping(value = "/login", method = RequestMethod.POST)
+    @PostMapping("/login")
     public Result login(HttpServletRequest request, String username, String password) {
         if (StringUtils.isNotBlank(DashboardConfig.getAuthUsername())) {
             authUsername = DashboardConfig.getAuthUsername();
@@ -56,13 +56,13 @@ public class AuthController {
             authPassword = DashboardConfig.getAuthPassword();
         }
 
-        /**
+        /*
          * If auth.username or auth.password is blank(set in application.properties or VM arguments),
          * auth will pass, as the front side validate the input which can't be blank,
          * so user can input any username or password(both are not blank) to login in that case.
          */
-        if (   StringUtils.isNotBlank(authUsername) && !authUsername.equals(username)
+        if (StringUtils.isNotBlank(authUsername) && !authUsername.equals(username)
-            || StringUtils.isNotBlank(authPassword) && !authPassword.equals(password)) {
+                || StringUtils.isNotBlank(authPassword) && !authPassword.equals(password)) {
             LOGGER.error("Login failed: Invalid username or password, username=" + username + ", password=" + password);
             return Result.ofFail(-1, "Invalid username or password");
         }

sentinel-dashboard/src/main/resources/application.properties

@@ -11,6 +11,6 @@ logging.pattern.file= %d{yyyy-MM-dd HH:mm:ss} [%thread] %-5level %logger{36} - %
 
 #auth settings
 auth.filter.exclude-urls=/,/auth/login,/auth/logout,/registry/machine
-auth.filter.exclude-url-suffixes=htm,html,js,css,map,ico,ttf,woff
+auth.filter.exclude-url-suffixes=htm,html,js,css,map,ico,ttf,woff,png
 auth.username=sentinel
 auth.password=sentinel

sentinel-dashboard/src/main/webapp/resources/app/scripts/directives/header/header.html

@@ -5,7 +5,8 @@
     </div>
     <ul class="nav navbar-nav navbar-right">
       <li>
-        <a href="javascript:void(0);" ng-click="logout()" style="margin: 3px 15px 0px 0px;"><span class="glyphicon glyphicon-log-out"></span>退出</a>
+        <a href="javascript:void(0);" ng-click="logout()"
+           style="margin: 3px 15px 0 0;"><span class="glyphicon glyphicon-log-out"></span>&nbsp;注销</a>
       </li>
     </ul>
   </nav>

sentinel-dashboard/src/main/webapp/resources/app/views/login.html

@@ -1,6 +1,8 @@
 <div class="container">
-    <div class="row" style="margin: 200px auto 15px auto; display: table;">
+    <div class="row" style="margin: 200px auto 15px auto; text-align: center;">
-        <h1 id='login_title'>Sentinel控制台</h1>
+        <img src="../../assets/img/sentinel-logo.png" alt="Sentinel Logo"
+             style="max-height: 25%; max-width: 25%;">
+        <!-- <h1 id='login_title'>Sentinel 控制台</h1> -->
     </div>
     <div class="row">
         <div class="col-md-4" >
@@ -10,7 +12,7 @@
                 <div class="form-group">
                     <label class="col-md-2 control-label">用户</label>
                     <div class="col-md-9">
-                        <input class="form-control" type="text" ng-model="username" autofocus="autofocus"/>
+                        <input class="form-control" type="text" ng-model="username" autofocus="autofocus" required/>
                     </div>
                 </div>
 
@@ -20,8 +22,11 @@
                         <input class="form-control" type="password" ng-model="password" />
                     </div>
                 </div>
-                <div class="form-group btn-group" style="margin: 0px auto;display: table;">
+                <div class="row text-center" style="margin-top: 20px;">
-                    <button class="btn btn-success btn-primary" ng-click="login()">登录</button>
+                    <button class="btn btn-outline-success" style="height: 30px;font-size: 12px;"
+                            ng-click="login()">登录</button>
+                    <button class="btn btn-outline-primary" style="height: 30px;font-size: 12px;margin-left: 10px;"
+                            type="reset">清空</button>
                 </div>
             </form>
         </div>