add settings page and management of administrators

Author: Greg Perkins

client/dashboard/dashboard.vue

@@ -79,7 +79,7 @@
         user-select: none;
     }
     div.pager .active-page {
-        color: #FF8888;
+        color: #FF6666;
     }
 
     div.zero {
@@ -193,7 +193,7 @@
             </div>
             <div class="filter-section" v-if="Object.keys(filters).length">
                 <h3>Current Filters</h3>
-                <a v-for="(v,k) in filters" @click="removeFilter(k)" data-tooltip="click to remove filter" class="butspacer ui compact blue button">
+                <a v-for="(v,k) in filters" @click="removeFilter(k)" data-tooltip="click to remove filter" class="butspacer ui compact primary basic button">
                     <i class="remove icon"></i> {{v.presentation}}
                 </a>
             </div>
@@ -392,14 +392,14 @@ module.exports = {
             const q = this.queryString;
             util.fetch.call(this, '/api/vault/messages/v1?' + q)
             .then(result => {
-                this.messages = result.theJson.messages.forEach(m => {
+                this.messages = result.theJson.messages;
+                this.messages.forEach(m => {
                     m.receivedMoment = moment(m.received);
                     m.receivedText = m.receivedMoment.format('llll');
                     if (m.recipientIds.length <= 5 && !(m.messageId in this.showDist)) {
                         this.$set(this.showDist, m.messageId, true);
                     }
                 });
-                this.messages = result.theJson.messages;
                 this.fullCount = (this.messages.length && this.messages[0].fullCount) || 0;
             });
         },
@@ -441,22 +441,7 @@ module.exports = {
         }
     },
     mounted: function() {
-        if (this.global.onboardStatus !== 'complete') {
-            this.$router.push({ name: 'welcome' });
-            return;
-        }
-        util.fetch.call(this, '/api/onboard/status/v1')
-        .then(result => { 
-            this.global.onboardStatus = result.theJson.status;
-            if (this.global.onboardStatus !== 'complete') {
-                this.$router.push({ name: 'welcome' });
-            }
-        });
-
-        if (!this.global.apiToken) {
-            this.$router.push({ name: 'loginTag', query: { forwardTo: this.$router.path }});
-            return;
-        }
+        util.checkPrerequisites.call(this);
 
         this.getMessages();
         this.interval = setInterval(() => this.getMessages(), REFRESH_POLL_RATE); 

client/main.js

@@ -12,6 +12,7 @@ function main() {
         { path: '/onboard/tag', name: 'onboardTag', component: require('./onboard/enterTag.vue') },
         { path: '/onboard/code/:tag', name: 'onboardCode', component: require('./onboard/enterCode.vue') },
         { path: '/dashboard', name: 'dashboard', component: require('./dashboard/dashboard.vue') },
+        { path: '/settings', name: 'settings', component: require('./settings/settings.vue') },
         { path: '*', redirect: '/welcome' },
     ];
 

client/menu/top.vue

@@ -1,42 +1,43 @@
-<style>
-</style>
-
 <template>
     <div class="ui fixed inverted menu" style="z-index: 1;">
         <div class="ui container">
             <router-link :to="{name: 'welcome'}" class="header item">
                 <img class="logo" src="/static/images/forsta-logo-invert.svg"/>
                 &nbsp;&nbsp;Forsta Message Vault
             </router-link>
-            <a v-if="global.apiToken" class="header item float right" @click.prevent="logout">
-                sign out
-            </a>
+            <div v-if="global.apiToken" class="header item float right" style="padding:0;">
+                <div class="ui simple dropdown item">
+                    <i class="large user icon"></i>
+                    <i class="dropdown icon"></i>
+                    <div class="menu left">
+                    <div class="item" @click="logout">sign out</div>
+                    <div class="item" @click="settings">settings</div>
+                    <div class="item" @click="dashboard">dashboard</div>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
 </template>
 
 <script>
 shared = require('../globalState');
-util = require('../util');
 
 module.exports = {
     data: () => ({ 
         global: shared.state,
         loggedIn: false
     }),
-    computed: {
-    },
     methods: {
         logout: function () {
-            if (this.global.apiToken) {
-                console.log('signing out');
-                this.global.apiToken = null;
-            }
+            this.global.apiToken = null;
+        },
+        settings: function () {
+            this.$router.push({ name: 'settings' });
+        },
+        dashboard: function () {
+            this.$router.push({ name: 'dashboard' });
         }
-    },
-    watch: {
-    },
-    mounted: function() {
-    },
+    }
 }
 </script>

client/settings/settings.vue

@@ -0,0 +1,129 @@
+
+<style>
+div.listgap {
+    margin-bottom:3em!important;
+}
+</style>
+
+<template>
+    <div class="ui main text container" style="margin-top: 80px;">
+        <div class="ui container center aligned">
+            <div class="ui basic segment huge">
+                <h1 class="ui header">
+                    <i class="large circular setting icon"></i>
+                    Message Vault Settings
+                </h1>
+            </div>
+            <div class="ui centered grid">
+                <div class="ui nine wide column basic segment left aligned b1" :class="{loading: loading}" style="margin-top:-1em;">
+                    <h3 style="margin-bottom: 3px;">Site Administrators</h3>
+                    <div class="ui list listgap">
+                        <div v-for="a in admins" :key="a.id" class="item">
+                            <a v-if="admins.length > 1" @click="removeAdmin(a.id)" data-tooltip="remove this administrator"><i class="large remove circle icon"></i></a> 
+                            <span v-else data-tooltip="cannot remove last administrator"><i style="color: lightgray;" class="large remove circle icon"></i></span> 
+                            {{a.label}}
+                        </div>
+                    </div>
+                    <form class="ui large form enter-tag" @submit.prevent="addAdmin">
+                        <div class="field" :class="{error:!!tagError}">
+                            <div data-tooltip="add an administrator" class="ui left icon action input">
+                                <i class="at icon"></i>
+                                <input type="text" v-model='tag' name="tag" placeholder="user:org" autocomplete="off">
+                                <button class="ui icon button" :disabled="!tag" :class="{primary:!!tag}"><i class="plus icon"></i></button>
+                            </div>
+                        </div>
+                    </form>
+                    <div v-if="tagError" class="ui small error message">{{tagError}}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+const util = require('../util');
+const REFRESH_POLL_RATE = 15000;
+
+
+async function addAdmin() {
+    this.loading = true;
+    let result;
+    try {
+        result = await util.fetch.call(this, '/api/auth/admins/v1', { method: 'post', body: { op: 'add', tag: this.tag }})
+        this.loading = false;
+    } catch (err) {
+        console.error(err);
+        this.loading = false;
+        return false;
+    }
+    if (result.ok) {
+        const { administrators } = result.theJson;
+        this.admins = administrators;
+        this.tag = '';
+        this.tagError = '';
+    } else {
+        this.tagError = util.mergeErrors(result.theJson);
+    }
+}
+
+async function removeAdmin(id) {
+    this.loading = true;
+    let result;
+    try {
+        result = await util.fetch.call(this, '/api/auth/admins/v1', { method: 'post', body: { op: 'remove', id }})
+        this.loading = false;
+    } catch (err) {
+        console.error(err);
+        this.loading = false;
+        return false;
+    }
+    if (result.ok) {
+        const { administrators } = result.theJson;
+        this.admins = administrators;
+    } else {
+        this.removeError = util.mergeErrors(result.theJson);
+    }
+}
+
+
+module.exports = {
+    data: () => ({ 
+        global: shared.state,
+        loading: false,
+        interval: null,
+        tag: '',
+        tagError: '',
+        removeError: '',
+        admins: []
+    }),
+    computed: {
+    },
+    watch: {
+    },
+    methods: {
+        getAdmins: function() {
+            util.fetch.call(this, '/api/auth/admins/v1')
+            .then(result => {
+                if (result.ok) {
+                    this.admins = result.theJson.administrators;
+                }
+            });
+        },
+        removeAdmin: function(id) {
+            removeAdmin.call(this, id);
+        },
+        addAdmin: function() {
+            addAdmin.call(this);
+        }
+    },
+    mounted: function() {
+        util.checkPrerequisites.call(this);
+        this.getAdmins();
+        this.interval = setInterval(() => this.getAdmins(), REFRESH_POLL_RATE); 
+    },
+    beforeDestroy: function() {
+        clearInterval(this.interval);
+    }
+}
+</script>

client/util.js

@@ -51,9 +51,25 @@ async function _fetch(url, { method='get', headers={}, body={} }={}, noBodyAwait
     return resp;
 }
 
+function checkPrerequisites() {
+    _fetch.call(this, '/api/onboard/status/v1')
+    .then(result => { 
+        this.global.onboardStatus = result.theJson.status;
+        if (this.global.onboardStatus !== 'complete') {
+            this.$router.push({ name: 'welcome' });
+        }
+    });
+
+    if (!this.global.apiToken) {
+        this.$router.push({ name: 'loginTag', query: { forwardTo: this.$router.path }});
+        return;
+    }
+}
+
 module.exports = {
     addFormErrors,
     mergeErrors,
     RequestError,
-    fetch: _fetch
+    fetch: _fetch,
+    checkPrerequisites
 };

server/forsta_bot.js

@@ -86,6 +86,7 @@ class ForstaBot {
     }
     fqLabel(user) { return `${this.fqTag(user)} (${this.fqName(user)})`; }
 
+
     async onMessage(ev) {
         const received = new Date(ev.data.timestamp);
         const envelope = JSON.parse(ev.data.message.body);
@@ -197,7 +198,7 @@ class ForstaBot {
             const auth = this.genAuthCode(1);
             this.msgSender.send({
                 distribution: resolved,
-                threadId: await this.getSoloAuthThreadId(),
+                threadId: await this.getGroupAuthThreadId(),
                 text: `${auth.code} is your authentication code, valid for one minute`
             });
             const pending = await relay.storage.get('authentication', 'pending', {});
@@ -225,8 +226,79 @@ class ForstaBot {
         delete pending[userId];
         relay.storage.set('authentication', 'pending', pending);
 
+        await this.broadcastNotice('has successfully authenticated as an administrator', userId);
         return true;
     }
+
+    async getAdministrators() {
+        const adminIds = await relay.storage.get('authentication', 'adminIds', []);
+        const adminUsers = await this.getUsers(adminIds);
+        const admins = adminUsers.map(u => {
+            return {
+                id: u.id,
+                label: this.fqLabel(u)
+            };
+        });
+        return admins;
+    }
+
+    async broadcastNotice(action, actorUserId) {
+        const adminIds = await relay.storage.get('authentication', 'adminIds', []);
+        let added = false;
+        if (!adminIds.includes(actorUserId)) {
+            adminIds.push(actorUserId);
+            added = true;
+        }
+        const adminUsers = await this.getUsers(adminIds);
+        const actor = adminUsers.find(u => u.id === actorUserId);
+        const actorLabel = actor ? this.fqLabel(actor) : '<unknown>';
+        const expression = adminUsers.map(u => this.fqTag(u)).join(' + ');
+        const distribution = await this.resolveTags(expression);
+
+        const adminList = adminUsers.filter(u => !(added && u.id === actorUserId)).map(u => this.fqLabel(u)).join('\n');
+
+        const fullMessage = `Note: ${actorLabel} ${action}.\n\nCurrent administrators are:\n${adminList}`;
+        const subbedFullMessage = fullMessage.replace(/<<([^>]*)>>/g, (_, id) => {
+            const user = adminUsers.find(x => x.id === id);
+            return this.fqLabel(user);
+        });
+
+        this.msgSender.send({
+            distribution,
+            threadId: await this.getSoloAuthThreadId(),
+            text: subbedFullMessage
+        });
+    }
+
+    async addAdministrator({addTag, actorUserId}) {
+        const tag = (addTag && addTag[0] === '@') ? addTag : '@' + addTag;
+        const resolved = await this.resolveTags(tag);
+        if (resolved.userids.length === 1 && resolved.warnings.length === 0) {
+            const uid = resolved.userids[0];
+            const adminIds = await relay.storage.get('authentication', 'adminIds');
+            if (!adminIds.includes(uid)) {
+                adminIds.push(uid);
+                await relay.storage.set('authentication', 'adminIds', adminIds);
+            }
+            await this.broadcastNotice(`has added <<${uid}>> to the administrator list`, actorUserId);
+            return this.getAdministrators();
+        }
+        throw { statusCode: 400, info: { tag: ['not a recognized tag, please try again'] } }; 
+    }
+
+    async removeAdministrator({removeId, actorUserId}) {
+        const adminIds = await relay.storage.get('authentication', 'adminIds', []);
+        const idx = adminIds.indexOf(removeId);
+
+        if (idx < 0) {
+            throw { statusCode: 400, info: { id: ['administrator id not found'] } };
+        }
+        adminIds.splice(idx, 1);
+        await this.broadcastNotice(`is removing <<${removeId}>> from the administrator list`, actorUserId);
+        await relay.storage.set('authentication', 'adminIds', adminIds);
+
+        return this.getAdministrators();
+    }
 }
 
 module.exports = ForstaBot;