Merge pull request #3580 from meeseeksmachine/auto-backport-of-pr-3552-on-1.4.x

Backport PR #3552 on branch 1.4.x (Add expiration date dropdown to Token page)

share/jupyterhub/static/js/token.js

@@ -20,9 +20,14 @@ require(["jquery", "jhapi", "moment"], function ($, JHAPI, moment) {
     if (!note.length) {
       note = "Requested via token page";
     }
+    var expiration_seconds =
+      parseInt($("#token-expiration-seconds").val()) || null;
     api.request_token(
       user,
-      { note: note },
+      {
+        note: note,
+        expires_in: expiration_seconds,
+      },
       {
         success: function (reply) {
           $("#token-result").text(reply.token);

share/jupyterhub/templates/token.html

@@ -19,6 +19,20 @@
         <small id="note-note" class="form-text text-muted">
           This note will help you keep track of what your tokens are for.
         </small>
+        <br><br>
+        <label for="token-expiration-seconds">Token expires</label>
+        {% block expiration_options %}
+        <select id="token-expiration-seconds"
+                class="form-control">
+          <option value="3600">1 Day</option>
+          <option value="86400">1 Week</option>
+          <option value="604800">1 Month</option>
+          <option value="" selected="selected">Never</option>
+        </select>
+        {% endblock expiration_options %}
+        <small id="note-expires-at" class="form-text text-muted">
+          You can configure when your token will be expired.
+        </small>
       </div>
     </form>
   </div>
@@ -56,6 +70,7 @@
           <td>Note</td>
           <td>Last used</td>
           <td>Created</td>
+          <td>Expires at</td>
         </tr>
       </thead>
       <tbody>
@@ -77,6 +92,13 @@
             N/A
             {%- endif -%}
           </td>
+          <td class="time-col col-sm-3">
+            {%- if token.expires_at -%}
+            {{ token.expires_at.isoformat() + 'Z' }}
+            {%- else -%}
+            Never
+            {%- endif -%}
+          </td>
           <td class="col-sm-1 text-center">
             <button class="revoke-token-btn btn btn-xs btn-danger">revoke</button>
           </td>