Merge branch 'alternative-design' into 'main'

change design

See merge request kiran/todo-app-jan-schnaidt-and-abdullah-kiran!1

frontend/src/App.vue

@@ -16,8 +16,7 @@ export default {
 <style>
 
 html, body {
-  height: 90%;
-  margin: 0;
+  height: 100%;
 }
 
 #app {
@@ -25,7 +24,8 @@ html, body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
-  margin-top: 60px;
+  background-color: #2d2d2d;
+  color: #fff;
 }
 
 .toast:not(.show) {

frontend/src/components/LoginPage.vue

@@ -90,38 +90,36 @@ export default {
 </script>
 
 <template>
-  <b-container class="h-100" fluid id="main-container">
-    <b-row class="justify-content-center align-items-center">
-      <b-col></b-col>
-      <b-col>
-        <b-card class="shadow-lg" border-variant="secondary" title="ToDo-App">
-          <b-card-body>
+  <b-container class="d-flex h-100 justify-content-center align-items-center" id="main-container">
+    <b-row id="main-row" class="d-flex justify-content-center align-items-center">
+      <b-col class="h-100 justify-content-center align-items-center">
+        <b-card id="main-card" class="h-100 border-1 shadow-lg justify-content-center align-items-center" title="ToDo-App">
+          <b-card-body id="main-card-body" class="mt-5">
             <b-row>
-              <b-button class="mb-4" v-b-modal.signup-modal variant="primary"> Create a new account! </b-button>
+              <b-button id="login-button" class="mb-4" v-b-modal.signup-modal> Create a new account! </b-button>
             </b-row>
             <b-row>
-              <b-button class="mb-4" v-b-modal.signin-modal variant="primary"> Log in with an existing account! </b-button>
+              <b-button id="signup-button" class="mb-4" v-b-modal.signin-modal> Log in with an existing account! </b-button>
             </b-row>
 
             <!-- sign-up modal -->
-            <b-modal :ok-disabled="checkEmptyFieldsSignup" @ok="signUp" hide-header id="signup-modal">
+            <b-modal class="signup-modal" :ok-disabled="checkEmptyFieldsSignup" @ok="signUp" hide-header id="signup-modal">
               <b-input v-model="user.userName" class="mb-4 mt-4" id="signup-username" type="text" placeholder="enter username"></b-input>
               <b-input v-model="user.password" class="mb-4" id="signup-password" type="password" placeholder="enter password"></b-input>
               <b-input :state="checkPasswordSame" v-model="repeatedPassword" class="mb-4" id="signup-repeat-password" type="password" placeholder="repeat password"></b-input>
             </b-modal>
 
             <!-- sign-in modal -->
-            <b-modal :ok-disabled="checkEmptyFieldsSignin" @ok="signIn" hide-header id="signin-modal">
+            <b-modal class="signin-modal" :ok-disabled="checkEmptyFieldsSignin" @ok="signIn" hide-header id="signin-modal">
               <b-input v-model="user.userName" class="mb-4 mt-4" id="username" type="text" placeholder="enter username"></b-input>
               <b-input v-model="user.password" class="mb-4" id="password" type="password" placeholder="enter password"></b-input>
             </b-modal>
           </b-card-body>
-          <b-card-footer>
+          <b-card-footer class="mt-5">
             © Jan Schnaidt & Abdullah Kiran, 2024
           </b-card-footer>
         </b-card>
       </b-col>
-      <b-col></b-col>
     </b-row>
     <!--
     ----- toasts & alerts -----
@@ -141,5 +139,41 @@ export default {
   </b-container>
 </template>
 
-<style>
+<style scoped>
+#main-row {
+  height: 40%;
+  width: 50%;
+}
+
+#main-card {
+  background-color: #1c1c1c;
+  color: #fff;
+}
+
+#login-button, #signup-button {
+  background-color: #2d2d2d;
+}
+
+#login-button:hover, #signup-button:hover {
+  background-color: #a3a3a3;
+  color: #2d2d2d;
+}
+
+:deep(.modal-content) {
+  background-color: #1c1c1c;
+}
+
+:deep(.modal-body) {
+  color: #fff;
+}
+
+:deep(.modal-body .form-control) {
+  background-color: #2d2d2d;
+  color: #fff;
+}
+
+:deep(.modal-body .form-control::placeholder){
+  color: #fff;
+  opacity: 1;
+}
 </style>
\ No newline at end of file

frontend/src/components/LoginPageAlternative.vue

