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

Merge branch 'profile-ui' into 'main' 

Added user profile in /profile

See merge request !25
parents 35023bfa 4978499c
No related branches found
No related tags found
1 merge request!25Added user profile in /profile
Pipeline #268956 passed
Stage: build
Stage: test
Stage: package
Show whitespace changes
Inline Side-by-side
FullstackProsjekt/src/frontend/src/components/icons/default-avatar.svg 0 → 100644
+ 7
− 0
View file @ 04b5586f
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
<g id="SVGRepo_iconCarrier"> <circle cx="12" cy="6" r="4" fill="#242F40"/> <path d="M20 17.5C20 19.9853 20 22 12 22C4 22 4 19.9853 4 17.5C4 15.0147 7.58172 13 12 13C16.4183 13 20 15.0147 20 17.5Z" fill="#242F40"/> </g>
</svg>
\ No newline at end of file
FullstackProsjekt/src/frontend/src/router/index.js
+ 5
− 0
View file @ 04b5586f
...@@ -57,6 +57,11 @@ const router = createRouter({ ...@@ -57,6 +57,11 @@ const router = createRouter({
component: EditQuizView, component: EditQuizView,
params: true params: true
}, },
{
path: '/profile',
name: 'profile',
component: () => import('../views/ProfileView.vue')
},
] ]
}) })
......
FullstackProsjekt/src/frontend/src/views/ProfileView.vue 0 → 100644
+ 169
− 0
View file @ 04b5586f
<template>
<body>
<div class="profile">
<!-- User information section -->
<section class="user-info">
<h2>User Profile</h2>
<div class="user-details">
<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>
</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>
<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>
</section>
<section class="progress-tracking">
<h2>Progress Tracking</h2>
<div v-if="quizAttempts.length === 0">
<p>No quiz attempts yet.</p>
</div>
<div v-else>
<div class="quiz-attempt" v-for="attempt in quizAttempts" :key="attempt.id">
<h3>{{ attempt.quizTitle }}</h3>
<p>Score: {{ attempt.score }}</p>
<p>Date: {{ attempt.date }}</p>
<!-- Add more details about each quiz attempt as needed -->
</div>
</div>
</section>
<!-- Other profile-related features -->
<section class="profile-options">
<h2>Profile Options</h2>
<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>
</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 {
max-width: 800px;
margin: 0 auto;
padding: 30px;
}
.profile-pic{
height: 150px;
width: 150px;
margin-right: 5vh;
}
.user-info, .user-quizzes, .profile-options {
margin-bottom: 40px;
}
.user-details {
display: flex;
align-items: center;
}
.user-details img {
width: 100px;
height: 100px;
border-radius: 50%;
margin-right: 20px;
}
.user-details div {
flex: 1;
}
.user-quizzes .quiz {
border: 1px solid #ccc;
background-color: #d7d7d7 ;
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
cursor: pointer;
}
.profile-options ul {
list-style: none;
padding: 0;
}
.profile-options ul li {
margin-bottom: 10px;
}
.profile-options ul li a {
text-decoration: none;
color: #CCA43B;
}
.progress-tracking {
margin-bottom: 40px;
}
.progress-tracking .quiz-attempt {
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
}
</style>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment