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

Merge branch 'clean-up-frontend' into 'main' 

Clean up frontend (everything, but CreateQuiz related stuff)

See merge request !44
parents 30fea1ae 4bc6f539
Branches
No related tags found
1 merge request!44Clean up frontend (everything, but CreateQuiz related stuff)
Pipeline #269920 passed
Stage: build
Stage: test
Stage: package
Show whitespace changes
Inline Side-by-side
Showing
with 252 additions and 353 deletions
FullstackProsjekt/src/frontend/src/App.vue
+ 10
− 12
View file @ 1a0f2b77
<template>
<Sidebar/>
<div style="{'margin-left': sidebarWidth}">
<RouterView />
</div>
</template>
<script>
import { RouterLink, RouterView } from 'vue-router';
import { onMounted, onUnmounted, watch } from 'vue';
import { getToken, setToken, removeToken, refreshAndStoreToken } from '@/tokenController.js';
import { getToken, refreshAndStoreToken } from '@/tokenController.js';
import Sidebar from "@/components/shared/sidebar/Sidebar.vue"
import { sidebarWidth} from "@/components/shared/sidebar/state.js";
......@@ -10,7 +18,6 @@ export default {
setup() {
let intervalId = null;
// Start interval for token refresh
const startInterval = () => {
if (!intervalId && getToken()) {
intervalId = setInterval(async () => {
......@@ -20,7 +27,6 @@ export default {
}
};
// Stop interval for token refresh
const stopInterval = () => {
if (intervalId) {
clearInterval(intervalId);
......@@ -28,7 +34,6 @@ export default {
}
};
// Refresh token
const refreshToken = async () => {
try {
const existingToken = getToken();
......@@ -67,10 +72,3 @@ export default {
}
};
</script>
\ No newline at end of file
<template>
<Sidebar/>
<div style="{'margin-left': sidebarWidth}">
<RouterView />
</div>
</template>
FullstackProsjekt/src/frontend/src/assets/Svg.vue
+ 0
− 1
View file @ 1a0f2b77
......@@ -11,7 +11,6 @@ const icon = defineAsyncComponent(()=>
)
</script>
<template>
<component class="icon" :is="icon"/>
</template>
......
FullstackProsjekt/src/frontend/src/assets/axios.js
+ 0
− 1
View file @ 1a0f2b77
import axios from "axios";
axios.defaults.baseURL= 'http://localhost:5173/';
//axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token');
FullstackProsjekt/src/frontend/src/assets/main.css
+ 0
− 13
View file @ 1a0f2b77
......@@ -29,7 +29,6 @@ select{
margin: 90px;
}
/* Other */
.row{
margin-top: 5%;
display: flex;
......@@ -49,19 +48,12 @@ select{
.course-col:hover{
box-shadow: 0 0 20px 0px rgba(0,0,0,0.3);
}
/* ERROR HANDLE */
.error-message{
color: #e53a1c;
padding: 10px;
font-size: 16px;
margin-bottom: 20px;
}
/* BUTTONS */
.play-btn{
padding: 10px;
text-decoration: none;
......@@ -128,7 +120,6 @@ select{
margin-top: 10px;
cursor: pointer;
}
.close-btn{
background-color: #d2442b;
padding: 10px;
......@@ -154,7 +145,6 @@ select{
cursor: pointer;
width: 120px;
height: 50px;
}
.submit-btn:hover{
background-color: #a67d0e;
......@@ -165,9 +155,6 @@ select{
color: white;
}
@media (max-width: 700px){
.row{
flex-direction: column;
......
FullstackProsjekt/src/frontend/src/components/TheWelcome.vue
+ 14
− 26
View file @ 1a0f2b77
<script>
import axios from "axios";
export default {
name: 'Home',
async created() {
const response = await axios.get('user');
console.log(response)
}
}
</script>
<template>
<body>
<!-- Header -->
<section class ="header">
<div class="text-box">
<img id="logo" src="../components/icons/brain.png"/>
......@@ -21,7 +10,7 @@ export default {
</div>
</section>
<!----- Info ----->
<!----- Info section ----->
<section class="info">
<h1>Ace your classes with our new learning platform</h1>
<p>Explore our various difficulties and challenge yourself</p>
......@@ -48,6 +37,7 @@ export default {
<router-link to="/about" class="hero-btn"> About us</router-link>
</section>
<!----- Footer ----->
<footer class="footer">
<div class="footer-content">
<p>&copy; 2024 BrainStormer. All rights reserved.</p>
......@@ -62,6 +52,17 @@ export default {
</template>
<script>
import axios from "axios";
export default {
name: 'Home',
async created() {
const response = await axios.get('user');
console.log(response)
}
}
</script>
<style scoped>
.header{
......@@ -77,7 +78,6 @@ export default {
width: 170px;
padding: 5vh;
}
.text-box{
width: 90%;
color: #fff;
......@@ -95,7 +95,6 @@ export default {
font-size: 20px;
color: #fff;
}
.hero-btn{
display: inline-block;
text-decoration: none;
......@@ -113,8 +112,6 @@ export default {
transition: 1s;
color: #242F40;
}
/* Info section */
.info{
width: 80%;
margin: auto;
......@@ -132,14 +129,11 @@ p{
line-height: 22px;
padding: 10px;
}
h3{
text-align: center;
font-weight: 600;
margin: 10px 0;
}
/* CTA */
.cta{
margin: 100px auto;
width: 80%;
......@@ -155,8 +149,6 @@ h3{
margin-bottom: 40px;
padding: 0;
}
/* Footer */
.footer {
background-color: #242F40;
padding: 10px 0;
......@@ -187,9 +179,6 @@ h3{
.footer ul li a:hover {
text-decoration: underline;
}
/* Media for other devices */
@media (max-width: 700px){
.text-box h1{
font-size: 42px;
......@@ -199,5 +188,4 @@ h3{
font-size: 24px;
}
}
</style>
FullstackProsjekt/src/frontend/src/components/icons/brain.png
+ 0
− 0
View replaced file @ 30fea1ae View file @ 1a0f2b77
FullstackProsjekt/src/frontend/src/components/icons/brain.png

24.2 KiB | W: | H:

FullstackProsjekt/src/frontend/src/components/icons/brain.png

42 KiB | W: | H:

FullstackProsjekt/src/frontend/src/components/icons/brain.png
FullstackProsjekt/src/frontend/src/components/icons/brain.png
FullstackProsjekt/src/frontend/src/components/icons/brain.png
FullstackProsjekt/src/frontend/src/components/icons/brain.png
  • 2-up
  • Swipe
  • Onion skin
FullstackProsjekt/src/frontend/src/components/photos/developers/MadJon.png
+ 0
− 0
View replaced file @ 30fea1ae View file @ 1a0f2b77
FullstackProsjekt/src/frontend/src/components/photos/developers/MadJon.png

593 KiB | W: | H:

FullstackProsjekt/src/frontend/src/components/photos/developers/MadJon.png

1.16 MiB | W: | H:

FullstackProsjekt/src/frontend/src/components/photos/developers/MadJon.png
FullstackProsjekt/src/frontend/src/components/photos/developers/MadJon.png
FullstackProsjekt/src/frontend/src/components/photos/developers/MadJon.png
FullstackProsjekt/src/frontend/src/components/photos/developers/MadJon.png
  • 2-up
  • Swipe
  • Onion skin
FullstackProsjekt/src/frontend/src/components/photos/lightning.gif deleted 100644 → 0
+ 0
− 0
View file @ 30fea1ae
FullstackProsjekt/src/frontend/src/components/photos/lightning.gif

3.05 MiB

FullstackProsjekt/src/frontend/src/components/shared/create-quiz/CreateQuizView.vue
+ 0
− 3
View file @ 1a0f2b77
......@@ -6,7 +6,6 @@ import {categoryEnums} from "@/data/categories.js"
import {difficultyEnums} from "@/data/difficulties.js";
import Svg from "@/assets/Svg.vue";
//like editquiz, but w/o questions, redirect to edit when quiz is constructed
export default {
components: {Svg},
......@@ -24,7 +23,6 @@ export default {
categories: categoryEnums,
selectedDifficulty: null,
difficulties: difficultyEnums,
//TODO: make quiz object
};
},
mounted() {
......@@ -57,7 +55,6 @@ export default {
<template>
<body>
<router-link to="/overviewQuiz" ><Svg name="go-back-icon" class="go-back-section"/></router-link>
<div class="new-quiz-page">
<form @submit.prevent="constructQuiz">
<div class="newQuizDiv">
......
FullstackProsjekt/src/frontend/src/components/shared/modal/Modal.vue
+ 2
− 8
View file @ 1a0f2b77
......@@ -48,32 +48,26 @@ const props = defineProps({
margin: auto;
padding: 20px 30px;
background-color: #fff;
border-radius: 2px;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
transition: all 0.3s ease;
}
.modal-header h3 {
margin-top: 0;
color: #42b983;
color: #242f40;
}
.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);
......
FullstackProsjekt/src/frontend/src/components/shared/sidebar/Sidebar.vue
+ 18
− 27
View file @ 1a0f2b77
<template>
<div class="sidebar" :style="{width: sidebarWidth}">
<SidebarLink to="/" icon="home-icon">Home</SidebarLink>
<SidebarLink to="/dashboard" icon="dashboard-icon">Dashboard</SidebarLink>
<SidebarLink to="/about" icon="about-us-icon">About</SidebarLink>
<SidebarLink to="/feedback" icon="feedback-icon">Feedback</SidebarLink>
<SidebarLink to="/login" icon="login-icon">Login</SidebarLink>
<SidebarLink v-if="isLoggedIn" to="/profile" icon="profile-icon">Profile</SidebarLink>
<span class="collapse-icon" :class="{'rotate-180': collapsed}" @click="toggleSideBar">
<Svg name="double-arrow" class="sidebar-c-icon"/>
</span>
</div>
</template>
<script>
import { collapsed, toggleSideBar, sidebarWidth } from "@/components/shared/sidebar/state.js";
import SidebarLink from "@/components/shared/sidebar/SidebarLink.vue";
......@@ -16,38 +34,16 @@ export default {
collapsed.value = true; // Collapse the sidebar
}
}
document.addEventListener('click', handleClickOutside);
const beforeUnmount = () => {
document.removeEventListener('click', handleClickOutside);
};
return { collapsed, toggleSideBar, sidebarWidth, beforeUnmount, isLoggedIn };
}
}
</script>
<template>
<div class="sidebar" :style="{width: sidebarWidth}">
<SidebarLink to="/" icon="home-icon">Home</SidebarLink>
<SidebarLink to="/dashboard" icon="dashboard-icon">Dashboard</SidebarLink>
<SidebarLink to="/about" icon="about-us-icon">About</SidebarLink>
<SidebarLink to="/feedback" icon="feedback-icon">Feedback</SidebarLink>
<SidebarLink to="/login" icon="login-icon">Login</SidebarLink>
<SidebarLink v-if="isLoggedIn" to="/profile" icon="profile-icon">Profile</SidebarLink>
<span class="collapse-icon" :class="{'rotate-180': collapsed}" @click="toggleSideBar">
<Svg name="double-arrow" class="sidebar-c-icon"/>
</span>
</div>
</template>
<style>
:root{
--sidebar-bd-color: #242F40;
......@@ -59,7 +55,6 @@ export default {
.sidebar{
color: white;
background-color: var(--sidebar-bd-color);
float: left;
position: fixed;
z-index: 1;
......@@ -67,14 +62,11 @@ export default {
left: 0;
bottom: 0;
padding: 0.5rem;
transition: 0.25s ease;
display: flex;
flex-direction: column;
margin-left: -38px;
}
.collapse-icon{
position: absolute;
bottom: 0;
......@@ -85,7 +77,6 @@ export default {
height: 30px;
width: 30px;
}
.rotate-180{
transform: rotate(180deg);
transition: 0.2s linear;
......
FullstackProsjekt/src/frontend/src/components/shared/sidebar/SidebarLink.vue
+ 14
− 20
View file @ 1a0f2b77
<template>
<router-link :to="to" class="link" :class="{ active: isActive }">
<div class="icon-wrapper" v-if="collapsed">
<Svg :name="icon" class="icon" />
</div>
<Transition name="fade">
<span v-if="!collapsed" class="link-content">
<Svg :name="icon" class="icon" />
<slot />
</span>
</Transition>
</router-link>
</template>
<script>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
......@@ -18,32 +32,16 @@ export default {
}
</script>
<template>
<router-link :to="to" class="link" :class="{ active: isActive }">
<div class="icon-wrapper" v-if="collapsed">
<Svg :name="icon" class="icon" />
</div>
<Transition name="fade">
<span v-if="!collapsed" class="link-content">
<Svg :name="icon" class="icon" />
<slot />
</span>
</Transition>
</router-link>
</template>
<style scoped>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.1ms ease;
}
.fade-enter,
.fade-leave-to {
transform: translateX(20px);
opacity: 0;
}
.link {
font-weight: 400;
padding: 0.2em;
......@@ -53,22 +51,18 @@ export default {
text-decoration: none;
margin: 1px;
}
.link:hover {
background-color: var(--sidebar-item-hover);
}
.link.active {
background-color: var(--sidebar-item-active);
color: #242f40;
}
.icon {
width: 2.2em;
height: 2.2em;
margin-right: 1vh;
}
.link-content {
display: flex;
align-items: center;
......
FullstackProsjekt/src/frontend/src/components/shared/sidebar/state.js
+ 0
− 2
View file @ 1a0f2b77
import {ref, computed} from 'vue'
export const collapsed = ref(true)
export const toggleSideBar = () => (collapsed.value = !collapsed.value)
export const SIDEBAR_WIDTH = 180
export const SIDEBAR_WIDTH_COLLAPSED = 80 //38
export const sidebarWidth = computed(
......
FullstackProsjekt/src/frontend/src/views/AboutView.vue
+ 2
− 12
View file @ 1a0f2b77
......@@ -82,33 +82,31 @@
</body>
</template>
<script>
export default {
name: 'About',
};
</script>
<style>
.about-section {
background-image: linear-gradient(rgba(4,9,30,0.7), rgba(4,9,30,0.7)),url("@/components/photos/wheel-backdrop.png");
padding: 20px;
}
.columns {
display: flex;
justify-content: space-between;
margin: 10vh;
}
.column ul li {
margin-bottom: 20px;
}
.column {
flex: 1;
margin-right: 20px;
}
.column p{
font-size: 14px;
}
......@@ -118,35 +116,27 @@ p {
li{
font-size: 16px;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
margin: 8px auto; /* Center the cards horizontally */
padding: 10px;
max-width: 400px; /* Adjust the maximum width of the card */
}
.about-section {
padding: 10vh 10vh 10vh 10vh;
text-align: center;
color: #ffffff;
}
.our-team{
color: #242F40;
}
.container {
padding: 0 16px;
color: #242F40;
}
.title {
color: grey;
}
#logo{
width: 100%;
}
......
FullstackProsjekt/src/frontend/src/views/DashboardView.vue
+ 10
− 5
View file @ 1a0f2b77
<template>
<body>
<div class="dashboard">
<div class="top-bar">
<router-link to="/" ><Svg name="go-back-icon"/></router-link>
<router-link to="/" ><Svg name="go-back-icon" class="go-back-icon"/></router-link>
<div class="search-container">
<input class="searchBox" v-model="searchTerm" placeholder="Search for category...">
</div>
<div class="create-container">
<router-link to="/overviewQuiz" class="add-Btn">YOUR QUIZZES</router-link>
</div>
</div>
<div class="row">
<div class="quiz-list">
<div class="quiz-col" v-for="quiz in filteredQuizList" :key="quiz.id">
......@@ -27,8 +30,10 @@
</div>
</div>
</div>
</body>
</template>
<script>
import { apiClient } from "@/api.js";
import router from "@/router/index.js";
......@@ -76,16 +81,17 @@ export default {
justify-content: space-between;
align-items: center;
margin-bottom: 10vh;
margin-top: 2vh;
margin-top: 4vh;
}
.go-back-icon{
margin-left: 1px;
}
.search-container {
flex-grow: 1;
}
.create-container {
flex-shrink: 0;
}
.searchBox {
width: 250px;
padding: 10px;
......@@ -93,7 +99,6 @@ export default {
display: block;
text-align: center;
}
.quiz-col {
flex-basis: 31%;
background: #d7d7d7;
......
FullstackProsjekt/src/frontend/src/views/FeedbackView.vue
+ 34
− 41
View file @ 1a0f2b77
<template>
<body>
<div class="feedback-page">
<form @submit.prevent="handleSubmit">
<div class="feedback">
<h1>Feedback</h1>
<p>Is there anything you would like to tell us? Comment below!</p>
<div class="contactBox">
<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> <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>
</template>
<script>
import Svg from "@/assets/Svg.vue";
......@@ -41,7 +74,6 @@ export default {
}
},
mounted() {
// Restore form data from local storage
const formData = JSON.parse(localStorage.getItem('feedbackForm'));
if (formData) {
this.name = formData.name;
......@@ -54,40 +86,6 @@ export default {
</script>
<template>
<body>
<div class="feedback-page">
<form @submit.prevent="handleSubmit">
<div class="feedback">
<h1>Feedback</h1>
<p>Is there anything you would like to tell us? Comment below!</p>
<div class="contactBox">
<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> <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>
</template>
<style>
.feedback-page{
padding: 10vh;
......@@ -95,7 +93,6 @@ export default {
justify-content: center;
align-items: center;
}
.feedback {
text-align: center;
color: #242F40;
......@@ -104,14 +101,12 @@ export default {
align-items: center;
border-style: solid;
}
.contactBox {
padding: 30px;
}
.feedback-input{
width: 50vh;
}
.comment {
padding: 8px;
border-radius: 5px;
......@@ -120,7 +115,6 @@ export default {
height: 15vh;
background-color: #E5E5E5;
}
.submit-section {
display: flex;
justify-content: center;
......@@ -130,8 +124,7 @@ export default {
@media (max-width: 700px){
.feedback-input,
.comment {
width: 90%; /* Adjust the width to fit smaller screens */
width: 90%;
}
}
</style>
FullstackProsjekt/src/frontend/src/views/LoginView.vue
+ 50
− 50
View file @ 1a0f2b77
<template>
<body>
<div class="loginPage">
<form @submit.prevent="handleSubmit">
<div class="login">
<h1 id="login">Login</h1>
<p> Sign in to your already existing account</p>
<div class="loginBox">
<label>Username</label> <br>
<input type="text" required v-model="username" placeholder="PartyDragon42"/> <br>
<label>Password</label> <br>
<div class="password-input">
<input :type="showPassword ? 'text' : 'password'" required v-model="password"/>
<button type="button" class="showPasswordIcon" @click="togglePasswordVisibility">
<Svg v-if="showPassword" :name="'hide-password-icon'"/>
<Svg v-else :name="'show-password-icon'" />
</button>
</div> <br>
<label class="error-message">{{errorMsg}}</label><br>
<p> Don't have a account?</p><router-link to="/signup" id="signUpLink">SIGNUP!</router-link>
</div>
</div>
<div class="submit-section">
<input class="submit-btn" type="submit"/>
</div>
</form>
</div>
</body>
</template>
<script>
import Svg from "@/assets/Svg.vue";
import {setToken} from "@/tokenController.js";
......@@ -39,39 +74,6 @@ export default {
}
</script>
<template>
<body>
<div class="loginPage">
<form @submit.prevent="handleSubmit">
<div class="login">
<h1 id="login">Login</h1>
<p> Sign in to your already existing account</p>
<div class="loginBox">
<label>Username</label> <br>
<input type="text" required v-model="username" placeholder="Rizz_Dragon420"/> <br>
<label>Password</label> <br>
<div class="password-input">
<input :type="showPassword ? 'text' : 'password'" required v-model="password"/>
<button type="button" class="showPasswordIcon" @click="togglePasswordVisibility">
<Svg v-if="showPassword" :name="'hide-password-icon'"/>
<Svg v-else :name="'show-password-icon'" />
</button>
</div> <br>
<label class="error-message">{{errorMsg}}</label><br>
<p> Don't have a account?</p><router-link to="/signup" id="signUpLink">SIGNUP!</router-link>
</div>
</div>
<div class="submit-section">
<input class="submit-btn" type="submit"/>
</div>
</form>
</div>
</body>
</template>
<style>
.loginPage {
......@@ -80,7 +82,6 @@ export default {
justify-content: center;
align-items: center;
}
.login {
text-align: center;
padding: 20px;
......@@ -90,18 +91,14 @@ export default {
margin: 20px;
max-width: 450px;
}
.loginBox {
padding: 40px;
}
.password-input {
position: relative;
display: inline-block;
min-width: 300px;
}
.showPasswordIcon {
position: absolute;
top: 50%;
......@@ -121,7 +118,6 @@ export default {
color: #242F40;
transition: 0.3s;
}
.submit-section {
display: flex;
justify-content: center;
......@@ -129,8 +125,12 @@ export default {
}
@media (max-width: 700px) {
.login{
max-width: 300px;
}
.password-input{
min-width: 200px;
}
}
</style>
FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue
+ 6
− 13
View file @ 1a0f2b77
<template>
<body>
<div class="overViewQuestion-page">
<div class="headerDiv">
<router-link to="/" ><Svg name="go-back-icon"/></router-link>
<router-link to="/dashboard" ><Svg name="go-back-icon" class="go-back-icon"/></router-link>
<h1>Your quizzes</h1>
<router-link to="/create-quiz" class="add-Btn">Create new quiz</router-link>
</div>
......@@ -66,11 +65,11 @@ export default {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10vh;
margin-top: 2vh;
margin-bottom: 8vh;
}
.go-back-icon{
margin-left: 1px;
}
.quiz-div {
display: flex;
flex-wrap: wrap;
......@@ -78,10 +77,4 @@ export default {
float: left;
box-sizing: border-box;
}
.headerDiv {
display: flex;
width: 100%;
justify-content: space-between;
}
</style>
\ No newline at end of file
FullstackProsjekt/src/frontend/src/views/ProfileView.vue
+ 55
− 71
View file @ 1a0f2b77
<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">
......@@ -96,7 +38,6 @@ export default {
<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>
......@@ -131,32 +72,82 @@ export default {
</template>
<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() {
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>
<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 div {
flex: 1;
}
.user-quizzes .quiz {
border: 1px solid #ccc;
background-color: #d7d7d7 ;
......@@ -165,16 +156,13 @@ export default {
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;
......@@ -183,17 +171,13 @@ export default {
color: #a2822e;
text-decoration: underline;
}
.progress-tracking {
margin-bottom: 40px;
}
.progress-tracking .quiz-attempt {
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
}
</style>
FullstackProsjekt/src/frontend/src/views/SignupView.vue
+ 37
− 48
View file @ 1a0f2b77
<script>
import Svg from '../assets/Svg.vue'
import {apiClient} from "@/api.js";
export default {
name: 'Register',
components: {Svg},
data(){
return{
username: '',
password:'',
password_confirm:'',
errorMsg: '', //TODO: display error to user
showPassword: false,
}
},
methods:{
async handleSubmit() {
//TODO: use interceptor to check matching password, send one password
try {
await apiClient.post('/auth/register', {
username: this.username,
password: this.password,
}).then(response => {
//TODO: display successful registration to user
alert("User: " + this.username + " created!")
this.$router.push('/login')
});
} catch (error) {
//TODO: proper error handling
this.errorMsg = 'Error signing up, try again';
}
},
togglePasswordVisibility() {
this.showPassword = !this.showPassword;
},
}
}
</script>
<template>
<body>
<div class="signupPage">
......@@ -84,6 +42,43 @@
</template>
<script>
import Svg from '../assets/Svg.vue'
import {apiClient} from "@/api.js";
export default {
name: 'Register',
components: {Svg},
data(){
return{
username: '',
password:'',
password_confirm:'',
errorMsg: '',
showPassword: false,
}
},
methods:{
async handleSubmit() {
try {
await apiClient.post('/auth/register', {
username: this.username,
password: this.password,
}).then(response => {
alert("User: " + this.username + " created!")
this.$router.push('/login')
});
} catch (error) {
this.errorMsg = 'Error signing up, try again';
}
},
togglePasswordVisibility() {
this.showPassword = !this.showPassword;
},
}
}
</script>
<style>
.signupPage {
padding-top: 10vh;
......@@ -91,7 +86,6 @@
justify-content: center;
align-items: center;
}
.signup {
text-align: center;
padding: 20px;
......@@ -99,17 +93,14 @@
align-items: center;
border-style: solid;
}
.signupBox {
padding: 20px;
}
.password-input {
position: relative;
display: inline-block;
min-width: 300px;
}
.showPasswordIcon {
position: absolute;
top: 50%;
......@@ -119,9 +110,7 @@
background: none;
cursor: pointer;
}
.submit-section{
margin-top: 5vh;
}
</style>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment