advent22/ui/src/components/AdminButton.vue

71 lines
1.6 KiB
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.set_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.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>