frontend/src/components/Badges.vue

<template>
  <span>
    <b-modal :active="modifyUserModal" @update:active="value => modifyUserModal = value" :width="640" scroll="keep" style="z-index: 100">
      <div class="modal-card subtitle" style="width: auto">
        <header class="modal-card-head">
          <p class="modal-card-title">{{$t('modifyUser.title')}}</p>
          <button
              type="button"
              class="delete"
              @click="$emit('close')"/>
        </header>
        <section class="modal-card-body">
          {{$t('modifyUser.text')}}:<br>
          <b-switch type="is-dark" v-model="booster">
            {{ $t('badges.booster') }}
          </b-switch><br>
          <b-switch type="is-success" v-model="system">
            {{ $t('badges.system') }}
          </b-switch><br>
          <b-switch v-model="bot">
            {{ $t('badges.bot') }}
          </b-switch><br>
          <b-switch type="is-dark" v-model="hidden">
            {{ $t('badges.hidden') }}
          </b-switch><br>
          <b-switch type="is-danger" v-model="admin" v-if="$store.state.executive">
            {{ $t('badges.admin') }}
          </b-switch>
          <b-tooltip label="Only executives can modify this setting" v-else>
            <b-switch disabled="disabled" type="is-danger" v-model="admin">
              Admin
            </b-switch>
          </b-tooltip>
        </section>
        <footer class="modal-card-foot">
          <b-button
              :label="$t('OK')"
              @click="modifyUser()" />
        </footer>
      </div>
    </b-modal>
    <b-tag v-if="admin" class="is-danger" rounded>{{ $t('badges.admin') }}</b-tag>&nbsp;
    <b-tag v-if="bot" class="is-info" rounded>{{ $t('badges.bot') }}</b-tag>&nbsp;
    <b-tag v-if="booster" class="is-success" rounded>{{ $t('badges.booster') }}</b-tag>&nbsp;
    <b-tag v-if="system" class="is-success" rounded>{{ $t('badges.system') }}</b-tag>&nbsp;
    <b-tag v-if="hidden" rounded>{{ $t('badges.hidden') }}</b-tag>&nbsp;
    <b-tag v-if="verified" rounded><i class="fas fa-check"></i>&nbsp;Verified</b-tag>
    <b-button @click="modal()" v-if="$store.state.user.admin & !noPlus" class="is-info tag" rounded><i class="fas fa-plus"></i></b-button>
  </span>
</template>
<script>
import AjaxErrorHandler from ".././assets/js/errorHandler";

export default {
  name: 'UserBadges',
  props: ['admin', 'booster', 'bot', 'hidden', 'banned', 'system', 'username', 'noPlus', 'verified'],
  data() {
    return {
      modifyUserModal: false
    }
  },
  methods: {
    modal() {
      this.modifyUserModal = true
    },
    modifyUser() {
      this.axios
          .put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'admin/user/modify', {
            username: this.username,
            bot: this.bot,
            system: this.system,
            booster: this.booster,
            admin: this.admin,
            hidden: this.hidden
          })
          .then(() => {
            this.modifyUserModal = false
          })
          .catch(e => {
            AjaxErrorHandler(this.$store)(e)
          })
    }
  }
}
</script>