improved profile, but problems with logging

package.json

@@ -9,52 +9,53 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.17",
-    "@fortawesome/free-solid-svg-icons": "^5.8.1",
-    "@fortawesome/vue-fontawesome": "^0.1.6",
-    "@vue/cli": "^3.6.3",
+    "@fortawesome/fontawesome-svg-core": "^1.2.30",
+    "@fortawesome/free-solid-svg-icons": "^5.14.0",
+    "@fortawesome/vue-fontawesome": "^0.1.10",
+    "@vue/cli": "^3.12.1",
     "axios": "^0.18.1",
-    "bootstrap": "^4.3.1",
-    "bootstrap-vue": "^2.0.0-rc.15",
+    "bootstrap": "^4.5.0",
+    "bootstrap-vue": "^2.16.0",
+    "core-js": "^2.5.7",
     "i": "^0.3.6",
     "jquery": "^3.5.1",
-    "js-cookie": "^2.2.0",
+    "js-cookie": "^2.2.1",
     "node-sass": "^4.14.1",
     "npm": "^6.14.7",
     "npm-sass": "^2.3.0",
-    "popper.js": "^1.15.0",
+    "popper.js": "^1.16.1",
     "sass": "^1.26.10",
     "socket.io-client": "^2.3.0",
-    "vee-validate": "^2.2.4",
-    "vue": "^2.6.10",
-    "vue-axios": "^2.1.4",
+    "vee-validate": "^2.2.15",
+    "vue": "^2.6.11",
+    "vue-axios": "^2.1.5",
     "vue-class-component": "^6.0.0",
-    "vue-cookies": "^1.5.13",
+    "vue-cookies": "^1.7.3",
     "vue-flag-icon": "^1.0.6",
-    "vue-i18n": "^8.9.0",
+    "vue-i18n": "^8.20.0",
     "vue-moment": "^4.1.0",
     "vue-property-decorator": "^7.0.0",
-    "vue-router": "^3.0.1",
-    "vue-socket.io-extended": "^4.0.1",
-    "vue-spinner": "^1.0.3",
+    "vue-router": "^3.3.4",
+    "vue-socket.io-extended": "^4.0.4",
+    "vue-spinner": "^1.0.4",
     "vue-sweetalert2": "^1.6.4",
-    "vuejs-logger": "^1.5.3",
-    "vuex": "^3.0.1",
-    "vuex-persistedstate": "^2.5.4",
-    "vuex-typex": "^3.1.4"
+    "vuejs-logger": "^1.5.4",
+    "vuex": "^3.5.1",
+    "vuex-persistedstate": "^2.7.1",
+    "vuex-typex": "^3.1.5"
   },
   "devDependencies": {
-    "@types/chai": "^4.1.0",
-    "@types/mocha": "^5.2.4",
-    "@vue/cli-plugin-babel": "^3.4.0",
-    "@vue/cli-plugin-typescript": "^3.4.0",
-    "@vue/cli-plugin-unit-mocha": "^3.4.0",
-    "@vue/cli-service": "^3.6.0",
-    "@vue/test-utils": "^1.0.0-beta.20",
+    "@types/chai": "^4.2.12",
+    "@types/mocha": "^5.2.7",
+    "@vue/cli-plugin-babel": "^3.12.1",
+    "@vue/cli-plugin-typescript": "^3.12.1",
+    "@vue/cli-plugin-unit-mocha": "^3.12.1",
+    "@vue/cli-service": "^3.12.1",
+    "@vue/test-utils": "^1.0.3",
     "bootstrap-sass": "^3.4.1",
     "chai": "^4.1.2",
-    "sass-loader": "^7.1.0",
-    "typescript": "^3.0.0",
-    "vue-template-compiler": "^2.6.10"
+    "sass-loader": "^7.3.1",
+    "typescript": "^3.9.7",
+    "vue-template-compiler": "^2.6.11"
   }
 }

src/App.vue

@@ -45,7 +45,7 @@
                             <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
                         </b-nav-form>
 
-                        <b-nav-item-dropdown split split-to="admin" variant="outline-danger" :text="$t('admin')">
+                        <b-nav-item-dropdown split split-to="admin" v-if="authenticated" variant="outline-danger" :text="$t('admin')">
                             <b-dropdown-item :to="{name: 'admin.user'}">{{ $t('user') }}</b-dropdown-item>
                             <b-dropdown-item :to="{name: 'admin.group'}">{{ $t('group') }}</b-dropdown-item>
                             <b-dropdown-item href="#">Something else here...</b-dropdown-item>
@@ -167,7 +167,6 @@
                 }, 1000);
             });
 
-
         },
         computed: {
             authenticated() {

src/components/Profile.vue

@@ -37,6 +37,13 @@
                             </b-input-group-append>
                         </b-input-group>
 
+                      <p>
+                        <span>&f19b;</span>
+                        <font-awesome-icon icon="openId"/>&nbsp;{{profile.email}}
+                        <a class="badge badge-pill badge-info">
+                          <font-awesome-icon icon="pencil-alt"/></a>
+                      </p>
+
                     </div>
 
                     <hr/>
@@ -45,9 +52,10 @@
                     <p><strong>{{$t('last_name')}}:&nbsp</strong>{{profile.last_name}}</p>
 
                     <hr/>
-                    <p v-if="profile.role"><strong>{{$t('role')}}:&nbsp</strong>{{profile.role}}</p>
+                    <!--<p v-if="profile.role"><strong>{{$t('role')}}:&nbsp</strong>{{profile.role}}</p>-->
+                    <p><strong>{{$t('role')}}:&nbsp</strong><span v-if="profile.role">{{profile.role}}</span><span v-else>{{$t('no specifc role')}}</span></p>
                     <p><strong>{{$t('groups')}}:&nbsp</strong><span v-for="g in profile.groups">{{g.name}}, </span></p>
-                    <p><strong>{{$t('permissions')}}:&nbsp</strong><span v-for="p in profile.effective_permissions">{{p}}</span></p>
+                    <p><strong>{{$t('permissions')}}:&nbsp</strong></p><ul><li v-for="p in profile.effective_permissions">{{p.name}}</li></ul>
 
                     <hr/>
 

src/main.ts

@@ -54,6 +54,8 @@ import {
   faThumbsUp,
   faThumbsDown,
 } from '@fortawesome/free-solid-svg-icons';
+
+// import { faOpenId } from '@fortawesome/free-brands-svg-icons';
 import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';