feat: add home page

frontend/src/components/NavigationBar.vue

@@ -11,6 +11,21 @@
       </router-link>
       <div id="menu-navbar" class="collapse navbar-collapse">
         <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll">
+          <li class="nav-item">
+            <router-link
+              :style="{
+                color:
+                  $route.path === '/home'
+                    ? uiConfiguration?.navbarActiveTextColor
+                    : uiConfiguration?.navbarTextColor,
+              }"
+              class="nav-link active nav-option"
+              to="/home"
+            >
+              <i class="bi bi-house" />
+              Home
+            </router-link>
+          </li>
           <li v-if="isAdmin" class="nav-item v-step-10">
             <router-link
               :style="{

frontend/src/components/NegotiationCard.vue

@@ -1,7 +1,10 @@
 <template>
   <div>
-    <div class="card mb-2">
-      <div class="card-header bg-body" :style="{ color: 'var(--bs-card-title-text)' }">
+    <div class="card border-0 rounded-top-4 mb-2">
+      <div
+        class="card-header bg-body mt-1 pb-1 rounded-top-4"
+        :style="{ color: 'var(--bs-card-title-text)' }"
+      >
         <span class="h5">{{ title }}</span>
         <h6 class="float-end">
           <UiBadge :class="getBadgeColor(status)" :icon="getBadgeIcon(status)" width="125px">
@@ -45,3 +48,10 @@ defineProps({
   },
 })
 </script>
+
+<style scoped>
+.card {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  border-radius: 1rem;
+}
+</style>

frontend/src/components/NegotiationList.vue

@@ -1,8 +1,8 @@
 <template>
   <div v-if="!loading" class="container">
-    <NewRequestButton v-if="!networkActivated" />
+    <NewRequestButton v-if="!networkActivated && !isHomePage" />
     <div class="pt-1">
-      <div class="row mt-5 pt-3">
+      <div v-if="!isHomePage" class="row mt-5 pt-3">
         <div class="col-12 mb-3">
           <div class="input-group">
             <span class="input-group-text">
@@ -26,7 +26,7 @@
           </div>
         </div>
       </div>
-      <div class="row row-cols-2 d-grid-row">
+      <div v-if="!isHomePage" class="row row-cols-2 d-grid-row">
         <p>
           <span
             class="negotiations-search-results"
@@ -241,6 +241,11 @@ const searchQuery = ref('')
 let searchTimeout = null
 
 const props = defineProps({
+  isHomePage: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
   negotiations: {
     type: Array,
     default: undefined,
@@ -320,6 +325,9 @@ const loading = computed(() => {
 })
 
 const savedNegotiationsView = computed(() => {
+  if (props.isHomePage) {
+    return 'Card-one-column'
+  }
   return negotiationsViewStore.savedNegotiationsView
 })
 

frontend/src/components/ui/buttons/BigButton.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="big-home-button">
+    <button class="btn panel-button d-flex flex-row align-items-center rounded-4 me-4 mt-2 px-4">
+      <div v-if="buttonIcon" class="my-1">
+        <i class="bi me-2 my-0 h4" :class="[buttonIcon]"></i>
+      </div>
+      <h4 v-if="buttonText" class="my-0 fw-bold">{{ buttonText }}</h4>
+    </button>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  buttonIcon: {
+    type: String,
+    required: false,
+    default: '',
+  },
+  buttonText: {
+    type: String,
+    required: false,
+    default: '',
+  },
+})
+</script>
+
+<style scoped>
+.panel-button {
+  background-color: #f8f8f8;
+}
+.panel-button:hover,
+.panel-button:focus {
+  background: #3d3d3d;
+  color: #fff;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  outline: none;
+}
+</style>

frontend/src/config/apiPaths.js

@@ -12,6 +12,7 @@ const apiPaths = {
   ATTACHMENTS_PATH: `${BASE_API_PATH}/attachments`,
   BACKEND_ACTUATOR_INFO_PATH: '/api/actuator/info',
   VALUE_SETS: `${BASE_API_PATH}/value-sets`,
+  DISCOVERY_SERVICES: `${BASE_API_PATH}/discovery-services`,
 }
 
 function getBearerHeaders() {

frontend/src/router/index.js

@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import OidcCallback from '@/components/OidcCallback.vue'
+import LoginPage from '../views/LoginPage.vue'
 import HomePage from '../views/HomePage.vue'
 import NegotiationCreatePage from '../views/NegotiationCreatePage.vue'
 import NegotiationPage from '../views/NegotiationPage.vue'
@@ -52,8 +53,8 @@ const router = createRouter({
   routes: [
     {
       path: '/',
-      name: 'home',
-      component: HomePage,
+      name: 'login',
+      component: LoginPage,
       meta: { isPublic: true },
     },
     {
@@ -62,6 +63,12 @@ const router = createRouter({
       component: OidcCallback,
       meta: { isPublic: true },
     },
+    {
+      path: '/home',
+      name: 'home',
+      component: HomePage,
+      meta: { isPublic: false },
+    },
     {
       path: '/requests/:requestId',
       name: 'request',

frontend/src/store/discoveryServices.js

@@ -0,0 +1,29 @@
+import { defineStore } from 'pinia'
+import axios from 'axios'
+import { apiPaths, getBearerHeaders } from '../config/apiPaths'
+import { useNotificationsStore } from './notifications'
+
+export const useDiscoveryServicesStore = defineStore('discoveryServices', () => {
+  const notifications = useNotificationsStore()
+
+  async function retrieveDiscoveryServices() {
+    return await axios
+      .get(`${apiPaths.DISCOVERY_SERVICES}`, { headers: getBearerHeaders() })
+      .then((response) => {
+        return response.data
+      })
+      .catch((error) => {
+        notifications.setNotification(
+          'Failed to load discovery services. Please try again or contact support if the issue persists.',
+          'danger',
+        )
+        if (error.response) {
+          return error.response.data
+        }
+      })
+  }
+
+  return {
+    retrieveDiscoveryServices,
+  }
+})

frontend/src/views/AdminUiConfigurationPage.vue

@@ -64,7 +64,7 @@
       </div>
       <div id="collapse3" class="login-config row collapse">
         <UiConfigurationSetting v-model="uiConfiguration.login" />
-        <HomePage :is-ui-config-active="true" />
+        <LoginPage :is-ui-config-active="true" />
       </div>
     </div>
 
@@ -128,7 +128,7 @@
 import { computed } from 'vue'
 import UiConfigurationSetting from '../components/UiConfigurationSetting.vue'
 import { useUiConfiguration } from '../store/uiConfiguration.js'
-import HomePage from '../views/HomePage.vue'
+import LoginPage from '../views/LoginPage.vue'
 import ConfirmationModal from '@/components/modals/ConfirmationModal.vue'
 
 const uiConfigurationStore = useUiConfiguration()