Add image upload functionality to profile page

The changes add file upload capabilities to the user profile page, including: - File input control for selecting images - Basic image upload handling infrastructure - Better layout with two-column design - More robust date display The subject line alone captures the key functional change.
2025-08-13 10:57:32 +02:00
parent 523620be06
commit 54dbc4465d
4 changed files with 253 additions and 120 deletions
--- a/app/pages/profile.vue
+++ b/app/pages/profile.vue
@@ -1,21 +1,32 @@
 <template>
    <v-container
-        class="fill-height d-flex flex-column align-center justify-center text-center"
+        class="fill-height d-flex align-center justify-center text-center"
    >
-        <v-avatar color="primary" size="170">
-            <img :src="data.image ? data.image : ''" :alt="data.name" />
-        </v-avatar>
-        <h3 class="mt-10">Último login:</h3>
-        <p>{{ data.last_login }}</p>
-        <h3>Username:</h3>
-        <p>{{ data.username }}</p>
-        <h3>Nombre:</h3>
-        <p>{{ data.name }} {{ data.last_name }}</p>
-        <h3>Correo:</h3>
-        <p>{{ data.email }}</p>
-        <h3>Listas:</h3>
+        <div class="full-height flex-column mr-5">
+            <v-avatar class="ma-10" color="primary" size="170">
+                <img :src="data.image ? data.image : ''" :alt="data.name" />
+            </v-avatar>
+            <v-file-input
+                accept="image/*"
+                label="File input"
+                @click="uploadImage"
+                @input="handleFileInput"
+                type="file"
+            />
+        </div>
+        <div class="full-height flex-column">
+            <h3>Último login:</h3>
+            <p>{{ data?.last_login ? data.last_login : "Nunca" }}</p>
+            <h3>Username:</h3>
+            <p>{{ data.username }}</p>
+            <h3>Nombre:</h3>
+            <p>{{ data.name }} {{ data.last_name }}</p>
+            <h3>Correo:</h3>
+            <p>{{ data.email }}</p>
+            <h3>Listas:</h3>

-        <p>{{ listasStore.listas.length }}</p>
+            <p>{{ listasStore.listas.length }}</p>
+        </div>
    </v-container>
 </template>

@@ -29,6 +40,16 @@ import { useSystemStore } from "~/stores/system";
 import { useListasStore } from "~/stores/listas";
 const listasStore = useListasStore();
 const systemStore = useSystemStore();
+const { handleFileInput, files } = useFileStorage();
+
+const uploadImage = async () => {
+    // TODO Implement image upload logic
+    console.log("files", files.value);
+};
+
+const openImageDialog = () => {
+    // TODO Implement image dialog logic
+};

 onMounted(async () => {
    await listasStore.getData();
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -3,7 +3,10 @@ export default defineNuxtConfig({
  compatibilityDate: "2025-07-15",
  ssr: false,
  devtools: { enabled: false },
-  modules: ["@pinia/nuxt", "@sidebase/nuxt-auth"],
+  modules: ["@pinia/nuxt", "@sidebase/nuxt-auth", "nuxt-file-storage"],
+  fileStorage: {
+    mount: "/home/clonbg/Programar/git/curso_django/listas_rest/media/media",
+  },
  runtimeConfig: {
    baseURL: "http://localhost:3000",
  },
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,12 +9,15 @@
      "dependencies": {
        "@mdi/font": "^7.4.47",
        "@pinia/nuxt": "^0.11.2",
-        "@sidebase/nuxt-auth": "^1.0.1",
+        "@sidebase/nuxt-auth": "^0.6.7",
        "nuxt": "^4.0.1",
        "pinia": "^3.0.3",
        "vue": "^3.5.18",
        "vue-router": "^4.5.1",
        "vuetify": "^3.9.3"
+      },
+      "devDependencies": {
+        "nuxt-file-storage": "^0.3.0"
      }
    },
    "node_modules/@ampproject/remapping": {
@@ -1703,9 +1706,9 @@
      }
    },
    "node_modules/@next/env": {
-      "version": "13.5.11",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-13.5.11.tgz",
-      "integrity": "sha512-fbb2C7HChgM7CemdCY+y3N1n8pcTKdqtQLbC7/EQtPdLvlMUT9JX/dBYl8MMZAtYG4uVMyPFHXckb68q/NRwqg==",
+      "version": "15.4.6",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.4.6.tgz",
+      "integrity": "sha512-yHDKVTcHrZy/8TWhj0B23ylKv5ypocuCwey9ZqPyv4rPdUdRzpGCkSi03t04KBPyU96kxVtUqx6O3nE1kpxASQ==",
      "license": "MIT",
      "peer": true
    },
@@ -3726,26 +3729,22 @@
      ]
    },
    "node_modules/@sidebase/nuxt-auth": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@sidebase/nuxt-auth/-/nuxt-auth-1.0.1.tgz",
