Fixed URLs guards for calendar page

2024-05-06 16:56:29 +02:00
parent fe8966cd9a
commit 521b3530a3
8 changed files with 198 additions and 36 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -28,3 +28,5 @@ coverage
 *.sw?

 *.tsbuildinfo
+
+.env
--- a/index.html
+++ b/index.html
@@ -11,6 +11,8 @@

    <meta name="robots" content="noindex, nofollow">

+    <title>Outils — TTTools</title>
+
    <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,17 +1,19 @@
 {
-  "name": "vue-project",
-  "version": "0.0.0",
+  "name": "leim-tool",
+  "version": "0.1.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
-      "name": "vue-project",
-      "version": "0.0.0",
+      "name": "leim-tool",
+      "version": "0.1.0",
      "dependencies": {
        "@phosphor-icons/vue": "^2.2.1",
+        "@supabase/supabase-js": "^2.43.1",
        "@vueuse/core": "^10.9.0",
        "class-variance-authority": "^0.7.0",
        "clsx": "^2.1.0",
+        "jwt-decode": "^4.0.0",
        "lucide-vue-next": "^0.364.0",
        "pinia": "^2.1.7",
        "radix-vue": "^1.6.1",
@@ -1143,6 +1145,73 @@
      "integrity": "sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==",
      "dev": true
    },
+    "node_modules/@supabase/auth-js": {
+      "version": "2.64.2",
+      "resolved": "https://registry.npmjs.org/@supabase/auth-js/-/auth-js-2.64.2.tgz",
+      "integrity": "sha512-s+lkHEdGiczDrzXJ1YWt2y3bxRi+qIUnXcgkpLSrId7yjBeaXBFygNjTaoZLG02KNcYwbuZ9qkEIqmj2hF7svw==",
+      "dependencies": {
+        "@supabase/node-fetch": "^2.6.14"
+      }
+    },
+    "node_modules/@supabase/functions-js": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-2.3.1.tgz",
+      "integrity": "sha512-QyzNle/rVzlOi4BbVqxLSH828VdGY1RElqGFAj+XeVypj6+PVtMlD21G8SDnsPQDtlqqTtoGRgdMlQZih5hTuw==",
+      "dependencies": {
+        "@supabase/node-fetch": "^2.6.14"
+      }
+    },
+    "node_modules/@supabase/node-fetch": {
+      "version": "2.6.15",
+      "resolved": "https://registry.npmjs.org/@supabase/node-fetch/-/node-fetch-2.6.15.tgz",
+      "integrity": "sha512-1ibVeYUacxWYi9i0cf5efil6adJ9WRyZBLivgjs+AUpewx1F3xPi7gLgaASI2SmIQxPoCEjAsLAzKPgMJVgOUQ==",
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      }
+    },
+    "node_modules/@supabase/postgrest-js": {
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-1.15.2.tgz",
+      "integrity": "sha512-9/7pUmXExvGuEK1yZhVYXPZnLEkDTwxgMQHXLrN5BwPZZm4iUCL1YEyep/Z2lIZah8d8M433mVAUEGsihUj5KQ==",
+      "dependencies": {
+        "@supabase/node-fetch": "^2.6.14"
+      }
+    },
+    "node_modules/@supabase/realtime-js": {
+      "version": "2.9.5",
+      "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.9.5.tgz",
+      "integrity": "sha512-TEHlGwNGGmKPdeMtca1lFTYCedrhTAv3nZVoSjrKQ+wkMmaERuCe57zkC5KSWFzLYkb5FVHW8Hrr+PX1DDwplQ==",
+      "dependencies": {
+        "@supabase/node-fetch": "^2.6.14",
+        "@types/phoenix": "^1.5.4",
+        "@types/ws": "^8.5.10",
+        "ws": "^8.14.2"
+      }
+    },
+    "node_modules/@supabase/storage-js": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.5.5.tgz",
+      "integrity": "sha512-OpLoDRjFwClwc2cjTJZG8XviTiQH4Ik8sCiMK5v7et0MDu2QlXjCAW3ljxJB5+z/KazdMOTnySi+hysxWUPu3w==",
+      "dependencies": {
+        "@supabase/node-fetch": "^2.6.14"
+      }
+    },
+    "node_modules/@supabase/supabase-js": {
+      "version": "2.43.1",
+      "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.43.1.tgz",
+      "integrity": "sha512-A+RV50mWNtyKo6M0u4G6AOqEifQD+MoOjZcpRkPMPpEAFgMsc2dt3kBlBlR/MgZizWQgUKhsvrwKk0efc8g6Ug==",
+      "dependencies": {
+        "@supabase/auth-js": "2.64.2",
+        "@supabase/functions-js": "2.3.1",
+        "@supabase/node-fetch": "2.6.15",
+        "@supabase/postgrest-js": "1.15.2",
+        "@supabase/realtime-js": "2.9.5",
+        "@supabase/storage-js": "2.5.5"
+      }
+    },
    "node_modules/@swc/helpers": {
      "version": "0.5.8",
      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.8.tgz",
@@ -1173,11 +1242,15 @@
      "version": "20.12.2",
      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.2.tgz",
      "integrity": "sha512-zQ0NYO87hyN6Xrclcqp7f8ZbXNbRfoGWNcMvHTPQp9UUrwI0mI7XBz+cu7/W6/VClYo2g63B0cjull/srU7LgQ==",
-      "dev": true,
      "dependencies": {
        "undici-types": "~5.26.4"
      }
    },
