advent22/ui/src/components/AdminButton.vue

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

  <BulmaButton
    :class="button_class"
    :icon="'fa-solid fa-toggle-' + (modelValue ? 'on' : 'off')"
    :busy="is_busy"
    text="Admin"
    @click.left="on_click"
  />
</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,
    button_class: String,
  },
  emits: ["update:modelValue"],
})
export default class extends Vue {
  // true, iff Benutzer Admin ist
  public modelValue!: boolean;
  public button_class!: string;

  public modal_visible = false;
  public is_busy = false;

  public on_click() {
    if (this.modelValue) {
      // logout
      this.$advent22.clear_api_auth();
      this.$emit("update:modelValue", false);
    } else {
      // show login modal
      this.is_busy = true;
      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);
        this.is_busy = false;
      })
      .catch((error) => {
        alert(this.$advent22.format_user_error(error));
        this.is_busy = false;
      });
  }

  public on_cancel() {
    this.modal_visible = false;
    this.is_busy = false;
  }
}
</script>