Add nami field

package-lock.json

@@ -10,6 +10,7 @@
             "dependencies": {
                 "@tailwindcss/typography": "^0.5.10",
                 "autoprefixer": "^10.4.17",
+                "lodash": "^4.17.21",
                 "prettier": "^3.2.5",
                 "vue": "^3.3.11",
                 "vue3-toastify": "^0.2.1"
@@ -975,6 +976,11 @@
             "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
             "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
         },
+        "node_modules/lodash": {
+            "version": "4.17.21",
+            "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+            "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+        },
         "node_modules/lodash.castarray": {
             "version": "4.4.0",
             "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",

package.json

@@ -12,6 +12,7 @@
     "dependencies": {
         "@tailwindcss/typography": "^0.5.10",
         "autoprefixer": "^10.4.17",
+        "lodash": "^4.17.21",
         "prettier": "^3.2.5",
         "vue": "^3.3.11",
         "vue3-toastify": "^0.2.1"

src/EventForm.ce.vue

@@ -4,81 +4,77 @@
             <div class="bg-white @container rounded-lg shadow-lg" x-show="finished === false">
                 <div class="sticky top-0 z-10 hidden @sm:flex overflow-hidden rounded-t-lg h-12 @md:h-16">
                     <template v-for="(section, index) in v.sections">
-                        <a
+                        <a href="#"
-                            href="#"
                             class="flex flex-col @md:flex-row items-center justify-center @md:justify-start px-2 flex-auto @md:pl-6 h-full transition duration-300 relative"
                             :class="{
                                 'bg-primary': index <= active,
                                 'bg-secondary': index > active,
-                            }"
+                            }" @click.prevent="active = index">
-                            @click.prevent="active = index"
+                            <svg preserveAspectRatio="none"
-                        >
-                            <svg
-                                preserveAspectRatio="none"
                                 class="h-full w-3 absolute left-0 text-primary transition duration-300"
-                                viewBox="0 0 100 100"
+                                viewBox="0 0 100 100" :class="{
-                                :class="{
                                     'opacity-100': index !== 0 && index - 1 <= active,
                                     'opacity-0': !(index !== 0 && index - 1 <= active),
-                                }"
+                                }">
-                            >
                                 <path d="M0,0 100,50 0,100" fill="currentColor"></path>
                             </svg>
-                            <span class="flex items-center justify-center w-4 @md:w-6 h-4 @md:h-6 rounded-full bg-circle text-font font-goudy transition duration-300" v-html="index + 1"></span>
+                            <span
+                                class="flex items-center justify-center w-4 @md:w-6 h-4 @md:h-6 rounded-full bg-circle text-font font-goudy transition duration-300"
+                                v-html="index + 1"></span>
                             <span class="text-sm text-font ml-2" v-html="section.name"></span>
                             <div v-if="editable" class="hidden @md:flex items-center h-full">
-                                <a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2" @click.prevent.stop="$emit('editSection', index)">
+                                <a href="#"
+                                    class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2"
+                                    @click.prevent.stop="$emit('editSection', index)">
                                     <edit-icon class="w-3 h-3 fill-current"></edit-icon>
                                 </a>
-                                <a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2" @click.prevent.stop="$emit('deleteSection', index)">
+                                <a href="#"
+                                    class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2"
+                                    @click.prevent.stop="$emit('deleteSection', index)">
                                     <delete-icon class="w-3 h-3 fill-current"></delete-icon>
                                 </a>
                             </div>
                         </a>
                     </template>
                     <div v-if="editable" class="hidden @md:flex items-center h-full absolute right-0 mr-6">
-                        <a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font" @click.prevent.stop="$emit('addSection')">
+                        <a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font"
-                            <svg height="426.66667pt" viewBox="0 0 426.66667 426.66667" width="426.66667pt" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 fill-current">
+                            @click.prevent.stop="$emit('addSection')">
+                            <svg height="426.66667pt" viewBox="0 0 426.66667 426.66667" width="426.66667pt"
+                                xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 fill-current">
                                 <path
