Benutzeranlage direkt aus Mitarbeiterprofil ermöglichen

frontend/pages/staff/profiles/[id].vue

@@ -2,6 +2,8 @@
 
 const route = useRoute()
 const toast = useToast()
+const auth = useAuthStore()
+const admin = useAdmin()
 const { $api } = useNuxtApp()
 
 const id = route.params.id as string
@@ -10,11 +12,21 @@ const branches = ref<any[]>([])
 const teams = ref<any[]>([])
 const pending = ref(true)
 const saving = ref(false)
+const creatingLinkedUser = ref(false)
+const createLinkedUserModalOpen = ref(false)
+const createdLinkedUserPassword = ref("")
+const createLinkedUserForm = reactive({
+  email: "",
+})
 const selectMenuUi = {
   base: 'w-full',
   content: 'min-w-[min(32rem,90vw)] w-max max-w-[90vw]'
 }
 
+const canCreateLinkedUser = computed(() => Boolean(auth.user?.is_admin && profile.value && !profile.value.user_id))
+const linkedUserStatusLabel = computed(() => profile.value?.user_id ? "Benutzer verknüpft" : "Kein Benutzer verknüpft")
+const linkedUserStatusColor = computed(() => profile.value?.user_id ? "green" : "orange")
+
 async function fetchBranches() {
   try {
     branches.value = await useEntities("branches").select()
@@ -135,6 +147,54 @@ async function saveProfile() {
   }
 }
 
+function openCreateLinkedUserModal() {
+  if (!profile.value) return
+
+  createLinkedUserForm.email = profile.value.email || ""
+  createLinkedUserModalOpen.value = true
+}
+
+async function createLinkedUser() {
+  if (!profile.value || creatingLinkedUser.value) return
+
+  const email = createLinkedUserForm.email.trim().toLowerCase()
+  if (!email) {
+    toast.add({
+      title: 'E-Mail fehlt',
+      description: 'Bitte eine E-Mail-Adresse für den neuen Benutzer angeben.',
+      color: 'orange'
+    })
+    return
+  }
+
+  creatingLinkedUser.value = true
+
+  try {
+    const response = await admin.createUserForProfile(profile.value.id, { email })
+
+    createdLinkedUserPassword.value = response?.initialPassword || ""
+    createLinkedUserModalOpen.value = false
+    createLinkedUserForm.email = ""
+
+    toast.add({
+      title: 'Benutzer angelegt',
+      description: createdLinkedUserPassword.value ? `Initialpasswort: ${createdLinkedUserPassword.value}` : undefined,
+      color: 'green'
+    })
+
+    await fetchProfile()
+  } catch (err: any) {
+    console.error('[createLinkedUser]', err)
+    toast.add({
+      title: 'Benutzer konnte nicht angelegt werden',
+      description: err?.data?.error || err?.message || 'Unbekannter Fehler',
+      color: 'red'
+    })
+  } finally {
+    creatingLinkedUser.value = false
+  }
+}
+
 const weekdays = [
   { key: '1', label: 'Montag' },
   { key: '2', label: 'Dienstag' },
@@ -243,14 +303,25 @@ onMounted(async () => {
   <!-- Toolbar -->
   <UDashboardToolbar>
     <template #right>
-      <UButton
-          icon="i-mdi-content-save"
-          color="primary"
-          :loading="saving"
-          @click="saveProfile"
-      >
-        Speichern
-      </UButton>
+      <div class="flex items-center gap-2">
+        <UButton
+          v-if="canCreateLinkedUser"
+          icon="i-heroicons-user-plus"
+          color="neutral"
+          variant="outline"
+          @click="openCreateLinkedUserModal"
+        >
+          Benutzer anlegen
+        </UButton>
+        <UButton
+            icon="i-mdi-content-save"
+            color="primary"
+            :loading="saving"
+            @click="saveProfile"
+        >
+          Speichern
+        </UButton>
+      </div>
     </template>
   </UDashboardToolbar>
 
@@ -263,6 +334,9 @@ onMounted(async () => {
           <h2 class="text-xl font-semibold text-gray-900">{{ profile.full_name }}</h2>
           <p class="text-sm text-gray-500">{{ profile.employee_number || '–' }}</p>
         </div>
+        <UBadge :color="linkedUserStatusColor" variant="subtle">
+          {{ linkedUserStatusLabel }}
+        </UBadge>
       </div>
 
       <USeparator label="Persönliche Daten" />
@@ -478,5 +552,46 @@ onMounted(async () => {
     </UCard>
 
     <USkeleton v-if="pending" height="300px" />
+
+    <div v-if="createdLinkedUserPassword" class="mt-4">
+      <UAlert
+        title="Initialpasswort für den neuen Benutzer"
+        :description="createdLinkedUserPassword"
+        color="amber"
+        variant="soft"
+        close-button
+        @close="createdLinkedUserPassword = ''"
+      />
+    </div>
   </UDashboardPanelContent>
+
+  <UModal v-model:open="createLinkedUserModalOpen">
+    <template #content>
+      <UCard>
+        <template #header>
+          <div>
+            <div class="text-lg font-semibold">Benutzer zum Profil anlegen</div>
+            <p class="mt-1 text-sm text-gray-500">
+              Es wird automatisch ein zufälliges Initialpasswort erzeugt und der neue Benutzer direkt mit diesem Mitarbeiterprofil verknüpft.
+            </p>
+          </div>
+        </template>
+
+        <UForm :state="createLinkedUserForm" class="space-y-4" @submit.prevent="createLinkedUser">
+          <UFormField label="E-Mail">
+            <UInput v-model="createLinkedUserForm.email" type="email" autocomplete="email" />
+          </UFormField>
+
+          <div class="flex justify-end gap-3 pt-2">
+            <UButton color="gray" variant="soft" @click="createLinkedUserModalOpen = false">
+              Abbrechen
+            </UButton>
+            <UButton type="submit" color="primary" :loading="creatingLinkedUser">
+              Benutzer anlegen
+            </UButton>
+          </div>
+        </UForm>
+      </UCard>
+    </template>
+  </UModal>
 </template>