add: API Token相关的前端页面

cmd/dashboard/controller/member_api.go

@@ -57,18 +57,21 @@ func (ma *memberAPI) serve() {
 
 type apiResult struct {
 	Token string `json:"token"`
+	Note  string `json:"note"`
 }
 
 // getToken 获取 Token
 func (ma *memberAPI) getToken(c *gin.Context) {
 	u := c.MustGet(model.CtxKeyAuthorizedUser).(*model.User)
 	singleton.ApiLock.RLock()
+	defer singleton.ApiLock.RUnlock()
+
 	tokenList := singleton.UserIDToApiTokenList[u.ID]
-	singleton.ApiLock.RUnlock()
 	res := make([]*apiResult, len(tokenList))
 	for i, token := range tokenList {
 		res[i] = &apiResult{
 			Token: token,
+			Note:  singleton.ApiTokenList[token].Note,
 		}
 	}
 	c.JSON(http.StatusOK, gin.H{
@@ -78,12 +81,26 @@ func (ma *memberAPI) getToken(c *gin.Context) {
 	})
 }
 
+type TokenForm struct {
+	Note string
+}
+
 // issueNewToken 生成新的 token
 func (ma *memberAPI) issueNewToken(c *gin.Context) {
 	u := c.MustGet(model.CtxKeyAuthorizedUser).(*model.User)
+	tf := &TokenForm{}
+	err := c.ShouldBindJSON(tf)
+	if err != nil {
+		c.JSON(http.StatusOK, model.Response{
+			Code:    http.StatusBadRequest,
+			Message: fmt.Sprintf("请求错误：%s", err),
+		})
+		return
+	}
 	token := &model.ApiToken{
 		UserID: u.ID,
 		Token:  utils.MD5(fmt.Sprintf("%d%d%s", time.Now().UnixNano(), u.ID, u.Login)),
+		Note:   tf.Note,
 	}
 	singleton.DB.Create(token)
 
@@ -97,6 +114,7 @@ func (ma *memberAPI) issueNewToken(c *gin.Context) {
 		Message: "success",
 		Result: map[string]string{
 			"token": token.Token,
+			"note":  token.Note,
 		},
 	})
 }

cmd/dashboard/controller/member_page.go

@@ -28,6 +28,16 @@ func (mp *memberPage) serve() {
 	mr.GET("/cron", mp.cron)
 	mr.GET("/notification", mp.notification)
 	mr.GET("/setting", mp.setting)
+	mr.GET("/api", mp.api)
+}
+
+func (mp *memberPage) api(c *gin.Context) {
+	singleton.ApiLock.RLock()
+	defer singleton.ApiLock.RUnlock()
+	c.HTML(http.StatusOK, "dashboard/api", mygin.CommonEnvironment(c, gin.H{
+		"title":  singleton.Localizer.MustLocalize(&i18n.LocalizeConfig{MessageID: "ApiManagement"}),
+		"Tokens": singleton.ApiTokenList,
+	}))
 }
 
 func (mp *memberPage) server(c *gin.Context) {

model/api_token.go

@@ -4,4 +4,5 @@ type ApiToken struct {
 	Common
 	UserID uint64 `json:"user_id"`
 	Token  string `json:"token"`
+	Note   string `json:"note"`
 }

pkg/mygin/mygin.go

@@ -17,6 +17,7 @@ var adminPage = map[string]bool{
 	"/setting":      true,
 	"/notification": true,
 	"/cron":         true,
+	"/api":          true,
 }
 
 func CommonEnvironment(c *gin.Context, data map[string]interface{}) gin.H {

resource/l10n/en-US.toml

@@ -469,6 +469,21 @@ other = "Services"
 [ScheduledTasks]
 other = "Scheduled Tasks"
 
+[ApiManagement]
+other="API"
+
+[IssueNewApiToken]
+other="Create Token"
+
+[Token]
+other="Token"
+
+[DeleteToken]
+other="Delete Token"
+
+[ConfirmToDeleteThisToken]
+other="Confirm Delete?"
+
 [YouAreNotAuthorized]
 other = "You are not authorized"
 

resource/l10n/es-ES.toml

@@ -469,6 +469,21 @@ other = "Monitorización del servicio"
 [ScheduledTasks]
 other = "Tareas programadas"
 
+[ApiManagement]
+other="API"
+
+[IssueNewApiToken]
+other="Create Token"
+
+[Token]
+other="Token"
+
+[DeleteToken]
+other="Delete Token"
+
+[ConfirmToDeleteThisToken]
+other="Confirm Delete?"
+
 [YouAreNotAuthorized]
 other = "Esta página requiere un acceso"
 

resource/l10n/zh-CN.toml

@@ -469,6 +469,21 @@ other = "服务监控"
 [ScheduledTasks]
 other = "计划任务"
 
+[ApiManagement]
+other="API"
+
+[IssueNewApiToken]
+other="添加Token"
+
+[Token]
+other="Token"
+
+[DeleteToken]
+other="删除Token"
+
+[ConfirmToDeleteThisToken]
+other="确认删除Token"
+
 [YouAreNotAuthorized]
 other = "此页面需要登录"
 

resource/static/main.js

@@ -202,6 +202,18 @@ function post(path, params, method = 'post') {
   document.body.removeChild(form);
 }
 
+function issueNewApiToken(apiToken) {
+  const modal = $(".api.modal");
+  modal.children(".header").text((apiToken ? LANG.Edit : LANG.Add) + ' ' + "API Token");
+  modal
+      .find(".nezha-primary-btn.button")
+      .html(
+          apiToken ? LANG.Edit + '<i class="edit icon"></i>' : LANG.Add + '<i class="add icon"></i>'
+      );
+  modal.find("textarea[name=Note]").val(apiToken ? apiToken.Note : null);
+  showFormModal(".api.modal", "#apiForm", "/api/token");
+}
+
 function addOrEditServer(server, conf) {
   const modal = $(".server.modal");
   modal.children(".header").text((server ? LANG.Edit : LANG.Add) + ' ' + LANG.Server);

resource/template/common/menu.html

@@ -9,6 +9,7 @@
         <a class='item{{if eq .MatchedPath "/monitor"}} active{{end}}' href="/monitor"><i class="rss icon"></i>{{tr "Services"}}</a>
         <a class='item{{if eq .MatchedPath "/cron"}} active{{end}}' href="/cron"><i class="clock icon"></i>{{tr "Task"}}</a>
         <a class='item{{if eq .MatchedPath "/notification"}} active{{end}}' href="/notification"><i class="bell icon"></i>{{tr "Notification"}}</a>
+        <a class='item{{if eq .MatchedPath "/api"}} active{{end}}' href="/api"><i class="key icon"></i>API</a>
         <a class='item{{if eq .MatchedPath "/setting"}} active{{end}}' href="/setting">
             <i class="settings icon"></i>{{tr "Settings"}}
         </a>

resource/template/component/api.html

@@ -0,0 +1,19 @@
+{{define "component/api"}}
+<div class="ui tiny api modal transition hidden">
+    <div class="header">{{tr "IssueNewApiToken"}}</div>
+    <div class="content">
+        <form id="apiForm" class="ui form">
+            <input type="hidden" name="id">
+            <div class="field">
+                <label>{{tr "Note"}}</label>
+                <textarea name="Note"></textarea>
+            </div>
+        </form>
+    </div>
+    <div class=" actions">
+        <div class="ui negative button">{{tr "Cancel"}}</div>
+        <button class="ui positive nezha-primary-btn right labeled icon button">{{tr "Confirm"}}<i class="checkmark icon"></i>
+        </button>
+    </div>
+</div>
+{{end}}

resource/template/dashboard/api.html

@@ -0,0 +1,41 @@
+{{define "dashboard/api"}}
+{{template "common/header" .}}
+{{template "common/menu" .}}
+<div class="nb-container">
+    <div class="ui container">
+        <div class="ui grid">
+            <div class="right floated right aligned twelve wide column">
+                <button class="ui right labeled nezha-primary-btn icon button" onclick="issueNewApiToken()"><i class="add icon"></i>
+                    {{tr "IssueNewApiToken"}}
+                </button>
+            </div>
+        </div>
+        <table class="ui very basic table">
+            <thead>
+            <tr>
+                <th>{{tr "Token"}}</th>
+                <th>{{tr "Note"}}</th>
+            </tr>
+            </thead>
+            <tbody>
+            {{range $token := .Tokens}}
+            <tr>
+                <td>{{$token.Token}}</td>
+                <td>{{$token.Note}}</td>
+                <td>
+                    <div class="ui mini icon buttons">
+                        <button class="ui button"
+                                onclick="showConfirm('{{tr "DeleteToken"}}','{{tr "ConfirmToDeleteThisToken"}}',deleteRequest,'/api/token/'+{{$token.Token}})">
+                        <i class="trash alternate outline icon"></i>
+                        </button>
+                    </div>
+                </td>
+            </tr>
+            {{end}}
+            </tbody>
+        </table>
+    </div>
+</div>
+{{template "component/api"}}
+{{template "common/footer" .}}
+{{end}}