Merge branch 'ui-rework-improvements' into 'main'

Ui rework improvements

See merge request reportcreator/reportcreator!366

frontend/nuxt.config.ts

@@ -22,7 +22,7 @@ export default defineNuxtConfig({
         { name: 'format-detection', content: 'telephone=no' },
       ],
       link: [
-        { rel: 'icon', type: 'image/x-icon', href: '/static/favicon.ico' }
+        { rel: 'icon', type: 'image/x-icon', href: '/static/favicon.ico' },
       ],
     }
   },

frontend/src/app.vue

@@ -8,7 +8,7 @@
 
 <script setup lang="ts">
 const route = useRoute();
-useHead({
+useHeadExtended({
   titleTemplate: title => rootTitleTemplate(title, route),
 });
 

frontend/src/composables/lockedit.ts

@@ -172,7 +172,7 @@ export function useProjectTypeLockEdit(options: {
 
   const baseUrl = computed(() => `/api/v1/projecttypes/${projectType.value.id}/`);
   // const projectType = await useFetchE<ProjectType>(baseUrl.value, { method: 'GET' });
-  useHead({
+  useHeadExtended({
     title: projectType.value.name
   });
 

frontend/src/error.vue

@@ -1,28 +1,39 @@
 <template>
-  <v-container fluid class="fill-height">
-    <v-layout class="align-center justify-center">
-      <div class="text-center">
-        <h1>{{ errorHeading }}</h1>
-        <div v-if="props.error.statusCode === 404">
-          <icon class="emoji-heading" icon="game-icons:dinosaur-bones" />
-          <p class="text-center">
-            This site has gone.<br>
-          </p>
-        </div>
-        <div v-else>
-          <icon class="emoji-heading" icon="fluent-emoji:face-with-peeking-eye" />
-          <div class="mx-12">
+  <v-app>
+    <v-container fluid class="fill-height">
+      <v-layout class="align-center justify-center">
+        <div class="text-center">
+          <h1>{{ errorHeading }}</h1>
+          <div v-if="props.error.statusCode === 404">
+            <icon class="emoji-heading" icon="game-icons:dinosaur-bones" />
             <p class="text-center">
-              {{ props.error.message }}<br />
-              This should not have happened.<br />
-              If you think this is a vulnerability, please <a href="https://docs.syslifters.com/vulnerability-disclosure/" target="_blank">disclose responsibly</a>.<br />
+              This site has gone.<br />
+              {{ errorMessage }}
             </p>
           </div>
+          <div v-else-if="[401, 403].includes(props.error.statusCode)">
+            <icon class="emoji-heading" icon="fluent-emoji:face-with-peeking-eye" />
+            <div class="mx-12">
+              <p class="text-center">
+                {{ errorMessage }}
+              </p>
+            </div>
+          </div>
+          <div v-else>
+            <icon class="emoji-heading" icon="fluent-emoji:face-with-peeking-eye" />
+            <div class="mx-12">
+              <p class="text-center">
+                {{ errorMessage }}<br />
+                This should not have happened.<br />
+                If you think this is a vulnerability, please <a href="https://docs.syslifters.com/vulnerability-disclosure/" target="_blank">disclose responsibly</a>.<br />
+              </p>
+            </div>
+          </div>
+          <s-btn-primary @click="handleError" text="Go back home" class="mt-4" />
         </div>
-        <v-btn @click="handleError" variant="text" text="Go back home" />
-      </div>
-    </v-layout>
-  </v-container>
+      </v-layout>
+    </v-container>
+  </v-app>
 </template>
 
 <script setup lang="ts">
@@ -44,6 +55,16 @@ const errorHeading = computed(() => {
   } else {
     return 'Ooops!'
   }
+});
+const errorMessage = computed(() => {
+  let message = props.error.message || 'Error';
+
+  if (props.error?.data?.detail) {
+    message += ': ' + props.error?.data?.detail;
+  } else if (Array.isArray(props.error?.data) && props.error?.data?.length === 1) {
+    message += ': ' + props.error?.data[0];
+  }
+  return message;
 })
 
 function handleError() {

frontend/src/layouts/default.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="height-fullscreen">
-    <nuxt-loading-indicator :height="2" color="white" />
+    <nuxt-loading-indicator :height="2" :color="false" />
     <v-app-bar absolute height="48" elevation="0" color="header" class="menu-appbar">
       <v-app-bar-nav-icon v-if="auth.loggedIn.value" @click="navigationDrawerVisible = !navigationDrawerVisible" :ripple="false" color="logo">
         <svg-logo />
@@ -21,13 +21,19 @@
       </v-breadcrumbs>
       <v-spacer />
 
+      <s-btn-icon
+        v-if="auth.loggedIn.value"
+        to="/notes/personal/"
+        :active="false"
+      >
+        <v-icon icon="mdi-notebook" />
+        <s-tooltip activator="parent" location="bottom" text="Notes" />
+      </s-btn-icon>
       <notification-menu-item v-if="auth.loggedIn.value" />
-
       <s-btn-icon href="https://docs.sysreptor.com/" target="_blank">
         <v-icon icon="mdi-help-circle" />
         <s-tooltip activator="parent" location="bottom" text="Documentation" />
       </s-btn-icon>
-
       <user-info-menu-item v-if="auth.loggedIn.value" />
     </v-app-bar>
 
@@ -136,6 +142,10 @@ head.hooks.hook('dom:beforeRender', syncBreadcrumbs);
   height: 100vh;
 }
 
+.nuxt-loading-indicator {
+  background: rgb(var(--v-theme-primary));
+}
+
 .main-container {
   height: 100%;
 

frontend/src/pages/designs/[projectTypeId].vue

@@ -26,7 +26,7 @@ const projectTypeStore = useProjectTypeStore();
 await useAsyncDataE(async () => await projectTypeStore.getById(route.params.projectTypeId as string), { key: 'projectTypeMenu:projectType' });
 const projectType = computed(() => projectTypeStore.projectType(route.params.projectTypeId as string));
 
-useHead({
+useHeadExtended({
   titleTemplate: title => designTitleTemplate(projectType.value, title, route),
   breadcrumbs: () => designDetailBreadcrumbs(projectType.value),
 });

frontend/src/pages/designs/index.vue

@@ -58,7 +58,7 @@ definePageMeta({
   title: 'Designs',
   toplevel: true,
 });
-useHead({
+useHeadExtended({
   breadcrumbs: () => designListBreadcrumbs(),
 });
 

frontend/src/pages/license.vue

@@ -59,7 +59,7 @@ definePageMeta({
   title: 'License',
   toplevel: true,
 });
-useHead({
+useHeadExtended({
   breadcrumbs: () => [{ title: 'License', to: '/license/' }],
 });
 

frontend/src/pages/notes/personal.vue

@@ -45,7 +45,7 @@ const route = useRoute();
 const localSettings = useLocalSettings();
 const userNotesStore = useUserNotesStore();
 
-useHead({
+useHeadExtended({
   titleTemplate: (title?: string|null) => userNotesTitleTemplate(title, route),
   breadcrumbs: () => [{ title: 'Notes', to: '/notes/personal/' }],
 });

frontend/src/pages/projects/[projectId].vue

@@ -41,7 +41,7 @@ watch(() => project.value?.project_type, async () => {
   projectType.value = await projectTypeStore.getById(project.value.project_type);
 });
 
-useHead({
+useHeadExtended({
   titleTemplate: title => projectTitleTemplate(project.value, title, route),
   breadcrumbs: () => projectDetailBreadcrumbs(project.value),
 });

frontend/src/pages/projects/archived/[archiveId].vue

@@ -136,7 +136,7 @@ const restoreUntilDate = computed(() => {
   return 'in the next ' + formatDistanceToNowStrict(date, { unit: 'day' });
 })
 
-useHead({
+useHeadExtended({
   title: archive.value.name,
   breadcrumbs: () => archivedProjectDetailBreadcrumbs(archive.value),
 });

frontend/src/pages/projects/archived/index.vue

@@ -53,7 +53,7 @@ definePageMeta({
   title: 'Projects',
   toplevel: true,
 });
-useHead({
+useHeadExtended({
   breadcrumbs: () => archivedProjectListBreadcrumbs(),
 });
 </script>

frontend/src/pages/projects/index.vue

@@ -65,7 +65,7 @@ definePageMeta({
   title: 'Projects',
   toplevel: true,
 });
-useHead({
+useHeadExtended({
   breadcrumbs: () => projectListBreadcrumbs(),
 });
 

frontend/src/pages/projects/new.vue

@@ -43,7 +43,7 @@
 <script setup lang="ts">
 import type { VForm } from "vuetify/lib/components/index.mjs";
 
-useHead({
+useHeadExtended({
   title: 'Projects',
   breadcrumbs: () => projectListBreadcrumbs().concat([{ title: 'New', to: '/projects/new/' }]),
 });

frontend/src/pages/templates/[templateId]/history/[historyDate].vue

@@ -52,7 +52,7 @@ const template = computed(() => fetchState.data.value);
 const mainTranslation = computed(() => template.value?.translations?.find(tr => tr.is_main));
 
 const title = computed(() => mainTranslation.value?.data?.title || null);
-useHead({
+useHeadExtended({
   title
 });
 

frontend/src/pages/templates/[templateId]/index.vue

@@ -57,7 +57,7 @@ const template = computed({
 const mainTranslation = computed(() => template.value?.translations?.find(tr => tr.is_main));
 
 const title = computed(() => mainTranslation.value?.data?.title || null);
-useHead({
+useHeadExtended({
   title,
   breadcrumbs: () => templateDetailBreadcrumbs(template.value),
 });

frontend/src/pages/templates/fromfinding.vue

@@ -61,7 +61,7 @@ const localSettings = useLocalSettings();
 const projectStore = useProjectStore();
 const templateStore = useTemplateStore();
 
-useHead({
+useHeadExtended({
   title: 'Templates',
   breadcrumbs: () => templateListBreadcrumbs().concat([{ title: 'New', to: route.fullPath }]),
 });

frontend/src/pages/templates/index.vue

@@ -56,7 +56,7 @@ definePageMeta({
   title: 'Templates',
   toplevel: true,
 });
-useHead({
+useHeadExtended({
   breadcrumbs: () => templateListBreadcrumbs(),
 });
 

frontend/src/pages/templates/new.vue

@@ -13,7 +13,7 @@
 <script setup lang="ts">
 import { v4 as uuidv4 } from 'uuid';
 
-useHead({
+useHeadExtended({
   title: 'Templates',
   breadcrumbs: () => templateListBreadcrumbs().concat([{ title: 'New', to: '/templates/new/' }]),
 });

frontend/src/pages/users/[userId].vue

@@ -46,7 +46,7 @@ const route = useRoute();
 const apiSettings = useApiSettings();
 const user = await useFetchE<User>(`/api/v1/pentestusers/${route.params.userId}/`, { method: 'GET' });
 
-useHead({
+useHeadExtended({
   breadcrumbs: () => userDetailBreadcrumbs(user.value),
 });
 </script>

frontend/src/pages/users/index.vue

@@ -50,7 +50,7 @@ definePageMeta({
   title: 'Users',
   toplevel: true,
 });
-useHead({
+useHeadExtended({
   breadcrumbs: () => userListBreadcrumbs(),
 });
 

frontend/src/pages/users/new.vue

@@ -47,7 +47,7 @@
 <script setup lang="ts">
 import type { VForm } from "vuetify/lib/components/index.mjs";
 
-useHead({
+useHeadExtended({
   breadcrumbs: () => userListBreadcrumbs().concat([{ title: 'New', to: '/users/new/' }]),
 });
 

frontend/src/pages/users/self.vue

@@ -39,7 +39,7 @@
 import { profileTitleTemplate } from "~/utils/title";
 
 const route = useRoute();
-useHead({
+useHeadExtended({
   titleTemplate: (title?: string|null) => profileTitleTemplate(title, route),
   breadcrumbs: () => [{ title: 'Profile', to: '/users/self/' }],
 });

frontend/src/utils/overrides.ts

@@ -2,7 +2,7 @@ import { useHead as useHeadOriginal } from '@unhead/vue';
 import type { ReactiveHead } from '@unhead/vue';
 import type { Breadcrumbs } from './types';
 
-export function useHead(options: ReactiveHead & { breadcrumbs?: () => Breadcrumbs }) {
+export function useHeadExtended(options: ReactiveHead & { breadcrumbs?: () => Breadcrumbs }) {
   // Extend useHead to accept more options and prevent TypeScript errors
   return useHeadOriginal(options);
 }

frontend/src/utils/toast.ts

@@ -15,7 +15,7 @@ export function requestErrorToast({ error, message }: { error: any, message?: st
       message = 'Request error';
     }
   }
-  if (error?.response?.detail) {
+  if (error?.data?.detail) {
     message += ': ' + error?.data?.detail;
   } else if (Array.isArray(error?.data) && error?.data?.length === 1) {
     message += ': ' + error?.data[0];