AdminButton component

ui/src/App.vue

@@ -1,20 +1,15 @@
 <template>
   <div class="container">
-    <LoginModal ref="login_modal" />
-
     <div class="section">
       <h1 class="title has-text-centered is-uppercase">
         Adventskalender {{ date }}
       </h1>
       <h2 class="subtitle has-text-centered">Der Gelöt</h2>
-
-      <DoorMapEditor />
     </div>
 
     <div class="section">
-      <button class="button" @click.left="$refs.login_modal.set_active(true)">
+      <DoorMapEditor />
-        Login
+      <AdminButton />
-      </button>
     </div>
   </div>
 </template>
@@ -22,23 +17,19 @@
 <script lang="ts">
 import { Options, Vue } from "vue-class-component";
 
+import AdminButton from "./components/AdminButton.vue";
 import DoorMapEditor from "./components/DoorMapEditor.vue";
-import LoginModal from "./components/LoginModal.vue";
 
 @Options({
   components: {
     DoorMapEditor,
-    LoginModal,
+    AdminButton,
   },
 })
 export default class extends Vue {
   private visible_days = 0;
   date = "";
 
-  declare $refs: {
-    login_modal: LoginModal;
-  };
-
   public mounted() {
     this.$advent22
       .api_get<string>("days/date")

ui/src/components/AdminButton.vue

@@ -0,0 +1,29 @@
+<template>
+  <LoginModal ref="login_modal" />
+
+  <BulmaButton
+    class="button is-light"
+    @click.left="$refs.login_modal.set_active(true)"
+    icon="fa-solid fa-toggle-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,
+  },
+})
+export default class extends Vue {
+  declare $refs: {
+    login_modal: LoginModal;
+  };
+}
+</script>