byjove/src/components/menu/ByjoveMenu.vue

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

      <div v-if="user"
           class="level-item">

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

          <slot></slot>

          <b-dropdown-item v-if="$store.state.user_is_admin && !user_is_root"
                           aria-role="menuitem"
                           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="menuitem"
                           has-link
                           class="root-user">
            <a href="#" @click.prevent="stopRoot()">Stop being root</a>
          </b-dropdown-item>

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

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

        </b-dropdown>
      </div>

      <div v-if="!user && showLoginButton"
           class="level-item">
        <b-button type="is-primary"
                  tag="router-link" to="/login">
          <b-icon icon="fas fa-user"></b-icon>
          <span>Login</span>
        </b-button>
      </div>

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

      <div v-if="shouldShowFeedback"
           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',
        },
        showLoginButton: {
            type: Boolean,
            default: true,
        },
        allowFeedback: {
            type: Boolean,
            default: null,
        },
        allowAnonymousFeedback: {
            type: Boolean,
            default: true,
        },
    },
    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
        },
        shouldShowFeedback: function() {
            if (this.allowFeedback !== null) {
                return this.allowFeedback
            }
            if (!this.allowAnonymousFeedback && !this.user) {
                return false
            }
            return true
        },
    },
    methods: {
        becomeRoot() {
            if (this.user_is_root || !this.$store.state.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>