feat: Adding forgotten/change password views

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',

src/views/Authentication/ChangePasswordView.vue

+<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

src/views/Authentication/ForgottenPasswordView.vue

+<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

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;

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