-      "integrity": "sha512-mQ40v2VULxhvjr/zif+zH4tuYCN8W6wANuQNxPmyyfQqQJRSmthg9WVLSVg/48wYvNJPEVpa4DudAeLu1ihmcg==",
+      "version": "0.6.7",
+      "resolved": "https://registry.npmjs.org/@sidebase/nuxt-auth/-/nuxt-auth-0.6.7.tgz",
+      "integrity": "sha512-cfCRL0LTtv2Ih8VQSkyLyuYAJwNxYXT7ocAXRF9Ys0Lru0XtCl8gbtZMkbjk4iPDlCJv8QIqXCUM0t5TRUcytA==",
      "license": "MIT",
      "dependencies": {
-        "@nuxt/kit": "^3.17.6",
-        "defu": "^6.1.4",
-        "h3": "^1.15.3",
-        "knitwork": "^1.2.0",
-        "nitropack": "^2.11.13",
+        "@nuxt/kit": "^3.4.2",
+        "@vueuse/core": "^9.13.0",
+        "defu": "^6.1.2",
+        "h3": "^1.6.4",
+        "knitwork": "^1.0.0",
+        "nitropack": "^2.3.2",
        "requrl": "^3.0.2",
-        "scule": "^1.3.0",
-        "ufo": "^1.6.1"
-      },
-      "engines": {
-        "node": ">=20",
-        "pnpm": ">=9.4.0"
+        "ufo": "^1.1.1"
      },
      "peerDependencies": {
-        "next-auth": "~4.21.1"
+        "next-auth": "^4.21.1"
      }
    },
    "node_modules/@sidebase/nuxt-auth/node_modules/@nuxt/kit": {
@@ -3812,13 +3811,13 @@
      "license": "CC0-1.0"
    },
    "node_modules/@swc/helpers": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.2.tgz",
-      "integrity": "sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==",
+      "version": "0.5.15",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
+      "integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==",
      "license": "Apache-2.0",
      "peer": true,
      "dependencies": {
-        "tslib": "^2.4.0"
+        "tslib": "^2.8.0"
      }
    },
    "node_modules/@tybys/wasm-util": {
@@ -3871,6 +3870,12 @@
      "integrity": "sha512-6WaYesThRMCl19iryMYP7/x2OVgCtbIVflDGFpWnb9irXI3UjYE4AzmYuiUKY1AJstGijoY+MgUszMgRxIYTYw==",
      "license": "MIT"
    },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.16",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
+      "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==",
+      "license": "MIT"
+    },
    "node_modules/@types/yauzl": {
      "version": "2.10.3",
      "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz",
@@ -4295,6 +4300,94 @@
      "integrity": "sha512-cZy8Dq+uuIXbxCZpuLd2GJdeSO/lIzIspC2WtkqIpje5QyFbvLaI5wZtdUjLHjGZrlVX6GilejatWwVYYRc8tA==",
      "license": "MIT"
    },
+    "node_modules/@vueuse/core": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.13.0.tgz",
+      "integrity": "sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.16",
+        "@vueuse/metadata": "9.13.0",
+        "@vueuse/shared": "9.13.0",
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.13.0.tgz",
+      "integrity": "sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.13.0.tgz",
+      "integrity": "sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==",
+      "license": "MIT",
+      "dependencies": {
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@whatwg-node/disposablestack": {
      "version": "0.0.6",
      "resolved": "https://registry.npmjs.org/@whatwg-node/disposablestack/-/disposablestack-0.0.6.tgz",
@@ -4798,18 +4891,6 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
-    "node_modules/busboy": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
-      "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
-      "peer": true,
-      "dependencies": {
-        "streamsearch": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=10.16.0"
-      }
-    },
    "node_modules/c12": {
      "version": "3.2.0",
      "resolved": "https://registry.npmjs.org/c12/-/c12-3.2.0.tgz",
@@ -6712,13 +6793,6 @@
        "node": ">= 6"
      }
    },
