display the name of the connected user

Signed-off-by: ege-dw <[email protected]>

Author: ege-dw

src/containers/DefaultHeaderProfileDropdown.vue

@@ -8,7 +8,8 @@
         boundary="viewport"
         tag="div"
         class="text-center">
-        <strong>{{ $t('message.profile') }}</strong>
+        {{ $t('message.connected_as') }}
+        <strong>{{ user }}</strong>
       </b-dropdown-header>
       <b-dropdown-item v-if="canUpdateProfile()" v-b-modal.profileEditModal><i class="fa fa-user text-primary" /> {{ $t('message.profile_update') }}</b-dropdown-item>
       <b-dropdown-item v-if="canChangePassword()" to="/change-password"><i class="fa fa-key text-primary" /> {{ $t('message.change_password') }}</b-dropdown-item>
@@ -22,18 +23,25 @@
   import { HeaderDropdown as AppHeaderDropdown } from '@coreui/vue'
   import EventBus from '../shared/eventbus';
   import { decodeToken, getToken } from '../shared/permissions'
+  import globalVarsMixin from "../mixins/globalVarsMixin";
 
   export default {
     name: 'DefaultHeaderProfileDropdown',
+    mixins: [globalVarsMixin],
     components: {
       AppHeaderDropdown
     },
     data: () => {
-      return { 
+      return {
         itemsCount: 42,
         identityProvider: decodeToken(getToken()).idp
       }
     },
+    computed: {
+      user() {
+        return this.currentUser.fullname || this.currentUser.username
+      }
+    },
     methods: {
       logout: function () {
         // Instructs all tabs (via localStorage event) that the session is being invalidated

src/i18n/locales/en.json

@@ -275,7 +275,7 @@
     "component_removed": "Component removed",
     "required_project_name": "The project name is required",
     "project_name_desc": "The name of the project or component as provided by the supplier",
-    "profile": "Profile",
+    "connected_as": "Connected as",
     "profile_update": "Update Profile",
     "profile_updated": "Profile updated",
     "logout": "Logout",

src/mixins/globalVarsMixin.js

@@ -1,10 +1,12 @@
 import Vue from 'vue'
 import axios from "axios";
+import EventBus from "@/shared/eventbus";
 
 export default {
   data () {
     return {
-      dtrack: Object
+      dtrack: Object,
+      currentUser: Object
     }
   },
   created() {
@@ -17,5 +19,19 @@ export default {
           }
         );
     }
+    if (this.$currentUser) {
+      this.currentUser = this.$currentUser;
+    } else {
+      EventBus.$emit('profileUpdated');
+    }
+  },
+  mounted() {
+    EventBus.$on('profileUpdated', () => {
+      axios.get(`${Vue.prototype.$api.BASE_URL}/${Vue.prototype.$api.URL_USER_SELF}`)
+        .then((result) => {
+            this.currentUser = result.data;
+          }
+        );
+    });
   }
 }

src/router/index.js

@@ -262,7 +262,8 @@ router.beforeEach((to, from, next) => {
       // let backend verify the token
       router.app.axios.get(`${router.app.$api.BASE_URL}/${router.app.$api.URL_USER_SELF}`, {
         headers: { 'Authorization': `Bearer ${jwt}` }
-      }).then(() => {
+      }).then((result) => {
+        Vue.prototype.$currentUser = result.data
         // allowed to proceed
         next();
       }).catch(() => {

src/views/components/ProfileEditModal.vue

@@ -19,9 +19,12 @@
 
 <script>
   import BInputGroupFormInput from "../../forms/BInputGroupFormInput";
+  import globalVarsMixin from "@/mixins/globalVarsMixin";
+  import EventBus from "@/shared/eventbus";
 
   export default {
     name: "ProfileEditModal",
+    mixins: [globalVarsMixin],
     components: {
       BInputGroupFormInput
     },
@@ -34,12 +37,9 @@
     },
     methods: {
       getSelf: function() {
-        const url = `${this.$api.BASE_URL}/${this.$api.URL_USER_SELF}`;
-        this.axios.get(url).then((result) => {
-          this.username = result.data.username;
-          this.fullname = result.data.fullname;
-          this.email = result.data.email;
-        });
+        this.username = this.currentUser.username;
+        this.fullname = this.currentUser.fullname;
+        this.email = this.currentUser.email;
       },
       updateUser: function() {
         let url = `${this.$api.BASE_URL}/${this.$api.URL_USER_MANAGED}`;
@@ -48,6 +48,7 @@
           fullname: this.fullname,
           email: this.email
         }).then((response) => {
+          EventBus.$emit('profileUpdated');
           this.$emit('refreshTable');
           this.$toastr.s(this.$t('message.profile_updated'));
         }).catch((error) => {