Skip to content
Snippets Groups Projects
Commit d28e8cf8 authored by Madeleine Stenberg Jonassen's avatar Madeleine Stenberg Jonassen
Browse files

Merge branch 'logout' into 'main' 

Logout

See merge request !40
parents 054572ab bd8157b0
No related branches found
No related tags found
1 merge request!40Logout
Pipeline #269655 passed
Stage: build
Stage: test
Stage: package
Show whitespace changes
Inline Side-by-side
FullstackProsjekt/src/frontend/src/assets/main.css
+ 7
− 1
View file @ d28e8cf8
......@@ -135,12 +135,18 @@ select{
}
.close-btn{
background-color: #cc513b;
background-color: #d2442b;
padding: 10px;
border-radius: 5px;
border-color: transparent;
margin-left: 10px;
cursor: pointer;
font-family: monospace;
font-size: 16px;
color: white;
}
.close-btn:hover {
background-color: #e15238;
}
.submit-btn{
background-color: #CCA43B;
......
FullstackProsjekt/src/frontend/src/components/shared/modal/Modal.vue 0 → 100644
+ 82
− 0
View file @ d28e8cf8
<script setup>
const props = defineProps({
show: Boolean
})
</script>
<template>
<Transition name="modal">
<div v-if="show" class="modal-mask">
<div class="modal-container">
<div class="modal-header">
<slot name="header">default header</slot>
</div>
<div class="modal-body">
<slot name="body">default body</slot>
</div>
<div class="modal-footer">
<slot name="footer">
default footer
<button
class="modal-default-button"
@click="$emit('close')"
>OK</button>
</slot>
</div>
</div>
</div>
</Transition>
</template>
<style>
.modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
transition: opacity 0.3s ease;
}
.modal-container {
width: 400px;
margin: auto;
padding: 20px 30px;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
transition: all 0.3s ease;
}
.modal-header h3 {
margin-top: 0;
color: #42b983;
}
.modal-body {
margin: 20px 0;
}
.modal-default-button {
float: right;
}
.modal-enter-from {
opacity: 0;
}
.modal-leave-to {
opacity: 0;
}
.modal-enter-from .modal-container,
.modal-leave-to .modal-container {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
</style>
\ No newline at end of file
FullstackProsjekt/src/frontend/src/views/LoginView.vue
+ 2
− 0
View file @ d28e8cf8
......@@ -24,6 +24,8 @@ export default {
}).then(response => {
alert(this.username + " is now logged in!")
setToken(response.data.jwt); //TODO: check token name
localStorage.setItem('username', this.username);
this.$router.push('/profile');
});
} catch (error) {
//TODO: proper error handling
......
FullstackProsjekt/src/frontend/src/views/ProfileView.vue
+ 90
− 60
View file @ d28e8cf8
<script>
import Svg from "@/assets/Svg.vue";
import Modal from "@/components/shared/modal/Modal.vue"
import {ref} from 'vue'
export default {
components: {Modal, Svg},
data() {
return {
userId: null,
quizList:[],
showModal: ref(false),
isLoggedIn: true,
user: {
username: '',
}
};
},
mounted() {
this.user.username = localStorage.getItem('username');
this.populateQuizzes();
},
computed: {
quizAttempts() {
// Mock data for quiz attempts (replace with actual data)
return [
{ id: 1, quizTitle: 'Math Quiz', score: '80%', date: '2024-04-05' },
{ id: 2, quizTitle: 'Science Quiz', score: '90%', date: '2024-04-04' }
];
}
},
methods:{
logout(){
this.isLoggedIn = false;
this.$router.push('/login');
},
closeModal(){
this.showModal=false;
},
async populateQuizzes() {
try {
await this.setUserId();
const response = await apiClient.get('/quiz/creator/' + this.userId);
this.quizList = response.data;
} catch (error) {
console.error('Error retrieving quizzes:', error);
}
},
async setUserId() {
this.userId = await getIdByToken();
}
}
};
</script>
<template>
<body>
<div class="profile">
<!-- User information section -->
<section class="user-info">
<h2>User Profile</h2>
<div class="user-details">
<div class="user-details" v-if="!loading">
<Svg class="profile-pic" name="default-avatar"/>
<!-- <img :src="user.avatar" alt="User Avatar"> -->
<div>
<h3>{{ user.username }}</h3>
<p>{{ user.email }}</p>
<p>Member since {{ user.memberSince }}</p>
<h3> Username: </h3>
<h4>{{ user.username }} </h4>
</div>
</div>
</section>
<!-- Quizzes created by the user -->
<section class="user-quizzes">
<h2>My Quizzes</h2>
<div v-if="userQuizzes.length === 0">
<p>No quizzes created yet.</p>
<div v-if="quizList.length > 0">
<div v-for="quiz in quizList" :key="quiz.id">
<p>{{ quiz.name }}</p>
</div>
<div v-else>
<div class="quiz" v-for="quiz in userQuizzes" :key="quiz.id">
<h3>{{ quiz.title }}</h3>
<p>{{ quiz.description }}</p>
<!-- Add more details about each quiz as needed -->
</div>
<div v-else>
<p>No quizzes found.</p>
<router-link to="/create-quiz" class="add-Btn"> Create quiz now!</router-link>
</div>
</section>
......@@ -52,52 +108,28 @@
<ul>
<li><router-link to="/edit-profile">Edit Profile</router-link></li>
<li><router-link to="/change-password">Change Password</router-link></li>
<li><router-link to="/overviewQuiz">Create quiz</router-link></li>
<li> <button class="delete-btn" @click="showModal = true">Logout</button>
<Teleport to="body">
<Modal :show="showModal">
<template #header>
<h1> You are about to sign out!</h1>
</template>
<template #body>
<p>Are you sure?</p>
</template>
<template #footer>
<button @click="logout" class="add-Btn"> Yes </button>
<button @click="closeModal" class="close-btn"> No </button>
</template>
</Modal>
</Teleport></li>
</ul>
</section>
</div>
</body>
</template>
<script>
import Svg from "@/assets/Svg.vue";
export default {
components: {Svg},
data() {
return {
user: {
username: 'JohnDoe',
email: 'johndoe@example.com',
avatar: '@/components/photos/developers/MadJon.png',
memberSince: 'May 2024'
},
userQuizzes: [
{
id: 1,
title: 'Math Quiz',
description: 'Test your math skills with this quiz'
},
{
id: 2,
title: 'Science Quiz',
description: 'Explore various science topics in this quiz'
}
]
}
},
computed: {
quizAttempts() {
// Mock data for quiz attempts (replace with actual data)
return [
{ id: 1, quizTitle: 'Math Quiz', score: '80%', date: '2024-04-05' },
{ id: 2, quizTitle: 'Science Quiz', score: '90%', date: '2024-04-04' }
// Add more quiz attempt objects as needed
];
}
}
};
</script>
<style scoped>
.profile {
......@@ -121,13 +153,6 @@ export default {
align-items: center;
}
.user-details img {
width: 100px;
height: 100px;
border-radius: 50%;
margin-right: 20px;
}
.user-details div {
flex: 1;
}
......@@ -154,6 +179,11 @@ export default {
text-decoration: none;
color: #CCA43B;
}
.profile-options ul li a:hover{
color: #a2822e;
text-decoration: underline;
}
.progress-tracking {
margin-bottom: 40px;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment