Many fix and improvements

2024-08-03 04:15:55 -04:00
parent 0d94d79c77
commit 78ead7e387
37 changed files with 669 additions and 735 deletions
--- a/src/stores/auth.js
+++ b/src/stores/auth.js
@@ -1,67 +0,0 @@
-import { defineStore } from 'pinia';
-
-const baseUrl = '/api';
-
-export const auth = defineStore({
-    id: 'auth',
-
-    state: () => ({
-        user: "",
-        refreshTokenTimeout: 0
-    }),
-
-    actions: {
-        // TODO: Fix login methods
-
-        async login(client, email, password) {
-            const requestBody = {
-                email: email,
-                password: password
-            };
-            const response = await client.post(`${baseUrl}/users/login`, requestBody)
-            this.user = {
-                accessToken: response.data.accessToken,
-                refreshToken: response.data.refreshToken,
-            }
-            localStorage.setItem('jwt', this.user.accessToken);
-
-            this.startRefreshTokenTimer();
-        },
-
-        async loginGoogle(client, accessToken) {
-            const response = await client.post(`${baseUrl}/google/sign-in`, {accessToken: accessToken})
-            this.user = {
-                accessToken: response.data.accessToken,
-                refreshToken: response.data.refreshToken,
-                email: response.data.email
-            }
-            localStorage.setItem('jwt', this.user.accessToken);
-
-            this.startRefreshTokenTimer();
-        },
-
-        logout() {
-            localStorage.setItem('jwt', '');
-            this.user = null;
-
-            this.stopRefreshTokenTimer();
-        },
-
-        async refreshToken(client) {
-            const response = await client.post(`${baseUrl}/users/refresh`);
-            this.user.accessToken = response.accessToken;
-            localStorage.setItem('jwt', this.user.accessToken);
-
-            this.startRefreshTokenTimer();
-        },
-
-        startRefreshTokenTimer() {
-            const timeout = 50 * 1000;
-            this.refreshTokenTimeout = setTimeout(this.refreshToken, timeout);
-        },
-
-        stopRefreshTokenTimer() {
-            clearTimeout(this.refreshTokenTimeout);
-        }
-    }
-});
--- a/src/stores/authStore.js
+++ b/src/stores/authStore.js
@@ -0,0 +1,84 @@
+import {defineStore} from 'pinia';
+import {computed, ref} from "vue";
+import {useRouter} from "vue-router";
+import {useClient} from "@/plugins/api.js";
+import {useSessionStorage} from "@vueuse/core";
+
+export const useAuthStore = defineStore(
+    'auth',
+    () => {
+        const clientApi = useClient()
+        const router = useRouter()
+        const accessToken = useSessionStorage('auth-accessToken', undefined)
+        const refreshToken = useSessionStorage('auth-refreshToken', undefined)
+        const isAuthenticated = computed(() => !!accessToken.value)
+
+        function updateTokens(data) {
+            accessToken.value = data.accessToken
+            refreshToken.value = data.refreshToken
+        }
+
+        function cleanTokens() {
+            updateTokens({
+                accessToken: undefined,
+                refreshToken: undefined,
+            })
+        }
+
+        function logout() {
+            cleanTokens()
+            router.push('/')
+        }
+
+        async function login(email, password) {
+            try {
+                const response = await clientApi.post(
+                    'api/users/login',
+                    {
+                        email: email,
+                        password: password
+                    })
+                updateTokens(response.data)
+                return true
+            } catch (error) {
+                console.error(error)
+                cleanTokens()
+                return false
+            }
+        }
+
+        async function loginGoogle(accessToken) {
+            try {
+                const response = await clientApi.post(
+                    'api/google/sign-in',
+                    {
+                        accessToken: accessToken
+                    })
+                updateTokens(response.data)
+            } catch (error) {
+                console.error(error)
+                cleanTokens()
+            }
+        }
+
+        async function refresh() {
+            try {
+                const response = await clientApi.post(
+                    'api/users/refresh',
+                    {
+                        refreshToken: refreshToken
+                    });
+
+                updateTokens({
+                    accessToken: response.accessToken,
+                    refreshToken: refreshToken
+                })
+            } catch (error) {
+                console.error(error)
+                cleanTokens()
+            }
+        }
+
+        return {accessToken, refreshToken, isAuthenticated, login, loginGoogle, logout}
+    })
+
--- a/src/stores/sideBarStore.js
+++ b/src/stores/sideBarStore.js
@@ -0,0 +1,23 @@
+import {computed, ref} from 'vue';
+import {defineStore} from "pinia";
+
+export const useSideBarStore = defineStore(
+    'sideBar',
+    () => {
+        const state = ref(false)
+        const visible = computed(() => state.value)
+
+        function toggle() {
+            state.value = !state.value
+        }
+
+        function show() {
+            state.value = true
+        }
+
+        function hide() {
+            state.value = false
+        }
+
+        return {visible, toggle, show, hide}
+    })
--- a/src/stores/user.js
+++ b/src/stores/user.js
@@ -1,73 +0,0 @@
-import { ref } from 'vue'
-import { defineStore } from 'pinia'
-import MyUserModel from "@/models/myUserModel.js";
-
-export const useUserStore = defineStore('user', () => {
-    const user = ref({});
-    const hasChanged = ref(false);
-
-    function getCurrentUser() {
-        return this.user.value;
-    }
-    async function setCurrentUser(client) {
-        try {
-            const myUser = await client.get("/api/GetMyUser");
-            this.user.value = MyUserModel.createFromApiResult(myUser.data);
-            this.hasChanged = false;
-        } catch (e){
-            this.user.value = MyUserModel.getDefaultUser();
-            console.log("User not logged.")
-        }
-    }
-
-    async function updateCurrentUser(client, myUserModel, profilePicture, bannerPicture, websiteIcon) {
-        await client.patch("/api/UpdateMyUser/profile", myUserModel)
-
-        if (typeof myUserModel.storedDataUrls.profilePictureUrl !== "object") {
-            const haveNewProfilePicture = profilePicture !== null && profilePicture.size !== 0;
-            const updateProfilePictureEndpoint = haveNewProfilePicture ? `/api/UpdateMyUser/profile-picture` : `/api/UpdateMyUser/profile-picture?url=${myUserModel.storedDataUrls.profilePictureUrl}`;
-            const response = await client.post(updateProfilePictureEndpoint, profilePicture, {
-                headers: {
-                    'Content-Type': profilePicture?.type ?? "application/octet-stream",
-                }
-            });
-            
-            if (haveNewProfilePicture) {
-                this.user.value.storedDataUrls.profilePictureUrl = response.data;
-            }
-        }
-        if (typeof myUserModel.storedDataUrls.bannerPictureUrl !== "object") {
-            const haveNewBannerPicture = bannerPicture !== null && bannerPicture.size !== 0;
-            
-            const updateBannerPictureEndpoint = haveNewBannerPicture ? `/api/UpdateMyUser/banner-picture` : `/api/UpdateMyUser/banner-picture?url=${myUserModel.storedDataUrls.bannerPictureUrl}`;
-            const response = await client.post(updateBannerPictureEndpoint, bannerPicture, {
-                headers: {
-                    'Content-Type': bannerPicture?.type ?? "octet-stream",
-                }
-            });
-            
-            if (haveNewBannerPicture) {
-                this.user.value.storedDataUrls.bannerPictureUrl = response.data;
-            }
-        }
-        if (typeof myUserModel.storedDataUrls.websiteIconUrl !== "object") {
-            const haveNewWebsiteIcon = websiteIcon !== null && websiteIcon.size !== 0;
-
-            const updateWebsiteIconEndpoint = haveNewWebsiteIcon ? `/api/UpdateMyUser/website-icon` : `/api/UpdateMyUser/website-icon?url=${myUserModel.storedDataUrls.websiteIconUrl}`;
-            const response = await client.post(updateWebsiteIconEndpoint, websiteIcon, {
-                headers: {
-                    'Content-Type': websiteIcon?.type ?? "application/octet-stream",
-                }
-            });
-            
-            if (haveNewWebsiteIcon) {
-                this.user.value.storedDataUrls.websiteIconUrl = response.data;
-            }
-        }
-
-        this.user.value = myUserModel;
-        this.hasChanged = true;
-    }
-
-    return { user, getCurrentUser, setCurrentUser, updateCurrentUser }
-})
--- a/src/stores/userStore.js
+++ b/src/stores/userStore.js
@@ -0,0 +1,77 @@
+import {computed, watch} from 'vue'
+import {defineStore} from 'pinia'
+import {useAuthStore} from "@/stores/authStore.js";
+import {useClient} from "@/plugins/api.js";
+import {useSessionStorage} from "@vueuse/core";
+
+export const useUserStore = defineStore(
+    'user',
+    () => {
+        const authStore = useAuthStore()
+        const authWatcher = watch(
+            () => authStore.isAuthenticated,
+            async (newValue, oldValue) => {
+                if (newValue) {
+                    await fetchCurrentUserProfile()
+                } else {
+                    user.value = undefined
+                    creator.value = undefined
+                }
+            })       
+        
+        const user = useSessionStorage('user-user', {}, {writeDefaults: false})
+        const creator = useSessionStorage('user-creator', {}, {writeDefaults: false})
+
+        const alias = computed(() => {
+            if (user.value) {
+                return user.value.alias || `${user.value.firstName || ''} ${user.value.lastName || ''}`.trim() || 'Anonyme'
+            }
+            return 'Anonyme';
+        })
+        const portraitUrl = computed(() => {
+            return user.value && user.value.portraitUrl
+                ? user.value.portraitUrl
+                : '/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png'
+        })
+
+        async function fetchCurrentUserProfile() {
+            try {
+                const client = useClient()
+                const userResponse = await client.get("/api/GetMyUser");
+                user.value = userResponse.data
+
+                try {
+                    const creatorId = userResponse.data.id
+                    const creatorResponse = await client.get(`/api/creators/${creatorId}`)
+                    creator.value = creatorResponse.data
+                } catch (error) {
+                    creator.value = undefined
+                }
+            } catch (error) {
+                user.value = undefined;
+            }
+        }
+
+        async function updateCurrentUser(userModel, profilePicture) {
+            const client = useClient()
+            await client.patch("/api/UpdateMyUser/profile", userModel)
+
+            if (typeof userModel.storedDataUrls.profilePictureUrl !== "object") {
+                const haveNewProfilePicture = profilePicture !== null && profilePicture.size !== 0;
+                const updateProfilePictureEndpoint = haveNewProfilePicture ? `/api/UpdateMyUser/profile-picture` : `/api/UpdateMyUser/profile-picture?url=${userModel.storedDataUrls.profilePictureUrl}`;
+                const response = await client.post(updateProfilePictureEndpoint, profilePicture, {
+                    headers: {
+                        'Content-Type': profilePicture?.type ?? "application/octet-stream",
+                    }
+                });
+
+                if (haveNewProfilePicture) {
+                    this.user.value.portraitUrl = response.data;
+                }
+            }
+
+            this.user.value = userModel;
+        }
+
+        return {user, creator, alias, portraitUrl}
+    })