support adding note to new tokens on token page

turn token request into a form

share/jupyterhub/static/js/token.js

@@ -15,12 +15,22 @@ require(["jquery", "jhapi", "moment"], function ($, JHAPI, moment) {
     el.text(m.isValid() ? m.fromNow() : "Never");
   });
 
-    $("#request-token").click(function () {
-        api.request_token({
+  $("#request-token-form").submit(function() {
+    var note = $("#token-note").val();
+    if (!note.length) {
+      note = "requested via form page";
+    }
+    api.request_token(
+      user,
+      { note: note },
+      {
         success: function(reply) {
           $("#token-result").text(reply.token);
           $("#token-area").show();
+        },
       }
+    );
+    return false;
   });
     });
 });

share/jupyterhub/templates/token.html

@@ -4,12 +4,25 @@
 
 <div class="container">
   <div class="row">
+    <form id="request-token-form" class="col-md-offset-3 col-md-6">
       <div class="text-center">
-      <a id="request-token" role="button" class="btn btn-lg btn-jupyter" href="#">
+        <button type="submit" class="btn btn-lg btn-jupyter">
           Request new API token
-      </a>
+        </button>
       </div>
+      <div class="form-group">
+        <label for="token-note">Note</label>
+        <input
+          id="token-note"
+          class="form-control"
+          placeholder="note to identify your new token">
+        <small id="note-note" class="form-text text-muted">
+          This note will help you keep track of what your tokens are for.
+        </small>
       </div>
+    </form>
+  </div>
+
   <div class="row">
     <p>
       <div id="token-area" class="col-md-6 col-md-offset-3" style="display: none;">