-    "node_modules/glob-to-regexp": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
-      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
-      "license": "BSD-2-Clause",
-      "peer": true
-    },
    "node_modules/global-directory": {
      "version": "4.0.1",
      "resolved": "https://registry.npmjs.org/global-directory/-/global-directory-4.0.1.tgz",
@@ -8038,63 +8112,69 @@
      }
    },
    "node_modules/next": {
-      "version": "13.5.11",
-      "resolved": "https://registry.npmjs.org/next/-/next-13.5.11.tgz",
-      "integrity": "sha512-WUPJ6WbAX9tdC86kGTu92qkrRdgRqVrY++nwM+shmWQwmyxt4zhZfR59moXSI4N8GDYCBY3lIAqhzjDd4rTC8Q==",
+      "version": "15.4.6",
+      "resolved": "https://registry.npmjs.org/next/-/next-15.4.6.tgz",
+      "integrity": "sha512-us++E/Q80/8+UekzB3SAGs71AlLDsadpFMXVNM/uQ0BMwsh9m3mr0UNQIfjKed8vpWXsASe+Qifrnu1oLIcKEQ==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
-        "@next/env": "13.5.11",
-        "@swc/helpers": "0.5.2",
-        "busboy": "1.6.0",
-        "caniuse-lite": "^1.0.30001406",
+        "@next/env": "15.4.6",
+        "@swc/helpers": "0.5.15",
+        "caniuse-lite": "^1.0.30001579",
        "postcss": "8.4.31",
-        "styled-jsx": "5.1.1",
-        "watchpack": "2.4.0"
+        "styled-jsx": "5.1.6"
      },
      "bin": {
        "next": "dist/bin/next"
      },
      "engines": {
-        "node": ">=16.14.0"
+        "node": "^18.18.0 || ^19.8.0 || >= 20.0.0"
      },
      "optionalDependencies": {
-        "@next/swc-darwin-arm64": "13.5.9",
-        "@next/swc-darwin-x64": "13.5.9",
-        "@next/swc-linux-arm64-gnu": "13.5.9",
-        "@next/swc-linux-arm64-musl": "13.5.9",
-        "@next/swc-linux-x64-gnu": "13.5.9",
-        "@next/swc-linux-x64-musl": "13.5.9",
-        "@next/swc-win32-arm64-msvc": "13.5.9",
-        "@next/swc-win32-ia32-msvc": "13.5.9",
-        "@next/swc-win32-x64-msvc": "13.5.9"
+        "@next/swc-darwin-arm64": "15.4.6",
+        "@next/swc-darwin-x64": "15.4.6",
+        "@next/swc-linux-arm64-gnu": "15.4.6",
+        "@next/swc-linux-arm64-musl": "15.4.6",
+        "@next/swc-linux-x64-gnu": "15.4.6",
+        "@next/swc-linux-x64-musl": "15.4.6",
+        "@next/swc-win32-arm64-msvc": "15.4.6",
+        "@next/swc-win32-x64-msvc": "15.4.6",
+        "sharp": "^0.34.3"
      },
      "peerDependencies": {
        "@opentelemetry/api": "^1.1.0",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
+        "@playwright/test": "^1.51.1",
+        "babel-plugin-react-compiler": "*",
+        "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
+        "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
        "sass": "^1.3.0"
      },
      "peerDependenciesMeta": {
        "@opentelemetry/api": {
          "optional": true
        },
+        "@playwright/test": {
+          "optional": true
+        },
+        "babel-plugin-react-compiler": {
+          "optional": true
+        },
        "sass": {
          "optional": true
        }
      }
    },
    "node_modules/next-auth": {
-      "version": "4.21.1",
-      "resolved": "https://registry.npmjs.org/next-auth/-/next-auth-4.21.1.tgz",
-      "integrity": "sha512-NYkU4jAPSVxWhCblE8dDFAnKM7kOoO/QEobQ0RoEVP9Wox99A3PKHwOAsWhSg8ahJG/iKIWk2Bo1xHvsS4R39Q==",
+      "version": "4.24.11",
+      "resolved": "https://registry.npmjs.org/next-auth/-/next-auth-4.24.11.tgz",
+      "integrity": "sha512-pCFXzIDQX7xmHFs4KVH4luCjaCbuPRtZ9oBUjUhOk84mZ9WVPf94n87TxYI4rSRf9HmfHEF8Yep3JrYDVOo3Cw==",
      "license": "ISC",
      "peer": true,
      "dependencies": {
        "@babel/runtime": "^7.20.13",
        "@panva/hkdf": "^1.0.2",
-        "cookie": "^0.5.0",
-        "jose": "^4.11.4",
+        "cookie": "^0.7.0",
+        "jose": "^4.15.5",
        "oauth": "^0.9.15",
        "openid-client": "^5.4.0",
        "preact": "^10.6.3",
@@ -8102,21 +8182,25 @@
        "uuid": "^8.3.2"
      },
      "peerDependencies": {
-        "next": "^12.2.5 || ^13",
+        "@auth/core": "0.34.2",
+        "next": "^12.2.5 || ^13 || ^14 || ^15",
        "nodemailer": "^6.6.5",
-        "react": "^17.0.2 || ^18",
-        "react-dom": "^17.0.2 || ^18"
+        "react": "^17.0.2 || ^18 || ^19",
+        "react-dom": "^17.0.2 || ^18 || ^19"
      },
      "peerDependenciesMeta": {
+        "@auth/core": {
+          "optional": true
+        },
        "nodemailer": {
          "optional": true
        }
      }
    },
    "node_modules/next-auth/node_modules/cookie": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
