implement post token UI

view/authentication/login-style.css

@@ -11,6 +11,14 @@
   color: red;
 }
 
+#tokenInfo {
+  color: green;
+  word-wrap: break-word;
+  /* this will take up space, even when div is hidden */
+  padding: 0.5em;
+  margin: 10px;
+  border-radius: 15px;
+}
 .right-link{
   text-align:right;
   float: right;

view/loadView.js

@@ -36,6 +36,7 @@ const viewmap = {
   '/samples/:key/edit': 'admin',
   '/perspectives': 'perspective/perspective',
   '/perspectives/:key': 'perspective/perspective',
+  '/tokens/new': 'tokens/new',
 };
 
 /**
@@ -115,9 +116,10 @@ module.exports = function loadView(app, passport) {
       key,
       ensureAuthenticated,
       (req, res) => {
+
         const trackObj = {
           trackingId: viewConfig.trackingId,
-          user: req.user,
+          user: JSON.stringify(req.user),
           eventThrottle: viewConfig.realtimeEventThrottleMilliseconds,
           transportProtocol: viewConfig.socketIOtransportProtocol,
         };
@@ -214,7 +216,7 @@ module.exports = function loadView(app, passport) {
     (_req, _res) => {
       if (_req.user && _req.user.name) {
         const token = jwtUtil.createToken(_req.user.name, _req.user.name);
-        _res.cookie('Authorization', token);
+        _res.cookie('Authorization', token, { secure: true }, { httpOnly: true });
       }
 
       if (_req.body.RelayState) {

view/tokens/app.js

@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) 2016, salesforce.com, inc.
+ * All rights reserved.
+ * Licensed under the BSD 3-Clause license.
+ * For full license text, see LICENSE.txt file in the repo root or
+ * https://opensource.org/licenses/BSD-3-Clause
+ */
+
+/**
+ * view/tokens/new.js
+ *
+ * Posts the token with authorization token.
+ * CHanges DOM to show user the received token.
+ */
+
+import request from 'superagent';
+const u = require('../utils');
+const Authorization = u.getCookie('Authorization');
+
+// set up constants
+const input = document.loginform.elements;
+const errorInfo = document.getElementById('errorInfo');
+const successInfo = document.getElementById('successInfo');
+const tokenInfo = document.getElementById('tokenInfo');
+toggleVisibility(tokenInfo, false);
+successInfo.innerHTML = 'Max length 60 characters';
+
+document.loginform.addEventListener('submit', (evt) => {
+  evt.preventDefault();
+  const jsonData = { name: input.name.value };
+  post(jsonData, '/v1/token');
+});
+
+/**
+ * Toggles DOM element visibility in-place, based on boolean input
+ * @param {Boolean} visibility If true, set the element to visible.
+ * Else hide element
+ */
+function toggleVisibility(elem, visibility) {
+  elem.style.visibility = visibility ? 'visible' : 'hidden';
+}
+
+/**
+ * Post request with given JSON, to given endpoint
+ * Show token if succeeded, else display error.
+ * @param {Object} jsonData JSON object payload
+ * @param {String} address API endpoint
+ */
+function post(jsonData, address) {
+  request
+  .post(address)
+  .send(jsonData)
+  .set('Authorization', Authorization)
+  .end((error, res) => {
+    if (error) {
+      let errorText = 'An unexpected error occurred';
+      toggleVisibility(errorDiv, true);
+      errorDiv.innerHTML = errorText;
+      toggleVisibility(successInfo, false);
+      toggleVisibility(tokenInfo, false);
+    } else {
+      toggleVisibility(successInfo, true);
+      toggleVisibility(tokenInfo, true);
+      successInfo.innerHTML = 'NOTE: Please save this token, you will not see this token again!';
+      tokenInfo.innerHTML = res.body.token;
+      toggleVisibility(document.getElementById('errorInfo'), false);
+      // reset value
+      input.name.value = '';
+    }
+  });
+}

view/tokens/new.pug

@@ -0,0 +1,33 @@
+//
+  Copyright (c) 2016, salesforce.com, inc.
+  All rights reserved.
+  Licensed under the BSD 3-Clause license.
+  For full license text, see LICENSE.txt file in the repo root or
+  https://opensource.org/licenses/BSD-3-Clause
+
+
+doctype html
+html
+  head
+    title Create new token
+    meta(name='viewport', content='width=device-width, initial-scale=1.0')
+    link(href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css', rel='stylesheet', media='screen')
+    link(rel="stylesheet", type="text/css", href="/static/authentication/login-style.css")
+  body
+  div.container
+    div.row
+      div.text-center.col-md-4.col-md-offset-4
+        h1 Create new token
+        br
+        div.local-form
+          form(role='form', name='loginform')
+            #errorInfo
+            #successInfo
+            #tokenInfo
+            .form-group
+              input.form-control(type='text', autofocus, name="name", maxlength='60' placeholder='Enter token name' required)
+            button.btn.btn-primary.btn-block(type='submit') Submit
+  script.
+    var trackingId = '#{trackingId}';
+  script(src='/static/tokens/app.js')
+  script(src='/static/analytics/app.js')