From c68b2737bc5be6a0ddcd1c00d5c59cdaf375ce20 Mon Sep 17 00:00:00 2001
From: Michael Wedl <michael@syslifters.com>
Date: Tue, 21 Nov 2023 08:49:01 +0100
Subject: [PATCH] Show server errors in create project page form

---
 .../src/pages/projects/[projectId]/index.vue  |  1 +
 frontend/src/pages/projects/new.vue           | 35 +++++++++++++++----
 2 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/frontend/src/pages/projects/[projectId]/index.vue b/frontend/src/pages/projects/[projectId]/index.vue
index 06afa573b..f84e4305e 100644
--- a/frontend/src/pages/projects/[projectId]/index.vue
+++ b/frontend/src/pages/projects/[projectId]/index.vue
@@ -164,6 +164,7 @@ const { toolbarAttrs, readonly, editMode } = useLockEdit<PentestProject>({
     try {
       project.value = await projectStore.partialUpdateProject(project.value,
         ['name', 'project_type', 'force_change_project_type', 'language', 'tags', 'members', 'imported_members']);
+      serverErrors.value = null;
     } catch (error: any) {
       if (error?.status === 400 && error?.data) {
         serverErrors.value = error.data;
diff --git a/frontend/src/pages/projects/new.vue b/frontend/src/pages/projects/new.vue
index e907c9e8c..127f3a048 100644
--- a/frontend/src/pages/projects/new.vue
+++ b/frontend/src/pages/projects/new.vue
@@ -5,17 +5,36 @@
         <template #title>Create new Project</template>
       </edit-toolbar>
 
-      <s-text-field v-model="projectForm.name" label="Name" spellcheck="false" class="mt-4" />
-      <s-project-type-selection v-model="projectForm.project_type" class="mt-4" />
-      <s-member-selection v-model="projectForm.members" :prevent-unselecting-self="true" :required="true" class="mt-4" />
-      <s-tags v-model="projectForm.tags" class="mt-4" />
+      <s-text-field 
+        v-model="projectForm.name" 
+        label="Name" 
+        :error-messages="serverErrors?.name || []"
+        spellcheck="false" 
+        class="mt-4" 
+      />
+      <s-project-type-selection 
+        v-model="projectForm.project_type" 
+        :error-messages="serverErrors?.project_type || []"
+        class="mt-4" 
+      />
+      <s-member-selection 
+        v-model="projectForm.members" 
+        :prevent-unselecting-self="true" 
+        :required="true" 
+        :error-messages="serverErrors?.members || []"
+        class="mt-4" 
+      />
+      <s-tags 
+        v-model="projectForm.tags" 
+        :error-messages="serverErrors?.tags || []"
+        class="mt-4" 
+      />
     </v-form>
   </v-container>
 </template>
 
 <script setup lang="ts">
 import type { VForm } from "vuetify/lib/components/index.mjs";
-import { ProjectMember } from "~/utils/types";
 
 definePageMeta({
   title: 'Projects',
@@ -34,6 +53,7 @@ const projectForm = ref({
     roles: apiSettings.settings!.project_member_roles.filter(r => r.default).map(r => r.role),
   }] as ProjectMember[],
 });
+const serverErrors = ref<any|null>(null);
 
 const formRef = ref<VForm>();
 async function performCreate() {
@@ -45,7 +65,10 @@ async function performCreate() {
   try {
     const project = await projectStore.createProject(projectForm.value);
     await navigateTo(`/projects/${project.id}/reporting/`);
-  } catch (error) {
+  } catch (error: any) {
+    if (error?.status === 400 && error?.data) {
+      serverErrors.value = error.data;
+    }
     requestErrorToast({ error });
   }
 }