Skip to content
Snippets Groups Projects
Commit d9b463e9 authored by Viktor Gunnar Grevskott's avatar Viktor Gunnar Grevskott
Browse files

Merge branch 'ResetPassword' into 'main' 

feat: Adding reset password

See merge request !32
parents aa0f656e 8db1d5fe
No related branches found
No related tags found
1 merge request!32feat: Adding reset password
Pipeline #276774 failed
Stage: install_dependencies
Stage: lint
Stage: build_project
Hide whitespace changes
Inline Side-by-side
src/components/LeaderboardComponents/Leaderboard.vue
+ 185
− 149
View file @ d9b463e9
<template>
<div id="leaderboard">
<div class="ribbon"></div>
<table>
<tr v-for="(entry, index) in leaderboard" :key="entry.user.id">
<td class="number">{{ index + 1 }}</td>
<div id="leaderboard">
<div class="ribbon"></div>
<table>
<tbody>
<tr v-for="(entry, index) in leaderboard" :key="entry.user.id" :class="{ 'is-user-5': entry.user.firstName === 'User' }">
<td class="number">{{ entry.rank }}</td>
<td class="name" @click="navigateToUserProfile(entry.user.id)">{{ entry.user.firstName }}</td>
<td class="points" v-if="index === 0">
{{ entry.score }}
<div class = "medal">
<img class="gold-medal" src="https://github.com/malunaridev/Challenges-iCodeThis/blob/master/4-leaderboard/assets/gold-medal.png?raw=true" alt="gold medal" />
<div class="medal">
<img class="gold-medal"
src="https://github.com/malunaridev/Challenges-iCodeThis/blob/master/4-leaderboard/assets/gold-medal.png?raw=true"
alt="gold medal" />
</div>
</td>
<td v-else class="points">{{ entry.score }}</td>
</td>
<td v-else class="points">{{ entry.score }}</td>
</tr>
</table>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const props = defineProps({
leaderboard: {
type: Array,
required: true
}
});
const navigateToUserProfile = () => {
router.push({ name: 'news' });
};
</script>
<style scoped>
#leaderboard {
width: 100%;
position: relative;
}
table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
color: #141a39;
cursor: default;
}
tr {
transition: all 0.2s ease-in-out;
border-radius: 0.2rem;
display: flex;
align-items: center;
justify-content: space-between;
height: 4rem;
}
tr:not(:first-child):hover {
background-color: #fff;
transform: scale(1.1);
-webkit-box-shadow: 0px 5px 15px 8px #e4e7fb;
box-shadow: 0px 5px 15px 8px #e4e7fb;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:nth-child(1) {
color: #fff;
</tbody>
<tbody id="line">`</tbody>
<tbody v-if="!userInLeaderboard">
<tr></tr>
<tr v-for="(entry, index) in leaderboardExtra" :key="entry.user.id" :class="{ 'is-user-5': entry.user.firstName === 'User' }">
<td class="number">{{ entry.rank }}</td>
<td class="name" @click="navigateToUserProfile(entry.user.id)">{{ entry.user.firstName }}</td>
<td class="points">{{ entry.score }}</td>
</tr>
</tbody>
<tbody v-else></tbody>
</table>
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { useRouter } from 'vue-router';
import { useUserInfoStore } from '@/stores/UserStore';
const router = useRouter();
const userStore = useUserInfoStore();
const props = defineProps({
leaderboard: {
type: Array,
required: true
},
leaderboardExtra: {
type: Array,
required: true
}
});
console.log(props.leaderboardExtra);
const userInLeaderboard = computed(() => props.leaderboard.some(entry => entry.user.email === userStore.email));
const navigateToUserProfile = () => {
router.push({ name: 'user-profile' });
};
</script>
<style scoped>
#leaderboard {
width: 100%;
position: relative;
}
table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
color: #141a39;
cursor: default;
}
tr {
transition: all 0.2s ease-in-out;
border-radius: 0.2rem;
display: flex;
align-items: center;
justify-content: space-between;
height: 4rem;
}
tr:not(:first-child):hover {
background-color: #fff;
transform: scale(1.1);
-webkit-box-shadow: 0px 5px 15px 8px #e4e7fb;
box-shadow: 0px 5px 15px 8px #e4e7fb;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:nth-child(1) {
color: #fff;
}
td {
height: 2rem;
font-family: "Rubik", sans-serif;
font-size: 1.4rem;
padding: 1rem 2rem;
position: relative;
}
.number {
width: 1rem;
font-size: 2.2rem;
font-weight: bold;
text-align: left;
display: flex;
align-items: center;
}
.name {
font-size: 1.3rem;
cursor: pointer;
display: flex;
align-items: center;
}
.points {
font-weight: bold;
font-size: 1.3rem;
display: flex;
justify-content: flex-end;
align-items: center;
}
@media (max-width: 1000px) {
.number .name .points {
font-size: 0.5rem;
}
td {
height: 2rem;
font-family: "Rubik", sans-serif;
font-size: 1.4rem;
padding: 1rem 2rem;
position: relative;
}
.number {
width: 1rem;
font-size: 2.2rem;
font-weight: bold;
text-align: left;
display: flex;
align-items: center;
}
.name {
font-size: 1.3rem;
cursor: pointer;
display: flex;
align-items: center;
}
.points {
font-weight: bold;
font-size: 1.3rem;
display: flex;
justify-content: flex-end;
align-items: center;
padding: 0.2rem 0.5rem;
}
}
@media (max-width: 1000px) {
.number .name .points {
font-size: 0.5rem;
}
td {
padding: 0.2rem 0.5rem;
}
}
.points:first-child {
width: 10rem;
}
.points:first-child {
width: 10rem;
}
.gold-medal {
height: 3rem;
margin-left: 1.5rem;
}
.ribbon {
width: 106%;
height: 4.5rem;
top: -0.5rem;
background-color: #0A58CA;
position: absolute;
/**left: -1rem;*/
box-shadow: 0px 15px 11px -6px #7a7a7d;
}
.ribbon::before {
content: "";
height: 1.5rem;
width: 1.5rem;
bottom: -0.8rem;
left: 0.35rem;
transform: rotate(45deg);
background-color: #0A58CA;
position: absolute;
z-index: -1;
}
.ribbon::after {
content: "";
height: 1.5rem;
width: 1.5rem;
bottom: -0.8rem;
right: 0.35rem;
transform: rotate(45deg);
background-color: #0A58CA;
position: absolute;
z-index: -1;
}
</style>
\ No newline at end of file
.gold-medal {
height: 3rem;
margin-left: 1.5rem;
}
.ribbon {
width: 106%;
height: 4.5rem;
top: -0.5rem;
background-color: #0A58CA;
position: absolute;
/**left: -1rem;*/
box-shadow: 0px 15px 11px -6px #7a7a7d;
}
.ribbon::before {
content: "";
height: 1.5rem;
width: 1.5rem;
bottom: -0.8rem;
left: 0.35rem;
transform: rotate(45deg);
background-color: #0A58CA;
position: absolute;
z-index: -1;
}
.ribbon::after {
content: "";
height: 1.5rem;
width: 1.5rem;
bottom: -0.8rem;
right: 0.35rem;
transform: rotate(45deg);
background-color: #0A58CA;
position: absolute;
z-index: -1;
}
#line {
width: 100%;
height: 0.01rem;
border-top: 8px solid #0A58CA;
}
tr.is-user-5 {
background-color: #419c5c !important;
color: #fff !important;
}
</style>
\ No newline at end of file
src/components/UpdateUserComponents/UpdateUserLayout.vue
+ 2
− 2
View file @ d9b463e9
<script setup lang="ts">
import BaseInput from "@/components/InputFields/BaseInput.vue";
import {onMounted, ref} from "vue";
import {AuthenticationService, LeaderboardService, UserControllerService, type UserUpdateDTO} from "@/api";
import {AuthenticationService, LeaderboardService, UserService, type UserUpdateDTO} from "@/api";
import {useUserInfoStore} from "@/stores/UserStore";
......@@ -18,7 +18,7 @@ let samePasswords = ref(true)
async function setupForm() {
try {
let response = await UserControllerService.getUser();
let response = await UserService.getUser();
console.log(response.firstName)
firstNameRef.value = response.firstName;
......
src/views/Authentication/ChangePasswordView.vue
+ 60
− 48
View file @ d9b463e9
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-5">
<div class="card shadow-lg border-0 rounded-lg mt-5">
<div class="card-header"><h3 class="text-center font-weight-light my-4">Password Recovery</h3></div>
<div class="card-body">
<div class="small mb-3 text-muted">Enter the new password for your account</div>
<form @submit.prevent="submitForm">
<div class="form-floating mb-3">
<input v-model="newPassword" class="form-control" id="newPassword" type="password" placeholder="New Password" required>
<label for="newPassword">Enter your new password</label>
<div class="row justify-content-center">
<div class="col-lg-5">
<div class="card shadow-lg border-0 rounded-lg mt-5">
<div class="card-header">
<h3 class="text-center font-weight-light my-4">Password Recovery</h3>
</div>
<div class="card-body">
<div class="small mb-3 text-muted">Enter the new password for your account</div>
<form @submit.prevent="submitForm">
<div class="form-floating mb-3">
<input v-model="newPassword" class="form-control" id="newPassword" type="password"
placeholder="New Password" required>
<label for="newPassword">Enter your new password</label>
</div>
<div class="form-floating mb-3">
<input v-model="confirmPassword" class="form-control" id="confirmPassword"
type="password" placeholder="Confirm Password" required>
<label for="confirmPassword">Confirm your new password</label>
</div>
<div class="errorMsg">{{ errormsg }}</div>
<div class="d-flex align-items-center justify-content-between mt-4 mb-0">
<router-link to="/login" class="small">Return to login</router-link>
<button class="btn btn-primary" type="submit">Confirm Password</button>
</div>
</form>
</div>
<div class="card-footer text-center py-3">
<div class="small"><router-link to="/sign-up">Need an account? Sign up!</router-link></div>
</div>
</div>
<div class="form-floating mb-3">
<input v-model="confirmPassword" class="form-control" id="confirmPassword" type="password" placeholder="Confirm Password" required>
<label for="confirmPassword">Confirm your new password</label>
</div>
<div class="d-flex align-items-center justify-content-between mt-4 mb-0">
<router-link to="/login" class="small">Return to login</router-link>
<button class="btn btn-primary" type="submit">Confirm Password</button>
</div>
</form>
</div>
<div class="card-footer text-center py-3">
<div class="small"><router-link to="/sign-up">Need an account? Sign up!</router-link></div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import axios from 'axios';
import { UserService } from '@/api';
const router = useRouter();
const route = useRoute();
const router = useRouter();
const newPassword = ref('');
const confirmPassword = ref('');
const submitForm = async () => {
const token = route.params.token;
const newPassword = ref('');
const confirmPassword = ref('');
let errormsg = ref('');
const submitForm = async () => {
if (newPassword.value !== confirmPassword.value) {
alert('Passwords do not match!');
return;
errormsg.value = 'The passwords do not match';
return;
}
errormsg.value = '';
try {
const response = await axios.post('/api/reset-password', {
password: newPassword.value,
confirmPassword: confirmPassword.value
});
console.log('Success:', response.data);
const resetPassword = {
password: newPassword.value,
token: token
};
const response = await UserService.confirmPasswordReset({ requestBody: resetPassword });
console.log(response);
router.push('/login');
} catch (error) {
console.error('Error:', error);
console.error('Error:', error);
}
};
</script>
\ No newline at end of file
};
</script>
\ No newline at end of file
src/views/Authentication/ForgottenPasswordView.vue
+ 49
− 42
View file @ d9b463e9
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-5">
<div class="card shadow-lg border-0 rounded-lg mt-5">
<div class="card-header"><h3 class="text-center font-weight-light my-4">Password Recovery</h3></div>
<div class="card-body">
<div class="small mb-3 text-muted">Enter your email address and we will send you a link to reset your password.</div>
<form @submit.prevent="submitForm">
<div class="form-floating mb-3">
<input v-model="email" class="form-control" id="inputEmail" type="email" placeholder="name@example.com" required>
<label for="inputEmail">Enter email address</label>
<div class="row justify-content-center">
<div class="col-lg-5">
<div class="card shadow-lg border-0 rounded-lg mt-5">
<div class="card-header">
<h3 class="text-center font-weight-light my-4">Password Recovery</h3>
</div>
<div class="card-body">
<div class="small mb-3 text-muted">Enter your email address and we will send you a link to reset
your password.</div>
<form @submit.prevent="submitForm">
<div class="form-floating mb-3">
<input v-model="email" class="form-control" id="inputEmail" type="email"
placeholder="name@example.com" required>
<label for="inputEmail">Enter email address</label>
</div>
<div class="d-flex align-items-center justify-content-between mt-4 mb-0">
<router-link to="/login" class="small">Return to login</router-link>
<button class="btn btn-primary" type="submit">Reset Password</button>
</div>
<div class="text-success">
{{ confirmationMessage }}
</div>
</form>
</div>
<div class="card-footer text-center py-3">
<div class="small"><router-link to="/sign-up">Need an account? Sign up!</router-link></div>
</div>
</div>
<div class="d-flex align-items-center justify-content-between mt-4 mb-0">
<router-link to="/login" class="small">Return to login</router-link>
<button class="btn btn-primary" type="submit">Reset Password</button>
</div>
<div class="text-success">
{{ confirmationMessage }}
</div>
</form>
</div>
<div class="card-footer text-center py-3">
<div class="small"><router-link to="/sign-up">Need an account? Sign up!</router-link></div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
const router = useRouter();
const email = ref('');
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import axios from 'axios';
import { UserService } from '@/api';
let confirmationMessage = ref('');
const submitForm = async () => {
const router = useRouter();
const email = ref('');
let confirmationMessage = ref('');
const submitForm = async () => {
try {
const response = await axios.post('/api/password-reset', { email: email.value });
console.log('Success:', response.data);
confirmationMessage.value = 'An email has been sent to your email address with a link to reset your password.';
const response = await UserService.resetPassword({
requestBody: email.value
});
console.log('Success:', response.data);
confirmationMessage.value = 'An email has been sent to your email address with a link to reset your password.';
} catch (error) {
console.error('Error:', error);
console.error('Error:', error);
}
};
</script>
\ No newline at end of file
};
</script>
\ No newline at end of file
src/views/LeaderboardView.vue
+ 42
− 10
View file @ d9b463e9
......@@ -18,15 +18,15 @@
<main>
<div id="leaderboard">
<h1><img src="@/assets/items/v-buck.png" style="width: 2rem"> Total points</h1>
<Leaderboard :leaderboard="pointsLeaderboardData" @navigateToUserProfile="navigateToUserProfile" />
<Leaderboard :leaderboard="pointsLeaderboardData" :leaderboardExtra="pointsLeaderboardDataExtra" @navigateToUserProfile="navigateToUserProfile" />
</div>
<div id="leaderboard">
<h1><img src="@/assets/icons/fire.png" style="width: 2rem"> Current streak</h1>
<Leaderboard :leaderboard="currentLeaderboardData" @navigateToUserProfile="navigateToUserProfile" />
<Leaderboard :leaderboard="currentLeaderboardData" :leaderboardExtra="currentLeaderboardDataExtra" @navigateToUserProfile="navigateToUserProfile" />
</div>
<div id="leaderboard">
<h1><img src="@/assets/icons/fire.png" style="width: 2rem"> Highest streak</h1>
<Leaderboard :leaderboard="streakLeaderboardData" @navigateToUserProfile="navigateToUserProfile" />
<Leaderboard :leaderboard="streakLeaderboardData" :leaderboardExtra="streakLeaderboardDataExtra" @navigateToUserProfile="navigateToUserProfile" />
</div>
</main>
</div>
......@@ -41,12 +41,16 @@ import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import Leaderboard from '@/components/LeaderboardComponents/Leaderboard.vue';
import { on } from 'events';
import { LeaderboardService } from '@/api';
import { LeaderboardService, UserControllerService } from '@/api';
let streakLeaderboardData = ref([]);
let currentLeaderboardData = ref([]);
let pointsLeaderboardData = ref([]);
let streakLeaderboardDataExtra = ref([]);
let currentLeaderboardDataExtra = ref([]);
let pointsLeaderboardDataExtra = ref([]);
const router = useRouter();
async function fetchQuizData() {
......@@ -73,23 +77,28 @@ async function global() {
let globalPointsYou = await LeaderboardService.getSurrounding({
type: "TOTAL_POINTS",
filter: "GLOBAL",
entryCount: 1,
});
let globalStreakYou = await LeaderboardService.getSurrounding({
type: "TOP_STREAK",
filter: "GLOBAL",
entryCount: 1,
});
let globalCurrentStreakYou = await LeaderboardService.getSurrounding({
type: "CURRENT_STREAK",
filter: "GLOBAL",
entryCount: 1,
});
console.log(globalPointsYou);
console.log(globalStreakYou);
console.log(globalCurrentStreakYou);
pointsLeaderboardData.value = globalPoints.entries;
currentLeaderboardData.value = globalCurrentStreak.entries;
streakLeaderboardData.value = globalStreak.entries;
pointsLeaderboardDataExtra.value = globalPointsYou.entries;
currentLeaderboardDataExtra.value = globalCurrentStreakYou.entries;
streakLeaderboardDataExtra.value = globalStreakYou.entries;
console.log(pointsLeaderboardDataExtra.value);
}
async function friends() {
......@@ -105,9 +114,32 @@ async function friends() {
type: "CURRENT_STREAK",
filter: "FRIENDS",
});
let friendsPointsYou = await LeaderboardService.getSurrounding({
type: "TOTAL_POINTS",
filter: "FRIENDS",
entryCount: 3,
});
let friendsStreakYou = await LeaderboardService.getSurrounding({
type: "TOP_STREAK",
filter: "FRIENDS",
entryCount: 3,
});
let friendsCurrentStreakYou = await LeaderboardService.getSurrounding({
type: "CURRENT_STREAK",
filter: "FRIENDS",
entryCount: 3,
});
pointsLeaderboardData.value = friendsPoints.entries;
currentLeaderboardData.value = friendsCurrentStreak.entries;
streakLeaderboardData.value = friendsStreak.entries;
pointsLeaderboardDataExtra.value = friendsPointsYou.entries;
currentLeaderboardDataExtra.value = friendsStreakYou.entries;
streakLeaderboardDataExtra.value = friendsCurrentStreakYou.entries;
}
const navigateToUserProfile = (userId: number) => {
......@@ -121,7 +153,7 @@ main {
width: 80%;
display: flex;
justify-content: space-around;
align-items: center;
align-items: start;
flex-wrap: wrap;
flex-direction: row;
}
......
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