feat(frontend): Add roles

legalconsenthub/pages/create.vue

@@ -16,10 +16,40 @@
 
     <template #body>
       <div class="flex flex-col gap-4 sm:gap-6 lg:gap-12 w-full lg:max-w-4xl mx-auto">
-        Erstelle Forumular für Organisation: {{ selectedOrganization?.name }}
-        <UPageCard title="Ampelstatus" variant="naked" orientation="horizontal" class="mb-4">
-          {{ ampelStatusEmoji }}
-        </UPageCard>
+        <!-- Permission Guard using Better Auth's native system -->
+        <div v-if="!canCreateApplicationForm" class="text-center py-12">
+          <UIcon name="i-lucide-shield-x" class="w-16 h-16 mx-auto text-red-400 mb-4" />
+          <h2 class="text-2xl font-semibold text-gray-700 mb-2">Keine Berechtigung</h2>
+          <p class="text-gray-500 mb-4">
+            Sie haben keine Berechtigung zum Erstellen von Anträgen.
+          </p>
+          <UAlert 
+            v-if="currentRoleInfo"
+            :title="`Ihre aktuelle Rolle: ${currentRoleInfo.name}`"
+            :description="currentRoleInfo.description"
+            :color="currentRoleInfo.color"
+            variant="soft"
+            class="max-w-md mx-auto"
+          />
+        </div>
+
+        <div v-else>
+          Erstelle Formular für Organisation: {{ selectedOrganization?.name }}
+          
+          <!-- Role Context Alert -->
+          <UAlert 
+            v-if="currentRoleInfo"
+            :title="`Erstellen als: ${currentRoleInfo.name}`"
+            :description="`${currentRoleInfo.description} - Sie können Anträge erstellen und bearbeiten.`"
+            :color="currentRoleInfo.color"
+            variant="soft"
+            :icon="currentRoleInfo.icon"
+            class="mb-4"
+                      />
+          
+          <UPageCard title="Ampelstatus" variant="naked" orientation="horizontal" class="mb-4">
+            {{ ampelStatusEmoji }}
+          </UPageCard>
 
         <UPageCard variant="subtle">
           <UForm class="space-y-4" :state="{}" @submit="onSubmit">
@@ -55,6 +85,7 @@
             </div>
           </UForm>
         </UPageCard>
+        </div>
       </div>
     </template>
   </UDashboardPanel>
@@ -70,6 +101,10 @@ const { getAllApplicationFormTemplates } = useApplicationFormTemplate()
 const { createApplicationForm } = useApplicationForm()
 const { validateFormElements, getHighestComplianceStatus } = useApplicationFormValidator()
 const { userDto, selectedOrganization } = useAuth()
+const { canCreateApplicationForm, getCurrentRoleInfo } = usePermissions()
+
+// Get current role information for display
+const currentRoleInfo = computed(() => getCurrentRoleInfo())
 
 const stepper = useTemplateRef('stepper')
 const activeStepperItemIndex = ref<number>(0)