+    "node_modules/@types/phoenix": {
+      "version": "1.6.4",
+      "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.6.4.tgz",
+      "integrity": "sha512-B34A7uot1Cv0XtaHRYDATltAdKx0BvVKNgYNqE4WjtPUa4VQJM7kxeXcVKaH+KS+kCmZ+6w+QaUdcljiheiBJA=="
+    },
    "node_modules/@types/semver": {
      "version": "7.5.8",
      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.8.tgz",
@@ -1201,6 +1274,14 @@
      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
    },
+    "node_modules/@types/ws": {
+      "version": "8.5.10",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.10.tgz",
+      "integrity": "sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
    "node_modules/@types/yauzl": {
      "version": "2.10.3",
      "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz",
@@ -4029,6 +4110,14 @@
        "verror": "1.10.0"
      }
    },
+    "node_modules/jwt-decode": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
+      "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
+      "engines": {
+        "node": ">=18"
+      }
+    },
    "node_modules/keyv": {
      "version": "4.5.4",
      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -5862,6 +5951,11 @@
        "node": ">= 4.0.0"
      }
    },
+    "node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
+    },
    "node_modules/ts-api-utils": {
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
@@ -5942,8 +6036,7 @@
    "node_modules/undici-types": {
      "version": "5.26.5",
      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
-      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
-      "dev": true
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="
    },
    "node_modules/universalify": {
      "version": "2.0.1",
@@ -6199,6 +6292,20 @@
        "node": ">=12.0.0"
      }
    },
+    "node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
+    },
+    "node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
    "node_modules/which": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -6253,6 +6360,26 @@
      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
      "dev": true
    },
+    "node_modules/ws": {
+      "version": "8.17.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.0.tgz",
+      "integrity": "sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/xml-name-validator": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
--- a/package.json
+++ b/package.json
@@ -18,10 +18,12 @@
  },
  "dependencies": {
    "@phosphor-icons/vue": "^2.2.1",
-    "lucide-vue-next": "^0.364.0",
+    "@supabase/supabase-js": "^2.43.1",
    "@vueuse/core": "^10.9.0",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
+    "jwt-decode": "^4.0.0",
+    "lucide-vue-next": "^0.364.0",
    "pinia": "^2.1.7",
    "radix-vue": "^1.6.1",
    "tailwind-merge": "^2.2.2",
--- a/src/stores/CalendarStore.ts
+++ b/src/stores/CalendarStore.ts
@@ -7,7 +7,6 @@ import {
  type LeimPeriod,
  type LeimPeriodShort
 } from '@/models/Date'
-import { isDigit, isInt, isSignedInt } from '@/utils/Regex'
 import { useStorage, useUrlSearchParams } from '@vueuse/core'
 import { defineStore } from 'pinia'
 import { computed, ref, type ComputedRef, type Ref } from 'vue'
@@ -76,11 +75,6 @@ export const useCalendar = defineStore('calendar', () => {
    'century'
  ])

-  // Get date from URL params
-  const params = useUrlSearchParams('history', {
-    write: true
-  })
-
  // Default date settings (current day in the world)
  const defaultDay: number = 23
  const defaultMonth: number = 8
@@ -93,6 +87,16 @@ export const useCalendar = defineStore('calendar', () => {
    }
  })