-                                    d="m405.332031 192h-170.664062v-170.667969c0-11.773437-9.558594-21.332031-21.335938-21.332031-11.773437 0-21.332031 9.558594-21.332031 21.332031v170.667969h-170.667969c-11.773437 0-21.332031 9.558594-21.332031 21.332031 0 11.777344 9.558594 21.335938 21.332031 21.335938h170.667969v170.664062c0 11.777344 9.558594 21.335938 21.332031 21.335938 11.777344 0 21.335938-9.558594 21.335938-21.335938v-170.664062h170.664062c11.777344 0 21.335938-9.558594 21.335938-21.335938 0-11.773437-9.558594-21.332031-21.335938-21.332031zm0 0"
+                                    d="m405.332031 192h-170.664062v-170.667969c0-11.773437-9.558594-21.332031-21.335938-21.332031-11.773437 0-21.332031 9.558594-21.332031 21.332031v170.667969h-170.667969c-11.773437 0-21.332031 9.558594-21.332031 21.332031 0 11.777344 9.558594 21.335938 21.332031 21.335938h170.667969v170.664062c0 11.777344 9.558594 21.335938 21.332031 21.335938 11.777344 0 21.335938-9.558594 21.335938-21.335938v-170.664062h170.664062c11.777344 0 21.335938-9.558594 21.335938-21.335938 0-11.773437-9.558594-21.332031-21.335938-21.332031zm0 0" />
-                                />
                             </svg>
                         </a>
                     </div>
                 </div>
                 <div class="flex items-center justify-between px-4 overflow-hidden rounded-t-lg @sm:hidden bg-secondary">
-                    <a
+                    <a href="#"
-                        href="#"
                         class="flex items-center justify-center w-7 h-7 flex-none rounded-full bg-circle text-font transition duration-300 flex-none"
-                        :class="{'opacity-40': !backable}"
+                        :class="{ 'opacity-40': !backable }" @click.prevent="back">
-                        @click.prevent="back"
-                    >
                         <svg class="text-sm text-font fill-current rotate-90 w-3 h-3" viewBox="0 0 11.314 7.0710001">
                             <path d="M 4.95,6.364 5.657,7.071 11.314,1.414 9.9,0 5.657,4.242 1.414,0 0,1.414 Z" />
                         </svg>
                     </a>
                     <div class="overflow-hidden">
                         <carousel v-model="active">
-                            <slide v-for="(section, index) in v.sections" :key="index" class="relative flex flex-no-wrap overflow-hidden">
+                            <slide v-for="(section, index) in v.sections" :key="index"
+                                class="relative flex flex-no-wrap overflow-hidden">
                                 <div class="flex-none w-full">
-                                    <div
+                                    <div href="#"
-                                        href="#"
                                         class="flex flex-col @md:flex-row items-center justify-center @md:justify-start px-2 flex-auto @md:pl-6 h-12 @md:h-16 transition duration-300 relative"
-                                        @click="active = index"
+                                        @click="active = index">
-                                    >
+                                        <span
-                                        <span class="flex items-center justify-center w-4 @md:w-6 h-4 @md:h-6 rounded-full bg-circle text-font transition duration-300" v-html="index + 1"></span>
+                                            class="flex items-center justify-center w-4 @md:w-6 h-4 @md:h-6 rounded-full bg-circle text-font transition duration-300"
+                                            v-html="index + 1"></span>
                                         <span class="text-sm text-font" v-html="section.name"></span>
                                     </div>
                                 </div>
                             </slide>
                         </carousel>
                     </div>
-                    <a
+                    <a href="#"
-                        href="#"
                         class="flex items-center justify-center w-7 h-7 flex-none rounded-full bg-circle text-font transition duration-300 flex-none"
-                        :class="{'opacity-40': !nextable}"
+                        :class="{ 'opacity-40': !nextable }" @click.prevent="next">
-                        @click.prevent="next"
-                    >
                         <svg class="text-sm text-font fill-current -rotate-90 w-3 h-3" viewBox="0 0 11.314 7.0710001">
                             <path d="M 4.95,6.364 5.657,7.071 11.314,1.414 9.9,0 5.657,4.242 1.414,0 0,1.414 Z" />
                         </svg>
@@ -89,25 +85,28 @@
                     <carousel v-model="active">
                         <slide v-for="(section, index) in v.sections" :key="index">
                             <div class="w-full flex-none px-3 @xs:px-6">
-                                <div class="text-sm sm_text-base text-gray-800 leading-tight mb-5" v-text="section.intro"></div>
+                                <div class="text-sm sm_text-base text-gray-800 leading-tight mb-5" v-text="section.intro">
+                                </div>
                                 <div class="grid grid-cols-2 @sm:grid-cols-4 @lg:grid-cols-6 gap-4 mt-6 items-start">
