advent22/ui/src/components/AdminButton.vue

<template>
  <LoginModal
    v-if="modal_visible"
    @submit="on_submit"
    @cancel="modal_visible = false"
  />

  <BulmaButton
    class="button is-light"
    @click.left="on_click"
    :icon="'fa-solid fa-toggle-' + (modelValue ? 'on' : 'off')"
    text="Admin"
  />
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";

import BulmaButton from "./bulma/Button.vue";
import LoginModal from "./LoginModal.vue";

@Options({
  components: {
    BulmaButton,
    LoginModal,
  },
  props: {
    modelValue: Boolean,
  },
  emits: ["update:modelValue"],
})
export default class extends Vue {
  // true, iff Benutzer Admin ist
  public modelValue!: boolean;
  public modal_visible = false;

  public on_click() {
    if (this.modelValue) {
      // logout
      this.$advent22.clear_api_auth();
      this.$emit("update:modelValue", false);
    } else {
      // show login modal
      this.modal_visible = true;
    }
  }

  public on_submit(username: string, password: string) {
    this.modal_visible = false;
    this.$advent22.set_api_auth(username, password);

    this.$advent22
      .api_get<boolean>("admin/is_admin")
      .then((is_admin) => this.$emit("update:modelValue", is_admin));
  }
}
</script>