byjove/src/components/menu/ByjoveMenu.vue

<template>
  <section>
    <nav class="level is-mobile">
      <div class="level-item">

        <b-dropdown v-if="user"
                    aria-role="list">
          <button class="button is-primary"
                  :class="{'is-danger': user_is_root}"
                  slot="trigger">
            <span>{{ user.short_name }}</span>
            <!-- <b-icon icon="menu-down"></b-icon> -->
          </button>

          <b-dropdown-item aria-role="listitem" has-link>
            <router-link to="/">Home</router-link>
          </b-dropdown-item>

          <slot></slot>

          <b-dropdown-item v-if="user.is_admin && !user_is_root"
                           aria-role="listitem"
                           has-link
                           class="root-user">
            <a href="#" @click.prevent="becomeRoot()">Become root</a>
          </b-dropdown-item>

          <b-dropdown-item v-if="user_is_root"
                           aria-role="listitem"
                           has-link
                           class="root-user">
            <a href="#" @click.prevent="stopRoot()">Stop being root</a>
          </b-dropdown-item>

          <b-dropdown-item aria-role="listitem" has-link>
            <router-link to="/logout">Logout</router-link>
          </b-dropdown-item>

          <b-dropdown-item aria-role="listitem" has-link>
            <router-link to="/about">About</router-link>
          </b-dropdown-item>

        </b-dropdown>

        <b-button v-if="!user"
                  type="is-primary"
                  tag="router-link" to="/login">
          Login
        </b-button>
      </div>

      <div class="level-item">
        {{ title }}
      </div>

      <div class="level-item">
        <byjove-feedback :url="feedbackUrl"></byjove-feedback>
      </div>
    </nav>

  </section>
</template>

<script>
import ByjoveFeedback from '../feedback'
export default {
    name: 'ByjoveMenu',
    props: {
        appsettings: Object,
        feedbackUrl: {
            type: String,
            default: '/api/feedback',
        },
        becomeRootUrl: {
            type: String,
            default: '/api/become-root',
        },
        stopRootUrl: {
            type: String,
            default: '/api/stop-root',
        },
    },
    components: {
        ByjoveFeedback,
    },
    computed: {
        title: function() {
            if (this.appsettings.production) {
                return this.appsettings.systemTitle
            } else {
                return "[STAGE] " + this.appsettings.systemTitle
            }
        },
        user: function() {
            return this.$store.state.user
        },
        user_is_root: function() {
            return this.$store.state.user_is_root
        },
    },
    methods: {
        becomeRoot() {
            if (this.user_is_root || !this.user.is_admin) {
                return
            }
            this.$http.post(this.becomeRootUrl).then(response => {
                this.$store.commit('SET_USER_IS_ROOT', true)
                this.$buefy.toast.open({
                    message: "You have been elevated to 'root' and now have full system access",
                    type: 'is-success',
                    position: 'is-bottom',
                })
            }, response => {
                this.$buefy.toast.open({
                    message: "Something went wrong!",
                    type: 'is-danger',
                    position: 'is-bottom',
                })
            })

        },
        stopRoot() {
            if (!this.user_is_root) {
                return
            }
            this.$http.post(this.stopRootUrl).then(response => {
                this.$store.commit('SET_USER_IS_ROOT', false)
                this.$buefy.toast.open({
                    message: "Your normal system access has been restored",
                    type: 'is-success',
                    position: 'is-bottom',
                })
            }, response => {
                this.$buefy.toast.open({
                    message: "Something went wrong!",
                    type: 'is-danger',
                    position: 'is-bottom',
                })
            })
        },
    },
}
</script>