Use security store using pinia instead of vuex

assets/vue/components/Login.vue

@@ -95,7 +95,7 @@ const isLoading = computed(() => store.getters["security/isLoading"])
 
 let redirect = route.query.redirect
 
-if (store.getters["security/isAuthenticated"]) {
+if (securityStore.isAuthenticated) {
   if (typeof redirect !== "undefined") {
     router.push({ path: redirect.toString() })
   } else {

assets/vue/components/StudentViewButton.vue

@@ -18,6 +18,7 @@ import { usePlatformConfig } from "../store/platformConfig"
 import axios from "axios"
 import { storeToRefs } from "pinia"
 import { useCidReqStore } from "../store/cidReq"
+import { useSecurityStore } from "../store/securityStore"
 
 const emit = defineEmits(["change"])
 
@@ -25,6 +26,7 @@ const store = useStore()
 const { t } = useI18n()
 const platformConfigStore = usePlatformConfig()
 const cidReqStore = useCidReqStore()
+const securityStore = useSecurityStore()
 
 const isStudentView = computed({
   async set() {
@@ -43,7 +45,6 @@ const isStudentView = computed({
   },
 })
 
-const isAuthenticated = computed(() => store.getters["security/isAuthenticated"])
 const isCourseAdmin = computed(() => store.getters["security/isCourseAdmin"])
 const isAdmin = computed(() => store.getters["security/isAdmin"])
 const { course, userIsCoach } = storeToRefs(cidReqStore)
@@ -51,7 +52,7 @@ const { course, userIsCoach } = storeToRefs(cidReqStore)
 const user = computed(() => store.getters["security/getUser"])
 
 const showButton = computed(() => {
-  return isAuthenticated.value &&
+  return securityStore.isAuthenticated &&
     course.value &&
     (isCourseAdmin.value || isAdmin.value || userIsCoach.value(user.value.id, 0, false)) &&
     "true" === platformConfigStore.getSetting("course.student_view_enabled");

assets/vue/components/layout/DashboardLayout.vue

@@ -1,9 +1,9 @@
 <template>
   <Topbar />
-  <Sidebar v-if="isAuthenticated" />
+  <Sidebar v-if="securityStore.isAuthenticated" />
   <div
     class="app-main"
-    :class="{ 'app-main--no-sidebar': !isAuthenticated }"
+    :class="{ 'app-main--no-sidebar': !securityStore.isAuthenticated }"
   >
     <Breadcrumb
       v-if="showBreadcrumb"
@@ -18,8 +18,7 @@
 import Breadcrumb from '../../components/Breadcrumb.vue';
 import Topbar from '../../components/layout/Topbar.vue';
 import Sidebar from '../../components/layout/Sidebar.vue';
-import {useStore} from "vuex";
-import {computed} from "vue";
+import { useSecurityStore } from "../../store/securityStore"
 
 // eslint-disable-next-line no-undef
 defineProps({
@@ -29,8 +28,7 @@ defineProps({
   },
 });
 
-const store = useStore();
-const isAuthenticated = computed(() => store.getters['security/isAuthenticated']);
+const securityStore = useSecurityStore()
 
 let breadcrumb = [];
 

assets/vue/components/layout/Sidebar.vue

@@ -11,7 +11,7 @@
         <p>{{ t("Created with Chamilo &copy; {year}", { year: 2022 }) }}</p>
       </div>
       <a
-        v-if="isAuthenticated"
+        v-if="securityStore.isAuthenticated"
         class="app-sidebar__logout-link"
         href="/logout"
       >
@@ -45,12 +45,13 @@ import ToggleButton from "primevue/togglebutton"
 import { useI18n } from "vue-i18n"
 import { useStore } from "vuex"
 import { usePlatformConfig } from "../../store/platformConfig"
+import { useSecurityStore } from "../../store/securityStore"
 
 const store = useStore()
 const { t } = useI18n()
 const platformConfigStore = usePlatformConfig()
+const securityStore = useSecurityStore()
 
-const isAuthenticated = computed(() => store.getters["security/isAuthenticated"])
 const isAdmin = computed(() => store.getters["security/isAdmin"])
 const isBoss = computed(() => store.getters["security/isBoss"])
 const isStudent = computed(() => store.getters["security/isStudent"])
@@ -65,7 +66,7 @@ const items = ref([
   {
     label: t("Courses"),
     icon: "pi pi-fw pi-book",
-    visible: isAuthenticated,
+    visible: securityStore.isAuthenticated,
     items: [
       {
         label: t("My courses"),
@@ -81,19 +82,19 @@ const items = ref([
     label: t("Events"),
     to: { name: "CCalendarEventList" },
     icon: "pi pi-fw pi-calendar",
-    visible: isAuthenticated,
+    visible: securityStore.isAuthenticated,
   },
   {
     label: t("My progress"),
     url: "/main/auth/my_progress.php",
     icon: "pi pi-fw pi-chart-line",
-    visible: isAuthenticated,
+    visible: securityStore.isAuthenticated,
   },
   {
     label: t("Social network"),
     to: { name: "SocialWall" },
     icon: "pi pi-fw pi-sitemap",
-    visible: isAuthenticated,
+    visible: securityStore.isAuthenticated,
   },
 
   {

assets/vue/components/layout/Topbar.vue

@@ -1,8 +1,8 @@
 <template>
-  <TopbarNotLoggedIn v-if="!isAuthenticated" />
+  <TopbarNotLoggedIn v-if="!securityStore.isAuthenticated" />
   <TopbarLoggedIn
-    v-if="isAuthenticated"
-    :current-user="currentUser"
+    v-else
+    :current-user="securityStore.user"
   />
 </template>
 
@@ -11,10 +11,7 @@ import { useStore } from "vuex"
 
 import TopbarLoggedIn from "./TopbarLoggedIn.vue"
 import TopbarNotLoggedIn from "./TopbarNotLoggedIn.vue"
-import { computed } from "vue"
+import { useSecurityStore } from "../../store/securityStore"
 
-const store = useStore()
-
-const isAuthenticated = computed(() => store.getters["security/isAuthenticated"])
-const currentUser = computed(() => store.getters["security/getUser"])
+const securityStore = useSecurityStore()
 </script>

assets/vue/pages/Login.vue

@@ -11,19 +11,16 @@
 </template>
 
 <script setup>
-import { computed } from 'vue';
-import { useStore } from "vuex";
 import { useRouter } from "vue-router";
 
 import Login from '../components/Login';
+import { useSecurityStore } from "../store/securityStore"
 
 const router = useRouter();
-const store = useStore();
-
-const isAuthenticated = computed(() => store.getters["security/isAuthenticated"]);
+const securityStore = useSecurityStore()
 
 // If user is already logged in redirect to home.
-if (isAuthenticated.value) {
+if (securityStore.isAuthenticated) {
     router.push({path: "/home"});
 }
 </script>

assets/vue/views/documents/DocumentsList.vue

@@ -1,5 +1,5 @@
 <template>
-  <ButtonToolbar v-if="isAuthenticated && isCurrentTeacher">
+  <ButtonToolbar v-if="securityStore.isAuthenticated && isCurrentTeacher">
     <BaseButton
       v-if="showBackButtonIfNotRootFolder"
       :label="t('Back')"
@@ -80,7 +80,7 @@
           <BaseButton icon="information" size="small" type="black" @click="btnShowInformationOnClick(slotProps.data)" />
 
           <BaseButton
-            v-if="isAuthenticated && isCurrentTeacher"
+            v-if="securityStore.isAuthenticated && isCurrentTeacher"
             :icon="
               RESOURCE_LINK_PUBLISHED === slotProps.data.resourceLinkListFromEntity[0].visibility
                 ? 'eye-on'
@@ -94,7 +94,7 @@
           />
 
           <BaseButton
-            v-if="isAuthenticated && isCurrentTeacher"
+            v-if="securityStore.isAuthenticated && isCurrentTeacher"
             icon="edit"
             size="small"
             type="black"
@@ -102,7 +102,7 @@
           />
 
           <BaseButton
-            v-if="isAuthenticated && isCurrentTeacher"
+            v-if="securityStore.isAuthenticated && isCurrentTeacher"
             icon="delete"
             size="small"
             type="danger"
@@ -113,7 +113,7 @@
     </Column>
   </DataTable>
 
-  <ButtonToolbar v-if="isAuthenticated && isCurrentTeacher" show-top-border>
+  <ButtonToolbar v-if="securityStore.isAuthenticated && isCurrentTeacher" show-top-border>
     <BaseButton :label="t('Select all')" icon="select-all" type="black" @click="selectAll" />
     <BaseButton :label="t('Unselect all')" icon="unselect-all" type="black" @click="unselectAll" />
     <BaseButton
@@ -210,10 +210,12 @@ import BaseDialog from "../../components/basecomponents/BaseDialog.vue";
 import BaseChart from "../../components/basecomponents/BaseChart.vue";
 import DocumentAudioRecorder from "../../components/documents/DocumentAudioRecorder.vue";
 import { useNotification } from "../../composables/notification";
+import { useSecurityStore } from "../../store/securityStore"
 
 const store = useStore();
 const route = useRoute();
 const router = useRouter();
+const securityStore = useSecurityStore()
 
 const { t } = useI18n();
 const { filters, options, onUpdateOptions, deleteItem } = useDatatableList("Documents");
@@ -242,7 +244,6 @@ filters.value.loadNode = 1;
 
 const selectedItems = ref([]);
 
-const isAuthenticated = computed(() => store.getters["security/isAuthenticated"]);
 const isCurrentTeacher = computed(() => store.getters["security/isCurrentTeacher"]);
 
 const items = computed(() => store.getters["documents/getRecents"]);

assets/vue/views/glossary/GlossaryList.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <ButtonToolbar v-if="isAuthenticated && isCurrentTeacher">
+    <ButtonToolbar v-if="securityStore.isAuthenticated && isCurrentTeacher">
       <BaseButton
         :label="t('Add new glossary term')"
         icon="plus"
@@ -120,10 +120,12 @@ import StudentViewButton from "../../components/StudentViewButton.vue"
 import { debounce } from "lodash"
 import BaseCard from "../../components/basecomponents/BaseCard.vue"
 import Skeleton from "primevue/skeleton"
+import { useSecurityStore } from "../../store/securityStore"
 
 const store = useStore()
 const route = useRoute()
 const router = useRouter()
+const securityStore = useSecurityStore()
 const notifications = useNotification()
 
 const { t } = useI18n()
@@ -144,7 +146,6 @@ const resourceLinkList = ref(
   ])
 )
 
-const isAuthenticated = computed(() => store.getters["security/isAuthenticated"])
 const isCurrentTeacher = computed(() => store.getters["security/isCurrentTeacher"])
 
 const glossaries = ref([])

assets/vue/views/links/LinksList.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <ButtonToolbar v-if="isAuthenticated && isCurrentTeacher">
+    <ButtonToolbar v-if="securityStore.isAuthenticated && isCurrentTeacher">
       <BaseButton
         :label="t('Add a link')"
         icon="link-add"
@@ -179,16 +179,17 @@ import BaseDialogDelete from "../../components/basecomponents/BaseDialogDelete.v
 import Skeleton from "primevue/skeleton"
 import StudentViewButton from "../../components/StudentViewButton.vue"
 import { isVisible, toggleVisibilityProperty, visibilityFromBoolean } from "../../components/links/linkVisibility"
+import { useSecurityStore } from "../../store/securityStore"
 
 const store = useStore()
 const route = useRoute()
 const router = useRouter()
+const securityStore = useSecurityStore()
 
 const { t } = useI18n()
 
 const notifications = useNotification()
 
-const isAuthenticated = computed(() => store.getters["security/isAuthenticated"])
 const isCurrentTeacher = computed(() => store.getters["security/isCurrentTeacher"])
 
 const linksWithoutCategory = ref([])

assets/vue/views/page/List.vue

@@ -100,14 +100,14 @@
           <!--          />-->
 
           <Button
-            v-if="isAuthenticated"
+            v-if="securityStore.isAuthenticated"
             class="p-button-icon-only p-button-plain p-button-outlined p-button-sm"
             icon="mdi mdi-pencil"
             @click="goToEditItem(slotProps.data)"
           />
 
           <Button
-            v-if="isAuthenticated"
+            v-if="securityStore.isAuthenticated"
             class="p-button-icon-only p-button-danger p-button-outlined p-button-sm"
             icon="mdi mdi-delete"
             @click="confirmDeleteItem(slotProps.data)"
@@ -231,8 +231,10 @@ import { useDatatableList } from '../../composables/datatableList';
 import { computed, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useToast } from 'primevue/usetoast';
+import { useSecurityStore } from "../../store/securityStore"
 
 const store = useStore();
+const securityStore = useSecurityStore()
 
 const { t } = useI18n();
 
@@ -246,7 +248,6 @@ onMounted(() => {
   onUpdateOptions(options.value);
 });
 
-const isAuthenticated = computed(() => store.getters['security/isAuthenticated']);
 const isAdmin = computed(() => store.getters['security/isAdmin']);
 
 const items = computed(() => store.state['page'].recents);

assets/vue/views/user/courses/StickyCourses.vue

@@ -18,14 +18,14 @@ import { computed, ref, watchEffect } from "vue"
 import {useStore} from 'vuex'
 import {GET_STICKY_COURSES} from "../../../graphql/queries/Course"
 import { useQuery } from "@vue/apollo-composable"
+import { useSecurityStore } from "../../../store/securityStore"
 
 const store = useStore()
-
-let isAuthenticated = computed(() => store.getters['security/isAuthenticated'])
+const securityStore = useSecurityStore()
 
 const queryResponse = ref({})
 
-if (isAuthenticated.value) {
+if (securityStore.isAuthenticated) {
   const { result } = useQuery(GET_STICKY_COURSES)
 
   watchEffect(() => {