Skip to content
Snippets Groups Projects
Commit 63ed0981 authored by abdu's avatar abdu
Browse files

change design

parent 78ebfab1
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 @ 63ed0981
......@@ -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 @ 63ed0981
......@@ -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 @ 63ed0981
<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 @ 63ed0981
......@@ -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 @ 63ed0981
......@@ -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