Make navigation bar user control functional.

Shows whether the user is logged in and presents
appropriate options according to whether this is
a manual or automatic login (a manual login is
when the user explicitly logs in with a user name
and password).

lib/www/client/source/src/components/navigation.vue

@@ -15,14 +15,39 @@
     <v-breadcrumbs :items="path"></v-breadcrumbs>
 
     <template v-if="$route.name != 'Login'">
-      <v-btn text link to="/login" v-if="!$root.user">Log in</v-btn>
+      <v-btn text link to="/login" v-if="!user && !loading">Log in</v-btn>
-      <template  v-else>
+      <template  v-else-if="user">
-        <v-btn title="Edit profile" disabled>
+
-          {{$root.user.name}}
+        <v-menu
-        </v-btn>
+          offset-y
-        <v-btn class="ml-2" title="Log out" link to="/?logout=1">
+        >
-          <v-icon>mdi-logout</v-icon>
+          <template v-slot:activator="{on, attrs}">
+            <v-avatar :color="user.colour || 'primary'" :title="`${user.name} (${user.role})`" v-bind="attrs" v-on="on">
+              <span class="white--text">{{user.name.slice(0, 5)}}</span>
+            </v-avatar>
+          </template>
+
+          <v-list dense>
+            <v-list-item link to="/login" v-if="user.autologin">
+              <v-list-item-icon><v-icon small>mdi-login</v-icon></v-list-item-icon>
+              <v-list-item-content>
+                <v-list-item-title>Log in as a different user</v-list-item-title>
+                <v-list-item-subtitle>Autologin from {{user.ip}}</v-list-item-subtitle>
+              </v-list-item-content>
+            </v-list-item>
+            <v-list-item link to="/logout" v-else>
+              <v-list-item-icon><v-icon small>mdi-logout</v-icon></v-list-item-icon>
+              <v-list-item-title>Log out</v-list-item-title>
+            </v-list-item>
+          </v-list>
+
+        </v-menu>
+
+        <!--
+        <v-btn small text class="ml-2" title="Log out" link to="/?logout=1">
+          <v-icon small>mdi-logout</v-icon>
         </v-btn>
+        -->
       </template>
     </template>
     <template v-slot:extension v-if="$route.matched.find(i => i.name == 'Project')">
@@ -35,6 +60,7 @@
 </template>
 
 <script>
+import { mapActions, mapGetters } from 'vuex';
 
 export default {
   name: 'DougalNavigation',
@@ -58,7 +84,9 @@ export default {
   computed: {
     tab () {
       return this.tabs.findIndex(t => t.href == this.$route.path.split(/\/+/)[3]);
-    }
+    },
+
+    ...mapGetters(['user', 'loading'])
   },
 
   watch: {