<template>
  <div class="ui-element d-flex justify-content-around usermanagement">
    <img class="userpic" src="../application/assets/user.png">
    <span class="username align-self-center">{{ userinfo }}</span>
    <span class="logout align-self-center" @click="logoff">
      <i class="fa fa-power-off"></i>
    </span>
  </div>
</template>

<style lang="scss">
.usermanagement {
  background: white;
  width: 150px;
  padding: 0.25rem;
  border-radius: 0.25rem;
}
</style>

<script>
import { mapGetters } from "vuex";
export default {
  name: "user",
  data() {
    return {};
  },
  methods: {
    logoff() {
      this.$store.commit("user/clear_auth");
      this.$store.commit("application/resetSidebar");
      this.$router.push("/login");
    }
  },
  computed: {
    ...mapGetters("user", ["userinfo"])
  }
};
</script>