From 10a4580cbe60164cd178ae3f35c7487ce257740b Mon Sep 17 00:00:00 2001
From: Pablo Santiago <pablosantiagolopez1@gmail.com>
Date: Sat, 4 Jan 2025 19:17:14 +0100
Subject: [PATCH] Optimize target scope page

---
 .../target/port/authentication/form.vue       |  10 +-
 .../components/target/port/dialog.vue         |   2 +-
 src/frontend/components/target/port/form.vue  |   3 +
 .../targets/[target_id]/scope.vue             | 201 ++++++++----------
 4 files changed, 96 insertions(+), 120 deletions(-)

diff --git a/src/frontend/components/target/port/authentication/form.vue b/src/frontend/components/target/port/authentication/form.vue
index 10a51f4c..c5a697b2 100644
--- a/src/frontend/components/target/port/authentication/form.vue
+++ b/src/frontend/components/target/port/authentication/form.vue
@@ -28,7 +28,7 @@
               (n) => !n || validate.name.test(n) || 'Invalid name value',
             ]"
             validate-on="input"
-            prepend-icon="mdi-shield-account"
+            prepend-inner-icon="mdi-shield-account"
             :disabled="type === 'None'"
           />
         </v-col>
@@ -45,16 +45,15 @@
               (s) => validate.secret.test(s) || 'Invalid secret value',
             ]"
             validate-on="input"
-            prepend-icon="mdi-shield-key"
+            prepend-inner-icon="mdi-shield-key"
             :disabled="type === 'None'"
             @update:model-value="disabled = false"
           />
         </v-col>
       </v-row>
-
       <UtilsSubmit
         class="mt-4"
-        :disabled="disabled || type === 'None'"
+        :disabled="disabled && type !== 'None'"
         text="Save"
       />
     </v-container>
