poprawki bezpieczeństwa

src/components/ChangesModal.vue

@@ -1,54 +1,54 @@
-<template>
-  <div class="changes-modal">
-    <transition name="modal-anim">
-      <div class="content g-card" v-if="store.changesResponse.length > 0">
-        <h2>Wprowadzone zmiany</h2>
-        <div>
-          <ul class="changelog">
-            <li v-for="change in store.changesResponse">{{ change }}</li>
-          </ul>
-        </div>
-      </div>
-    </transition>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { useStore } from '../store';
-
-export default defineComponent({
-  setup() {
-    return {
-      store: useStore(),
-    };
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-.content {
-  top: 0;
-  transform: translateX(-50%);
-
-  max-width: 450px;
-}
-
-ul.changelog {
-  list-style: square;
-}
-
-// Vue transition animations
-.modal-anim {
-  &-leave-active,
-  &-enter-active {
-    transition: all 100ms ease-in-out;
-  }
-
-  &-enter-from,
-  &-leave-to {
-    transform: translate(-50%, -30px);
-    opacity: 0.25;
-  }
-}
-</style>
+<template>
+  <div class="changes-modal">
+    <transition name="modal-anim">
+      <div class="content g-card" v-if="store.changesResponse.length > 0">
+        <h2>Wprowadzone zmiany</h2>
+        <div>
+          <ul class="changelog">
+            <li v-for="change in store.changesResponse">{{ change }}</li>
+          </ul>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useStore } from '../store';
+
+export default defineComponent({
+  setup() {
+    return {
+      store: useStore(),
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.content {
+  top: 0;
+  transform: translateX(-50%);
+
+  max-width: 450px;
+}
+
+ul.changelog {
+  list-style: square;
+}
+
+// Vue transition animations
+.modal-anim {
+  &-leave-active,
+  &-enter-active {
+    transition: all 100ms ease-in-out;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    transform: translate(-50%, -30px);
+    opacity: 0.25;
+  }
+}
+</style>

src/components/PopUpCard.vue

@@ -1,68 +1,68 @@
-<template>
-  <div class="bg-dimmer"></div>
-  <div class="g-card popup-card">
-    <div class="card_content">
-      <p>{{ store.alertMessage || store.confirmMessage }}</p>
-    </div>
-
-    <div class="card_actions">
-      <span v-if="store.alertMessage">
-        <button @click="closeCard">OK!</button>
-      </span>
-
-      <span v-else-if="store.confirmMessage">
-        <button @click="confirm">OK!</button>
-        <button @click="closeCard">Anuluj</button>
-      </span>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { useStore } from '../store';
-
-export default defineComponent({
-  emits: ['confirm'],
-
-  setup() {
-    return {
-      store: useStore(),
-    };
-  },
-
-  methods: {
-    closeCard() {
-      this.store.alertMessage = '';
-      this.store.confirmMessage = '';
-    },
-
-    confirm() {
-      this.$emit('confirm');
-      this.closeCard();
-    },
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-.bg-dimmer {
-  position: fixed;
-  z-index: 998;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-
-  background-color: #0000004f;
-}
-
-.card_content {
-  text-align: center;
-}
-
-.card_actions {
-  display: flex;
-  justify-content: center;
-}
-</style>
+<template>
+  <div class="bg-dimmer"></div>
+  <div class="g-card popup-card">
+    <div class="card_content">
+      <p>{{ store.alertMessage || store.confirmMessage }}</p>
+    </div>
+
+    <div class="card_actions">
+      <span v-if="store.alertMessage">
+        <button @click="closeCard">OK!</button>
+      </span>
+
+      <span v-else-if="store.confirmMessage">
+        <button @click="confirm">OK!</button>
+        <button @click="closeCard">Anuluj</button>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useStore } from '../store';
+
+export default defineComponent({
+  emits: ['confirm'],
+
+  setup() {
+    return {
+      store: useStore(),
+    };
+  },
+
+  methods: {
+    closeCard() {
+      this.store.alertMessage = '';
+      this.store.confirmMessage = '';
+    },
+
+    confirm() {
+      this.$emit('confirm');
+      this.closeCard();
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.bg-dimmer {
+  position: fixed;
+  z-index: 998;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+
+  background-color: #0000004f;
+}
+
+.card_content {
+  text-align: center;
+}
+
+.card_actions {
+  display: flex;
+  justify-content: center;
+}
+</style>

src/components/TableActions.vue

@@ -82,9 +82,10 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import routesMixin from '../mixins/routesMixin';
-import { useStore } from '../store';
+import { useStore, baseURL } from '../store';
 import { AuthState, Availability, ChangeProp, HeaderTypes, SceneryRoutesInfo, SceneryRowItem } from '../types/types';
 import { getAvailabilityValue } from '../types/typeUitls';
+import axios from 'axios';
 
 export default defineComponent({
   setup() {
@@ -154,13 +155,8 @@ export default defineComponent({
       if (confirmed) this.updateListToDb();
     },
 
-    signOut() {
-      this.store.token = null;
-      this.store.authState = AuthState.UNAUTHORIZED;
-
-      window.localStorage.removeItem('auth-token');
-      window.localStorage.removeItem('user');
-
+    async signOut() {
+      await axios.post('/auth/logout', {}, { baseURL, withCredentials: true });
       this.$router.push('/login');
     },