From 500fb294b1f62c579da61853d93e3951aa82f51a Mon Sep 17 00:00:00 2001
From: Gaston Gaiduk <gastongaiduk@gmail.com>
Date: Mon, 6 Jan 2025 10:44:53 +0100
Subject: [PATCH 1/3] Access to RA credentials page must be restricted to
 logged in users

---
 src/components/RACredentials.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/RACredentials.vue b/src/components/RACredentials.vue
index 2608376..d776963 100644
--- a/src/components/RACredentials.vue
+++ b/src/components/RACredentials.vue
@@ -4,7 +4,7 @@ import {useRouter} from "vue-router";
 
 import {useUserStore} from '../stores/user'
 import axios from "axios";
-import BurgerMenu from "./BurgerMenu.vue";
+import BurgerMenu from "./_shared/BurgerMenu.vue";
 
 const router = useRouter();
 const user = useUserStore();
@@ -49,6 +49,9 @@ async function handleSubmit() {
 }
 
 onMounted(() => {
+  if (!user.isLoggedIn()) {
+    router.push("/login");
+  }
   if (user.isSet() && user.username && user.key) {
     usernameInput.value = user.username;
     keyInput.value = user.key;

From df17f136ea5d9c676e54c79dce0e9c09cb964afd Mon Sep 17 00:00:00 2001
From: Gaston Gaiduk <gastongaiduk@gmail.com>
Date: Mon, 6 Jan 2025 10:45:15 +0100
Subject: [PATCH 2/3] Create refresh button component

---
 src/components/GameLeaderboards.vue           | 19 ++-----
 src/components/Home.vue                       | 29 ++---------
 src/components/LeaderboardEntries.vue         | 17 ++----
 src/components/LeaderboardsUpdates.vue        |  2 +-
 src/components/{ => _shared}/BurgerMenu.vue   |  2 +-
 src/components/{ => _shared}/ConfirmModal.vue |  0
 src/components/_shared/RefreshButton.vue      | 52 +++++++++++++++++++
 src/components/{ => _shared}/Tooltip.vue      |  0
 8 files changed, 66 insertions(+), 55 deletions(-)
 rename src/components/{ => _shared}/BurgerMenu.vue (98%)
 rename src/components/{ => _shared}/ConfirmModal.vue (100%)
 create mode 100644 src/components/_shared/RefreshButton.vue
 rename src/components/{ => _shared}/Tooltip.vue (100%)

diff --git a/src/components/GameLeaderboards.vue b/src/components/GameLeaderboards.vue
index 0f12069..af51587 100644
--- a/src/components/GameLeaderboards.vue
+++ b/src/components/GameLeaderboards.vue
@@ -10,8 +10,8 @@ import {useUserStore} from '../stores/user';
 import {useGamesStore} from "../stores/games";
 import {Game} from "../models/RecentlyPlayedGames.ts";
 import {supabase} from "../utils/supabaseClient.ts";
-import Tooltip from "./Tooltip.vue";
-import ConfirmModal from "./ConfirmModal.vue";
+import ConfirmModal from "./_shared/ConfirmModal.vue";
+import RefreshButton from "./_shared/RefreshButton.vue";
 
 const router = useRouter();
 const postStore = usePostStore();
@@ -147,12 +147,7 @@ onMounted(async () => {
 <template>
   <div class="leaderboard-container">
     <button class="back-button" @click="goBack"><i class="fa fa-arrow-left" aria-hidden="true"></i> Back</button>
-    <Tooltip text="Refresh content" position="left" style="float: right">
-      <button class="refresh-button" @click="refreshLeaderboards" :disabled="loadingRefresh">
-        <i v-if="loadingRefresh" class="fa fa-spinner fa-spin"></i>
-        <i v-else class="fa fa-refresh"></i>
-      </button>
-    </Tooltip>
+    <RefreshButton :loading-state="loadingRefresh" @click="refreshLeaderboards"></RefreshButton>
     <h1 class="leaderboard-title">{{ selectedGame?.Title }}</h1>
     <div v-if="leaderboards && leaderboards.Results.length" style="text-align: center">
       <button v-if="!subscribedToGame" class="subscribe-button" @click="showSubscribeModal" :disabled="loadingSubscription">
@@ -217,7 +212,7 @@ onMounted(async () => {
   text-align: center;
 }
 
-.back-button, .refresh-button {
+.back-button {
   background-color: #f5a623;
   color: #1a1a2e;
   border: none;
@@ -246,7 +241,7 @@ button:disabled {
   color: #e0e1dd;
 }
 
-.back-button:hover, .refresh-button:hover, .subscribe-button:hover {
+.back-button:hover, .subscribe-button:hover {
   background-color: #d48821;
 }
 
@@ -254,10 +249,6 @@ button:disabled {
   background-color: #d9534f;
 }
 
-.refresh-button {
-  float: right;
-}
-
 .leaderboard-list {
   list-style-type: none;
   padding: 0;
diff --git a/src/components/Home.vue b/src/components/Home.vue
index 8819735..6b485d8 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -7,9 +7,9 @@ import {usePostStore} from '../stores/postStore';
 import {useUserStore} from '../stores/user';
 import {useGamesStore} from "../stores/games";
 import {GameList, Game} from "../models/RecentlyPlayedGames.ts";
-import BurgerMenu from "./BurgerMenu.vue";
+import BurgerMenu from "./_shared/BurgerMenu.vue";
 import {supabase} from "../utils/supabaseClient.ts";
-import Tooltip from "./Tooltip.vue";
+import RefreshButton from "./_shared/RefreshButton.vue";
 
 const router = useRouter();
 const postStore = usePostStore();
@@ -91,12 +91,7 @@ onMounted(async () => {
 <template>
   <div class="retro-container">
     <BurgerMenu :updates-number="updatesNumber ? updatesNumber : 0"></BurgerMenu>
-    <Tooltip text="Refresh content" position="left" style="float: right">
-      <button class="refresh-button" @click="refreshGames" :disabled="loadingRefresh">
-        <i v-if="loadingRefresh" class="fa fa-spinner fa-spin"></i>
-        <i v-else class="fa fa-refresh"></i>
-      </button>
-    </Tooltip>
+    <RefreshButton :loading-state="loadingRefresh" @click="refreshGames"></RefreshButton>
     <h1 class="retro-title">Welcome {{ user.username }}</h1>
     <div v-if="games.lastPlayedGames">
       <ul v-if="games.lastPlayedGames.length" class="game-list">
@@ -128,24 +123,6 @@ onMounted(async () => {
   font-family: 'Press Start 2P', cursive;
 }
 
-.refresh-button {
-  background-color: #f5a623;
-  color: #1a1a2e;
-  border: none;
-  padding: 10px 20px;
-  cursor: pointer;
-  font-size: 16px;
-  border-radius: 10px;
-}
-
-.refresh-button:hover {
-  background-color: #d48821;
-}
-
-.refresh-button {
-  float: right;
-}
-
 .retro-title {
   font-size: 24px;
   color: #f5a623;
diff --git a/src/components/LeaderboardEntries.vue b/src/components/LeaderboardEntries.vue
index aa42de2..9fa471a 100644
--- a/src/components/LeaderboardEntries.vue
+++ b/src/components/LeaderboardEntries.vue
@@ -11,7 +11,7 @@ import {useFriendsState} from "../stores/friends.ts";
 import {Game} from "../models/RecentlyPlayedGames.ts";
 import {Leaderboard} from "../models/GameLeaderboards.ts";
 import {useGamesStore} from "../stores/games.ts";
-import Tooltip from "./Tooltip.vue";
+import RefreshButton from "./_shared/RefreshButton.vue";
 
 const router = useRouter();
 const postStore = usePostStore();
@@ -123,12 +123,7 @@ function isFriend(user: string) {
 <template>
   <div class="entries-container">
     <button class="back-button" @click="goBack"><i class="fa fa-arrow-left" aria-hidden="true"></i> Back</button>
-    <Tooltip text="Refresh content" position="left" style="float: right">
-      <button class="refresh-button" @click="refreshScores" :disabled="loadingRefresh">
-        <i v-if="loadingRefresh" class="fa fa-spinner fa-spin"></i>
-        <i v-else class="fa fa-refresh"></i>
-      </button>
-    </Tooltip>
+    <RefreshButton :loading-state="loadingRefresh" @click="refreshScores"></RefreshButton>
     <h1 class="entries-title">{{ selectedLeaderboard?.Title }}</h1>
     <h2 class="entries-title">{{ selectedGame?.Title }}</h2>
     <div v-if="entries">
@@ -173,7 +168,7 @@ h2.entries-title {
   text-align: center;
 }
 
-.back-button, .refresh-button {
+.back-button {
   background-color: #f5a623;
   color: #1a1a2e;
   border: none;
@@ -183,14 +178,10 @@ h2.entries-title {
   border-radius: 10px;
 }
 
-.back-button:hover, .refresh-button:hover {
+.back-button:hover {
   background-color: #d48821;
 }
 
-.refresh-button {
-  float: right;
-}
-
 .entries-list {
   list-style-type: none;
   padding: 0;
diff --git a/src/components/LeaderboardsUpdates.vue b/src/components/LeaderboardsUpdates.vue
index 6fdf786..1f75280 100644
--- a/src/components/LeaderboardsUpdates.vue
+++ b/src/components/LeaderboardsUpdates.vue
@@ -6,7 +6,7 @@ import {supabase} from "../utils/supabaseClient.ts";
 import {usePostStore} from "../stores/postStore.ts";
 import {Leaderboard} from "../models/GameLeaderboards.ts";
 import {Game} from "../models/RecentlyPlayedGames.ts";
-import BurgerMenu from "./BurgerMenu.vue";
+import BurgerMenu from "./_shared/BurgerMenu.vue";
 
 const router = useRouter();
 const postStore = usePostStore();
diff --git a/src/components/BurgerMenu.vue b/src/components/_shared/BurgerMenu.vue
similarity index 98%
rename from src/components/BurgerMenu.vue
rename to src/components/_shared/BurgerMenu.vue
index 73c8cfa..ce90367 100644
--- a/src/components/BurgerMenu.vue
+++ b/src/components/_shared/BurgerMenu.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import {computed, ref} from 'vue';
 import {useRoute, useRouter} from "vue-router";
-import {useUserStore} from "../stores/user.ts";
+import {useUserStore} from "../../stores/user.ts";
 import ConfirmModal from "./ConfirmModal.vue";
 
 const router = useRouter();
diff --git a/src/components/ConfirmModal.vue b/src/components/_shared/ConfirmModal.vue
similarity index 100%
rename from src/components/ConfirmModal.vue
rename to src/components/_shared/ConfirmModal.vue
diff --git a/src/components/_shared/RefreshButton.vue b/src/components/_shared/RefreshButton.vue
new file mode 100644
index 0000000..bcf4223
--- /dev/null
+++ b/src/components/_shared/RefreshButton.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import Tooltip from "./Tooltip.vue";
+import {ref} from "vue";
+
+const emit = defineEmits(['click'])
+
+const props = defineProps({
+  loadingState: {
+    type: Boolean,
+    required: true
+  },
+})
+
+const loading = ref<boolean>(false);
+
+function clickAction() {
+  loading.value = true;
+  setTimeout(() => {
+    loading.value = false;
+    emit('click');
+  }, 1000);
+}
+</script>
+
+<template>
+  <Tooltip text="Refresh content" position="left" style="float: right">
+    <button class="refresh-button" @click="clickAction" :disabled="props.loadingState || loading">
+      <i v-if="props.loadingState || loading" class="fa fa-spinner fa-spin"></i>
+      <i v-else class="fa fa-refresh"></i>
+    </button>
+  </Tooltip>
+</template>
+
+<style scoped>
+.refresh-button {
+  background-color: #f5a623;
+  color: #1a1a2e;
+  border: none;
+  padding: 10px 20px;
+  cursor: pointer;
+  font-size: 16px;
+  border-radius: 10px;
+}
+
+.refresh-button:hover {
+  background-color: #d48821;
+}
+
+.refresh-button {
+  float: right;
+}
+</style>
diff --git a/src/components/Tooltip.vue b/src/components/_shared/Tooltip.vue
similarity index 100%
rename from src/components/Tooltip.vue
rename to src/components/_shared/Tooltip.vue

From ef412d3c6714d773c528029ae92303ac4e2db113 Mon Sep 17 00:00:00 2001
From: Gaston Gaiduk <gastongaiduk@gmail.com>
Date: Mon, 6 Jan 2025 10:49:02 +0100
Subject: [PATCH 3/3] Create back button component

---
 src/components/GameLeaderboards.vue   | 19 +++--------------
 src/components/LeaderboardEntries.vue | 21 ++-----------------
 src/components/_shared/BackButton.vue | 30 +++++++++++++++++++++++++++
 3 files changed, 35 insertions(+), 35 deletions(-)
 create mode 100644 src/components/_shared/BackButton.vue

diff --git a/src/components/GameLeaderboards.vue b/src/components/GameLeaderboards.vue
index af51587..0f393c5 100644
--- a/src/components/GameLeaderboards.vue
+++ b/src/components/GameLeaderboards.vue
@@ -12,6 +12,7 @@ import {Game} from "../models/RecentlyPlayedGames.ts";
 import {supabase} from "../utils/supabaseClient.ts";
 import ConfirmModal from "./_shared/ConfirmModal.vue";
 import RefreshButton from "./_shared/RefreshButton.vue";
+import BackButton from "./_shared/BackButton.vue";
 
 const router = useRouter();
 const postStore = usePostStore();
@@ -40,10 +41,6 @@ function hideUnsubscribeModal() {
   isUnsubscribeModalVisible.value = false;
 }
 
-function goBack() {
-  router.back();
-}
-
 function selectLeaderboard(leaderboard: Leaderboard) {
   postStore.selectLeaderboard(leaderboard);
 }
@@ -146,7 +143,7 @@ onMounted(async () => {
 
 <template>
   <div class="leaderboard-container">
-    <button class="back-button" @click="goBack"><i class="fa fa-arrow-left" aria-hidden="true"></i> Back</button>
+    <BackButton></BackButton>
     <RefreshButton :loading-state="loadingRefresh" @click="refreshLeaderboards"></RefreshButton>
     <h1 class="leaderboard-title">{{ selectedGame?.Title }}</h1>
     <div v-if="leaderboards && leaderboards.Results.length" style="text-align: center">
@@ -212,16 +209,6 @@ onMounted(async () => {
   text-align: center;
 }
 
-.back-button {
-  background-color: #f5a623;
-  color: #1a1a2e;
-  border: none;
-  padding: 10px 20px;
-  cursor: pointer;
-  font-size: 16px;
-  border-radius: 10px;
-}
-
 .subscribe-button, .unsubscribe-button {
   background-color: #f5a623;
   color: #1a1a2e;
@@ -241,7 +228,7 @@ button:disabled {
   color: #e0e1dd;
 }
 
-.back-button:hover, .subscribe-button:hover {
+.subscribe-button:hover {
   background-color: #d48821;
 }
 
diff --git a/src/components/LeaderboardEntries.vue b/src/components/LeaderboardEntries.vue
index 9fa471a..2e37a93 100644
--- a/src/components/LeaderboardEntries.vue
+++ b/src/components/LeaderboardEntries.vue
@@ -12,6 +12,7 @@ import {Game} from "../models/RecentlyPlayedGames.ts";
 import {Leaderboard} from "../models/GameLeaderboards.ts";
 import {useGamesStore} from "../stores/games.ts";
 import RefreshButton from "./_shared/RefreshButton.vue";
+import BackButton from "./_shared/BackButton.vue";
 
 const router = useRouter();
 const postStore = usePostStore();
@@ -21,10 +22,6 @@ const games = useGamesStore();
 
 const repository = new GameRepository();
 
-function goBack() {
-  router.back();
-}
-
 const props = defineProps({
   id: {
     type: String,
@@ -122,7 +119,7 @@ function isFriend(user: string) {
 
 <template>
   <div class="entries-container">
-    <button class="back-button" @click="goBack"><i class="fa fa-arrow-left" aria-hidden="true"></i> Back</button>
+    <BackButton></BackButton>
     <RefreshButton :loading-state="loadingRefresh" @click="refreshScores"></RefreshButton>
     <h1 class="entries-title">{{ selectedLeaderboard?.Title }}</h1>
     <h2 class="entries-title">{{ selectedGame?.Title }}</h2>
@@ -168,20 +165,6 @@ h2.entries-title {
   text-align: center;
 }
 
-.back-button {
-  background-color: #f5a623;
-  color: #1a1a2e;
-  border: none;
-  padding: 10px 20px;
-  cursor: pointer;
-  font-size: 16px;
-  border-radius: 10px;
-}
-
-.back-button:hover {
-  background-color: #d48821;
-}
-
 .entries-list {
   list-style-type: none;
   padding: 0;
diff --git a/src/components/_shared/BackButton.vue b/src/components/_shared/BackButton.vue
new file mode 100644
index 0000000..2203634
--- /dev/null
+++ b/src/components/_shared/BackButton.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import {useRouter} from "vue-router";
+
+const router = useRouter();
+
+function goBack() {
+  router.back();
+}
+
+</script>
+
+<template>
+  <button class="back-button" @click="goBack"><i class="fa fa-arrow-left" aria-hidden="true"></i> Back</button>
+</template>
+
+<style scoped>
+.back-button {
+  background-color: #f5a623;
+  color: #1a1a2e;
+  border: none;
+  padding: 10px 20px;
+  cursor: pointer;
+  font-size: 16px;
+  border-radius: 10px;
+}
+
+.back-button:hover {
+  background-color: #d48821;
+}
+</style>