Link to allow changing the note on the interface.

client/html/user_tokens.tpl

@@ -13,17 +13,22 @@
             </div>
             <div class='token-flex-column full-width'>
                 <div class='token-flex-row'><%= token.token %></div>
-                <% if (token.note !== null) { %>
+                <div class='token-flex-row'>
-                    <div class='token-flex-row'><%= token.note %></div>
+                    <% if (token.note !== null) { %>
-                <% } else { %>
+                        <%= token.note %>
-                    <div class='token-flex-row'>&nbsp;</div>
+                    <% } else { %>
-                <% } %>
+                        No note
+                    <% } %>
+                    <a class='token-change-note' data-token-id='<%= index %>' href='#'>(change)</a>
+                </div>
                 <div class='token-flex-row'><%= ctx.makeRelativeTime(token.creationTime) %></div>
-                <% if (token.expirationTime) { %>
+                <div class='token-flex-row'>
-                <div class='token-flex-row'><%= ctx.makeRelativeTime(token.expirationTime) %></div>
+                    <% if (token.expirationTime) { %>
-                <% } else { %>
+                        <%= ctx.makeRelativeTime(token.expirationTime) %>
-                    <div class='token-flex-row'>No expiration</div>
+                    <% } else { %>
-                <% } %>
+                        No expiration
+                    <% } %>
+                </div>
                 <div class='token-flex-row'><%= ctx.makeRelativeTime(token.lastUsageTime) %></div>
             </div>
         </div>
@@ -31,7 +36,6 @@
             <div class='token-flex-column full-width'>
                 <div class='token-flex-row'>
                     <form class='token' data-token-id='<%= index %>'>
-                        <input type='hidden' name='token' value='<%= token.token %>'/>
                         <% if (token.isCurrentAuthToken) { %>
                             <input type='submit' value='Delete and logout'
                                 title='This token is used to authenticate this client, deleting it will force a logout.'/>

client/js/controllers/user_controller.js

@@ -93,6 +93,7 @@ class UserController {
             this._view.addEventListener('delete', e => this._evtDelete(e));
             this._view.addEventListener('create-token', e => this._evtCreateToken(e));
             this._view.addEventListener('delete-token', e => this._evtDeleteToken(e));
+            this._view.addEventListener('update-token', e => this._evtUpdateToken(e));
 
             for (let message of this._successMessages) {
                 this.showSuccess(message);
@@ -232,6 +233,23 @@ class UserController {
                 });
         }
     }
+
+    _evtUpdateToken(e) {
+        this._view.clearMessages();
+        this._view.disableForm();
+
+        if (e.detail.note !== undefined) {
+            e.detail.userToken.note = e.detail.note;
+        }
+
+        e.detail.userToken.save(e.detail.user.name).then(response => {
+            const ctx = router.show(uri.formatClientLink('user', e.detail.user.name, 'list-tokens'));
+            ctx.controller.showSuccess('Token ' + response.token + ' updated.');
+        }, error => {
+            this._view.showError(error.message);
+            this._view.enableForm();
+        });
+    }
 }
 
 module.exports = router => {

client/js/models/user_token.js

@@ -20,6 +20,8 @@ class UserToken extends events.EventTarget {
     get lastEditTime()   { return this._lastEditTime; }
     get lastUsageTime()  { return this._lastUsageTime; }
 
+    set note(value)      { this._note = value; }
+
     static fromResponse(response) {
         if (typeof response.results !== 'undefined') {
             let tokenList = [];
@@ -59,6 +61,27 @@ class UserToken extends events.EventTarget {
             });
     }
 
+    save(userName) {
+        const detail = {version: this._version};
+
+        if (this._note !== this._orig._note) {
+            detail.note = this._note;
+        }
+
+        return api.put(
+            uri.formatApiLink('user-token', userName, this._orig._token),
+            detail)
+            .then(response => {
+                this._updateFromResponse(response);
+                this.dispatchEvent(new CustomEvent('change', {
+                    detail: {
+                        userToken: this,
+                    },
+                }));
+                return Promise.resolve(this);
+            });
+    }
+
     delete(userName) {
         return api.delete(
             uri.formatApiLink('user-token', userName, this._orig._token),

client/js/views/user_tokens_view.js

@@ -2,7 +2,6 @@
 
 const events = require('../events.js');
 const views = require('../util/views.js');
-const api = require('../api.js');
 
 const template = views.getTemplate('user-tokens');
 
@@ -19,19 +18,26 @@ class UserTokenView extends events.EventTarget {
 
         this._formNode.addEventListener('submit', e => this._evtSubmit(e));
 
-        this._decorateTokenForms()
+        this._decorateTokenForms();
+        this._decorateTokenNoteChangeLinks();
     }
 
     _decorateTokenForms() {
         this._tokenFormNodes = [];
         for (let i = 0; i < this._tokens.length; i++) {
             let formNode = this._hostNode.querySelector('.token[data-token-id=\"' + i + '\"]');
-            views.decorateValidator(formNode);
             formNode.addEventListener('submit', e => this._evtDelete(e));
             this._tokenFormNodes.push(formNode);
         }
     }
 
+    _decorateTokenNoteChangeLinks() {
+        for (let i = 0; i < this._tokens.length; i++) {
+            let linkNode = this._hostNode.querySelector('.token-change-note[data-token-id=\"' + i + '\"]');
+            linkNode.addEventListener('click', e => this._evtChangeNoteClick(e));
+        }
+    }
+
     clearMessages() {
         views.clearMessages(this._hostNode);
     }
@@ -89,6 +95,33 @@ class UserTokenView extends events.EventTarget {
         }));
     }
 
+    _evtChangeNoteClick(e) {
+        e.preventDefault();
+        const userToken = this._tokens[parseInt(e.target.getAttribute('data-token-id'))];
+        const text = window.prompt(
+            'Please enter the new name:', userToken.note !== null ? userToken.note : undefined);
+        if (!text) {
+            return;
+        }
+        this.dispatchEvent(new CustomEvent('update', {
+            detail: {
+                user: this._user,
+                userToken: userToken,
+                note: text ? text : undefined,
+            },
+        }));
+        // const notesObj = JSON.parse(text);
+        // this._post.notes.clear();
+        // for (let noteObj of notesObj) {
+        //     let note = new Note();
+        //     for (let pointObj of noteObj.polygon) {
+        //         note.polygon.add(new Point(pointObj[0], pointObj[1]));
+        //     }
+        //     note.text = noteObj.text;
+        //     this._post.notes.add(note);
+        // }
+    }
+
     get _formNode() {
         return this._hostNode.querySelector('#create-token-form');
     }

client/js/views/user_view.js

@@ -55,6 +55,7 @@ class UserView extends events.EventTarget {
                 this._view = new UserTokensView(ctx);
                 events.proxyEvent(this._view, this, 'delete', 'delete-token');
                 events.proxyEvent(this._view, this, 'submit', 'create-token');
+                events.proxyEvent(this._view, this, 'update', 'update-token');
             }
         } else if (ctx.section == 'delete') {
             if (!this._ctx.canDelete) {