ADD restricted views

client/src/components/layout/HeaderLayout.vue

@@ -1,40 +1,52 @@
 <script setup>
-import ScimodomLogo from './ScimodomLogo.vue'
-import NavigationBar from './NavigationBar.vue'
 import { ref, computed } from 'vue'
 import { DIALOG, useDialogState } from '@/utils/DialogState.js'
 import { useAccessToken } from '@/utils/AccessToken.js'
 import { useRouter } from 'vue-router'
-const dialogState = useDialogState()
+import ScimodomLogo from './ScimodomLogo.vue'
+import NavigationBar from './NavigationBar.vue'
 
-function getUserName() {
-  let result = accessToken.email || ''
-  if (result.length > 20) {
-    result = result.substring(0, 17) + '...'
-  }
-  return result
-}
+const router = useRouter()
 
+const dialogState = useDialogState()
 const accessToken = useAccessToken()
+
 const isLoggedIn = computed(() => accessToken.get !== null)
 const userName = computed(getUserName)
 
-const router = useRouter()
 const menu = ref()
 const items = ref([
+  // {
+  //   separator: true
+  // },
   {
-    // label: 'Options',
+    label: 'Data',
     items: [
       {
-        label: 'Account',
-        icon: 'pi pi-pencil',
+        label: 'Project template',
+        icon: 'pi pi-file-edit',
         command: () => {
-          router.push({ name: 'access' })
+          router.push({ name: 'project' })
         }
       },
       {
         label: 'Dataset upload',
-        icon: 'pi pi-upload'
+        icon: 'pi pi-upload',
+        command: () => {
+          router.push({ name: 'upload' })
+        }
+      }
+    ]
+  },
+  {
+    label: 'Profile',
+    items: [
+      {
+        label: 'Settings',
+        icon: 'pi pi-cog',
+        command: () => {
+          router.push({ name: 'access' })
+        }
       },
       {
         label: 'Logout',
@@ -47,6 +59,7 @@ const items = ref([
     ]
   }
 ])
+
 const toggle = (event) => {
   menu.value.toggle(event)
 }
@@ -66,6 +79,14 @@ function signUp() {
     message: null
   })
 }
+
+function getUserName() {
+  let result = accessToken.email || ''
+  if (result.length > 23) {
+    result = result.substring(0, 20) + '...'
+  }
+  return result
+}
 </script>
 
 <template>
@@ -82,22 +103,36 @@ function signUp() {
       </div>
       <div v-if="isLoggedIn" class="flex flex-wrap 2xl:w-1/5 xl:w-auto 2xl:pl-8 xl:pl-0 gap-4">
         <Button
-          type="button"
+          size="small"
           icon="pi pi-user-edit"
           :label="userName"
           @click="toggle"
           aria-haspopup="true"
           aria-controls="overlay_menu"
+          raised
         />
         <Menu ref="menu" id="overlay_menu" :model="items" :popup="true">
           <template #start>
-            <span class="inline-flex items-center gap-1 px-2 py-2 w-full sm:w-[15rem]">
-              <!-- add avatar or user badge or formatted username as label-->
-              <span class="font-medium text-xl"
-                >PRIME<span class="text-primary-500 dark:text-primary-400">APP</span></span
-              >
+            <span class="inline-flex items-center gap-1 px-2 py-2 w-full sm:w-[10rem]">
+              <span class="font-medium font-ham text-xl">
+                Sci-<span class="text-primary-500 dark:text-primary-400">Mo</span>d<span
+                  class="text-secondary-500 dark:text-secondary-400"
+                  >oM</span
+                >
+              </span>
             </span>
           </template>
+          <template #submenuheader="{ item }">
+            <span class="text-base text-primary-500 dark:text-primary-400 font-bold leading-none">{{
+              item.label
+            }}</span>
+          </template>
+          <template #item="{ item, props }">
+            <a class="flex items-center" v-bind="props.action">
+              <span :class="item.icon" />
+              <span class="ml-2">{{ item.label }}</span>
+            </a>
+          </template>
         </Menu>
       </div>
       <div v-else class="flex flex-wrap 2xl:w-1/5 xl:w-auto 2xl:pl-8 xl:pl-0 gap-4">

client/src/router/index.js

@@ -5,9 +5,12 @@ import BrowseView from '@/views/BrowseView.vue'
 import CompareView from '@/views/CompareView.vue'
 import DownloadView from '@/views/DownloadView.vue'
 import DocumentationView from '@/views/DocumentationView.vue'
-import AccessView from '@/views/AccessView.vue'
 import HomeRoadmap from '@/components/home/HomeRoadmap.vue'
 
+import AccessView from '@/views/AccessView.vue'
+import ProjectView from '@/views/ProjectView.vue'
+import UploadView from '@/views/UploadView.vue'
+
 import { useAccessToken } from '@/utils/AccessToken.js'
 import { DIALOG, useDialogState } from '@/utils/DialogState.js'
 import { HTTPSecure } from '@/services'
@@ -46,6 +49,11 @@ const router = createRouter({
       name: 'documentation',
       component: DocumentationView
     },
+    {
+      path: '/',
+      name: 'roadmap',
+      component: HomeRoadmap
+    },
     {
       path: '/',
       name: 'access',
@@ -54,8 +62,15 @@ const router = createRouter({
     },
     {
       path: '/',
-      name: 'roadmap',
-      component: HomeRoadmap
+      name: 'project',
+      component: ProjectView,
+      meta: { requiresAuth: true }
+    },
+    {
+      path: '/',
+      name: 'upload',
+      component: UploadView,
+      meta: { requiresAuth: true }
     }
     // {
     //   path: '/about',
@@ -66,6 +81,7 @@ const router = createRouter({
     //   component: () => import('../views/AboutView.vue'),
     // },
   ],
+  linkActiveClass: 'text-primary-500',
   scrollBehavior(to, from, savedPosition) {
     // always scroll to top
     return { top: 0 }

client/src/views/AccessView.vue

@@ -20,6 +20,21 @@ const testlogin = () => {
 <template>
   <DefaultLayout>
     <SectionLayout>
+      <h1
+        class="font-ham mb-4 text-3xl font-extrabold text-gray-900 dark:text-white/80 md:text-5xl lg:text-6xl"
+      >
+        <span
+          class="text-transparent bg-clip-text bg-gradient-to-r from-gg-2 from-10% via-gg-1 via-40% via-gb-2 via-60% to-gb-4 to-100"
+        >
+          User
+        </span>
+        account
+      </h1>
+      <p class="text-lg font-normal text-gray-500 dark:text-surface-400 lg:text-xl">
+        Manage settings
+      </p>
+      <Divider />
+
       <div class="flex">
         <Button
           @click="testlogin()"

client/src/views/ProjectView.vue

@@ -0,0 +1,27 @@
+<template>
+  <DefaultLayout>
+    <SectionLayout>
+      <h1
+        class="font-ham mb-4 text-3xl font-extrabold text-gray-900 dark:text-white/80 md:text-5xl lg:text-6xl"
+      >
+        <span
+          class="text-transparent bg-clip-text bg-gradient-to-r from-gg-2 from-10% via-gg-1 via-40% via-gb-2 via-60% to-gb-4 to-100"
+        >
+          Project
+        </span>
+        creation
+      </h1>
+      <p class="text-lg font-normal text-gray-500 dark:text-surface-400 lg:text-xl">
+        Fill the template and request to create a new project
+      </p>
+      <Divider />
+      <p class="indent-4 text-lg leading-relaxed mt-2 mb-4 dark:text-white/80">
+        To upload data to an existing project, use the
+        <RouterLink :to="{ name: 'upload' }" class="text-primary-500 hover:text-secondary-500">
+          dataset upload form
+          <i class="pi pi-arrow-up-right -ml-4 text-sm" />
+        </RouterLink>
+      </p>
+    </SectionLayout>
+  </DefaultLayout>
+</template>

client/src/views/UploadView.vue

@@ -0,0 +1,28 @@
+<template>
+  <DefaultLayout>
+    <SectionLayout>
+      <h1
+        class="font-ham mb-4 text-3xl font-extrabold text-gray-900 dark:text-white/80 md:text-5xl lg:text-6xl"
+      >
+        <span
+          class="text-transparent bg-clip-text bg-gradient-to-r from-gg-2 from-10% via-gg-1 via-40% via-gb-2 via-60% to-gb-4 to-100"
+        >
+          Upload
+        </span>
+        dataset
+      </h1>
+      <p class="text-lg font-normal text-gray-500 dark:text-surface-400 lg:text-xl">
+        Upload a dataset to the database
+      </p>
+      <Divider />
+      <p class="indent-4 text-lg leading-relaxed mt-2 mb-4 dark:text-white/80">
+        During upload you need to select the project to which your dataset belongs. If there is no
+        project yet for this dataset, create one with the
+        <RouterLink :to="{ name: 'project' }" class="text-primary-500 hover:text-secondary-500">
+          project template request
+          <i class="pi pi-arrow-up-right -ml-4 text-sm" />
+        </RouterLink>
+      </p>
+    </SectionLayout>
+  </DefaultLayout>
+</template>