From 943c9b6c326e6c8bbf141edb47f7da27482148eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Sun, 10 Sep 2023 00:24:56 +0000
Subject: [PATCH] AdminButton component

---
 ui/src/App.vue                    | 17 ++++-------------
 ui/src/components/AdminButton.vue | 29 +++++++++++++++++++++++++++++
 2 files changed, 33 insertions(+), 13 deletions(-)
 create mode 100644 ui/src/components/AdminButton.vue

diff --git a/ui/src/App.vue b/ui/src/App.vue
index 669a140..8120a29 100644
--- a/ui/src/App.vue
+++ b/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)">
-        Login
-      </button>
+      <DoorMapEditor />
+      <AdminButton />
     </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")
diff --git a/ui/src/components/AdminButton.vue b/ui/src/components/AdminButton.vue
new file mode 100644
index 0000000..629c31e
--- /dev/null
+++ b/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>