-                                    <div
+                                    <div v-for="(field, findex) in section.fields" :key="findex"
-                                        v-for="(field, findex) in section.fields"
+                                        class="flex justify-stretch relative group" :class="{
-                                        :key="findex"
-                                        class="flex justify-stretch relative group"
-                                        :class="{
                                             'hover:ring-edit hover:ring-4': editable,
                                             [colClasses.mobile[field.columns.mobile]]: true,
                                             [colClasses.tablet[field.columns.tablet]]: true,
                                             [colClasses.desktop[field.columns.desktop]]: true,
-                                        }"
+                                        }">
-                                    >
+                                        <component :is="resolveComponentName(field)" v-model="payload[field.key]"
-                                        <component :is="resolveComponentName(field)" v-model="payload[field.key]" :fields="allFields" :payload="payload" :field="field"></component>
+                                            :fields="allFields" :payload="payload" :field="field"></component>
-                                        <div v-if="editable" class="right-0 top-0 -mr-2 -mt-2 absolute hidden space-x-2 group-hover:flex">
+                                        <div v-if="editable"
-                                            <a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2" @click.prevent.stop="$emit('editField', index, findex)">
+                                            class="right-0 top-0 -mr-2 -mt-2 absolute hidden space-x-2 group-hover:flex">
+                                            <a href="#"
+                                                class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2"
+                                                @click.prevent.stop="$emit('editField', index, findex)">
                                                 <edit-icon class="w-3 h-3 fill-current"></edit-icon>
                                             </a>
-                                            <a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2" @click.prevent.stop="$emit('deleteField', index, findex)">
+                                            <a href="#"
+                                                class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2"
+                                                @click.prevent.stop="$emit('deleteField', index, findex)">
                                                 <delete-icon class="w-3 h-3 fill-current"></delete-icon>
                                             </a>
                                         </div>
@@ -115,11 +114,13 @@
                                 </div>
 
                                 <div v-if="editable" class="flex justify-center mt-6 relative">
-                                    <a href="#" class="bg-edit rounded-full flex w-8 h-8 items-center justify-center text-font" @click.prevent="$emit('addField', index)">
+                                    <a href="#"
-                                        <svg height="426.66667pt" viewBox="0 0 426.66667 426.66667" width="426.66667pt" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 fill-current">
+                                        class="bg-edit rounded-full flex w-8 h-8 items-center justify-center text-font"
+                                        @click.prevent="$emit('addField', index)">
+                                        <svg height="426.66667pt" viewBox="0 0 426.66667 426.66667" width="426.66667pt"
+                                            xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 fill-current">
                                             <path
-                                                d="m405.332031 192h-170.664062v-170.667969c0-11.773437-9.558594-21.332031-21.335938-21.332031-11.773437 0-21.332031 9.558594-21.332031 21.332031v170.667969h-170.667969c-11.773437 0-21.332031 9.558594-21.332031 21.332031 0 11.777344 9.558594 21.335938 21.332031 21.335938h170.667969v170.664062c0 11.777344 9.558594 21.335938 21.332031 21.335938 11.777344 0 21.335938-9.558594 21.335938-21.335938v-170.664062h170.664062c11.777344 0 21.335938-9.558594 21.335938-21.335938 0-11.773437-9.558594-21.332031-21.335938-21.332031zm0 0"
+                                                d="m405.332031 192h-170.664062v-170.667969c0-11.773437-9.558594-21.332031-21.335938-21.332031-11.773437 0-21.332031 9.558594-21.332031 21.332031v170.667969h-170.667969c-11.773437 0-21.332031 9.558594-21.332031 21.332031 0 11.777344 9.558594 21.335938 21.332031 21.335938h170.667969v170.664062c0 11.777344 9.558594 21.335938 21.332031 21.335938 11.777344 0 21.335938-9.558594 21.335938-21.335938v-170.664062h170.664062c11.777344 0 21.335938-9.558594 21.335938-21.335938 0-11.773437-9.558594-21.332031-21.335938-21.332031zm0 0" />
-                                            />
                                         </svg>
                                     </a>
                                 </div>
@@ -135,8 +136,8 @@
 </template>
 
 <script setup>