+<script>
+
+</script>
+
+<template>
+  <b-container id="main-container" class="d-flex h-100 justify-content-center align-items-center">
+    <b-row id="main-row" class="d-flex justify-content-center align-items-center">
+      <b-col id="main-col" class="h-100 justify-content-center align-items-center">
+        <b-card class="h-100 border-1 shadow-lg justify-content-center align-items-center">
+
+        </b-card>
+      </b-col>
+    </b-row>
+  </b-container>
+</template>
+
+<style scoped>
+#main-row {
+  height: 75%;
+  width: 50%;
+}
+</style>
\ No newline at end of file

frontend/src/components/MainPage.vue

@@ -5,7 +5,7 @@ export default {
   name: "MainPage",
   components: {CustomListElement},
   created(){
-    if(localStorage.getItem('isLoggedIn') === null && localStorage.getItem('userId') !== 'true'){
+    if(localStorage.getItem('isLoggedIn') === false || localStorage.getItem('userId') === null){
       this.$router.push({ name: 'login' })
     }
 
@@ -33,7 +33,8 @@ export default {
         description: '',
         userId: '',
         completed: false
-      }
+      },
+      todoIdForDeleteModal: ''
     }
   },
   methods: {
@@ -65,8 +66,10 @@ export default {
 
       if(response.status === 200) {
         const items = await response.json()
-        this.items = items.filter(item => item.completed === false)
+        this.items = items.filter(item => item.completed === 'false')
         this.completedItems = items.filter(item => item.completed === true)
+        console.log(this.items)
+        console.log(this.completedItems)
       }
     },
     async addTodo(){
@@ -147,13 +150,11 @@ export default {
 </script>
 
 <template>
-<div class="h-100">
-  <b-container class="h-100" fluid id="main-container">
-    <b-button variant="danger" class="mb-4"  @click="signout">Log out</b-button>
-    <b-row class="h-100 justify-content-center align-items-center">
-      <b-col class="h-100">
-        <b-card class="shadow-lg w-75 h-100 mx-auto" border-variant="secondary" title="ToDo-App">
-          <b-card-body class="h-100 d-flex flex-column">
+  <b-container class="d-flex h-100 justify-content-center align-items-center" id="main-container">
+    <b-row id="main-row" class="d-flex justify-content-center align-items-center">
+      <b-col class="h-100 justify-content-center align-items-center">
+        <b-card id="main-card" class="h-100 border-1 shadow-lg" title="ToDo-App">
+          <b-card-body class="mt-1">
             <b-button class="mb-4" variant="primary" @click="showAddModal = true">
               Hinzufügen
             </b-button>
@@ -192,37 +193,48 @@ export default {
                       <div class="badge-container">
                         <div class="custom-badge-completed">completed</div>
                       </div>
-                      <b-button variant="danger" @click.stop="deleteTodo(item.todoId)">Delete</b-button>
+                      <b-button v-b-modal.delete-modal variant="danger" @click="sendInfoToModal(item.todoId)">Delete</b-button>
                     </div>
                   </li>
                 </ul>
-                <p v-else class="text-muted text-center">No Todos. Click the button above to add new todos.</p>
+                <p id="empty-text" v-else class="text-center text-white">No Todos. Click the button above to add new todos.</p>
               </b-tab>
             </b-tabs>
+
+            <!-- details modal -->
             <b-modal v-model="showDetailsModal" title="Details" hide-header id="showDetailsModal">
               <p>{{ selectedItem }}</p>
             </b-modal>
+
+            <b-modal @ok="deleteTodo(this.todoIdForDeleteModal)" hie-header id="delete-modal">
+              <p>{{this.todoIdForDeleteModal}}</p>
+            </b-modal>
+
           </b-card-body>
         </b-card>
       </b-col>
     </b-row>
   </b-container>
-</div>
 </template>
 
 <style scoped>
-html, body {
-  margin: 0;
+#main-row {
+  height: 75%;
+  width: 75%;
+}
+
+#main-card {
+  background-color: #1c1c1c;
+  color: #fff;
 }
 
 .list-group {
-  height: 70%; /* Adjust this value as needed */
+  height: 70%;
   overflow-y: auto;
-  margin-bottom: 100px;
 }
 
 .tab-content-scrollable {
-  height: 70%; /* Adjust this value as needed */
+  height: 70%;
   overflow-y: auto;
 }
 
@@ -268,5 +280,4 @@ html, body {
   border: 1px #caa219 solid;
   color: black;
 }
-
 </style>
\ No newline at end of file

src/main/java/com/cloudcomputing/todo/util/CustomAuthenticator.java

@@ -4,7 +4,9 @@ import com.cloudcomputing.todo.dto.UserDTO;
 import com.cloudcomputing.todo.entity.User;
 import com.cloudcomputing.todo.mapper.UserMapper;
 import com.cloudcomputing.todo.repository.UserRepository;
+import jakarta.servlet.http.HttpSession;
 import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.ResponseEntity;
 import org.springframework.stereotype.Component;
 
 @Component