fix routing bug, change style, readd methods and buttons previously commented out/removed

frontend/src/components/CustomListElement.vue

@@ -28,7 +28,9 @@ export default {
     <div class="list-item-header mb-0">{{ title }}</div>
 
     <!-- Bottom-left description -->
-    <div class="list-item-description mb-0">{{ description }}</div>
+    <div class="list-item-description mb-0">
+      {{ description.length > 50 ? description.slice(0, 30) + '...' : description }}
+    </div>
   </div>
 </template>
 

frontend/src/components/MainPage.vue

@@ -39,17 +39,19 @@ export default {
   },
   methods: {
     async validateSession(){
-      let url = "http://localhost:9876/user/validateSession"
+      if(this.$route.name === 'main') {
+        let url = "http://localhost:9876/user/validateSession"
 
-      const response = await fetch(url, {
-       method: 'GET',
-       credentials: 'include'
-      })
+        const response = await fetch(url, {
+          method: 'GET',
+          credentials: 'include'
+        })
 
-      if(response.status === 401){
-        localStorage.removeItem("userId")
-        localStorage.removeItem("isLoggedIn")
-        await this.$router.push({ name: 'login' })
+        if (response.status === 401) {
+          localStorage.removeItem("userId")
+          localStorage.removeItem("isLoggedIn")
+          await this.$router.push({name: 'login'})
+        }
       }
     },
     showDetails(item) {
@@ -155,16 +157,24 @@ export default {
       <b-col class="main-col justify-content-center align-items-center">
         <b-card class="main-card border-1 shadow-lg" title="ToDo-App">
           <b-card-body class="main-card-body mt-1">
-
-            <b-button class="mb-4" variant="primary" @click="showAddModal = true">
-              Hinzufügen
-            </b-button>
+            <b-row>
+              <b-col>
+                <b-button class="mb-4" variant="primary" @click="showAddModal = true">
+                  Hinzufügen
+                </b-button>
+              </b-col>
+              <b-col>
+                <b-button class="mb-4" variant="danger" @click="signout">
+                  Log out
+                </b-button>
+              </b-col>
+            </b-row>
             <b-tabs class="tabs mt-2">
               <b-tab class="tab" title="Active ToDos">
                 <ul  class="main-list mt-3" v-if="items.length > 0">
                   <li v-for="(item, index) in items" :key="index" class="list-group-item">
-                    <div class="d-flex justify-content-between align-items-center w-100">
-                      <div class="flex-grow-1">
+                    <div class="custom-list-element d-flex justify-content-between align-items-center w-100">
+                      <div @click="showDetails(item)" class="flex-grow-1">
                         <CustomListElement :title="item.title" :description="item.description" :completed="item.completed"></CustomListElement>
                       </div>
                       <div class="badge-container">
@@ -179,8 +189,8 @@ export default {
               <b-tab class="tab" title="Completed ToDos">
                 <ul class="main-list mt-3" v-if="completedItems.length > 0">
                   <li v-for="(item, index) in completedItems" :key="index" class="list-group-item">
-                    <div class="d-flex justify-content-between align-items-center w-100">
-                      <div class="flex-grow-1">
+                    <div class="custom-list-element d-flex justify-content-between align-items-center w-100">
+                      <div @click="showDetails(item)" class="flex-grow-1">
                         <CustomListElement :title="item.title" :description="item.description" :completed="item.completed"></CustomListElement>
                       </div>
                       <div class="badge-container">
@@ -196,7 +206,11 @@ export default {
 
             <!-- details modal -->
             <b-modal v-model="showDetailsModal" title="Details" hide-header id="showDetailsModal">
-              <p>{{ selectedItem }}</p>
+              <h3>Title: {{ selectedItem.title }}</h3>
+              <p style="overflow-wrap: break-word"> Description: <br> {{ selectedItem.description }}</p>
+              <div>Status: <br>
+                {{selectedItem.completed ? 'completed' : 'not completed'}}
+              </div>
             </b-modal>
 
             <b-modal @ok="deleteTodo(this.todoIdForDeleteModal)" hie-header id="delete-modal">
@@ -248,6 +262,18 @@ export default {
   overflow-y: auto;
 }
 
+.custom-list-element {
+  background-color: #1c1c1c;
+  border: 1px #fff solid;
+  padding: 5px;
+  margin-bottom: 10px;
+  border-radius: 20px;
+}
+
+.custom-list-element:hover {
+  background-color: #2d2d2d;
+}
+
 .badge-container {
   display: flex;
   align-items: center;