From adfc280df2bbadf2959206382bc22c92eb9ea457 Mon Sep 17 00:00:00 2001
From: Maddy <113420588+MaddyPaddy2001@users.noreply.github.com>
Date: Sat, 6 Apr 2024 13:28:22 +0200
Subject: [PATCH 1/7] Added alert for LoginView.vue

---
 FullstackProsjekt/src/frontend/src/views/LoginView.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/FullstackProsjekt/src/frontend/src/views/LoginView.vue b/FullstackProsjekt/src/frontend/src/views/LoginView.vue
index 0edf3e3..c3b25c5 100644
--- a/FullstackProsjekt/src/frontend/src/views/LoginView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/LoginView.vue
@@ -22,6 +22,7 @@ export default {
           username: this.username,
           password: this.password
         }).then(response => {
+					alert(this.username + " is now logged in!")
           setToken(response.data.jwt); //TODO: check token name
         });
       } catch (error) {
-- 
GitLab


From 9303bcfdc7f6a4bbc9d1d541065ac7800774d28e Mon Sep 17 00:00:00 2001
From: Maddy <113420588+MaddyPaddy2001@users.noreply.github.com>
Date: Sat, 6 Apr 2024 13:46:21 +0200
Subject: [PATCH 2/7] Change layout for SignupView.vue

---
 .../src/frontend/src/assets/main.css            |  4 +++-
 .../src/frontend/src/views/SignupView.vue       | 17 ++++++++---------
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/FullstackProsjekt/src/frontend/src/assets/main.css b/FullstackProsjekt/src/frontend/src/assets/main.css
index f650802..0fdbc41 100644
--- a/FullstackProsjekt/src/frontend/src/assets/main.css
+++ b/FullstackProsjekt/src/frontend/src/assets/main.css
@@ -141,10 +141,12 @@ select{
     padding: 10px;
     border-radius: 5px;
     border-color: transparent;
-    min-width: 160px;
     font-family: monospace;
     transition: 0.4s;
     cursor: pointer;
+    width: 120px;
+    height: 50px;
+
 }
 .submit-btn:hover{
     background-color: #a67d0e;
diff --git a/FullstackProsjekt/src/frontend/src/views/SignupView.vue b/FullstackProsjekt/src/frontend/src/views/SignupView.vue
index 6137c56..e5d314d 100644
--- a/FullstackProsjekt/src/frontend/src/views/SignupView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/SignupView.vue
@@ -73,9 +73,11 @@
 
 				</div>
 			</div>
+
 			<div class="submit-section">
 				<input class="submit-btn" type="submit"/>
 			</div>
+
 		</form>
 	</div>
 	</body>
@@ -84,7 +86,7 @@
 
 <style>
 .signupPage {
-	padding-top: 85px;
+	padding-top: 10vh;
 	display: flex;
 	justify-content: center;
 	align-items: center;
@@ -96,33 +98,30 @@
 	border-radius: 15px;
 	align-items: center;
 	border-style: solid;
-	margin: 20px;
 }
 
 .signupBox {
-	padding: 40px;
-	min-width: 400px;
+	padding: 20px;
 }
 
 .password-input {
 	position: relative;
 	display: inline-block;
+	min-width: 300px;
 }
 
 .showPasswordIcon {
 	position: absolute;
 	top: 50%;
-	right: 5px; /* Adjust positioning as needed */
+	right: 0;
 	transform: translateY(-50%);
 	border: none;
 	background: none;
 	cursor: pointer;
 }
 
-.submit-section {
-	display: flex;
-	justify-content: center;
-	align-items: center;
+.submit-section{
+	margin-top: 5vh;
 }
 
 </style>
-- 
GitLab


From fffa441ee6a645b9dd8b8094985410fac7d85f1d Mon Sep 17 00:00:00 2001
From: Maddy <113420588+MaddyPaddy2001@users.noreply.github.com>
Date: Sat, 6 Apr 2024 14:23:02 +0200
Subject: [PATCH 3/7] Change layout for FeedbackView.vue

---
 .../src/frontend/src/views/FeedbackView.vue              | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/FullstackProsjekt/src/frontend/src/views/FeedbackView.vue b/FullstackProsjekt/src/frontend/src/views/FeedbackView.vue
index eecbdde..14b3647 100644
--- a/FullstackProsjekt/src/frontend/src/views/FeedbackView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/FeedbackView.vue
@@ -72,9 +72,8 @@ export default {
 						<br>
 
 						<label>Title</label>
-
 						<input type="text" required v-model="title" ref="title"/> <br>
-						<textarea id="comment" required v-model="comment" placeholder="Tell us whats on your mind!" ref="commentInput"></textarea>
+						<textarea class="comment" required v-model="comment" placeholder="Tell us whats on your mind!" ref="commentInput"></textarea>
 					</div>
 				</div>
 				<div class="submit-section">
@@ -109,16 +108,16 @@ export default {
 }
 
 
-textarea {
-	margin: 5px;
+.comment {
 	padding: 8px;
 	border-radius: 5px;
 	border: none;
-	min-width: 400px;
+	min-width: 40vh;
 	height: 100px;
 	background-color: #E5E5E5;
 }
 
+
 .submit-section {
 	display: flex;
 	justify-content: center;
-- 
GitLab


From b26e12fdcd5b363c2d5b9870adc3ea61037b486f Mon Sep 17 00:00:00 2001
From: Maddy <113420588+MaddyPaddy2001@users.noreply.github.com>
Date: Sat, 6 Apr 2024 14:40:04 +0200
Subject: [PATCH 4/7] Change layout for FeedbackView.vue

---
 .../src/frontend/src/views/FeedbackView.vue   | 32 ++++++++++++-------
 .../src/frontend/src/views/LoginView.vue      |  1 +
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/FullstackProsjekt/src/frontend/src/views/FeedbackView.vue b/FullstackProsjekt/src/frontend/src/views/FeedbackView.vue
index 14b3647..5e3935d 100644
--- a/FullstackProsjekt/src/frontend/src/views/FeedbackView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/FeedbackView.vue
@@ -46,6 +46,7 @@ export default {
 		if (formData) {
 			this.name = formData.name;
 			this.email = formData.email;
+			this.title = formData.title;
 			this.comment = formData.comment;
 		}
 	}
@@ -61,24 +62,26 @@ export default {
 					<h1>Feedback</h1>
 					<p>Is there anything you would like to tell us? Comment below!</p>
 					<div class="contactBox">
-						<label>Name</label>
-						<input type="text" required v-model="name" ref="nameInput"/> <br>
-						<label>Email</label>
-						<input type="email" required v-model="email" ref="emailInput"/>
+						<label>Name</label> <br>
+						<input class="feedback-input" type="text" required v-model="name" ref="nameInput"/> <br>
+						<label>Email</label> <br>
+						<input class="feedback-input" type="email" required v-model="email" ref="emailInput"/>
 
 						<br>
 						<br>
 						<br>
 						<br>
 
-						<label>Title</label>
-						<input type="text" required v-model="title" ref="title"/> <br>
+						<label>Title</label> <br>
+						<input class="feedback-input" type="text" required v-model="title" ref="title"/> <br>
 						<textarea class="comment" required v-model="comment" placeholder="Tell us whats on your mind!" ref="commentInput"></textarea>
 					</div>
 				</div>
+
 				<div class="submit-section">
 					<input class="submit-btn" type="submit"/>
 				</div>
+
 			</form>
 		</div>
 	</body>
@@ -97,7 +100,6 @@ export default {
 	text-align: center;
 	color: #242F40;
 	border-color: transparent;
-	padding: 20px;
 	border-radius: 15px;
 	align-items: center;
 	border-style: solid;
@@ -106,22 +108,30 @@ export default {
 .contactBox {
 	padding: 30px;
 }
-
+.feedback-input{
+	width: 50vh;
+}
 
 .comment {
 	padding: 8px;
 	border-radius: 5px;
 	border: none;
-	min-width: 40vh;
-	height: 100px;
+	width: 50vh;
+	height: 15vh;
 	background-color: #E5E5E5;
 }
 
-
 .submit-section {
 	display: flex;
 	justify-content: center;
 	align-items: center;
 }
 
+	@media (max-width: 700px){
+		.feedback-input,
+		.comment {
+			width: 90%; /* Adjust the width to fit smaller screens */
+		}
+	}
+
 </style>
diff --git a/FullstackProsjekt/src/frontend/src/views/LoginView.vue b/FullstackProsjekt/src/frontend/src/views/LoginView.vue
index c3b25c5..43e1568 100644
--- a/FullstackProsjekt/src/frontend/src/views/LoginView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/LoginView.vue
@@ -96,6 +96,7 @@ export default {
 .password-input {
 	position: relative;
 	display: inline-block;
+	min-width: 300px;
 }
 
 
-- 
GitLab


From 06d37d02c987e620a690123fe66039bbf2c81518 Mon Sep 17 00:00:00 2001
From: Maddy <113420588+MaddyPaddy2001@users.noreply.github.com>
Date: Sat, 6 Apr 2024 15:21:24 +0200
Subject: [PATCH 5/7] Change minor layout in edit

---
 .../components/shared/EditQuestionModel.vue   |  2 +
 .../shared/create-quiz/EditQuizView.vue       | 72 -------------------
 2 files changed, 2 insertions(+), 72 deletions(-)

diff --git a/FullstackProsjekt/src/frontend/src/components/shared/EditQuestionModel.vue b/FullstackProsjekt/src/frontend/src/components/shared/EditQuestionModel.vue
index 858f0e0..7e6fcbe 100644
--- a/FullstackProsjekt/src/frontend/src/components/shared/EditQuestionModel.vue
+++ b/FullstackProsjekt/src/frontend/src/components/shared/EditQuestionModel.vue
@@ -42,11 +42,13 @@ export default {
 <template>
   <div class="modal-overlay" @click="closeModal">
     <div @click.stop class="modal-mask">
+
       <div class="modal-container">
         <div class="question-title">
           <h3>Question: </h3>
           <input v-model="questionText" placeholder="Type your question here">
         </div>
+
         <div class="modal-body">
           <table class="table">
             <thead>
diff --git a/FullstackProsjekt/src/frontend/src/components/shared/create-quiz/EditQuizView.vue b/FullstackProsjekt/src/frontend/src/components/shared/create-quiz/EditQuizView.vue
index 0d3e916..140a288 100644
--- a/FullstackProsjekt/src/frontend/src/components/shared/create-quiz/EditQuizView.vue
+++ b/FullstackProsjekt/src/frontend/src/components/shared/create-quiz/EditQuizView.vue
@@ -162,79 +162,7 @@ async function submitQuestion() {
                       :key="question.id"/>
       </div>
       <NewQuestionModel v-if="showNewQuestion" @close="hideNewQuestion" quiz-id="this.quizId"/>
-      <!--
-			<div class="question-table">
-				<table class="table">
-					<thead>
-					<tr>
-						<th scope="col">#</th>
-						<th scope="col">Question</th>
-						<th scope="col">Action</th>
-					</tr>
-					</thead>
-					<tbody>
-					<tr>
-						<th scope="row">1</th>
-						<td>What is Vue?</td>
-						<td>
-							<button class="play-btn">View</button>
-							<button class="edit-btn">Edit</button>
-							<button class="delete-btn"> Delete</button>
-						</td>
-					</tr>
 
-					</tbody>
-				</table>
-				-->
-        <!--
-
-
-				<Teleport to="body">
-					<NewQuestionModel :show="showNewQuestionModal" @close="destroyModal">
-
-						<template #header>
-							<h5> Add New Question</h5>
-						</template>
-
-						<template #body>
-							<form>
-								<div class="mb-3">
-									<label for="question" class="form-label">Question</label> <br>
-									<input type="text" v-model="createdQuestion" class="form-control" id="questionInput">
-								</div>
-								<table class="table">
-									<thead>
-									<tr>
-										<th scope="col">#</th>
-										<th scope="col">Answer</th>
-										<th scope="col">Correct ?</th>
-									</tr>
-									</thead>
-									<tbody>
-									<tr v-for="(answer, index) in newAnswers">
-										<th scope="row">{{answer.id}}</th>
-										<td>
-											<input type="text" v-model="answer.answer" id="questionInput">
-										</td>
-										<td>
-											<input :checked="answer.correct_answer === 1" class="form-check-input" :value="answer.id" @change="handleRadioToggle(answer.id)"  type="radio">
-										</td>
-									</tr>
-									</tbody>
-								</table>
-							</form>
-						</template>
-
-						<template #footer>
-							<button @click="addNewAnswers" class="add-Btn" v-if="newAnswers.length<4" >+</button>
-							<button @click="destroyModal" class="close-btn"> Close</button>
-							<button v-if="newAnswers.length>=2" @click="submitQuestion" class="submit-btn">Submit</button>
-						</template>
-
-					</NewQuestionModel>
-				</Teleport>
-				</div>
-				-->
 			<div class="footer">
 				<button @click="newQuestion" class="add-Btn"> Add Question </button>
         <button class="delete-btn"> DELETE QUIZ </button>
-- 
GitLab


From ae9529383f2353b60d658a8aa12de73b235fe2a3 Mon Sep 17 00:00:00 2001
From: Maddy <113420588+MaddyPaddy2001@users.noreply.github.com>
Date: Sat, 6 Apr 2024 16:02:41 +0200
Subject: [PATCH 6/7] Add new layout to DashboardView.vue quizzes

---
 .../frontend/src/components/TheWelcome.vue    |  2 +-
 .../src/frontend/src/views/DashboardView.vue  | 99 ++++++++++++++-----
 2 files changed, 75 insertions(+), 26 deletions(-)

diff --git a/FullstackProsjekt/src/frontend/src/components/TheWelcome.vue b/FullstackProsjekt/src/frontend/src/components/TheWelcome.vue
index d70d363..9b3049b 100644
--- a/FullstackProsjekt/src/frontend/src/components/TheWelcome.vue
+++ b/FullstackProsjekt/src/frontend/src/components/TheWelcome.vue
@@ -44,7 +44,7 @@ export default {
 	<div class="space"> </div>
 
 	<section class="cta">
-		<h1> Enroll For Our Various Online Quizzes Anywhere You Are </h1>
+		<h1> Enroll For Our Various Online Quizzes </h1>
 		<router-link to="/about" class="hero-btn"> About us</router-link>
 	</section>
 
diff --git a/FullstackProsjekt/src/frontend/src/views/DashboardView.vue b/FullstackProsjekt/src/frontend/src/views/DashboardView.vue
index 7bdb31b..1c4aa56 100644
--- a/FullstackProsjekt/src/frontend/src/views/DashboardView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/DashboardView.vue
@@ -1,6 +1,59 @@
 <script >
+	import { apiClient } from "@/api.js";
+	import router from "@/router/index.js";
+	import Svg from "@/assets/Svg.vue";
+	import { categoryEnums } from "@/data/categories.js";
+
+	export default {
+	components: { Svg },
+	props: {
+	quizId: {
+	type: Number,
+	required: true,
+},
+},
+	data() {
+	return {
+	quizTitle: null,
+	quizDifficulty: null,
+	quizCategory: null,
+};
+},
+	mounted() {
+	this.getQuiz();
+},
+	methods: {
+	async getQuiz() {
+	console.log('Fetching data for quiz: ', this.quizId);
+
+	try {
+	const response = await apiClient.get('/quiz/quiz/' + this.quizId);
+	this.quizTitle = JSON.parse(response.data.title);
+	this.quizCategory = JSON.parse(response.data.category);
+	this.quizDifficulty = JSON.parse(response.data.difficulty);
+} catch (error) {
+	// TODO: Proper error handling
+	console.error('Error retrieving quiz:', error);
+}
+},
+	getIcon(category) {
+	// Check if the category exists in the enum
+	if (categoryEnums.includes(category)) {
+	// Retrieve the icon name from the mapping
+	return categoryIcons[category] || categoryIcons.Default;
+} else {
+	// If category not found, return the default icon
+	return categoryIcons.Default;
+}
+},
+	playQuiz() {
+	router.push({ name: 'playQuiz', params: { quizId: this.quizId } });
+},
+},
+};
 </script>
 
+
 <template>
 	<body class="dashboard">
 	<div class="top-bar">
@@ -14,32 +67,19 @@
 
 	</div>
 		<div class="row">
-			<div class="course-col">
-				<h3>Quiz 1</h3>
-				<p>Insert photo </p>
-			</div>
-			<div class="course-col">
-				<h3>Quiz 2</h3>
-				<p>Insert photo </p>
-			</div>
-			<div class="course-col">
-				<h3>Quiz 3</h3>
-				<p>Insert photo</p>
-			</div>
-		</div>
+			<div class="quiz-col">
+				<div class="quiz-header">
+					<h3>{{ quizTitle }} Fake quiz name</h3>
+					<Svg :name="quizCategory" />
 
-		<div class="row">
-			<div class="course-col">
-				<h3>Quiz 4</h3>
-				<p>Insert photo </p>
-			</div>
-			<div class="course-col">
-				<h3>Quiz 5</h3>
-				<p>Insert photo </p>
-			</div>
-			<div class="course-col">
-				<h3>Quiz 6</h3>
-				<p>Insert photo</p>
+				</div>
+				<div class="quiz-body">
+					<p>Difficulty level: {{ quizDifficulty }}</p>
+					<p>Category: {{ quizCategory }}</p>
+				</div>
+				<div class="quiz-footer">
+					<button @click="playQuiz" class="play-btn">Play</button>
+				</div>
 			</div>
 		</div>
 
@@ -73,6 +113,15 @@
 	text-align: center;
 }
 
+.quiz-col{
+	flex-basis: 31%;
+	background: #d7d7d7;
+	border-radius: 10px;
+	margin-bottom: 5%;
+	padding: 20px;
+	box-sizing: border-box;
+	transition: 0.5s;}
+
 .create-btn{
 	text-decoration: none;
 	color: #E5E5E5;
-- 
GitLab


From 7da7fd4e07a9ee644cc7690896065f15d1638951 Mon Sep 17 00:00:00 2001
From: Maddy <113420588+MaddyPaddy2001@users.noreply.github.com>
Date: Sat, 6 Apr 2024 16:10:50 +0200
Subject: [PATCH 7/7] Add new layout to the quizzes in OverviewQuizView.vue

---
 FullstackProsjekt/src/frontend/src/assets/main.css       | 9 ++++++++-
 .../src/components/shared/create-quiz/QuizCard.vue       | 8 +++++---
 .../src/frontend/src/views/OverviewQuizView.vue          | 3 ---
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/FullstackProsjekt/src/frontend/src/assets/main.css b/FullstackProsjekt/src/frontend/src/assets/main.css
index 0fdbc41..690e042 100644
--- a/FullstackProsjekt/src/frontend/src/assets/main.css
+++ b/FullstackProsjekt/src/frontend/src/assets/main.css
@@ -4,7 +4,6 @@ body {
     background-color: #F2F2F2;
 }
 
-
 input {
     padding: 5px;
     border-radius: 5px;
@@ -76,6 +75,14 @@ select{
     color: #FFFFFF;
     border-radius: 10px;
 }
+.play-btn:hover {
+    background-color: #425575;
+    transition: 0.4s ;
+}
+.play-btn:active{
+    background-color: #425575;
+    transition: 0.2s ;
+}
 .edit-btn{
     padding: 10px;
     text-decoration: none;
diff --git a/FullstackProsjekt/src/frontend/src/components/shared/create-quiz/QuizCard.vue b/FullstackProsjekt/src/frontend/src/components/shared/create-quiz/QuizCard.vue
index a56765a..bb4ef37 100644
--- a/FullstackProsjekt/src/frontend/src/components/shared/create-quiz/QuizCard.vue
+++ b/FullstackProsjekt/src/frontend/src/components/shared/create-quiz/QuizCard.vue
@@ -68,9 +68,7 @@ export default {
 </template>
 
 <style>
-.overViewQuestion-page{
-  padding: 50px;
-}
+
 
 .quiz-header{
   display: flex;
@@ -89,4 +87,8 @@ export default {
   padding-left: 25px;
   padding-right: 25px;
 }
+
+.play-btn {
+	margin-right: 10px;
+}
 </style>
\ No newline at end of file
diff --git a/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue b/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue
index 3ce325d..a72fd5f 100644
--- a/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue
@@ -79,8 +79,5 @@ export default {
   justify-content: space-between;
 }
 
-#quizCard {
-  width: calc(50% - 10px);
-}
 
 </style>
\ No newline at end of file
-- 
GitLab