2 files changed, 146 insertions, 1 deletions
diff --git a/client/js/views/user_tokens_view.js b/client/js/views/user_tokens_view.js
new file mode 100644
index 0000000..f6c8480
--- /dev/null
+++ b/client/js/views/user_tokens_view.js
@@ -0,0 +1,134 @@
+'use strict';
+
+const events = require('../events.js');
+const views = require('../util/views.js');
+
+const template = views.getTemplate('user-tokens');
+
+class UserTokenView extends events.EventTarget {
+    constructor(ctx) {
+        super();
+
+        this._user = ctx.user;
+        this._tokens = ctx.tokens;
+        this._hostNode = ctx.hostNode;
+        this._tokenFormNodes = [];
+        views.replaceContent(this._hostNode, template(ctx));
+        views.decorateValidator(this._formNode);
+
+        this._formNode.addEventListener('submit', e => this._evtSubmit(e));
+
+        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 + '\"]');
+            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);
+    }
+
+    showSuccess(message) {
+        views.showSuccess(this._hostNode, message);
+    }
+
+    showError(message) {
+        views.showError(this._hostNode, message);
+    }
+
+    enableForm() {
+        views.enableForm(this._formNode);
+        for (let formNode of this._tokenFormNodes) {
+            views.enableForm(formNode);
+        }
+    }
+
+    disableForm() {
+        views.disableForm(this._formNode);
+        for (let formNode of this._tokenFormNodes) {
+            views.disableForm(formNode);
+        }
+    }
+
+    _evtDelete(e) {
+        e.preventDefault();
+        const userToken = this._tokens[parseInt(
+            e.target.getAttribute('data-token-id'))];
+        this.dispatchEvent(new CustomEvent('delete', {
+            detail: {
+                user: this._user,
+                userToken: userToken,
+            },
+        }));
+    }
+
+    _evtSubmit(e) {
+        e.preventDefault();
+        this.dispatchEvent(new CustomEvent('submit', {
+            detail: {
+                user: this._user,
+
+                note: this._userTokenNoteInputNode ?
+                    this._userTokenNoteInputNode.value :
+                    undefined,
+
+                expirationTime:
+                    (this._userTokenExpirationTimeInputNode
+                        && this._userTokenExpirationTimeInputNode.value) ?
+                    new Date(this._userTokenExpirationTimeInputNode.value)
+                        .toISOString() :
+                    undefined,
+            },
+        }));
+    }
+
+    _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,
+            },
+        }));
+    }
+
+    get _formNode() {
+        return this._hostNode.querySelector('#create-token-form');
+    }
+
+    get _userTokenNoteInputNode() {
+        return this._formNode.querySelector('.note input');
+    }
+
+    get _userTokenExpirationTimeInputNode() {
+        return this._formNode.querySelector('.expirationTime input');
+    }
+}
+
+module.exports = UserTokenView;
diff --git a/client/js/views/user_view.js b/client/js/views/user_view.js
index d52e899..75fd154 100644
--- a/client/js/views/user_view.js
+++ b/client/js/views/user_view.js
@@ -3,6 +3,7 @@
 const events = require('../events.js');
 const views = require('../util/views.js');
 const UserDeleteView = require('./user_delete_view.js');
+const UserTokensView = require('./user_tokens_view.js');
 const UserSummaryView = require('./user_summary_view.js');
 const UserEditView = require('./user_edit_view.js');
 const EmptyView = require('../views/empty_view.js');
@@ -45,7 +46,17 @@ class UserView extends events.EventTarget {
                 this._view = new UserEditView(ctx);
                 events.proxyEvent(this._view, this, 'submit');
             }
-
+        } else if (ctx.section == 'list-tokens') {
+            if (!this._ctx.canListTokens) {
+                this._view = new EmptyView();
+                this._view.showError(
+                    'You don\'t have privileges to view user tokens.');
+            } else {
+                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) {
                 this._view = new EmptyView();