From ce344e5043a6ce77db997a68c944e3ddcf0e41d0 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:10:11 +0000
Subject: [PATCH] subdir for "bulma" components

---
 ui/src/components/DoorMapEditor.vue           |  6 +--
 ui/src/components/LoginModal.vue              | 39 +++++++++++++------
 .../Breadcrumbs.vue}                          |  0
 .../{BulmaButton.vue => bulma/Button.vue}     |  2 +-
 .../{BulmaDrawer.vue => bulma/Drawer.vue}     |  0
 5 files changed, 31 insertions(+), 16 deletions(-)
 rename ui/src/components/{BulmaBreadcrumbs.vue => bulma/Breadcrumbs.vue} (100%)
 rename ui/src/components/{BulmaButton.vue => bulma/Button.vue} (91%)
 rename ui/src/components/{BulmaDrawer.vue => bulma/Drawer.vue} (100%)

diff --git a/ui/src/components/DoorMapEditor.vue b/ui/src/components/DoorMapEditor.vue
index 14ea612..bdb4f58 100644
--- a/ui/src/components/DoorMapEditor.vue
+++ b/ui/src/components/DoorMapEditor.vue
@@ -59,9 +59,9 @@ div.panel-block.is-flex button {
 import { Door, DoorsSaved } from "@/lib/door";
 import { Options, Vue } from "vue-class-component";
 
-import BulmaBreadcrumbs, { Step } from "./BulmaBreadcrumbs.vue";
-import BulmaButton from "./BulmaButton.vue";
-import BulmaDrawer from "./BulmaDrawer.vue";
+import BulmaBreadcrumbs, { Step } from "./bulma/Breadcrumbs.vue";
+import BulmaButton from "./bulma/Button.vue";
+import BulmaDrawer from "./bulma/Drawer.vue";
 import Calendar from "./Calendar.vue";
 import DoorChooser from "./calendar/editor/DoorChooser.vue";
 import DoorPlacer from "./calendar/editor/DoorPlacer.vue";
diff --git a/ui/src/components/LoginModal.vue b/ui/src/components/LoginModal.vue
index 304a208..b435f1c 100644
--- a/ui/src/components/LoginModal.vue
+++ b/ui/src/components/LoginModal.vue
@@ -27,27 +27,42 @@
           </div>
 
           <div class="field">
-            <label class="label">Password</label>
+            <label class="label">Passwort</label>
             <div class="control">
               <input class="input" type="password" v-model="password" />
             </div>
           </div>
         </section>
-
-        <footer class="modal-card-foot">
-          <button class="button is-success" @click.left="submit">Login</button>
-          <button class="button is-danger" @click.left="set_active(false)">
-            Cancel
-          </button>
-        </footer>
       </form>
+
+      <footer class="modal-card-foot">
+        <BulmaButton
+          class="button is-success"
+          @click.left="submit"
+          icon="fa-solid fa-unlock"
+          text="Login"
+        />
+        <BulmaButton
+          class="button is-danger"
+          @click.left="set_active(false)"
+          icon="fa-solid fa-circle-xmark"
+          text="Abbrechen"
+        />
+      </footer>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { Vue } from "vue-class-component";
+import { Options, Vue } from "vue-class-component";
 
+import BulmaButton from "./bulma/Button.vue";
+
+@Options({
+  components: {
+    BulmaButton,
+  },
+})
 export default class extends Vue {
   public active = false;
   public username = "";
@@ -66,10 +81,10 @@ export default class extends Vue {
   public set_active(state: boolean) {
     this.active = state;
 
-    this.username = "";
-    this.password = "";
-
     if (this.active) {
+      this.username = "";
+      this.password = "";
+
       this.$nextTick(() => {
         if (this.$refs.username_input instanceof HTMLInputElement) {
           this.$refs.username_input?.focus();
diff --git a/ui/src/components/BulmaBreadcrumbs.vue b/ui/src/components/bulma/Breadcrumbs.vue
similarity index 100%
rename from ui/src/components/BulmaBreadcrumbs.vue
rename to ui/src/components/bulma/Breadcrumbs.vue
diff --git a/ui/src/components/BulmaButton.vue b/ui/src/components/bulma/Button.vue
similarity index 91%
rename from ui/src/components/BulmaButton.vue
rename to ui/src/components/bulma/Button.vue
index 3dccbcd..cda8d86 100644
--- a/ui/src/components/BulmaButton.vue
+++ b/ui/src/components/bulma/Button.vue
@@ -3,7 +3,7 @@
     <span v-if="icon !== undefined" class="icon">
       <font-awesome-icon :icon="icon" />
     </span>
-    <span v-if="text != ''">{{ text }}</span>
+    <span v-if="text !== ''">{{ text }}</span>
   </button>
 </template>
 
diff --git a/ui/src/components/BulmaDrawer.vue b/ui/src/components/bulma/Drawer.vue
similarity index 100%
rename from ui/src/components/BulmaDrawer.vue
rename to ui/src/components/bulma/Drawer.vue