add: API Token相关的前端页面

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}}