-import {computed, ref, watch} from 'vue';
+import { computed, ref, watch } from 'vue';
-import {Carousel, Slide} from 'vue3-carousel';
+import { Carousel, Slide } from 'vue3-carousel';
 import Navigation from './components/Navigation.vue';
 import useNav from './composables/useNav.js';
 import EditIcon from './components/icons/EditIcon.vue';
@@ -144,7 +145,7 @@ import DeleteIcon from './components/icons/DeleteIcon.vue';
 import useToastify from './composables/useToastify.js';
 import useFields from './composables/useFields.js';
 
-const {success, errorFromResponse} = useToastify();
+const { success, errorFromResponse } = useToastify();
 
 const emits = defineEmits(['addSection', 'editSection', 'deleteSection', 'addField', 'editField', 'deleteField', 'active']);
 
@@ -233,8 +234,8 @@ watch(
     (value) => reload(),
 );
 
-const {back, next, backable, nextable} = useNav(active, v.value.sections.length);
+const { back, next, backable, nextable } = useNav(active, v.value.sections.length);
-const {resolveComponentName} = useFields();
+const { resolveComponentName } = useFields();
 
 async function submit() {
     try {

src/components/Info.vue

@@ -0,0 +1,16 @@
+<template>
+    <div class="text-sm relative">
+        <div class="flex items-center justify-center w-6 h-6 rounded-full border-blue-600 border-solid border-2 absolute -top-2 -left-2 bg-blue-200">
+            <info-icon class="w-3 h-3 text-blue-700"></info-icon>
+        </div>
+        <div class="flex flex-row items-center p-4 border-2 rounded form-group shadow-sm bg-blue-200 border-blue-600">
+            <div class="flex-grow text-sm text-blue-900 group info">
+                <slot></slot>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import InfoIcon from './icons/InfoIcon.vue';
+</script>

src/components/Success.vue

@@ -0,0 +1,16 @@
+<template>
+    <div class="text-sm relative">
+        <div class="flex items-center justify-center w-6 h-6 rounded-full border-green-600 border-solid border-2 absolute -top-2 -left-2 bg-green-200">
+            <info-icon class="w-3 h-3 text-green-700"></info-icon>
+        </div>
+        <div class="flex flex-row items-center p-4 border-2 rounded form-group shadow-sm bg-green-200 border-green-600">
+            <div class="flex-grow text-sm text-green-900">
+                <slot></slot>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import InfoIcon from './icons/InfoIcon.vue';
+</script>

src/components/fields/Nami.vue

@@ -1,8 +1,61 @@
 <template>
     <div class="relative w-full flex flex-col">
-        <field-label :name="field.name" :required="false"></field-label>
+        <success v-if="user !== null">
+            <div class="flex items-center justify-between">
+                <div>Erfolgreich eingeloggt als {{ user }}.</div>
+                <button
+                    type="button"
+                    @click.prevent="logout"
+                    class="self-end px-4 h-[28px] rounded flex items-center justify-center bg-green-500 hover:bg-green-700 shadow text-green-100 hover:text-green-200 transition duration-200"
+                >
+                    Abmelden
+                </button>
+            </div>
+        </success>
+        <info v-else>
+            <div class="space-y-1">
+                <p>Bitte melde dich mit deinen <span class="font-semibold">NaMi Zugangsdaten</span> an. Im Anschluss kannst du deine Grüpplinge aus deiner Gruppierung hier hinzufügen.</p>
+                <p>
+                    Falls du noch keine NaMi Zugangsdaten hast, kannst du sie
+                    <a href="https://nami.dpsg.de/ica/pages/requestLogin.jsp" target="_BLANK" class="font-semibold">hier</a>
+                    beantragen.
+                </p>
+                <p>
+                    Bitte achte außerdem darauf, dass du mindestens <span class="font-semibold">Leserechte</span> auf deine Gruppierung hast. Diese kann dir i.d.R. dein
+                    <span class="font-semibold">StaVo</span> erteilen.
+                </p>
+            </div>
+            <div class="flex mt-4 space-x-3">
+                <v-text name="nami_mglnr" label="Mitgliedsnummer" id="nami_mglnr" v-model="loginData.mglnr" required></v-text>
+                <v-text name="nami_password" label="Passwort" id="nami_password" v-model="loginData.password" type="password" required></v-text>
+                <button
+                    type="button"
+                    @click.prevent="login"
+                    class="self-end px-4 h-[28px] rounded flex items-center justify-center bg-blue-500 hover:bg-blue-700 shadow text-blue-100 hover:text-blue-200 transition duration-200"
+                >
+                    Anmelden
+                </button>
+            </div>
+        </info>
+        <div v-if="user !== null">
+            <label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex mt-2">
+                <input
+                    id="search_firstname"
+                    v-model="searchData.firstname"
+                    name="search_firstname"
+                    type="text"
+                    placeholder=""
+                    class="bg-white rounded-lg focus:outline-none text-gray-600 text-left py-1 px-2 text-sm w-full"
+                    @input="searchForMember"
+                />
+                <field-label name="Vorname"></field-label>
+            </label>
+
+            <div v-for="member in searchResults" :id="member.id">
+                {{ member.name }}
+            </div>
+        </div>
         <div v-for="(member, index) in inner" class="flex space-x-2 mt-6" :key="index">
-            <!--
             <label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex mt-2">
                 <input
                     :id="`${field.key}-${index}`"
@@ -14,7 +67,6 @@
                 />
                 <field-label name="Mitgliedsnr" :required="true"></field-label>
             </label>
-                -->
             <div class="w-full" v-for="(memberField, memberIndex) in memberFields" :key="field.key">
                 <component :is="resolveComponentName(memberField)" :id="`${field.key}-${memberIndex}`" v-model="member[memberField.key]" :fields="fields" :payload="member" :field="memberField">
                 </component>
@@ -27,7 +79,13 @@
 <script setup>
 import {computed, ref} from 'vue';
 import FieldLabel from '../FieldLabel.vue';
-import useFields from '../../composables/useFields.js';
+import VText from './VText.vue';
+import useFields from '../../composables/useFieldsWithoutNami.js';
+import Info from '../Info.vue';
+import Success from '../Success.vue';
+import useAdremaLogin from '../../composables/useAdremaLogin.js';
+
+const {login, logout, user, loginData, searchData, searchForMember, searchResults} = useAdremaLogin();
 
 const {resolveComponentName} = useFields();
 

src/components/fields/Text.vue

@@ -1,14 +1,10 @@
 <template>
-    <label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex">
+    <v-text :required="field.required" :name="field.key" :label="field.name" :id="innerId" v-model="inner"></v-text>
-        <input :id="innerId" v-model="inner" :name="field.key" type="text" placeholder=""
-            class="bg-white rounded-lg focus:outline-none text-gray-600 text-left py-1 px-2 @sm:py-2 text-sm @sm:text-base @sm:px-3 w-full" />
-        <field-label :name="field.name" :required="field.required"></field-label>
-    </label>
 </template>
 
 <script setup>
 import { computed } from 'vue';
-import FieldLabel from '../FieldLabel.vue';
+import VText from './VText.vue';
 
 const emit = defineEmits(['update:modelValue']);
 const props = defineProps({

src/components/fields/VText.vue

@@ -0,0 +1,53 @@
+<template>
+    <label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex">
+        <input
+            :id="id"
+            v-model="inner"
+            :name="name"
+            :type="type"
+            placeholder=""
+            class="bg-white group-[.info]:bg-blue-200 rounded-lg focus:outline-none text-gray-600 text-left w-full py-1 @sm:py-2 @sm:group-[.info]:py-1 px-2 @sm:px-3 @sm:group-[.info]:px-2 text-sm @sm:text-base @sm:group-[.info]:text-sm"
+        />
+        <field-label :name="label" class="group-[.info]:bg-blue-200" :required="required"></field-label>
+    </label>
+</template>
+
+<script setup>
+import {computed} from 'vue';
+import FieldLabel from '../FieldLabel.vue';
+
+const emit = defineEmits(['update:modelValue']);
+const props = defineProps({
+    modelValue: {
+        required: true,
+        validator: (value) => value === null || typeof value === 'string',
+    },
+    required: {
+        required: false,
+        type: Boolean,
+        default: () => false,
+    },
+    name: {
+        required: true,
+        type: String,
+    },
+    id: {
+        required: true,
+        type: String,
+    },
+    label: {
+        required: true,
+        type: String,
+    },
+    type: {
+        required: false,
+        type: String,
+        default: () => 'text',
+    },
+});
+
+const inner = computed({
+    get: () => props.modelValue,
+    set: (v) => emit('update:modelValue', v),
+});
+</script>

src/components/icons/InfoIcon.vue

@@ -0,0 +1,7 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488.9 488.9" style="enable-background: new 0 0 488.9 488.9"
+        xml:space="preserve">
+        <path fill="currentColor"
+            d="M239.15 0c31.9 0 57.7 25.8 57.7 57.7s-25.8 57.7-57.7 57.7-57.7-25.8-57.7-57.7S207.25 0 239.15 0zm52.5 151.6h-97.7c-19 0-34.3 15.4-34.3 34.3 0 19 15.4 34.3 34.3 34.3h3.4v200h-37.7v68.7h169.6v-68.7h-37.5V151.6h-.1z" />
+    </svg>
+</template>

src/composables/useAdremaLogin.js

@@ -0,0 +1,73 @@
+import {ref, computed} from 'vue';
+import useEventMeta from './useEventMeta.js';
+import useToastify from './useToastify.js';
+import debounce from 'lodash/debounce';
+
+const {success, errorFromResponse} = useToastify();
+const eventMeta = useEventMeta();
+
+export default function useAdremaLogin() {
+    const loginData = ref({
+        mglnr: null,
+        password: null,
+    });
+
+    const searchData = ref({
+        firstname: null,
+        lastname: null,
+    });
+
+    const searchResults = ref([]);
+
+    const loginToken = ref(window.localStorage.getItem('adrema_login_key') ? JSON.parse(window.localStorage.getItem('adrema_login_key')) : null);
+
+    async function login() {
+        try {
+            const response = await axios.post('/remote/nami/token', loginData.value);
+            const payload = {user: loginData.value.mglnr, token: response.data.access_token};
+            window.localStorage.setItem('adrema_login_key', JSON.stringify(payload));
+            loginToken.value = payload;
+            success('Login erfolgreich');
+        } catch (e) {
+            errorFromResponse(e);
+        }
+    }
+
+    const user = computed(() => {
+        if (loginToken.value === null) {
+            return null;
+        }
+
+        return loginToken.value.user;
+    });
+
+    function logout() {
+        window.localStorage.removeItem('adrema_login_key');
+        loginToken.value = null;
+    }
+
+    const searchForMember = debounce(async function () {
+        console.log(loginToken.value.token);
+        const response = await axios.post(
+            '/remote/nami/search',
+            {
+                vorname: searchData.value.firstname,
+            },
+            {
+                headers: {'X-Adrema-Token': loginToken.value.token},
+            },
+        );
+
+        searchResults.value = response.data.data;
+    }, 1000);
+
+    return {
+        searchResults,
+        login,
+        logout,
+        user,
+        loginData,
+        searchData,
+        searchForMember,
+    };
+}

src/composables/useEventMeta.js

@@ -0,0 +1,10 @@
+import {ref} from 'vue';
+
+export default function useEventMeta() {
+    const metaVarName = 'adrema_event_meta';
+    const eventMeta = ref(null);
+    if (window[metaVarName]) {
+        eventMeta.value = window[metaVarName];
+    }
+    return eventMeta;
+}

src/composables/useFieldsWithoutNami.js

@@ -0,0 +1,25 @@
+import FieldText from '../components/fields/Text.vue';
+import FieldDate from '../components/fields/Date.vue';
+import FieldTextarea from '../components/fields/Textarea.vue';
+import FieldDropdown from '../components/fields/Dropdown.vue';
+import FieldGroup from '../components/fields/Group.vue';
+import FieldCheckboxes from '../components/fields/Checkboxes.vue';
+import FieldCheckbox from '../components/fields/Checkbox.vue';
+import FieldRadio from '../components/fields/Radio.vue';
+
+export default function useFields(active, last) {
+    function resolveComponentName(field) {
+        return {
+            TextField: FieldText,
+            DateField: FieldDate,
+            TextareaField: FieldTextarea,
+            DropdownField: FieldDropdown,
+            GroupField: FieldGroup,
+            RadioField: FieldRadio,
+            CheckboxesField: FieldCheckboxes,
+            CheckboxField: FieldCheckbox,
+        }[field.type];
+    }
+
+    return {resolveComponentName};
+}