Skip to content
Snippets Groups Projects
Commit 0eff75c5 authored by Abdullah Kiran's avatar Abdullah Kiran
Browse files

Merge branch 'alternative-design' into 'main'

change design

See merge request kiran/todo-app-jan-schnaidt-and-abdullah-kiran!1
parents 78ebfab1 63ed0981
No related branches found
No related tags found
No related merge requests found
...@@ -16,8 +16,7 @@ export default { ...@@ -16,8 +16,7 @@ export default {
<style> <style>
html, body { html, body {
height: 90%; height: 100%;
margin: 0;
} }
#app { #app {
...@@ -25,7 +24,8 @@ html, body { ...@@ -25,7 +24,8 @@ html, body {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
text-align: center; text-align: center;
margin-top: 60px; background-color: #2d2d2d;
color: #fff;
} }
.toast:not(.show) { .toast:not(.show) {
......
...@@ -90,38 +90,36 @@ export default { ...@@ -90,38 +90,36 @@ export default {
</script> </script>
<template> <template>
<b-container class="h-100" fluid id="main-container"> <b-container class="d-flex h-100 justify-content-center align-items-center" id="main-container">
<b-row class="justify-content-center align-items-center"> <b-row id="main-row" class="d-flex justify-content-center align-items-center">
<b-col></b-col> <b-col class="h-100 justify-content-center align-items-center">
<b-col> <b-card id="main-card" class="h-100 border-1 shadow-lg justify-content-center align-items-center" title="ToDo-App">
<b-card class="shadow-lg" border-variant="secondary" title="ToDo-App"> <b-card-body id="main-card-body" class="mt-5">
<b-card-body>
<b-row> <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-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> </b-row>
<!-- sign-up modal --> <!-- 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.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 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-input :state="checkPasswordSame" v-model="repeatedPassword" class="mb-4" id="signup-repeat-password" type="password" placeholder="repeat password"></b-input>
</b-modal> </b-modal>
<!-- sign-in 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.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-input v-model="user.password" class="mb-4" id="password" type="password" placeholder="enter password"></b-input>
</b-modal> </b-modal>
</b-card-body> </b-card-body>
<b-card-footer> <b-card-footer class="mt-5">
© Jan Schnaidt & Abdullah Kiran, 2024 © Jan Schnaidt & Abdullah Kiran, 2024
</b-card-footer> </b-card-footer>
</b-card> </b-card>
</b-col> </b-col>
<b-col></b-col>
</b-row> </b-row>
<!-- <!--
----- toasts & alerts ----- ----- toasts & alerts -----
...@@ -141,5 +139,41 @@ export default { ...@@ -141,5 +139,41 @@ export default {
</b-container> </b-container>
</template> </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> </style>
\ No newline at end of file
<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
...@@ -5,7 +5,7 @@ export default { ...@@ -5,7 +5,7 @@ export default {
name: "MainPage", name: "MainPage",
components: {CustomListElement}, components: {CustomListElement},
created(){ created(){
if(localStorage.getItem('isLoggedIn') === null && localStorage.getItem('userId') !== 'true'){ if(localStorage.getItem('isLoggedIn') === false || localStorage.getItem('userId') === null){
this.$router.push({ name: 'login' }) this.$router.push({ name: 'login' })
} }
...@@ -33,7 +33,8 @@ export default { ...@@ -33,7 +33,8 @@ export default {
description: '', description: '',
userId: '', userId: '',
completed: false completed: false
} },
todoIdForDeleteModal: ''
} }
}, },
methods: { methods: {
...@@ -65,8 +66,10 @@ export default { ...@@ -65,8 +66,10 @@ export default {
if(response.status === 200) { if(response.status === 200) {
const items = await response.json() 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) this.completedItems = items.filter(item => item.completed === true)
console.log(this.items)
console.log(this.completedItems)
} }
}, },
async addTodo(){ async addTodo(){
...@@ -147,13 +150,11 @@ export default { ...@@ -147,13 +150,11 @@ export default {
</script> </script>
<template> <template>
<div class="h-100"> <b-container class="d-flex h-100 justify-content-center align-items-center" id="main-container">
<b-container class="h-100" fluid id="main-container"> <b-row id="main-row" class="d-flex justify-content-center align-items-center">
<b-button variant="danger" class="mb-4" @click="signout">Log out</b-button> <b-col class="h-100 justify-content-center align-items-center">
<b-row 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-col class="h-100"> <b-card-body class="mt-1">
<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-button class="mb-4" variant="primary" @click="showAddModal = true"> <b-button class="mb-4" variant="primary" @click="showAddModal = true">
Hinzufügen Hinzufügen
</b-button> </b-button>
...@@ -192,37 +193,48 @@ export default { ...@@ -192,37 +193,48 @@ export default {
<div class="badge-container"> <div class="badge-container">
<div class="custom-badge-completed">completed</div> <div class="custom-badge-completed">completed</div>
</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> </div>
</li> </li>
</ul> </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-tab>
</b-tabs> </b-tabs>
<!-- details modal -->
<b-modal v-model="showDetailsModal" title="Details" hide-header id="showDetailsModal"> <b-modal v-model="showDetailsModal" title="Details" hide-header id="showDetailsModal">
<p>{{ selectedItem }}</p> <p>{{ selectedItem }}</p>
</b-modal> </b-modal>
<b-modal @ok="deleteTodo(this.todoIdForDeleteModal)" hie-header id="delete-modal">
<p>{{this.todoIdForDeleteModal}}</p>
</b-modal>
</b-card-body> </b-card-body>
</b-card> </b-card>
</b-col> </b-col>
</b-row> </b-row>
</b-container> </b-container>
</div>
</template> </template>
<style scoped> <style scoped>
html, body { #main-row {
margin: 0; height: 75%;
width: 75%;
}
#main-card {
background-color: #1c1c1c;
color: #fff;
} }
.list-group { .list-group {
height: 70%; /* Adjust this value as needed */ height: 70%;
overflow-y: auto; overflow-y: auto;
margin-bottom: 100px;
} }
.tab-content-scrollable { .tab-content-scrollable {
height: 70%; /* Adjust this value as needed */ height: 70%;
overflow-y: auto; overflow-y: auto;
} }
...@@ -268,5 +280,4 @@ html, body { ...@@ -268,5 +280,4 @@ html, body {
border: 1px #caa219 solid; border: 1px #caa219 solid;
color: black; color: black;
} }
</style> </style>
\ No newline at end of file
...@@ -4,7 +4,9 @@ import com.cloudcomputing.todo.dto.UserDTO; ...@@ -4,7 +4,9 @@ import com.cloudcomputing.todo.dto.UserDTO;
import com.cloudcomputing.todo.entity.User; import com.cloudcomputing.todo.entity.User;
import com.cloudcomputing.todo.mapper.UserMapper; import com.cloudcomputing.todo.mapper.UserMapper;
import com.cloudcomputing.todo.repository.UserRepository; import com.cloudcomputing.todo.repository.UserRepository;
import jakarta.servlet.http.HttpSession;
import org.springframework.beans.factory.annotation.Autowired; import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Component; import org.springframework.stereotype.Component;
@Component @Component
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment