* apply and misapply by open contracts + modals

feature: #8

src/components/modals/DeregisterModal.vue

@@ -0,0 +1,80 @@
+<template>
+  <div
+    id="popup-modal"
+    tabindex="-1"
+    class="fixed top-0 left-0 right-0 z-50 flex justify-center text-center p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-modal md:h-full">
+    <div class="relative w-full h-full max-w-md md:h-auto">
+      <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
+        <button
+          type="button"
+          class="absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-800 dark:hover:text-white"
+          data-modal-hide="popup-modal"
+          @click="closeModal()">
+          <svg
+            aria-hidden="true"
+            class="w-5 h-5"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg">
+            <path
+              fill-rule="evenodd"
+              d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+              clip-rule="evenodd"></path>
+          </svg>
+          <span class="sr-only">Close modal</span>
+        </button>
+        <div class="p-6 text-center">
+          <svg
+            aria-hidden="true"
+            class="mx-auto mb-4 text-gray-400 w-14 h-14 dark:text-gray-200"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg">
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+          </svg>
+          <h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">
+            Bist du sicher, dass du abmelden möchtest?
+          </h3>
+          <button
+            data-modal-hide="popup-modal"
+            type="button"
+            class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center mr-2"
+            @click="deregister()">
+            Ja, bin sicher
+          </button>
+          <button
+            data-modal-hide="popup-modal"
+            type="button"
+            class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600"
+            @click="closeModal()">
+            Nein, stornieren
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapActions } from 'vuex'
+import { misapply } from '../../service/ContractsService';
+
+export default {
+  computed: {
+    selectedContract() {
+      return this.$store.state.contracts.selectedContract
+    }
+  },
+  methods: {
+    ...mapActions(['closeModal']),
+    deregister() {
+      misapply(this.selectedContract)
+      this.closeModal()
+    }
+  }
+}
+</script>

src/components/modals/RegisterModal.vue

@@ -0,0 +1,70 @@
+<template>
+  <div
+    id="popup-modal"
+    tabindex="-1"
+    class="fixed top-0 left-0 right-0 z-50 flex justify-center text-center p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-modal md:h-full">
+    <div class="relative w-full h-full max-w-md md:h-auto">
+      <div class="relative bg-white rounded-lg shadow dark:bg-gray-700" @click="closeModal()">
+        <button
+          type="button"
+          class="absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-800 dark:hover:text-white"
+          data-modal-hide="popup-modal">
+          <svg
+            aria-hidden="true"
+            class="w-5 h-5"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg">
+            <path
+              fill-rule="evenodd"
+              d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+              clip-rule="evenodd"></path>
+          </svg>
+          <span class="sr-only">Close modal</span>
+        </button>
+        <div class="p-6 text-center">
+          <font-awesome-icon icon="fa-solid fa-circle-question" class="h-12" />
+          <h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">
+            Wie möchtest du anmelden? Als Leiter oder Mitarbeiter
+          </h3>
+          <button
+            class="bg-blue-500 text-white active:bg-emerald-600 font-bold uppercase px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-3 mb-1 ease-linear transition-all duration-150"
+            type="button"
+            @click="apply('leiter')">
+            <font-awesome-icon icon="fa-solid fa-chalkboard-user" class="h-5" /><br />
+            Leiter
+          </button>
+          <button
+            class="bg-blue-500 text-white active:bg-emerald-600 font-bold uppercase px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
+            type="button"
+            @click="apply('mitarbeiter')">
+            <font-awesome-icon icon="fa-solid fa-user-large" class="h-5" /><br />
+            Mitarbeiter
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapActions } from 'vuex'
+import { applyContract } from '../../service/ContractsService'
+
+export default {
+  computed: {
+    selectedContract() {
+      return this.$store.state.contracts.selectedContract
+    }
+  },
+  methods: {
+    ...mapActions(['closeModal']),
+    apply(role) {
+      const id = this.selectedContract
+      if (id === null) {
+        //TODO: router push error page
+      }
+      applyContract(id, role)
+    }
+  }
+}
+</script>

src/components/tabs/ContractTab.vue

@@ -95,7 +95,7 @@
           <td class="text align-top text-xl pl-4 max-sm:text-base py-2">Beispiele:</td>
           <td class="w-full pl-2 text-lg py-2">
             <ul class="list-disc pl-4">
-              <li v-for="(example, index) in contract.examples" :key="index">
+              <li v-for="(example, index) in contract.examples" :key="example">
                 <a :href="example" class="underline">
                   Link {{ index + 1 }}
                   <font-awesome-icon