UserProfile.vue

<template>
  <div>
    <h4 class="ui horizontal divider header">
      PROFIL
    </h4>

    <div class="ui divided list">
      <div class="item">
        <div class="right floated content">
          <div class="description">
            <span v-if="user.username">{{ user.username }} </span>
          </div>
        </div>
        <div class="content">
          Nom d'utilisateur
        </div>
      </div>

      <div class="item">
        <div class="right floated content">
          <div class="description">
            {{ userFullname }}
          </div>
        </div>
        <div class="content">
          Nom complet
        </div>
      </div>

      <div class="item">
        <div class="right floated content">
          <div class="description">
            {{ user.email }}
          </div>
        </div>
        <div class="content">
          Adresse e-mail
        </div>
      </div>

      <div class="item">
        <div class="right floated content">
          <div class="description">
            {{ user.is_superuser ? "Oui" : "Non" }}
          </div>
        </div>
        <div class="content">
          Administrateur
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {

  name: 'UserProfile',

  computed: {
    ...mapState([
      'user'
    ]),

    userFullname() {
      if (this.user.first_name || this.user.last_name) {
        return `${this.user.first_name} ${this.user.last_name}`;
      }
      return null;
    },
  }

};
</script>