<commit_before><template>

  <nav-bar-item
    tabindex="0"
    @click.native="navBarClicked"
    @keyup.native.enter="navBarClicked"
  >
    <!-- Logged-in state -->
    <div class="wrapper" v-if="loggedIn">
      <div class="user-icon" id="user-dropdown">{{ initial }}</div>
    </div>

    <!-- Logged-out state -->
    <div class="wrapper" v-else>
      <svg id="person" class="person-icon" src="./icons/person.svg"/>
      <div class="label">{{ $tr('logIn') }}</div>
    </div>

    <!-- backdrop and user pop-up -->
    <div id="dropdown-backdrop" @click.stop="hideDropdown" v-show="showDropdown"></div>
    <transition name="fade">
      <div id="dropdown" v-show="showDropdown">
        <div class="user-dropdown">
          <ul class="dropdown-list">
            <li>
              <p class="dropdown-name">{{ name }}</p>
              <p id="dropdown-username">{{ username }}</p>
              <p id="dropdown-usertype">{{ userkind }}</p>
            </li>
            <li id="logout-tab">
              <div tabindex="0" @keyup.enter="userLogout" @click="logout" :aria-label="$tr('logOut')">
                <span>{{ $tr('logOut') }}</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </transition>

  </nav-bar-item>

</template>


<script>

  const UserKinds = require('../../constants').UserKinds;
  const actions = require('kolibri.coreVue.vuex.actions');

  module.exports = {
    $trNameSpace: 'sessionWidget',
    $trs: {
      logOut: 'Log Out',
      logIn: 'Log In',
      admin: 'Admin',
      coach: 'Coach',
      learner: 'Learner',
    },
    components: {
      'nav-bar-item': require('kolibri.coreVue.components.navBarItem'),
    },
    data: () => ({
      showDropdown: false,
    }),
    computed: {
      initial() {
        if (this.deviceOwner) {
          return this.username[0].toUpperCase();
        }
        if (this.fullname) {
          return this.fullname[0].toUpperCase();
        }
        return '?';
      },
      name() {
        if (this.deviceOwner) {
          return 'Device Owner';
        }
        return this.fullname;
      },
      userkind() {
        if (this.kind[0]) {
          if (this.kind[0] === UserKinds.ADMIN) {
            return this.$tr('admin');
          } else if (this.kind[0] === UserKinds.COACH) {
            return this.$tr('coach');
          }
        }
        return this.$tr('learner');
      },
      logOutText() {
        return this.$tr('logOut');
      },
    },
    methods: {
      navBarClicked() {
        if (this.loggedIn) {
          this.showDropdown = !this.showDropdown;
        } else {
          this.showLoginModal();
        }
      },
      hideDropdown() {
        this.showDropdown = false;
      },
    },
    vuex: {
      actions: {
        logout: actions.kolibriLogout,
        showLoginModal: actions.showLoginModal,<commit_msg>Wrapping name header (missed a spot) and taking SUPERUSERS into account for user kinds(/types/roles)<commit_after><template>

  <nav-bar-item
    tabindex="0"
    @click.native="navBarClicked"
    @keyup.native.enter="navBarClicked"
  >
    <!-- Logged-in state -->
    <div class="wrapper" v-if="loggedIn">
      <div class="user-icon" id="user-dropdown">{{ initial }}</div>
    </div>

    <!-- Logged-out state -->
    <div class="wrapper" v-else>
      <svg id="person" class="person-icon" src="./icons/person.svg"/>
      <div class="label">{{ $tr('logIn') }}</div>
    </div>

    <!-- backdrop and user pop-up -->
    <div id="dropdown-backdrop" @click.stop="hideDropdown" v-show="showDropdown"></div>
    <transition name="fade">
      <div id="dropdown" v-show="showDropdown">
        <div class="user-dropdown">
          <ul class="dropdown-list">
            <li>
              <p class="dropdown-name">{{ name }}</p>
              <p id="dropdown-username">{{ username }}</p>
              <p id="dropdown-usertype">{{ userkind }}</p>
            </li>
            <li id="logout-tab">
              <div tabindex="0" @keyup.enter="userLogout" @click="logout" :aria-label="$tr('logOut')">
                <span>{{ $tr('logOut') }}</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </transition>

  </nav-bar-item>

</template>


<script>

  const UserKinds = require('../../constants').UserKinds;
  const actions = require('kolibri.coreVue.vuex.actions');

  module.exports = {
    $trNameSpace: 'sessionWidget',
    $trs: {
      logOut: 'Log Out',
      logIn: 'Log In',
      admin: 'Admin',
      coach: 'Coach',
      learner: 'Learner',
      superuser: 'Superuser',
      deviceOwner: 'Device Owner',
    },
    components: {
      'nav-bar-item': require('kolibri.coreVue.components.navBarItem'),
    },
    data: () => ({
      showDropdown: false,
    }),
    computed: {
      initial() {
        if (this.deviceOwner) {
          return this.username[0].toUpperCase();
        }
        if (this.fullname) {
          return this.fullname[0].toUpperCase();
        }
        return '?';
      },
      name() {
        if (this.deviceOwner) {
          return this.$tr('deviceOwner');
        }
        return this.fullname;
      },
      userkind() {
        console.log(this.kind[0]);
        if (this.kind[0]) {
          if (this.kind[0] === UserKinds.ADMIN) {
            return this.$tr('admin');
          } else if (this.kind[0] === UserKinds.COACH) {
            return this.$tr('coach');
          } else if (this.kind[0] === UserKinds.SUPERUSER) {
            return this.$tr('superuser');
          }
        }
        return this.$tr('learner');
      },
      logOutText() {
        return this.$tr('logOut');
      },
    },
    methods: {
      navBarClicked() {
        if (this.loggedIn) {
          this.showDropdown = !this.showDropdown;
        } else {
          this.showLoginModal();
        }
      },
      hideDropdown() {
        this.showDropdown = false;
      },
    },
    vuex: {
      actions: {
        logout: actions.kolibriLogout,
        showLoginModal: actions.showLoginModal,
{'fraction_non_alphanumeric': 0.17997694714309237, 'fraction_numerical': 0.002634612218014161, 'mean_word_length': 1.8923809523809523, 'pattern_counts': {'":': 0, '<': 85, '<?xml version=': 0, '>': 87, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3311660', 'n_tokens_mistral': 1983, 'n_tokens_neox': 1963, 'n_words': 349}