@@ -80,6 +79,9 @@ const secret = ref(null);
 const type = ref("None");
 
 function submit(): void {
+  if (type.value === "None") {
+    emit("completed");
+  }
   if (valid.value) {
     emit("loading", true);
     props.api
diff --git a/src/frontend/components/target/port/dialog.vue b/src/frontend/components/target/port/dialog.vue
index 46eb35d1..22567169 100644
--- a/src/frontend/components/target/port/dialog.vue
+++ b/src/frontend/components/target/port/dialog.vue
@@ -8,7 +8,7 @@
       targetPort !== null ? $emit('completed') : null;
     "
   >
-    <v-stepper v-model="step" hide-actions>
+    <v-stepper v-model="step" hide-actions flat>
       <v-stepper-header>
         <v-stepper-item
           title="Target Port"
diff --git a/src/frontend/components/target/port/form.vue b/src/frontend/components/target/port/form.vue
index a1f1c26e..e66fb417 100644
--- a/src/frontend/components/target/port/form.vue
+++ b/src/frontend/components/target/port/form.vue
@@ -58,6 +58,9 @@ const path = ref(null);
 
 function submit(): void {
   if (valid.value) {
+    if (path.value && !path.value.startsWith("/")) {
+      path.value = "/".concat(path.value);
+    }
     emit("loading", true);
     props.api
       .create({
diff --git a/src/frontend/pages/projects/[project_id]/targets/[target_id]/scope.vue b/src/frontend/pages/projects/[project_id]/targets/[target_id]/scope.vue
index 9f9e7d88..22a6d413 100644
--- a/src/frontend/pages/projects/[project_id]/targets/[target_id]/scope.vue
+++ b/src/frontend/pages/projects/[project_id]/targets/[target_id]/scope.vue
@@ -1,121 +1,92 @@
 <template>
   <MenuProject>
     <TargetTabs>
-      <v-container fluid>
-        <v-row justify="center" dense>
-          <v-col cols="10">
-            <Dataset
-              ref="dataset"
-              :api="api"
-              :default-parameters="{ ordering: 'port' }"
-              :add="TargetPortDialog"
-              icon="mdi-antenna"
-              empty-head="No Scopes"
-              empty-text="Define the set of ports and paths in scope and how to perform the authentication. Otherwise, the whole target will be scanned without authentication"
-              @load-data="(data) => (ports = data)"
-            >
-              <template #data>
-                <v-row justify="center" dense>
-                  <v-col cols="10">
-                    <v-table density="compact">
-                      <thead>
-                        <tr>
-                          <th class="text-center font-weight-bold">Port</th>
-                          <th class="text-center font-weight-bold">Path</th>
-                          <th class="text-center font-weight-bold">
-                            Authentication
-                          </th>
-                          <th class="text-center font-weight-bold">
-                            Auth Name
-                          </th>
-                          <th class="text-center font-weight-bold">
-                            Auth Secret
-                          </th>
-                          <th />
-                        </tr>
-                      </thead>
-                      <tbody>
-                        <tr v-for="port in ports" :key="port.id">
-                          <td class="text-center">
-                            <v-icon
-                              class="mr-3"
-                              :icon="portUtils.getIcon(port.port)"
-                            />{{ port.port }}
-                          </td>
-                          <td class="text-center">{{ port.path }}</td>
-                          <td class="text-center">
-                            {{
-                              port.authentication
-                                ? port.authentication.type
-                                : "None"
-                            }}
-                          </td>
-                          <td class="text-center">
-                            {{
-                              port.authentication
-                                ? port.authentication.name
-                                : ""
-                            }}
-                          </td>
-                          <td class="text-center">
-                            {{
-                              port.authentication
-                                ? port.authentication.secret
-                                : ""
-                            }}
-                          </td>
-                          <td>
-                            <!-- mdi-key-plus -->
-                            <v-dialog v-if="!port.authentication" width="auto">
-                              <template #activator="{ props: activatorProps }">
-                                <BaseButton
-                                  icon="mdi-key-plus"
-                                  size="large"
-                                  color="green"
-                                  v-bind="activatorProps"
-                                />
-                              </template>
-                              <template #default="{ isActive }">
-                                <TargetPortAuthenticationDialog
-                                  :api="authApi"
-                                  :target-port="port.id"
-                                  @close-dialog="isActive.value = false"
-                                  @completed="
-                                    isActive.value = false;
-                                    dataset.loadData(false);
-                                  "
-                                />
-                              </template>
-                            </v-dialog>
-                            <UtilsDeleteButton
-                              v-if="port.authentication"
-                              :id="port.authentication.id"
-                              :api="authApi"
-                              :text="`Authentication '${port.authentication.name ? port.authentication.name : port.authentication.type}' will be removed`"
-                              icon="mdi-key-remove"
-                              action="Delete Authentication"
-                              @completed="dataset.loadData(false)"
-                            />
-                            <UtilsDeleteButton
-                              :id="port.id"
-                              :api="api"
-                              :text="`Target port '${port.port}' will be removed`"
-                              :variant="undefined"
-                              icon="mdi-minus-network"
-                              action="Delete Port"
-                              @completed="dataset.loadData(false)"
-                            />
-                          </td>
-                        </tr>
-                      </tbody>
-                    </v-table>
-                  </v-col>
-                </v-row>
-              </template>
-            </Dataset>
-          </v-col>
-        </v-row>
-      </v-container>
+      <Dataset
+        ref="dataset"
+        :api="api"
+        :default-parameters="{ ordering: 'port' }"
+        :add="TargetPortDialog"
+        icon="mdi-antenna"
+        empty-head="No Scope Defined"
+        empty-text="Define the ports and paths to be scanned and how to authenticate. Otherwise, the whole target address will be scanned"
+        @load-data="(data) => (ports = data)"
+      >
+        <template #data>
+          <v-table>
+            <thead>
+              <tr>
+                <th class="text-center font-weight-bold">Port</th>
+                <th class="text-center font-weight-bold">Path</th>
+                <th class="text-center font-weight-bold">Authentication</th>
+                <th class="text-center font-weight-bold">Auth Name</th>
+                <th class="text-center font-weight-bold">Auth Secret</th>
+                <th />
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="port in ports" :key="port.id">
+                <td class="text-center">
+                  <v-icon class="mr-3" :icon="portUtils.getIcon(port.port)" />{{
+                    port.port
+                  }}
+                </td>
+                <td class="text-center">{{ port.path }}</td>
+                <td class="text-center">
+                  {{ port.authentication ? port.authentication.type : "None" }}
+                </td>
+                <td class="text-center">
+                  {{ port.authentication ? port.authentication.name : "" }}
+                </td>
+                <td class="text-center">
+                  {{ port.authentication ? port.authentication.secret : "" }}
+                </td>
+                <td>
+                  <v-dialog v-if="!port.authentication" width="auto">
+                    <template #activator="{ props: activatorProps }">
+                      <BaseButton
+                        icon="mdi-key-plus"
+                        size="large"
+                        color="green"
+                        v-bind="activatorProps"
+                        tooltip="Add Authentication"
+                      />
+                    </template>
+                    <template #default="{ isActive }">
+                      <TargetPortAuthenticationDialog
+                        :api="authApi"
+                        :target-port="port.id"
+                        @close-dialog="isActive.value = false"
+                        @completed="
+                          isActive.value = false;
+                          dataset.loadData(false);
+                        "
+                      />
+                    </template>
+                  </v-dialog>
+                  <UtilsDeleteButton
+                    v-if="port.authentication"
+                    :id="port.authentication.id"
+                    :api="authApi"
+                    :text="`Authentication '${port.authentication.name ? port.authentication.name : port.authentication.type}' will be removed`"
+                    icon="mdi-key-remove"
+                    action="Delete Authentication"
+                    @completed="dataset.loadData(false)"
+                  />
+                  <UtilsDeleteButton
+                    :id="port.id"
+                    :api="api"
+                    :text="`Target port '${port.port}' will be removed`"
+                    :variant="undefined"
+                    icon="mdi-minus-network"
+                    action="Delete Port"
+                    @completed="dataset.loadData(false)"
+                  />
+                </td>
+              </tr>
+            </tbody>
+          </v-table>
+        </template>
+      </Dataset>
     </TargetTabs>
   </MenuProject>
 </template>