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
Hide whitespace changes
Inline Side-by-side
frontend/src/App.vue
+ 3
− 3
View file @ 0eff75c5
......@@ -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
+ 47
− 13
View file @ 0eff75c5
......@@ -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 0 → 100644
+ 22
− 0
View file @ 0eff75c5
<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
+ 30
− 19
View file @ 0eff75c5
......@@ -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
+ 2
− 0
View file @ 0eff75c5
......@@ -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
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment