diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 4ea5372675a616a3debc7f974b1d83fae18be8e2..658a76235a720f7637d3ec906eaf3daa9bc26173 100644
--- a/frontend/src/App.vue
+++ b/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) {
diff --git a/frontend/src/components/LoginPage.vue b/frontend/src/components/LoginPage.vue
index b83dcab7df038ca1a42e5f94320f68670c4ad0fd..006d0033e71cdfb4ae4f8f279321a3ee5c157df6 100644
--- a/frontend/src/components/LoginPage.vue
+++ b/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
diff --git a/frontend/src/components/LoginPageAlternative.vue b/frontend/src/components/LoginPageAlternative.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8697a983f5e85bf61f02ce8f3f3d66258e8037c8
--- /dev/null
+++ b/frontend/src/components/LoginPageAlternative.vue
@@ -0,0 +1,22 @@
+<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
diff --git a/frontend/src/components/MainPage.vue b/frontend/src/components/MainPage.vue
index ac28dd0d6e03d5cfbd2bbf5216b4ac30888994de..c80ed9078a190bb20c3373257a3cacab339c7c7e 100644
--- a/frontend/src/components/MainPage.vue
+++ b/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
diff --git a/src/main/java/com/cloudcomputing/todo/util/CustomAuthenticator.java b/src/main/java/com/cloudcomputing/todo/util/CustomAuthenticator.java
index d51bbee3a1eb3e907e9c08d431f5e4e63cdcfd27..647329d57806c4f00ef9683d891a018340002143 100644
--- a/src/main/java/com/cloudcomputing/todo/util/CustomAuthenticator.java
+++ b/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