subdir for "bulma" components

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 BulmaBreadcrumbs, { Step } from "./bulma/Breadcrumbs.vue";
-import BulmaButton from "./BulmaButton.vue";
+import BulmaButton from "./bulma/Button.vue";
-import BulmaDrawer from "./BulmaDrawer.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";

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>
+      </form>
 
       <footer class="modal-card-foot">
-          <button class="button is-success" @click.left="submit">Login</button>
+        <BulmaButton
-          <button class="button is-danger" @click.left="set_active(false)">
+          class="button is-success"
-            Cancel
+          @click.left="submit"
-          </button>
+          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>
-      </form>
     </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;
 
+    if (this.active) {
       this.username = "";
       this.password = "";
 
-    if (this.active) {
       this.$nextTick(() => {
         if (this.$refs.username_input instanceof HTMLInputElement) {
           this.$refs.username_input?.focus();

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>