Replacing the security store made with vuex in favor of the security store made with pinia (#5328)

assets/vue/App.vue

@@ -42,7 +42,6 @@ import { computed, onMounted, onUpdated, provide, ref, watch, watchEffect } from
 import { useRoute, useRouter } from "vue-router"
 import { DefaultApolloClient } from "@vue/apollo-composable"
 import { ApolloClient, createHttpLink, InMemoryCache } from "@apollo/client/core"
-import { useStore } from "vuex"
 import axios from "axios"
 import { capitalize, isEmpty } from "lodash"
 import ConfirmDialog from "primevue/confirmdialog"
@@ -130,23 +129,12 @@ watchEffect(async () => {
   }
 })
 
-const user = ref({})
-
-let isAuthenticated = false
-
-if (!isEmpty(window.user)) {
-  user.value = window.user
-  isAuthenticated = true
-}
-
-const store = useStore()
 const securityStore = useSecurityStore()
 const notification = useNotification()
 
-const payload = { isAuthenticated, user }
-
-store.dispatch("security/onRefresh", payload)
-securityStore.user = window.user
+if (!isEmpty(window.user)) {
+  securityStore.user = window.user
+}
 
 onUpdated(() => {
   const app = document.getElementById("app")

assets/vue/api/security.js

@@ -1,15 +0,0 @@
-import axios from "axios"
-
-export default {
-  login({ login, password, _remember_me, token }) {
-    return axios.post("/login_json", {
-      username: login,
-      password,
-      _remember_me,
-      csrf_token: token,
-    })
-  },
-  logout() {
-    return axios.get("/logout")
-  },
-}

assets/vue/components/Login.vue

@@ -70,8 +70,7 @@
 </template>
 
 <script setup>
-import { useStore } from "vuex"
-import { computed, ref } from "vue"
+import { ref } from "vue"
 import Button from "primevue/button"
 import InputText from "primevue/inputtext"
 import Password from "primevue/password"
@@ -79,17 +78,14 @@ import InputSwitch from "primevue/inputswitch"
 import { useI18n } from "vue-i18n"
 import { useLogin } from "../composables/auth/login"
 
-const store = useStore()
 const { t } = useI18n()
 
-const { redirectNotAuthenticated, performLogin } = useLogin()
+const { redirectNotAuthenticated, performLogin, isLoading } = useLogin()
 
 const login = ref("")
 const password = ref("")
 const remember = ref(false)
 
-const isLoading = computed(() => store.getters["security/isLoading"])
-
 redirectNotAuthenticated()
 
 function onSubmitLoginForm() {

assets/vue/components/StudentViewButton.vue

@@ -13,7 +13,6 @@
 import BaseToggleButton from "./basecomponents/BaseToggleButton.vue"
 import { computed } from "vue"
 import { useI18n } from "vue-i18n"
-import { useStore } from "vuex"
 import { usePlatformConfig } from "../store/platformConfig"
 import { storeToRefs } from "pinia"
 import { useCidReqStore } from "../store/cidReq"
@@ -22,7 +21,6 @@ import permissionService from "../services/permissionService"
 
 const emit = defineEmits(["change"])
 
-const store = useStore()
 const { t } = useI18n()
 const platformConfigStore = usePlatformConfig()
 const cidReqStore = useCidReqStore()
@@ -41,17 +39,13 @@ const isStudentView = computed({
   },
 })
 
-const isCourseAdmin = computed(() => store.getters["security/isCourseAdmin"])
-const isAdmin = computed(() => store.getters["security/isAdmin"])
 const { course, userIsCoach } = storeToRefs(cidReqStore)
 
-const user = computed(() => store.getters["security/getUser"])
-
 const showButton = computed(() => {
   return (
     securityStore.isAuthenticated &&
     course.value &&
-    (isCourseAdmin.value || isAdmin.value || userIsCoach.value(user.value.id, 0, false)) &&
+    (securityStore.isCourseAdmin || securityStore.isAdmin || userIsCoach.value(securityStore.user.id, 0, false)) &&
     "true" === platformConfigStore.getSetting("course.student_view_enabled")
   )
 })

assets/vue/components/basecomponents/BaseTinyEditor.vue

@@ -29,7 +29,8 @@ import TinyEditor from "../../components/Editor"
 import { useRoute, useRouter } from "vue-router"
 import { useCidReqStore } from "../../store/cidReq"
 import { storeToRefs } from "pinia"
-import { useStore } from "vuex"
+import { useSecurityStore } from "../../store/securityStore"
+
 import { TINYEDITOR_MODE_DOCUMENTS, TINYEDITOR_MODE_PERSONAL_FILES, TINYEDITOR_MODES } from "./TinyEditorOptions"
 
 //import contentUiCss from "css-loader!tinymce/skins/ui/oxide/content.css"
@@ -84,11 +85,10 @@ const router = useRouter()
 const route = useRoute()
 const parentResourceNodeId = ref(0)
 
-const store = useStore()
-const user = computed(() => store.getters["security/getUser"])
+const securityStore = useSecurityStore()
 
 // Set the parent node ID based on the user's resource node ID or route parameter
-parentResourceNodeId.value = user.value.resourceNode["id"]
+parentResourceNodeId.value = securityStore.user.resourceNode["id"]
 if (route.params.node) {
   parentResourceNodeId.value = Number(route.params.node)
 }

assets/vue/components/social/SocialWallComment.vue

@@ -1,8 +1,11 @@
 <template>
   <q-item>
-    <q-item-section avatar top>
+    <q-item-section
+      avatar
+      top
+    >
       <q-avatar>
-        <img :src="comment.sender.illustrationUrl">
+        <img :src="comment.sender.illustrationUrl" />
       </q-avatar>
     </q-item-section>
 
@@ -19,7 +22,10 @@
       </q-item-label>
     </q-item-section>
 
-    <q-item-section side top>
+    <q-item-section
+      side
+      top
+    >
       <WallActions
         :is-owner="isOwner"
         :social-post="comment"
@@ -30,27 +36,26 @@
 </template>
 
 <script setup>
-import {useStore} from "vuex"
-import {computed} from "vue"
+import { computed } from "vue"
 import WallActions from "./Actions"
 import { useFormatDate } from "../../composables/formatDate"
+import { useSecurityStore } from "../../store/securityStore"
 
 const { abbreviatedDatetime, relativeDatetime } = useFormatDate()
 
 const props = defineProps({
   comment: {
     type: Object,
-    required: true
-  }
+    required: true,
+  },
 })
 
-const emit = defineEmits(['comment-deleted'])
+const emit = defineEmits(["comment-deleted"])
 
-const store = useStore()
-const currentUser = store.getters['security/getUser']
-const isOwner = computed(() =>  currentUser['@id'] === props.comment.sender['@id'])
+const securityStore = useSecurityStore()
+const isOwner = computed(() => securityStore.user["@id"] === props.comment.sender["@id"])
 
 function onCommentDeleted(event) {
-  emit('comment-deleted', event)
+  emit("comment-deleted", event)
 }
 </script>

assets/vue/components/social/SocialWallCommentForm.vue

@@ -21,15 +21,15 @@
 
 <script setup>
 import { ref } from "vue"
-import { useStore } from "vuex"
 import axios from "axios"
 import { ENTRYPOINT } from "../../config/entrypoint"
 import { SOCIAL_TYPE_WALL_COMMENT } from "./constants"
 import BaseInputText from "../basecomponents/BaseInputText.vue"
 import { useI18n } from "vue-i18n"
 import BaseButton from "../basecomponents/BaseButton.vue"
+import { useSecurityStore } from "../../store/securityStore"
 
-const store = useStore()
+const securityStore = useSecurityStore()
 const { t } = useI18n()
 
 const props = defineProps({
@@ -41,7 +41,6 @@ const props = defineProps({
 
 const emit = defineEmits(["comment-posted"])
 
-const currentUser = store.getters["security/getUser"]
 const comment = ref("")
 const error = ref("")
 const isLoading = ref(false)
@@ -57,7 +56,7 @@ function sendComment() {
     .post(ENTRYPOINT + "social_posts", {
       content: comment.value,
       type: SOCIAL_TYPE_WALL_COMMENT,
-      sender: currentUser["@id"],
+      sender: securityStore.user["@id"],
       parent: props.post["@id"],
     })
     .then((response) => {

assets/vue/components/social/SocialWallPostForm.vue

@@ -60,17 +60,17 @@ import BaseCheckbox from "../basecomponents/BaseCheckbox.vue"
 import BaseInputTextWithVuelidate from "../basecomponents/BaseInputTextWithVuelidate.vue"
 import axios from "axios"
 import { useRoute } from "vue-router"
+import { useSecurityStore } from "../../store/securityStore"
 
 const emit = defineEmits(["post-created"])
 const store = useStore()
+const securityStore = useSecurityStore()
 const { t } = useI18n()
 const route = useRoute()
 const isPromotedPage = computed(() => {
   return route.query.filterType === "promoted"
 })
 const user = inject("social-user")
-const currentUser = store.getters["security/getUser"]
-const userIsAdmin = store.getters["security/isAdmin"]
 const selectedFile = ref(null)
 const postState = reactive({
   content: "",
@@ -112,7 +112,7 @@ onMounted(() => {
 
 function showTextPlaceholder() {
   postState.textPlaceholder =
-    currentUser["@id"] === user.value["@id"]
+    securityStore.user["@id"] === user.value["@id"]
       ? t("What are you thinking about?")
       : t("Write something to {0}", [user.value.fullName])
 }
@@ -120,7 +120,7 @@ function showTextPlaceholder() {
 const allowCreatePromoted = ref(false)
 
 function showCheckboxPromoted() {
-  allowCreatePromoted.value = userIsAdmin && currentUser["@id"] === user.value["@id"]
+  allowCreatePromoted.value = securityStore.isAdmin && securityStore.user["@id"] === user.value["@id"]
 }
 
 async function sendPost() {
@@ -141,8 +141,8 @@ async function sendPost() {
     await store.dispatch("socialpost/create", {
       content: postState.content,
       type: postState.isPromoted ? SOCIAL_TYPE_PROMOTED_MESSAGE : SOCIAL_TYPE_WALL_POST,
-      sender: currentUser["@id"],
-      userReceiver: currentUser["@id"] === user.value["@id"] ? null : user.value["@id"],
+      sender: securityStore.user["@id"],
+      userReceiver: securityStore.user["@id"] === user.value["@id"] ? null : user.value["@id"],
     })
     if (selectedFile.value) {
       const formData = new FormData()

assets/vue/components/userreluser/UserRelUserRequestsList.vue

@@ -70,7 +70,7 @@ import BaseButton from "../basecomponents/BaseButton.vue"
 import Skeleton from "primevue/skeleton"
 import BaseUserAvatar from "../basecomponents/BaseUserAvatar.vue"
 import { ref } from "vue"
-import { useStore } from "vuex"
+import { useSecurityStore } from "../../store/securityStore"
 import userRelUserService from "../../services/userreluser"
 import { useNotification } from "../../composables/notification"
 import axios from "axios"
@@ -80,20 +80,18 @@ const emit = defineEmits(["accept-friend"])
 
 const { t } = useI18n()
 
-const store = useStore()
+const securityStore = useSecurityStore()
 const notification = useNotification()
 
-const user = store.getters["security/getUser"]
-
 const friendRequests = ref([])
 const waitingRequests = ref([])
 
 const friendRequestFilter = {
-  friend: user.id,
+  friend: securityStore.user.id,
   relationType: 10, // friend request
 }
 const waitingFilter = {
-  user: user.id,
+  user: securityStore.user.id,
   relationType: 10,
 }
 

assets/vue/composables/auth/login.js

@@ -1,7 +1,8 @@
 import { usePlatformConfig } from "../../store/platformConfig"
 import { useRoute, useRouter } from "vue-router"
-import { useStore } from "vuex"
 import { useSecurityStore } from "../../store/securityStore"
+import { ref } from "vue"
+import securityService from "../../services/securityService"
 
 function isValidHttpUrl(string) {
   let url
@@ -18,40 +19,43 @@ function isValidHttpUrl(string) {
 export function useLogin() {
   const route = useRoute()
   const router = useRouter()
-  const store = useStore()
   const securityStore = useSecurityStore()
+  const platformConfigurationStore = usePlatformConfig()
+
+  const isLoading = ref(false)
 
   async function performLogin(payload) {
-    const responseData = await store.dispatch("security/login", payload)
+    isLoading.value = true
 
-    if (store.getters["security/hasError"]) {
-      return
-    }
+    try {
+      const responseData = await securityService.login(payload)
 
-    if (route.query.redirect) {
-      // Check if 'redirect' is an absolute URL
-      if (isValidHttpUrl(route.query.redirect.toString())) {
-        // If it's an absolute URL, redirect directly
-        window.location.href = route.query.redirect.toString()
+      if (route.query.redirect) {
+        // Check if 'redirect' is an absolute URL
+        if (isValidHttpUrl(route.query.redirect.toString())) {
+          // If it's an absolute URL, redirect directly
+          window.location.href = route.query.redirect.toString()
+
+          return
+        }
+      } else if (responseData.load_terms) {
+        window.location.href = responseData.redirect
 
         return
       }
 
       securityStore.user = responseData
 
-      const platformConfigurationStore = usePlatformConfig()
       await platformConfigurationStore.initialize()
 
-      // If 'redirect' is a relative path, use 'router.push' to navigate
-      await router.push({ path: route.query.redirect.toString() })
-
-      return
-    }
-
-    if (responseData.load_terms) {
-      window.location.href = responseData.redirect
-    } else {
-      window.location.href = "/home"
+      if (route.query.redirect) {
+        // If 'redirect' is a relative path, use 'router.push' to navigate
+        await router.replace({ path: route.query.redirect.toString() })
+      } else {
+        await router.replace({ name: "Home" })
+      }
+    } finally {
+      isLoading.value = false
     }
   }
 
@@ -68,6 +72,7 @@ export function useLogin() {
   }
 
   return {
+    isLoading,
     performLogin,
     redirectNotAuthenticated,
   }

assets/vue/composables/useSocialInfo.js

@@ -2,9 +2,11 @@ import { onMounted, readonly, ref } from "vue"
 import { useStore } from "vuex"
 import { useRoute } from "vue-router"
 import axios from "axios"
+import { useSecurityStore } from "../store/securityStore"
 
 export function useSocialInfo() {
   const store = useStore()
+  const securityStore = useSecurityStore()
   const route = useRoute()
   const user = ref({})
   const isCurrentUser = ref(true)
@@ -44,7 +46,7 @@ export function useSocialInfo() {
         user.value = await store.dispatch("user/load", "/api/users/" + route.query.id)
         isCurrentUser.value = false
       } else {
-        user.value = store.getters["security/getUser"]
+        user.value = securityStore.user
         isCurrentUser.value = true
       }
     } catch (e) {

assets/vue/pages/Home.vue

@@ -18,6 +18,6 @@ const platformConfigStore = usePlatformConfig();
 
 const redirectValue = platformConfigStore.getSetting("platform.redirect_index_to_url_for_logged_users");
 if (typeof redirectValue === 'string' && redirectValue.trim() !== '') {
-  router.push(`/${redirectValue}`);
+  router.replace(`/${redirectValue}`);
 }
 </script>

assets/vue/router/index.js

@@ -19,7 +19,7 @@ import documents from "./documents"
 import assignments from "./assignments"
 import links from "./links"
 import glossary from "./glossary"
-import store from "../store"
+import { useSecurityStore } from "../store/securityStore"
 import MyCourseList from "../views/user/courses/List.vue"
 import MySessionList from "../views/user/sessions/SessionsCurrent.vue"
 import MySessionListPast from "../views/user/sessions/SessionsPast.vue"
@@ -167,10 +167,12 @@ const router = createRouter({
 
 router.beforeEach((to, from, next) => {
   if (to.matched.some((record) => record.meta.requiresAuth)) {
+    const securityStore = useSecurityStore()
+
     //console.log('requiresAuth');
     // this route requires auth, check if logged in
     // if it is not, redirect to login page.
-    if (store.getters["security/isAuthenticated"]) {
+    if (securityStore.isAuthenticated) {
       next()
     } else {
       next({

assets/vue/services/securityService.js

@@ -0,0 +1,19 @@
+import baseService from "./baseService"
+
+/**
+ * @param {string} login
+ * @param {string} password
+ * @param {boolean} _remember_me
+ * @returns {Promise<Object>}
+ */
+async function login({ login, password, _remember_me }) {
+  return await baseService.post("/login_json", {
+    username: login,
+    password,
+    _remember_me,
+  })
+}
+
+export default {
+  login,
+}

assets/vue/store/security.js

@@ -1,11 +1,3 @@
-import SecurityAPI from "../api/security"
-
-const AUTHENTICATING = "AUTHENTICATING",
-  AUTHENTICATING_SUCCESS = "AUTHENTICATING_SUCCESS",
-  AUTHENTICATING_ERROR = "AUTHENTICATING_ERROR",
-  AUTHENTICATING_LOGOUT = "AUTHENTICATING_LOGOUT",
-  PROVIDING_DATA_ON_REFRESH_SUCCESS = "PROVIDING_DATA_ON_REFRESH_SUCCESS"
-
 export default {
   namespaced: true,
   state: {
@@ -18,9 +10,6 @@ export default {
     isLoading(state) {
       return state.isLoading
     },
-    hasError(state) {
-      return state.error !== null
-    },
     error(state) {
       return state.error
     },
@@ -71,65 +60,5 @@ export default {
       }
     },
   },
-  mutations: {
-    [AUTHENTICATING](state) {
-      state.isLoading = true
-      state.error = null
-      state.isAuthenticated = false
-      state.user = null
-    },
-    [AUTHENTICATING_SUCCESS](state, user) {
-      state.isLoading = true
-      state.error = null
-      state.isAuthenticated = true
-      state.user = user
-    },
-    [AUTHENTICATING_ERROR](state, error) {
-      state.isLoading = false
-      state.error = error
-      state.isAuthenticated = false
-      state.user = null
-    },
-    [AUTHENTICATING_LOGOUT](state, error) {
-      console.log("AUTHENTICATING_LOGOUT")
-      state.isLoading = false
-      state.error = error
-      state.isAuthenticated = false
-      state.user = null
-    },
-    [PROVIDING_DATA_ON_REFRESH_SUCCESS](state, payload) {
-      state.isLoading = false
-      state.error = null
-      state.isAuthenticated = payload.isAuthenticated
-      state.user = payload.user
-    },
-  },
-  actions: {
-    async login({ commit }, payload) {
-      commit(AUTHENTICATING)
-      try {
-        const response = await SecurityAPI.login(payload)
-        commit(AUTHENTICATING_SUCCESS, response.data)
-        return response.data
-      } catch (error) {
-        commit(AUTHENTICATING_ERROR, error)
-        throw error
-      }
-    },
-
-    async logout({ commit }) {
-      console.log("logout store/security")
-      await SecurityAPI.logout()
-        .then((response) => {
-          commit(AUTHENTICATING_LOGOUT)
-          return response.data
-        })
-        .catch((error) => {
-          commit(AUTHENTICATING_ERROR, error)
-        })
-    },
-    onRefresh({ commit }, payload) {
-      commit(PROVIDING_DATA_ON_REFRESH_SUCCESS, payload)
-    },
-  },
+  actions: {},
 }

assets/vue/views/ccalendarevent/CCalendarEventList.vue

@@ -148,8 +148,10 @@ import CalendarSectionHeader from "../../components/ccalendarevent/CalendarSecti
 import { useCalendarActionButtons } from "../../composables/calendar/calendarActionButtons"
 import { useCalendarEvent } from "../../composables/calendar/calendarEvent"
 import resourceLinkService from "../../services/resourceLinkService"
+import { useSecurityStore } from "../../store/securityStore"
 
 const store = useStore()
+const securityStore = useSecurityStore()
 const confirm = useConfirm()
 const cidReqStore = useCidReqStore()
 
@@ -168,7 +170,6 @@ const allowToEdit = ref(false)
 const allowToSubscribe = ref(false)
 const allowToUnsubscribe = ref(false)
 
-const currentUser = computed(() => store.getters["security/getUser"])
 const { t } = useI18n()
 const { appLocale } = useLocale()
 const route = useRoute()
@@ -230,7 +231,7 @@ const calendarLocale = allLocales.find(
 
 const showAddEventDialog = () => {
   item.value = {}
-  item.value["parentResourceNode"] = currentUser.value.resourceNode["id"]
+  item.value["parentResourceNode"] = securityStore.user.resourceNode["id"]
 
   dialog.value = true
 }
@@ -277,9 +278,9 @@ const calendarOptions = ref({
     item.value["endDate"] = event.end
     item.value["parentResourceNodeId"] = event.extendedProps.resourceNode.creator.id
 
-    allowToEdit.value = isEditableByUser(item.value, currentUser.value.id)
+    allowToEdit.value = isEditableByUser(item.value, securityStore.user.id)
     allowToSubscribe.value = !allowToEdit.value && allowSubscribeToEvent(item.value)
-    allowToUnsubscribe.value = !allowToEdit.value && allowUnsubscribeToEvent(item.value, currentUser.value.id)
+    allowToUnsubscribe.value = !allowToEdit.value && allowUnsubscribeToEvent(item.value, securityStore.user.id)
 
     dialogShow.value = true
   },
@@ -289,7 +290,7 @@ const calendarOptions = ref({
     }
 
     item.value = {}
-    item.value["parentResourceNode"] = currentUser.value.resourceNode["id"]
+    item.value["parentResourceNode"] = securityStore.user.resourceNode["id"]
     item.value["allDay"] = info.allDay
     item.value["startDate"] = info.start
     item.value["endDate"] = info.end
@@ -341,7 +342,7 @@ function confirmDelete() {
     acceptClass: "p-button-danger",
     rejectClass: "p-button-plain p-button-outlined",
     accept() {
-      if (item.value["parentResourceNodeId"] === currentUser.value["id"]) {
+      if (item.value["parentResourceNodeId"] === securityStore.user["id"]) {
         store.dispatch("ccalendarevent/del", item.value)
 
         dialogShow.value = false
@@ -349,7 +350,7 @@ function confirmDelete() {
         reFetch()
       } else {
         let filteredLinks = item.value["resourceLinkListFromEntity"].filter(
-          (resourceLinkFromEntity) => resourceLinkFromEntity["user"]["id"] === currentUser.value["id"],
+          (resourceLinkFromEntity) => resourceLinkFromEntity["user"]["id"] === securityStore.user["id"],
         )
 
         if (filteredLinks.length > 0) {
@@ -371,7 +372,7 @@ async function subscribeToEvent() {
   try {
     await resourceLinkService.create({
       resourceNode: item.value.resourceNode["@id"],
-      user: currentUser.value["@id"],
+      user: securityStore.user["@id"],
       visibility: RESOURCE_LINK_PUBLISHED,
     })
 

assets/vue/views/ccalendarevent/CCalendarEventShow.vue

@@ -24,6 +24,8 @@ import { mapFields } from "vuex-map-fields"
 import Loading from "../../components/Loading.vue"
 import ShowMixin from "../../mixins/ShowMixin"
 import Toolbar from "../../components/Toolbar.vue"
+import { useSecurityStore } from "../../store/securityStore"
+import { storeToRefs } from "pinia"
 
 const servicePrefix = "CCalendarEvent"
 
@@ -34,16 +36,22 @@ export default {
     Toolbar,
   },
   mixins: [ShowMixin],
+  setup() {
+    const securityStore = useSecurityStore()
+
+    const { isAuthenticated, isAdmin, isCurrentTeacher } = storeToRefs(securityStore)
+
+    return {
+      isAuthenticated,
+      isAdmin,
+      isCurrentTeacher,
+    }
+  },
   computed: {
     ...mapFields("ccalendarevent", {
       isLoading: "isLoading",
     }),
     ...mapGetters("ccalendarevent", ["find"]),
-    ...mapGetters({
-      isAuthenticated: "security/isAuthenticated",
-      isAdmin: "security/isAdmin",
-      isCurrentTeacher: "security/isCurrentTeacher",
-    }),
   },
   methods: {
     ...mapActions("ccalendarevent", {
@@ -54,4 +62,4 @@ export default {
   },
   servicePrefix,
 }
-</script>
+</script>

assets/vue/views/course/CourseHome.vue

@@ -15,12 +15,12 @@
           width="12rem"
         />
         <Skeleton
-          v-if="isCurrentTeacher"
+          v-if="securityStore.isCurrentTeacher"
           height="2.5rem"
           width="8rem"
         />
         <Skeleton
-          v-if="isCurrentTeacher"
+          v-if="securityStore.isCurrentTeacher"
           height="2.5rem"
           width="3rem"
         />
@@ -34,25 +34,25 @@
           width="6rem"
         />
         <Skeleton
-          v-if="isCurrentTeacher"
+          v-if="securityStore.isCurrentTeacher"
           class="ml-auto"
           height="1.5rem"
           width="6rem"
         />
         <Skeleton
-          v-if="isCurrentTeacher"
+          v-if="securityStore.isCurrentTeacher"
           class="aspect-square"
           height="1.5rem"
           width="6rem"
         />
         <Skeleton
-          v-if="isCurrentTeacher"
+          v-if="securityStore.isCurrentTeacher"
           class="aspect-square"
           height="1.5rem"
           width="6rem"
         />
         <Skeleton
-          v-if="isCurrentTeacher"
+          v-if="securityStore.isCurrentTeacher"
           class="aspect-square"
           height="1.5rem"
           width="6rem"
@@ -89,7 +89,7 @@
         </div>
 
         <BaseButton
-          v-if="isCurrentTeacher && courseIntroEl?.introduction?.iid"
+          v-if="securityStore.isCurrentTeacher && courseIntroEl?.introduction?.iid"
           :label="t('Edit introduction')"
           class="grow-0"
           icon="edit"
@@ -202,7 +202,6 @@
 
 <script setup>
 import { computed, onMounted, provide, ref, watch } from "vue"
-import { useStore } from "vuex"
 import { useI18n } from "vue-i18n"
 import axios from "axios"
 import { ENTRYPOINT } from "../../config/entrypoint"
@@ -221,12 +220,12 @@ import { storeToRefs } from "pinia"
 import courseService from "../../services/courseService"
 import CourseIntroduction from "../../components/course/CourseIntroduction.vue"
 import { usePlatformConfig } from "../../store/platformConfig"
+import { useSecurityStore } from "../../store/securityStore"
 
-const store = useStore()
 const { t } = useI18n()
 const cidReqStore = useCidReqStore()
 const platformConfigStore = usePlatformConfig()
-
+const securityStore = useSecurityStore()
 const { course, session } = storeToRefs(cidReqStore)
 const { getSetting } = storeToRefs(platformConfigStore)
 
@@ -237,8 +236,6 @@ const courseIntroEl = ref(null)
 
 const isCourseLoading = ref(true)
 
-const isCurrentTeacher = computed(() => store.getters["security/isCurrentTeacher"])
-
 const isSorting = ref(false)
 const isCustomizing = ref(false)
 

assets/vue/views/ctoolintro/Create.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import { mapActions, mapGetters } from "vuex"
+import { mapActions } from "vuex"
 import { createHelpers } from "vuex-map-fields"
 import ToolIntroForm from "../../components/ctoolintro/Form.vue"
 import Loading from "../../components/Loading.vue"
@@ -23,6 +23,8 @@ import isEmpty from "lodash/isEmpty"
 import { RESOURCE_LINK_PUBLISHED } from "../../components/resource_links/visibility.js"
 import { useCidReq } from "../../composables/cidReq"
 import cToolIntroService from "../../services/cToolIntroService"
+import { useSecurityStore } from "../../store/securityStore"
+import { storeToRefs } from "pinia"
 
 const servicePrefix = "ctoolintro"
 
@@ -46,6 +48,9 @@ export default {
     const item = ref({})
     const route = useRoute()
     const router = useRouter()
+    const securityStore = useSecurityStore()
+
+    const { isAuthenticated, user } = storeToRefs(securityStore)
 
     let id = route.params.id
     if (isEmpty(id)) {
@@ -100,14 +105,10 @@ export default {
         })
     }
 
-    return { v$: useVuelidate(), users, isLoadingSelect, item, onCreated }
+    return { v$: useVuelidate(), users, isLoadingSelect, item, onCreated, currentUser: user, isAuthenticated }
   },
   computed: {
     ...mapFields(["error", "isLoading", "created", "violations"]),
-    ...mapGetters({
-      isAuthenticated: "security/isAuthenticated",
-      currentUser: "security/getUser",
-    }),
   },
   methods: {
     ...mapActions("ctoolintro", ["create", "createWithFormData"]),

assets/vue/views/documents/DocumentForHtmlEditor.vue

@@ -158,6 +158,8 @@ import { RESOURCE_LINK_PUBLISHED } from "../../components/resource_links/visibil
 import { useI18n } from "vue-i18n"
 import { useFormatDate } from "../../composables/formatDate"
 import prettyBytes from "pretty-bytes"
+import { useSecurityStore } from "../../store/securityStore"
+import { storeToRefs } from "pinia"
 
 export default {
   name: "DocumentForHtmlEditor",
@@ -174,6 +176,9 @@ export default {
   setup() {
     const { t } = useI18n()
     const { relativeDatetime } = useFormatDate()
+    const securityStore = useSecurityStore()
+
+    const { isAuthenticated, isAdmin, isCurrentTeacher } = storeToRefs(securityStore)
 
     const data = {
       sortBy: "title",
@@ -198,6 +203,9 @@ export default {
       submitted: false,
       relativeDatetime,
       prettyBytes,
+      isAuthenticated,
+      isAdmin,
+      isCurrentTeacher,
     }
 
     return data
@@ -216,11 +224,6 @@ export default {
     ...mapGetters("resourcenode", {
       resourceNode: "getResourceNode",
     }),
-    ...mapGetters({
-      isAuthenticated: "security/isAuthenticated",
-      isAdmin: "security/isAdmin",
-      isCurrentTeacher: "security/isCurrentTeacher",
-    }),
 
     ...mapGetters("documents", {
       items: "list",

assets/vue/views/documents/DocumentShow.vue

@@ -100,6 +100,8 @@ import ShowLinks from "../../components/resource_links/ShowLinks.vue"
 import BaseIcon from "../../components/basecomponents/BaseIcon.vue"
 
 import { useFormatDate } from "../../composables/formatDate"
+import { useSecurityStore } from "../../store/securityStore"
+import { storeToRefs } from "pinia"
 
 const servicePrefix = "Documents"
 
@@ -115,8 +117,15 @@ export default {
   data() {
     const { relativeDatetime } = useFormatDate()
 
+    const securityStore = useSecurityStore()
+
+    const { isAuthenticated, isAdmin, isCurrentTeacher } = storeToRefs(securityStore)
+
     return {
       relativeDatetime,
+      isAuthenticated,
+      isAdmin,
+      isCurrentTeacher,
     }
   },
   computed: {
@@ -124,11 +133,6 @@ export default {
       isLoading: "isLoading",
     }),
     ...mapGetters("documents", ["find"]),
-    ...mapGetters({
-      isAuthenticated: "security/isAuthenticated",
-      isAdmin: "security/isAdmin",
-      isCurrentTeacher: "security/isCurrentTeacher",
-    }),
   },
   methods: {
     ...mapActions("documents", {

assets/vue/views/documents/ListQuasar.vue

@@ -90,6 +90,8 @@ import ResourceIcon from "../../components/documents/ResourceIcon.vue"
 import { useRoute } from "vue-router"
 import moment from "moment"
 import prettyBytes from "pretty-bytes"
+import { useSecurityStore } from "../../store/securityStore"
+import { storeToRefs } from "pinia"
 
 /*const servicePrefix = 'documents';
 const { getters, actions } = list(servicePrefix);*/
@@ -102,6 +104,15 @@ export default {
     ResourceIcon,
   },
   setup() {
+    const securityStore = useSecurityStore()
+
+    const { isAuthenticated, isAdmin, isCurrentTeacher } = storeToRefs(securityStore)
+
+    return {
+      isAuthenticated,
+      isAdmin,
+      isCurrentTeacher,
+    }
     //this.moment = moment;
   },
   mixins: [ListMixin],
@@ -165,11 +176,6 @@ export default {
     ...mapGetters("resourcenode", {
       resourceNode: "getResourceNode",
     }),
-    ...mapGetters({
-      isAuthenticated: "security/isAuthenticated",
-      isAdmin: "security/isAdmin",
-      isCurrentTeacher: "security/isCurrentTeacher",
-    }),
 
     //...getters
 
@@ -273,4 +279,4 @@ export default {
     }),
   },
 }
-</script>
+</script>

assets/vue/views/filemanager/List.vue

@@ -230,6 +230,8 @@ import { RESOURCE_LINK_PUBLISHED } from "../../components/resource_links/visibil
 import { useI18n } from "vue-i18n"
 import { useFormatDate } from "../../composables/formatDate"
 import prettyBytes from "pretty-bytes"
+import { useSecurityStore } from "../../store/securityStore"
+import { storeToRefs } from "pinia"
 
 export default {
   name: "FileManagerList",
@@ -244,6 +246,9 @@ export default {
   setup() {
     const { t } = useI18n()
     const { relativeDatetime } = useFormatDate()
+    const securityStore = useSecurityStore()
+
+    const { isAuthenticated, isAdmin, user } = storeToRefs(securityStore)
 
     const data = {
       sortBy: "title",
@@ -284,6 +289,9 @@ export default {
       prettyBytes,
       relativeDatetime,
       t,
+      currentUser: user,
+      isAdmin,
+      isAuthenticated,
     }
 
     return data
@@ -298,11 +306,6 @@ export default {
     ...mapGetters("resourcenode", {
       resourceNode: "getResourceNode",
     }),
-    ...mapGetters({
-      isAuthenticated: "security/isAuthenticated",
-      isAdmin: "security/isAdmin",
-      currentUser: "security/getUser",
-    }),
 
     ...mapGetters("personalfile", {
       items: "list",

assets/vue/views/filemanager/Upload.vue

@@ -27,6 +27,8 @@ import Webcam from "@uppy/webcam"
 import { Dashboard } from "@uppy/vue"
 import { useRoute, useRouter } from "vue-router"
 import { ENTRYPOINT } from "../../config/entrypoint"
+import { useSecurityStore } from "../../store/securityStore"
+import { storeToRefs } from "pinia"
 
 const XHRUpload = require("@uppy/xhr-upload")
 
@@ -51,7 +53,9 @@ export default {
     const router = useRouter();
 
     const store = useStore()
-    const user = computed(() => store.getters["security/getUser"])
+    const securityStore = useSecurityStore()
+
+    const { isAuthenticated, isAdmin, user } = storeToRefs(securityStore)
 
     parentResourceNodeId.value = user.value.resourceNode["id"]
 
@@ -98,6 +102,9 @@ export default {
 
     return {
       uppy,
+      currentUser: user,
+      isAdmin,
+      isAuthenticated,
     }
   },
   mixins: [UploadMixin],
@@ -109,11 +116,6 @@ export default {
   },
   computed: {
     ...mapFields(["error", "isLoading", "created", "violations"]),
-    ...mapGetters({
-      isAuthenticated: "security/isAuthenticated",
-      isAdmin: "security/isAdmin",
-      currentUser: "security/getUser",
-    }),
   },
   created() {
     let nodeId = this.$route.params.node

assets/vue/views/message/MessageCreate.vue

@@ -65,8 +65,10 @@ import BaseUserAvatar from "../../components/basecomponents/BaseUserAvatar.vue"
 import { useNotification } from "../../composables/notification"
 import { capitalize } from "lodash"
 import BaseTinyEditor from "../../components/basecomponents/BaseTinyEditor.vue"
+import { useSecurityStore } from "../../store/securityStore"
 
 const store = useStore()
+const securityStore = useSecurityStore()
 const router = useRouter()
 const route = useRoute()
 const { t } = useI18n()
@@ -82,10 +84,8 @@ const asyncFind = async (query) => {
   }))
 }
 
-const currentUser = computed(() => store.getters["security/getUser"])
-
 const item = ref({
-  sender: currentUser.value["@id"],
+  sender: securityStore.user["@id"],
   receivers: [],
   msgType: MESSAGE_TYPE_INBOX,
   title: "",
@@ -204,8 +204,8 @@ if (route.query.send_to_user) {
         item.value.title = t(prefill + "Title")
         item.value.content = t(prefill + "Content", [
           user.firstname,
-          currentUser.value.firstname,
-          currentUser.value.firstname,
+          securityStore.user.firstname,
+          securityStore.user.firstname,
         ])
       }
     })

assets/vue/views/message/MessageList.vue

@@ -169,10 +169,12 @@ import { GET_USER_MESSAGE_TAGS } from "../../graphql/queries/MessageTag"
 import { useNotification } from "../../composables/notification"
 import { useMessageRelUserStore } from "../../store/messageRelUserStore"
 import SocialSideMenu from "../../components/social/SocialSideMenu.vue";
+import { useSecurityStore } from "../../store/securityStore"
 
 const route = useRoute()
 const router = useRouter()
 const store = useStore()
+const securityStore = useSecurityStore()
 const { t } = useI18n()
 
 const confirm = useConfirm()
@@ -182,8 +184,6 @@ const messageRelUserStore = useMessageRelUserStore()
 
 const { relativeDatetime } = useFormatDate()
 
-const user = computed(() => store.getters["security/getUser"])
-
 const mItemsMarkAs = ref([
   {
     label: t("As read"),
@@ -245,7 +245,7 @@ const goToCompose = () => {
 
 const { result: messageTagsResult } = useQuery(
   GET_USER_MESSAGE_TAGS,
-  { user: user.value["@id"] },
+  { user: securityStore.user["@id"] },
   { fetchPolicy: "cache-and-network" },
 )
 
@@ -285,7 +285,7 @@ function showInbox() {
 
   fetchPayload = {
     msgType: MESSAGE_TYPE_INBOX,
-    "receivers.receiver": user.value["@id"],
+    "receivers.receiver": securityStore.user["@id"],
     "order[sendDate]": "desc",
     itemsPerPage: initialRowsPerPage,
     page: 1,
@@ -299,7 +299,7 @@ function showInboxByTag(tag) {
 
   fetchPayload = {
     msgType: MESSAGE_TYPE_INBOX,
-    "receivers.receiver": user.value["@id"],
+    "receivers.receiver": securityStore.user["@id"],
     "receivers.tags.tag": tag.tag,
     "order[sendDate]": "desc",
     itemsPerPage: initialRowsPerPage,
@@ -314,7 +314,7 @@ function showUnread() {
 
   fetchPayload = {
     msgType: MESSAGE_TYPE_INBOX,
-    "receivers.receiver": user.value["@id"],
+    "receivers.receiver": securityStore.user["@id"],
     "order[sendDate]": "desc",
     "receivers.read": false,
     itemsPerPage: initialRowsPerPage,
@@ -329,7 +329,7 @@ function showSent() {
 
   fetchPayload = {
     msgType: MESSAGE_TYPE_INBOX,
-    sender: user.value["@id"],
+    sender: securityStore.user["@id"],
     "order[sendDate]": "desc",
     itemsPerPage: initialRowsPerPage,
     page: 1,
@@ -377,11 +377,11 @@ function sortingChanged(event) {
 function findMyReceiver(message) {
   const receivers = [...message.receiversTo, ...message.receiversCc]
 
-  return receivers.find(({ receiver }) => receiver["@id"] === user.value["@id"])
+  return receivers.find(({ receiver }) => receiver["@id"] === securityStore.user["@id"])
 }
 
 async function deleteMessage(message) {
-  if (message.sender["@id"] === user.value["@id"]) {
+  if (message.sender["@id"] === securityStore.user["@id"]) {
     message.status = MESSAGE_STATUS_DELETED
 
     await store.dispatch("message/update", message)

assets/vue/views/message/MessageReply.vue

@@ -74,7 +74,6 @@ let id = isEmpty(route.params.id) ? route.query.id : route.params.id
 let replyAll = "1" === route.query.all
 
 onMounted(async () => {
-  const currentUser = computed(() => store.getters["security/getUser"])
   const response = await store.dispatch("message/load", id)
 
   item.value = await response
@@ -91,7 +90,7 @@ onMounted(async () => {
 
   item.value["originalSender"] = item.value["sender"]
   // New sender.
-  item.value["sender"] = currentUser.value["@id"]
+  item.value["sender"] = securityStore.user["@id"]
 
   // Set new receivers, will be loaded by onSendMessageForm()
   if (replyAll) {
@@ -101,7 +100,7 @@ onMounted(async () => {
         return
       }
       // Dont' add the current user.
-      if (currentUser.value["@id"] === user.receiver["@id"]) {
+      if (securityStore.user["@id"] === user.receiver["@id"]) {
         return
       }
       item.value.receiversCc.push(user)
@@ -115,7 +114,7 @@ onMounted(async () => {
     })
 
     /*item.value.receiversTo.forEach(function (user, index, obj) {
-      if (currentUser.value['@id'] === user.receiver['@id']) {
+      if (securityStore.user['@id'] === user.receiver['@id']) {
         obj.splice(index, 1);
       }
     });*/
@@ -143,8 +142,6 @@ onMounted(async () => {
 const isLoading = computed(() => store.state.message.isLoading)
 const violations = computed(() => store.state.message.violations)
 
-const currentUser = computed(() => securityStore.user)
-
 const createForm = ref()
 
 const onReplyMessageForm = async () => {
@@ -159,7 +156,7 @@ const onReplyMessageForm = async () => {
       users.push({ receiver: user.receiver["@id"], receiverType: 2 })
     })
   }
-  createForm.value.v$.item.$model.sender = "/api/users/" + currentUser.value.id
+  createForm.value.v$.item.$model.sender = "/api/users/" + securityStore.user.id
   createForm.value.v$.item.$model.receiversTo = null
   createForm.value.v$.item.$model.receiversCc = null
   createForm.value.v$.item.$model.receivers = users

assets/vue/views/message/MessageShow.vue

@@ -52,7 +52,7 @@
       </div>
 
       <BaseAutocomplete
-        v-if="item.sender && item.sender['@id'] !== user['@id']"
+        v-if="item.sender && item.sender['@id'] !== securityStore.user['@id']"
         id="search-tags"
         v-model="foundTag"
         :label="t('Tags')"
@@ -153,13 +153,14 @@ import BaseAutocomplete from "../../components/basecomponents/BaseAutocomplete.v
 import { useFormatDate } from "../../composables/formatDate"
 import { useMessageRelUserStore } from "../../store/messageRelUserStore"
 import messageTagService from "../../services/messageTagService"
+import { useSecurityStore } from "../../store/securityStore"
 
 const confirm = useConfirm()
 const { t } = useI18n()
 
 const isLoadingSelect = ref(false)
 const store = useStore()
-const user = store.getters["security/getUser"]
+const securityStore = useSecurityStore()
 //const find = store.getters["message/find"];
 const route = useRoute()
 const router = useRouter()
@@ -181,7 +182,7 @@ store.dispatch("message/load", id).then((responseItem) => {
   item.value = responseItem
 
   myReceiver.value = [...responseItem.receiversTo, ...responseItem.receiversCc].find(
-    ({ receiver }) => receiver["@id"] === user["@id"],
+    ({ receiver }) => receiver["@id"] === securityStore.user["@id"],
   )
 
   // Change to read.
@@ -252,7 +253,7 @@ const foundTag = ref("")
 async function onSearchTags(query) {
   isLoadingSelect.value = true
 
-  const { items } = await messageTagService.searchUserTags(user["@id"], query)
+  const { items } = await messageTagService.searchUserTags(securityStore.user["@id"], query)
 
   isLoadingSelect.value = false
 
@@ -265,7 +266,7 @@ async function onItemSelect({ value }) {
   if (!value["@id"]) {
     try {
       await store.dispatch("messagetag/create", {
-        user: user["@id"],
+        user: securityStore.user["@id"],
         tag: value.tag,
       })
     } catch (e) {

assets/vue/views/page/List.vue

@@ -1,6 +1,6 @@
 <template>
   <DataTable
-    v-if="isAdmin"
+    v-if="securityStore.isAdmin"
     v-model:filters="filters"
     v-model:selection="selectedItems"
     :lazy="true"
@@ -227,7 +227,7 @@ onMounted(() => {
 
   onUpdateOptions(options.value)
 
-  if (isAdmin.value) {
+  if (securityStore.isAdmin) {
     layoutMenuItems.value = [
       {
         label: t("New page"),
@@ -239,8 +239,6 @@ onMounted(() => {
   }
 })
 
-const isAdmin = computed(() => store.getters["security/isAdmin"])
-
 const items = computed(() => store.state["page"].recents)
 
 // const deletedPage = computed(() => store.state['page'].deleted);

assets/vue/views/personalfile/Home.vue

@@ -3,11 +3,12 @@
 </template>
 
 <script>
-import { mapGetters, useStore } from "vuex"
+import { mapGetters } from "vuex"
 import Loading from "../../components/Loading.vue"
 import Toolbar from "../../components/Toolbar.vue"
-import { computed } from "vue"
 import { useRoute, useRouter } from "vue-router"
+import { useSecurityStore } from "../../store/securityStore"
+import { storeToRefs } from "pinia"
 
 const servicePrefix = "PersonalFile"
 
@@ -19,23 +20,25 @@ export default {
     Toolbar,
   },
   setup() {
-    const store = useStore()
-    const currentUser = computed(() => store.getters["security/getUser"])
+    const securityStore = useSecurityStore()
     const route = useRoute()
     const router = useRouter()
 
-    router.push({ name: `PersonalFileList`, params: { node: currentUser.value.resourceNode["id"] } }).catch(() => {})
+    const { isAuthenticated, isAdmin, user } = storeToRefs(securityStore)
+
+    router.push({ name: `PersonalFileList`, params: { node: user.value.resourceNode["id"] } }).catch(() => {})
+
+    return {
+      currentUser: user,
+      isAdmin,
+      isAuthenticated,
+    }
   },
   computed: {
     // From crud.js list function
     ...mapGetters("resourcenode", {
       resourceNode: "getResourceNode",
     }),
-    ...mapGetters({
-      isAuthenticated: "security/isAuthenticated",
-      isAdmin: "security/isAdmin",
-      currentUser: "security/getUser",
-    }),
   },
 }
-</script>
+</script>

assets/vue/views/personalfile/List.vue

@@ -248,6 +248,8 @@ import { RESOURCE_LINK_PUBLISHED } from "../../components/resource_links/visibil
 import { useI18n } from "vue-i18n"
 import { useFormatDate } from "../../composables/formatDate"
 import prettyBytes from "pretty-bytes"
+import { useSecurityStore } from "../../store/securityStore"
+import { storeToRefs } from "pinia"
 
 export default {
   name: "PersonalFileList",
@@ -261,7 +263,9 @@ export default {
   mixins: [ListMixin],
   setup() {
     const { t } = useI18n()
+    const securityStore = useSecurityStore()
     const { relativeDatetime } = useFormatDate()
+    const { user, isAuthenticated, isAdmin } = storeToRefs(securityStore)
 
     const data = {
       sortBy: "title",
@@ -302,6 +306,9 @@ export default {
       prettyBytes,
       relativeDatetime,
       t,
+      currentUser: user,
+      isAuthenticated,
+      isAdmin,
     }
 
     return data
@@ -316,11 +323,6 @@ export default {
     ...mapGetters("resourcenode", {
       resourceNode: "getResourceNode",
     }),
-    ...mapGetters({
-      isAuthenticated: "security/isAuthenticated",
-      isAdmin: "security/isAdmin",
-      currentUser: "security/getUser",
-    }),
 
     ...mapGetters("personalfile", {
       items: "list",

assets/vue/views/personalfile/Shared.vue

@@ -91,6 +91,8 @@ import isEmpty from "lodash/isEmpty"
 import { useFormatDate } from "../../composables/formatDate"
 import prettyBytes from "pretty-bytes"
 import { useI18n } from "vue-i18n"
+import { useSecurityStore } from "../../store/securityStore"
+import { storeToRefs } from "pinia"
 
 export default {
   name: "PersonalFileShared",
@@ -103,9 +105,12 @@ export default {
     DataFilter,
   },
   data() {
+    const securityStore = useSecurityStore()
     const { t } = useI18n()
     const { relativeDatetime } = useFormatDate()
 
+    const { isAdmin, user, isAuthenticated } = storeToRefs(securityStore)
+
     return {
       sortBy: "title",
       sortDesc: false,
@@ -130,6 +135,9 @@ export default {
       relativeDatetime,
       prettyBytes,
       t,
+      isAuthenticated,
+      isAdmin,
+      currentUser: user,
     }
   },
   created() {
@@ -145,11 +153,6 @@ export default {
     ...mapGetters("resourcenode", {
       resourceNode: "getResourceNode",
     }),
-    ...mapGetters({
-      isAuthenticated: "security/isAuthenticated",
-      isAdmin: "security/isAdmin",
-      currentUser: "security/getUser",
-    }),
 
     ...mapGetters("personalfile", {
       itemsShared: "list",

assets/vue/views/personalfile/Show.vue

@@ -131,6 +131,8 @@ import Toolbar from "../../components/Toolbar.vue"
 
 import ShowLinks from "../../components/resource_links/ShowLinks.vue"
 import { useFormatDate } from "../../composables/formatDate"
+import { useSecurityStore } from "../../store/securityStore"
+import { storeToRefs } from "pinia"
 
 const servicePrefix = "PersonalFile"
 
@@ -143,9 +145,15 @@ export default {
   },
   data() {
     const { relativeDatetime } = useFormatDate()
+    const securityStore = useSecurityStore()
+
+    const { isAuthenticated, isAdmin, isCurrentTeacher } = storeToRefs(securityStore)
 
     return {
       relativeDatetime,
+      isAuthenticated,
+      isAdmin,
+      isCurrentTeacher,
     }
   },
   mixins: [ShowMixin],
@@ -154,11 +162,6 @@ export default {
       isLoading: "isLoading",
     }),
     ...mapGetters("personalfile", ["find"]),
-    ...mapGetters({
-      isAuthenticated: "security/isAuthenticated",
-      isAdmin: "security/isAdmin",
-      isCurrentTeacher: "security/isCurrentTeacher",
-    }),
   },
   methods: {
     goBack() {

assets/vue/views/personalfile/Upload.vue

@@ -12,10 +12,10 @@
 </template>
 
 <script>
-import { mapActions, mapGetters, useStore } from "vuex"
+import { mapActions } from "vuex"
 import { createHelpers } from "vuex-map-fields"
 import UploadMixin from "../../mixins/UploadMixin"
-import { computed, ref } from "vue"
+import { ref } from "vue"
 import isEmpty from "lodash/isEmpty"
 
 import "@uppy/core/dist/style.css"
@@ -27,6 +27,8 @@ import Webcam from "@uppy/webcam"
 import { Dashboard } from "@uppy/vue"
 import { useRoute, useRouter } from "vue-router"
 import { ENTRYPOINT } from "../../config/entrypoint"
+import { useSecurityStore } from "../../store/securityStore"
+import { storeToRefs } from "pinia"
 
 const XHRUpload = require("@uppy/xhr-upload")
 
@@ -49,9 +51,9 @@ export default {
     const parentResourceNodeId = ref(null)
     const route = useRoute()
     const router = useRouter();
+    const securityStore = useSecurityStore()
 
-    const store = useStore()
-    const user = computed(() => store.getters["security/getUser"])
+    const { user, isAuthenticated, isAdmin } = storeToRefs(securityStore)
 
     parentResourceNodeId.value = user.value.resourceNode["id"]
 
@@ -98,6 +100,9 @@ export default {
 
     return {
       uppy,
+      currentUser: user,
+      isAdmin,
+      isAuthenticated,
     }
   },
   mixins: [UploadMixin],
@@ -109,11 +114,6 @@ export default {
   },
   computed: {
     ...mapFields(["error", "isLoading", "created", "violations"]),
-    ...mapGetters({
-      isAuthenticated: "security/isAuthenticated",
-      isAdmin: "security/isAdmin",
-      currentUser: "security/getUser",
-    }),
   },
   created() {
     let nodeId = this.$route.params.node

assets/vue/views/social/SocialLayout.vue

@@ -21,7 +21,6 @@
 </template>
 
 <script setup>
-import { useStore } from "vuex"
 import { onMounted, provide, computed, readonly, ref, watch, watchEffect } from "vue"
 import { useRoute } from "vue-router"
 import SocialWall from "./SocialWall.vue"
@@ -34,10 +33,11 @@ import MySkillsCard from "../../components/social/MySkillsCard.vue"
 import { useSocialInfo } from "../../composables/useSocialInfo"
 import { useSocialStore } from "../../store/socialStore"
 import { useI18n } from "vue-i18n"
+import { useSecurityStore } from "../../store/securityStore"
 
-const store = useStore()
 const route = useRoute()
 const { t } = useI18n()
+const securityStore = useSecurityStore()
 const socialStore = useSocialStore()
 const hasPermission = ref(false)
 const isLoadingPage = ref(true)
@@ -48,12 +48,11 @@ provide("is-current-user", isCurrentUser)
 provide("group-info", groupInfo)
 provide("is-group", isGroup)
 
-const currentUser = store.getters["security/getUser"]
 const profileUserId = computed(() => route.query.id)
 
 onMounted(async () => {
   if (profileUserId.value) {
-    await socialStore.checkUserRelation(currentUser.id, profileUserId.value)
+    await socialStore.checkUserRelation(securityStore.user.id, profileUserId.value)
     hasPermission.value = socialStore.isProfileVisible
   } else {
     hasPermission.value = true

assets/vue/views/user/PersonalData.vue

@@ -132,10 +132,9 @@
 </template>
 
 <script setup>
-import { onMounted, reactive, ref, computed } from "vue"
+import { onMounted, reactive, ref } from "vue"
 import { useI18n } from 'vue-i18n'
 import BaseCard from "../../components/basecomponents/BaseCard.vue"
-import { useStore } from "vuex"
 import BaseDialog from "../../components/basecomponents/BaseDialog.vue"
 import BaseIcon from "../../components/basecomponents/BaseIcon.vue"
 import BaseTextArea from "../../components/basecomponents/BaseTextArea.vue"
@@ -143,14 +142,13 @@ import LayoutFormButtons from "../../components/layout/LayoutFormButtons.vue"
 import BaseButton from "../../components/basecomponents/BaseButton.vue"
 import { useNotification } from "../../composables/notification"
 import socialService from "../../services/socialService"
+import { useSecurityStore } from "../../store/securityStore"
 
 const { t } = useI18n()
-const store = useStore()
+const securityStore = useSecurityStore()
 
 const { showSuccessNotification, showErrorNotification } = useNotification()
 
-const user = computed(() => store.getters["security/getUser"])
-
 const personalData = reactive({
   data: {},
 })
@@ -188,26 +186,24 @@ function toggleCategory(categoryName) {
 }
 
 async function fetchPersonalData() {
-  if (!user.value) {
+  if (!securityStore.user) {
     console.error("User ID is not available.")
     return
   }
   try {
-    const userId = user.value["@id"].split('/').pop()
-    personalData.data = await socialService.fetchPersonalData(userId)
+    personalData.data = await socialService.fetchPersonalData(securityStore.user.id)
   } catch (error) {
     showErrorNotification('Error fetching personal data:', error)
   }
 }
 
 async function fetchTermsAndConditions() {
-  if (!user.value) {
+  if (!securityStore.user) {
     console.error("User ID is not available.")
     return
   }
   try {
-    const userId = user.value["@id"].split('/').pop()
-    termsAndConditions.value = await socialService.fetchTermsAndConditions(userId)
+    termsAndConditions.value = await socialService.fetchTermsAndConditions(securityStore.user.id)
   } catch (error) {
     showErrorNotification('Error fetching terms and conditions:', error)
   }
@@ -220,8 +216,7 @@ async function submitPrivacyRequest(requestType) {
     return
   }
   try {
-    const userId = user.value["@id"].split('/').pop()
-    const response = await socialService.submitPrivacyRequest({ userId, explanation, requestType })
+    const response = await socialService.submitPrivacyRequest({ userId: securityStore.user.id, explanation, requestType })
     if (response.success) {
       showSuccessNotification(response.message)
       deleteTermExplanation.value = ''
@@ -237,8 +232,7 @@ async function submitPrivacyRequest(requestType) {
 
 async function submitAcceptTerm() {
   try {
-    const userId = user.value["@id"].split('/').pop()
-    const response = await socialService.submitAcceptTerm(userId)
+    const response = await socialService.submitAcceptTerm(securityStore.user.id)
 
     if (response.success) {
       showSuccessNotification(response.message)
@@ -252,13 +246,12 @@ async function submitAcceptTerm() {
 }
 
 async function fetchLegalStatus() {
-  if (!user.value) {
+  if (!securityStore.user) {
     console.error("User ID is not available.")
     return
   }
   try {
-    const userId = user.value["@id"].split('/').pop()
-    const legalStatusData = await socialService.fetchLegalStatus(userId)
+    const legalStatusData = await socialService.fetchLegalStatus(securityStore.user.id)
     Object.assign(legalStatus, legalStatusData)
   } catch (error) {
     showErrorNotification('Error fetching legal status:', error)

assets/vue/views/user/courses/List.vue

@@ -38,7 +38,6 @@
 
 <script setup>
 import { onMounted, computed } from "vue"
-import { useStore } from "vuex"
 import { useQuery } from "@vue/apollo-composable"
 import { useI18n } from "vue-i18n"
 import { GET_COURSE_REL_USER } from "../../../graphql/queries/CourseRelUser.js"
@@ -46,14 +45,13 @@ import Skeleton from "primevue/skeleton"
 import StickyCourses from "../../../views/user/courses/StickyCourses.vue"
 import CourseCardList from "../../../components/course/CourseCardList.vue"
 import EmptyState from "../../../components/EmptyState"
+import { useSecurityStore } from "../../../store/securityStore"
 
-const store = useStore()
+const securityStore = useSecurityStore()
 const { t } = useI18n()
 
-let user = computed(() => store.getters["security/getUser"])
-
 const { result, loading, refetch } = useQuery(GET_COURSE_REL_USER, () => ({
-  user: user.value["@id"],
+  user: securityStore.user["@id"],
 }))
 
 const isLoading = computed(() => loading.value)

assets/vue/views/user/sessions/SessionsCurrent.vue

@@ -13,16 +13,14 @@
 </template>
 
 <script setup>
-import { computed } from "vue"
-import { useStore } from "vuex"
 import SessionTabs from "../../../components/session/SessionTabs.vue"
 import StickyCourses from "../../../views/user/courses/StickyCourses.vue"
 import SessionCategoryView from "../../../components/session/SessionCategoryView"
 import { useSession } from "./session"
 import SessionsLoading from "./SessionsLoading.vue"
+import { useSecurityStore } from "../../../store/securityStore"
 
-const store = useStore()
+const securityStore = useSecurityStore()
 
-let user = computed(() => store.getters["security/getUser"])
-const { sessions, isLoading } = useSession(user)
-</script>
+const { sessions, isLoading } = useSession(securityStore.user)
+</script>

assets/vue/views/user/sessions/SessionsPast.vue

@@ -9,20 +9,17 @@
 </template>
 
 <script setup>
-import { computed } from "vue"
-import { useStore } from "vuex"
 import { DateTime } from "luxon"
 import SessionCategoryView from "../../../components/session/SessionCategoryView"
 import SessionTabs from "../../../components/session/SessionTabs.vue"
 import { useSession } from "./session"
 import SessionsLoading from "./SessionsLoading.vue"
+import { useSecurityStore } from "../../../store/securityStore"
 
-const store = useStore()
-
-let user = computed(() => store.getters["security/getUser"])
+const securityStore = useSecurityStore()
 
 let start = DateTime.local().minus({ days: 360 })
 let end = DateTime.local()
 
-const { sessions, isLoading } = useSession(user, start, end)
-</script>
+const { sessions, isLoading } = useSession(securityStore.user, start, end)
+</script>

assets/vue/views/user/sessions/SessionsUpcoming.vue

@@ -9,19 +9,16 @@
 </template>
 
 <script setup>
-import { computed } from "vue"
-import { useStore } from "vuex"
 import { DateTime } from "luxon"
 import SessionCategoryView from "../../../components/session/SessionCategoryView"
 import SessionTabs from "../../../components/session/SessionTabs.vue"
 import { useSession } from "./session"
 import SessionsLoading from "./SessionsLoading.vue"
+import { useSecurityStore } from "../../../store/securityStore"
 
-const store = useStore()
-
-let user = computed(() => store.getters["security/getUser"])
+const securityStore = useSecurityStore()
 
 let start = DateTime.local()
 
-const { sessions, isLoading } = useSession(user, start)
-</script>
+const { sessions, isLoading } = useSession(securityStore.user, start)
+</script>

assets/vue/views/usergroup/Invite.vue

@@ -90,16 +90,15 @@
 </template>
 
 <script setup>
-import { computed, onMounted, ref } from "vue"
+import { onMounted, ref } from "vue"
 import { useI18n } from "vue-i18n"
 import { useRoute } from "vue-router"
-import { useStore } from "vuex"
 import axios from "axios"
+import { useSecurityStore } from "../../store/securityStore"
 
 const { t } = useI18n()
 const route = useRoute()
-const store = useStore()
-const currentUser = computed(() => store.getters["security/getUser"])
+const securityStore = useSecurityStore()
 const availableFriends = ref([])
 const selectedFriends = ref([])
 const invitedFriends = ref([])
@@ -113,7 +112,7 @@ const removeFriend = (friend) => {
 }
 const loadAvailableFriends = async () => {
   const groupId = route.params.group_id
-  const userId = currentUser.value.id
+  const userId = securityStore.user.id
   try {
     const response = await axios.get(`/social-network/invite-friends/${userId}/${groupId}`)
     availableFriends.value = response.data.friends

assets/vue/views/userreluser/UserRelUserAdd.vue

@@ -39,7 +39,6 @@
 <script setup>
 import { onMounted, ref } from "vue"
 import { useRoute, useRouter } from "vue-router"
-import { useStore } from "vuex"
 import { useI18n } from "vue-i18n"
 import { useNotification } from "../../composables/notification"
 import VueMultiselect from "vue-multiselect"
@@ -47,13 +46,13 @@ import BaseToolbar from "../../components/basecomponents/BaseToolbar.vue"
 import BaseButton from "../../components/basecomponents/BaseButton.vue"
 import userService from "../../services/userService"
 import userRelUserService from "../../services/userRelUserService"
+import { useSecurityStore } from "../../store/securityStore"
 
-const store = useStore()
+const securityStore = useSecurityStore()
 const router = useRouter()
 const route = useRoute()
 const { t } = useI18n()
 const { showSuccessNotification, showErrorNotification } = useNotification()
-const user = store.getters["security/getUser"]
 const users = ref([])
 const isLoadingSelect = ref(false)
 const searchQuery = ref("")
@@ -77,7 +76,7 @@ const addFriend = (friend) => {
   isLoadingSelect.value = true
 
   userRelUserService
-    .sendFriendRequest(user["@id"], friend["@id"])
+    .sendFriendRequest(securityStore.user["@id"], friend["@id"])
     .then(() => {
       showSuccessNotification(t("Friend request sent successfully"))
     })

assets/vue/views/userreluser/UserRelUserSearch.vue

@@ -74,21 +74,20 @@
 <script setup>
 import { onMounted, ref } from "vue"
 import { useRouter } from "vue-router"
-import { useStore } from "vuex"
 import { useI18n } from "vue-i18n"
 import { useNotification } from "../../composables/notification"
 import BaseToolbar from "../../components/basecomponents/BaseToolbar.vue"
 import BaseButton from "../../components/basecomponents/BaseButton.vue"
 import userRelUserService from "../../services/userRelUserService"
 import userService from "../../services/userService"
+import { useSecurityStore } from "../../store/securityStore"
 
-const store = useStore()
+const securityStore = useSecurityStore()
 const router = useRouter()
 const { t } = useI18n()
 const { showSuccessNotification, showErrorNotification } = useNotification()
 const isLoadingSelect = ref(false)
 const loadingResults = ref(false)
-const user = store.getters["security/getUser"]
 const foundUsers = ref([])
 const friendsList = ref([])
 const searchQuery = ref("")
@@ -107,9 +106,9 @@ const isFriend = (user) => {
 
 async function fetchFriendsList() {
   try {
-    const friendshipList = await userRelUserService.getFriendList(user["@id"])
+    const friendshipList = await userRelUserService.getFriendList(securityStore.user["@id"])
 
-    friendsList.value = friendshipList.map((friendship) => friendship.friend.id).concat(user.id)
+    friendsList.value = friendshipList.map((friendship) => friendship.friend.id).concat(securityStore.user.id)
   } catch (error) {
     showErrorNotification(t("Error fetching friends list"))
     console.error("Error fetching friends list:", error)
@@ -131,7 +130,7 @@ const asyncFind = async (query) => {
 }
 const addFriend = async (friend) => {
   try {
-    await userRelUserService.sendFriendRequest(user["@id"], friend["@id"])
+    await userRelUserService.sendFriendRequest(securityStore.user["@id"], friend["@id"])
     showSuccessNotification(t("Friend request sent successfully"))
     await fetchFriendsList()
     const searchQuery = router.currentRoute.value.query.search

var/vue_templates/components/SidebarLogin.vue

@@ -1,6 +1,5 @@
 <script setup>
-import { computed, ref } from "vue"
-import { useStore } from "vuex"
+import { ref } from "vue"
 import { useI18n } from "vue-i18n"
 import InputText from "primevue/inputtext"
 import Password from "primevue/password"
@@ -8,16 +7,13 @@ import Button from "primevue/button"
 import InputSwitch from "primevue/inputswitch"
 import { useLogin } from "../../../assets/vue/composables/auth/login"
 
-const store = useStore()
 const { t } = useI18n()
 
-const { performLogin } = useLogin()
+const { performLogin, isLoading } = useLogin()
 
 const login = ref("")
 const password = ref("")
 const remember = ref(false)
-
-const isLoading = computed(() => store.getters["security/isLoading"])
 </script>
 
 <template>