protect urls behind permissions

frontend/src/components/common/Game/Card/Base.vue

@@ -3,12 +3,12 @@ import type { SearchRomSchema } from "@/__generated__";
 import ActionBar from "@/components/common/Game/Card/ActionBar.vue";
 import GameCardFlags from "@/components/common/Game/Card/Flags.vue";
 import Sources from "@/components/common/Game/Card/Sources.vue";
+import PlatformIcon from "@/components/common/Platform/Icon.vue";
 import storeCollections from "@/stores/collections";
 import storeDownload from "@/stores/download";
 import storeGalleryView from "@/stores/galleryView";
 import storeRoms from "@/stores/roms";
 import { type SimpleRom } from "@/stores/roms.js";
-import { storeToRefs } from "pinia";
 import { onMounted, ref } from "vue";
 import { useTheme } from "vuetify";
 
@@ -22,6 +22,7 @@ const props = withDefaults(
     pointerOnHover?: boolean;
     titleOnFooter?: boolean;
     showActionBar?: boolean;
+    showPlatformIcon?: boolean;
     showFav?: boolean;
     withBorder?: boolean;
     withBorderRommAccent?: boolean;
@@ -34,6 +35,7 @@ const props = withDefaults(
     pointerOnHover: true,
     titleOnFooter: false,
     showActionBar: false,
+    showPlatformIcon: false,
     showFav: false,
     withBorder: false,
     withBorderRommAccent: false,
@@ -153,7 +155,22 @@ onMounted(() => {
               <slot name="prepend-inner"></slot>
             </v-row>
           </div>
-          <div class="position-absolute append-inner">
+          <div class="position-absolute append-inner-left">
+            <v-btn
+              v-if="romsStore.isSimpleRom(rom) && showPlatformIcon"
+              @click.stop=""
+              class="label-platform translucent-dark"
+              rouded="0"
+              size="small"
+            >
+              <platform-icon
+                :size="25"
+                :key="rom.platform_slug"
+                :slug="rom.platform_slug"
+              />
+            </v-btn>
+          </div>
+          <div class="position-absolute append-inner-right">
             <v-btn
               v-if="
                 romsStore.isSimpleRom(rom) &&
@@ -172,9 +189,7 @@ onMounted(() => {
                 }}
               </v-icon>
             </v-btn>
-            <slot name="append-inner"> </slot>
           </div>
-
           <template #error>
             <v-img
               :src="`/assets/default/cover/big_${theme.global.name.value}_missing_cover.png`"
@@ -238,7 +253,15 @@ onMounted(() => {
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
 }
-.append-inner {
+.append-inner-left {
+  bottom: 0rem;
+  left: 0rem;
+}
+.label-platform {
+  right: 0.2rem;
+  top: 0.1rem;
+}
+.append-inner-right {
   bottom: 0rem;
   right: 0rem;
 }

frontend/src/components/common/Game/Dialog/SearchRom.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import GameCard from "@/components/common/Game/Card/Base.vue";
-import GameCardFlags from "@/components/common/Game/Card/Flags.vue";
 import PlatformIcon from "@/components/common/Platform/Icon.vue";
 import RDialog from "@/components/common/RDialog.vue";
 import romApi from "@/services/api/rom";
@@ -200,20 +199,8 @@ onBeforeUnmount(() => {
             show-flags
             transform-scale
             show-fav
-          >
-            <template #footer>
-              <v-row class="pa-1 align-center" no-gutters>
-                <v-col class="pa-0 ml-1 text-truncate">
-                  <span>{{ rom.name }}</span>
-                </v-col>
-                <platform-icon
-                  :size="20"
-                  :key="rom.platform_slug"
-                  :slug="rom.platform_slug"
-                />
-              </v-row>
-            </template>
-          </game-card>
+            show-platform-icon
+          />
         </v-col>
       </v-row>
     </template>

frontend/src/components/common/RDialog.vue

@@ -33,7 +33,6 @@ withDefaults(
   }
 );
 const emit = defineEmits(["update:modelValue", "close"]);
-const { mdAndDown } = useDisplay();
 const hasToolbarSlot = ref(false);
 const hasPrependSlot = ref(false);
 const hasAppendSlot = ref(false);

frontend/src/plugins/router.ts

@@ -1,6 +1,8 @@
 // Composables
 import { createRouter, createWebHistory } from "vue-router";
 import storeHeartbeat from "@/stores/heartbeat";
+import storeAuth from "@/stores/auth";
+import { storeToRefs } from "pinia";
 
 const routes = [
   {
@@ -77,15 +79,26 @@ const router = createRouter({
   routes,
 });
 
-router.beforeEach((to) => {
+router.beforeEach((to, from) => {
   const heartbeat = storeHeartbeat();
   if (to.name == "setup" && !heartbeat.value.SETUP_WIZARD) {
     router.push({ name: "dashboard" });
   }
-  // TODO: check permission for views. Ex: view user can access to /scan view
 });
 
-router.afterEach(() => {
+router.afterEach((to, from) => {
+  const auth = storeAuth();
+  const { user } = storeToRefs(auth);
+  if (
+    to.name &&
+    user.value &&
+    ((["scan", "management"].includes(to.name.toString()) &&
+      !user.value.oauth_scopes.includes("platforms.write")) ||
+      (["administration"].includes(to.name.toString()) &&
+        !user.value.oauth_scopes.includes("users.write")))
+  ) {
+    router.push(from);
+  }
   // Scroll to top to avoid annoying behaviour in mobile
   window.scrollTo({ top: 0, left: 0 });
 });

frontend/src/views/Gallery/Collection.vue

@@ -1,16 +1,15 @@
 <script setup lang="ts">
 import GalleryAppBarCollection from "@/components/Gallery/AppBar/Collection/Base.vue";
 import FabOverlay from "@/components/Gallery/FabOverlay.vue";
-import EmptyGame from "@/components/common/EmptyGame.vue";
 import EmptyCollection from "@/components/common/EmptyCollection.vue";
+import EmptyGame from "@/components/common/EmptyGame.vue";
 import GameCard from "@/components/common/Game/Card/Base.vue";
-import GameCardFlags from "@/components/common/Game/Card/Flags.vue";
 import GameDataTable from "@/components/common/Game/Table.vue";
 import collectionApi from "@/services/api/collection";
 import romApi from "@/services/api/rom";
+import storeCollections from "@/stores/collections";
 import storeGalleryFilter from "@/stores/galleryFilter";
 import storeGalleryView from "@/stores/galleryView";
-import storeCollections from "@/stores/collections";
 import storeRoms, { type SimpleRom } from "@/stores/roms";
 import type { Events } from "@/types/emitter";
 import { normalizeString, views } from "@/utils";
@@ -288,8 +287,7 @@ onBeforeUnmount(() => {
             @click="onGameClick"
             @touchstart="onGameTouchStart"
             @touchend="onGameTouchEnd"
-          >
-          </game-card>
+          />
         </v-col>
 
         <!-- Gallery list view -->

frontend/src/views/Gallery/Platform.vue

@@ -288,8 +288,7 @@ onBeforeUnmount(() => {
             @click="onGameClick"
             @touchstart="onGameTouchStart"
             @touchend="onGameTouchEnd"
-          >
-          </game-card>
+          />
         </v-col>
 
         <!-- Gallery list view -->