+  // Get date from URL params
+  const params = useUrlSearchParams('history', {
+    write: false,
+    initialValue: {
+      day: defaultDate.value.day.toString(),
+      month: defaultDate.value.month.toString(),
+      year: defaultDate.value.year.toString()
+    }
+  })
+
  const currentDay = computed<number>(() => {
    return Number(params.day)
  })
@@ -180,19 +184,6 @@ export const useCalendar = defineStore('calendar', () => {
    }
  })

-  function validateUrlParams(): void {
-    // Assign default values if no params exist in URL
-    if (!params.day || typeof params.day === 'object' || !isInt(params.day)) {
-      params.day = defaultDate.value.day.toString()
-    }
-    if (!params.month || typeof params.month === 'object' || !isDigit(params.month)) {
-      params.month = defaultDate.value.month.toString()
-    }
-    if (!params.year || typeof params.year === 'object' || !isSignedInt(params.year)) {
-      params.year = defaultDate.value.year.toString()
-    }
-  }
-
  /**
   * Moves the current date forward one month
   */
@@ -404,7 +395,6 @@ export const useCalendar = defineStore('calendar', () => {
    selectedDate,
    selectDate,
    params,
-    validateUrlParams,
    getPeriodOfYear,
    incrementMonth,
    decrementMonth,
--- a/src/utils/meta.ts
+++ b/src/utils/meta.ts
--- a/src/views/CalendarPage.vue
+++ b/src/views/CalendarPage.vue
@@ -1,20 +1,59 @@
 <script lang="ts" setup>
 import { storeToRefs } from 'pinia'
-import { onMounted } from 'vue'
 import { useCalendar } from '@/stores/CalendarStore'
 import { useTitle } from '@vueuse/core'
-import { titleTemplate } from './meta'
+import { titleTemplate } from '@/utils/meta'

 import Calendar from '@/components/calendar/Calendar.vue'
 import Sidebar from '@/components/calendar/Sidebar.vue'
 import CalendarSearch from '@/components/calendar/search/CalendarSearch.vue'
-
-const { validateUrlParams } = useCalendar()
-const { isAdvancedSearchOpen } = storeToRefs(useCalendar())
-
-onMounted(() => validateUrlParams())
+import { useRoute, useRouter } from 'vue-router'
+import { isDigit, isInt, isSignedInt } from '@/utils/Regex'
+import { onBeforeMount } from 'vue'

 useTitle('Calendrier', titleTemplate)
+
+const router = useRouter()
+const route = useRoute()
+const { defaultDate, selectedDate, jumpToDate } = useCalendar()
+const { isAdvancedSearchOpen } = storeToRefs(useCalendar())
+
+// Check whether all the params are good to go before rendering anything
+onBeforeMount(() => {
+  let isInvalid: boolean = false
+
+  // If the user already has a selected date from session, jump to it
+  if (selectedDate) {
+    jumpToDate(selectedDate)
+  } else {
+    // Assign default values if no params exist in URL
+    if (!route.query.day || typeof route.query.day === 'object' || !isInt(route.query.day)) {
+      route.query.day = defaultDate.day.toString()
+      isInvalid = true
+    }
+    if (
+      !route.query.month ||
+      typeof route.query.month === 'object' ||
+      !isDigit(route.query.month)
+    ) {
+      route.query.month = defaultDate.month.toString()
+      isInvalid = true
+    }
+    if (
+      !route.query.year ||
+      typeof route.query.year === 'object' ||
+      !isSignedInt(route.query.year)
+    ) {
+      route.query.year = defaultDate.year.toString()
+      isInvalid = true
+    }
+
+    if (isInvalid) {
+      console.log('replaced')
+      router.replace({ query: route.query, replace: true })
+    }
+  }
+})
 </script>

 <template>
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useTitle } from '@vueuse/core'
-import { titleTemplate } from './meta'
+import { titleTemplate } from '@/utils/meta'

 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'