display name when available instead of email in header

web/themes/custom/materiotheme/vuejs/components/User/UserTools.vue

@@ -4,7 +4,8 @@
 
     > -->
     <a class="mdi mdi-account" href="/user">
-      <span>{{ mail }}</span>
+      <span v-if="name">{{ name }}</span>
+      <span v-else>{{ mail }}</span>
     </a>
     <!-- </h4> -->
     <a href="/admin/content/materials"
@@ -27,6 +28,8 @@ import { mapState, mapActions } from 'vuex'
 import UserFlags from 'vuejs/components/User/UserFlags'
 
 export default {
+  watch: {
+  },
   components: {
     UserFlags
   },
@@ -38,6 +41,7 @@ export default {
   computed: {
     ...mapState({
       mail: state => state.User.mail,
+      name: state => state.User.name,
       isAdmin: state => state.User.isAdmin,
       isAdherent: state => state.User.isAdherent,
       flags: state => state.User.flags