-      "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+      "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
      "license": "MIT",
      "peer": true,
      "engines": {
@@ -8564,6 +8648,51 @@
        }
      }
    },
+    "node_modules/nuxt-file-storage": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/nuxt-file-storage/-/nuxt-file-storage-0.3.0.tgz",
+      "integrity": "sha512-5Ey04J0vnNhdeopqIempv2dM9VKvNuCj68qokyJKEno9Dy1MS2lUWNew1djxr2s+5pMm6TLLXzfqku0yLcRtvg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nuxt/kit": "^3.15.4",
+        "defu": "^6.1.4"
+      }
+    },
+    "node_modules/nuxt-file-storage/node_modules/@nuxt/kit": {
+      "version": "3.18.1",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.18.1.tgz",
+      "integrity": "sha512-z6w1Fzv27CIKFlhct05rndkJSfoslplWH5fJ9dtusEvpYScLXp5cATWIbWkte9e9zFSmQTgDQJjNs3geQHE7og==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "c12": "^3.2.0",
+        "consola": "^3.4.2",
+        "defu": "^6.1.4",
+        "destr": "^2.0.5",
+        "errx": "^0.1.0",
+        "exsolve": "^1.0.7",
+        "ignore": "^7.0.5",
+        "jiti": "^2.5.1",
+        "klona": "^2.0.6",
+        "knitwork": "^1.2.0",
+        "mlly": "^1.7.4",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "pkg-types": "^2.2.0",
+        "scule": "^1.3.0",
+        "semver": "^7.7.2",
+        "std-env": "^3.9.0",
+        "tinyglobby": "^0.2.14",
+        "ufo": "^1.6.1",
+        "unctx": "^2.4.1",
+        "unimport": "^5.2.0",
+        "untyped": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
    "node_modules/nypm": {
      "version": "0.6.1",
      "resolved": "https://registry.npmjs.org/nypm/-/nypm-0.6.1.tgz",
@@ -10603,15 +10732,6 @@
      "integrity": "sha512-UGvjygr6F6tpH7o2qyqR6QYpwraIjKSdtzyBdyytFOHmPZY917kwdwLG0RbOjWOnKmnm3PeHjaoLLMie7kPLQw==",
      "license": "MIT"
    },
-    "node_modules/streamsearch": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
-      "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
-      "peer": true,
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
    "node_modules/streamx": {
      "version": "2.22.1",
      "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.22.1.tgz",
@@ -10767,9 +10887,9 @@
      "license": "ISC"
    },
    "node_modules/styled-jsx": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
-      "integrity": "sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==",
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.6.tgz",
+      "integrity": "sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
@@ -10779,7 +10899,7 @@
        "node": ">= 12.0.0"
      },
      "peerDependencies": {
-        "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0"
+        "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0"
      },
      "peerDependenciesMeta": {
        "@babel/core": {
@@ -10993,9 +11113,9 @@
      }
    },
    "node_modules/tmp": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.3.tgz",
-      "integrity": "sha512-nZD7m9iCPC5g0pYmcaxogYKggSfLsdxl8of3Q/oIbqCqLLIO9IAF0GWjX1z9NZRHPiXv8Wex4yDCaZsgEw0Y8w==",
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.5.tgz",
+      "integrity": "sha512-voyz6MApa1rQGUxT3E+BK7/ROe8itEx7vD8/HEvt4xwXucvQ5G5oeEiHkmHZJuBO21RpOf+YYm9MOivj709jow==",
      "license": "MIT",
      "engines": {
        "node": ">=14.14"
@@ -11948,20 +12068,6 @@
        }
      }
    },
-    "node_modules/watchpack": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
-      "integrity": "sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "glob-to-regexp": "^0.4.1",
-        "graceful-fs": "^4.1.2"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
    "node_modules/web-streams-polyfill": {
      "version": "3.3.3",
      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
--- a/package.json
+++ b/package.json
@@ -12,11 +12,14 @@
  "dependencies": {
    "@mdi/font": "^7.4.47",
    "@pinia/nuxt": "^0.11.2",
-    "@sidebase/nuxt-auth": "^1.0.1",
+    "@sidebase/nuxt-auth": "^0.6.7",
    "nuxt": "^4.0.1",
    "pinia": "^3.0.3",
    "vue": "^3.5.18",
    "vue-router": "^4.5.1",
    "vuetify": "^3.9.3"
+  },
+  "devDependencies": {
+    "nuxt-file-storage": "^0.3.0"
  }
 }