From b52a5c81450e9fbc9a5d06e5a783f3ca3d062876 Mon Sep 17 00:00:00 2001
From: VIktorGrev <viktog2210@gmail.com>
Date: Mon, 22 Apr 2024 13:30:04 +0200
Subject: [PATCH] feat: Adding forgotten/change password views
---
src/router/index.ts | 10 +++
.../Authentication/ChangePasswordView.vue | 61 +++++++++++++++++++
.../Authentication/ForgottenPasswordView.vue | 52 ++++++++++++++++
src/views/LeaderboardView.vue | 17 ++++++
src/views/User/UserFriendsView.vue | 1 -
5 files changed, 140 insertions(+), 1 deletion(-)
create mode 100644 src/views/Authentication/ChangePasswordView.vue
create mode 100644 src/views/Authentication/ForgottenPasswordView.vue
diff --git a/src/router/index.ts b/src/router/index.ts
index eb7adba..d1d9d54 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -86,6 +86,16 @@ const routes = [
name: 'login',
component: LoginView,
},
+ {
+ path: '/forgotten-password',
+ name: 'forgotten-password',
+ component: () => import('@/views/Authentication/ForgottenPasswordView.vue'),
+ },
+ {
+ path: '/change-password/:token',
+ name: 'change-password',
+ component: () => import('@/views/Authentication/ChangePasswordView.vue'),
+ },
{
path: '/sign-up',
name: 'sign up',
diff --git a/src/views/Authentication/ChangePasswordView.vue b/src/views/Authentication/ChangePasswordView.vue
new file mode 100644
index 0000000..ad52ab1
--- /dev/null
+++ b/src/views/Authentication/ChangePasswordView.vue
@@ -0,0 +1,61 @@
+<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>
+ <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';
+
+ const router = useRouter();
+
+ const newPassword = ref('');
+ const confirmPassword = ref('');
+
+ const submitForm = async () => {
+ if (newPassword.value !== confirmPassword.value) {
+ alert('Passwords do not match!');
+ return;
+ }
+ try {
+ const response = await axios.post('/api/reset-password', {
+ password: newPassword.value,
+ confirmPassword: confirmPassword.value
+ });
+ console.log('Success:', response.data);
+ router.push('/login');
+ } catch (error) {
+ console.error('Error:', error);
+ }
+ };
+
+ </script>
+
\ No newline at end of file
diff --git a/src/views/Authentication/ForgottenPasswordView.vue b/src/views/Authentication/ForgottenPasswordView.vue
new file mode 100644
index 0000000..521c2aa
--- /dev/null
+++ b/src/views/Authentication/ForgottenPasswordView.vue
@@ -0,0 +1,52 @@
+<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>
+ <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('');
+
+ 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.';
+ } catch (error) {
+ console.error('Error:', error);
+ }
+ };
+ </script>
+
\ No newline at end of file
diff --git a/src/views/LeaderboardView.vue b/src/views/LeaderboardView.vue
index 5a7adf0..769c679 100644
--- a/src/views/LeaderboardView.vue
+++ b/src/views/LeaderboardView.vue
@@ -70,6 +70,23 @@ async function global() {
type: "CURRENT_STREAK",
filter: "GLOBAL",
});
+ let globalPointsYou = await LeaderboardService.getSurrounding({
+ type: "TOTAL_POINTS",
+ filter: "GLOBAL",
+ });
+ let globalStreakYou = await LeaderboardService.getSurrounding({
+ type: "TOP_STREAK",
+ filter: "GLOBAL",
+ });
+ let globalCurrentStreakYou = await LeaderboardService.getSurrounding({
+ type: "CURRENT_STREAK",
+ filter: "GLOBAL",
+ });
+
+ console.log(globalPointsYou);
+ console.log(globalStreakYou);
+ console.log(globalCurrentStreakYou);
+
pointsLeaderboardData.value = globalPoints.entries;
currentLeaderboardData.value = globalCurrentStreak.entries;
streakLeaderboardData.value = globalStreak.entries;
diff --git a/src/views/User/UserFriendsView.vue b/src/views/User/UserFriendsView.vue
index aecf58a..bba374f 100644
--- a/src/views/User/UserFriendsView.vue
+++ b/src/views/User/UserFriendsView.vue
@@ -657,6 +657,5 @@ ul.friend-list .right p {
justify-content: center;
align-items: center;
flex-direction: column;
-
}
</style>
\ No newline at end of file
--
GitLab