update: auth & update modal

src/App.vue

@@ -5,16 +5,34 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { computed, defineComponent, watch } from 'vue';
 import dataMixin from './mixins/dataMixin';
 import { useStore } from './store';
 import PopUpCard from './components/PopUpCard.vue';
+import axios, { AxiosResponse } from 'axios';
+import { RouterView, useRouter } from 'vue-router';
+import { ILoginResponse, IUser, AuthState } from './types/types';
 
 export default defineComponent({
   mixins: [dataMixin],
   components: { PopUpCard },
   setup() {
     const store = useStore();
+    const router = useRouter();
+
+    router.beforeEach(async (to, from, next) => {
+      if (store.authState != AuthState.AUTHORIZED && to.path != '/login') return next({ path: '/login' });
+
+      return next();
+    });
+
+    watch(
+      computed(() => store.authState),
+      (state) => {
+        if (router.currentRoute.value.path == '/login' && state == AuthState.AUTHORIZED) router.push('/');
+      }
+    );
+
     return {
       store,
     };
@@ -22,15 +40,36 @@ export default defineComponent({
   methods: {
     async autoLogin() {
       const token = window.localStorage.getItem('auth-token');
-      if (token) {
-        this.store.isAuthorized = true;
-        this.store.token = token;
-        this.store.user = JSON.parse(window.localStorage.getItem('user')!);
+      if (!token) {
+        this.store.authState = AuthState.UNAUTHORIZED;
+        return;
       }
+
+      this.store.token = token;
+
+      const data = axios.post<{ user: IUser }>(`${this.API_URL}/auth/token`, { token: this.store.token });
+
+      data
+        .then((res) => {
+          console.log(res.data);
+
+          this.store.user = res.data.user;
+          this.store.authState = AuthState.AUTHORIZED;
+          this.$router.push('/');
+        })
+        .catch((err) => {
+          this.store.isAuthorized = false;
+          window.localStorage.removeItem('auth-token');
+
+          this.store.authState = AuthState.UNAUTHORIZED;
+          this.$router.push('/login');
+        });
     },
   },
+
   mounted() {
     this.autoLogin();
+
     if (window.localStorage.getItem('notifyDiscord') !== null) {
       this.store.notifyDiscord = Boolean(Number(window.localStorage.getItem('notifyDiscord')));
     }
@@ -97,13 +136,15 @@ button:focus-visible {
   transform: translate(-50%, -50%);
 
   width: 90vw;
-  max-width: 350px;
+  max-width: 550px;
 
   padding: 0.5em 1em;
   margin-top: 1em;
 
-  background-color: #2e2e2e;
-  box-shadow: 0 0 6px 1px #131313;
+  border-radius: 1em;
+
+  background-color: #1d1c33;
+  box-shadow: 0 0 6px 1px #414141;
 }
 
 // Scrollbar

src/components/TableActions.vue

@@ -73,7 +73,7 @@ import { defineComponent } from 'vue';
 import dataMixin from '../mixins/dataMixin';
 import routesMixin from '../mixins/routesMixin';
 import { useStore } from '../store';
-import { Availability, ChangeProp, HeaderTypes, SceneryRowItem } from '../types/types';
+import { AuthState, Availability, ChangeProp, HeaderTypes, SceneryRowItem } from '../types/types';
 import { getAvailabilityValue } from '../types/typeUitls';
 
 export default defineComponent({
@@ -146,7 +146,7 @@ export default defineComponent({
 
     signOut() {
       this.store.token = null;
-      this.store.isAuthorized = false;
+      this.store.authState = AuthState.UNAUTHORIZED;
 
       window.localStorage.removeItem('auth-token');
       window.localStorage.removeItem('user');
@@ -184,7 +184,6 @@ export default defineComponent({
         );
 
         this.store.changesResponse = response.data;
-        alert('Pomyślnie wprowadzono zmiany!');
 
         this.loadData();
       } catch (error) {

src/components/UpdateCard.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="bg-dimmer" @click="closeCard"></div>
+  <div class="g-card popup-card">
+    <div class="card_content">
+      <h1>Raport zmian</h1>
+
+      <p v-for="(ch, i) in changesResponseComp" :key="i" :style="{ color: ch.resolved ? 'lime' : 'crimson' }">
+        {{ ch.resolved ? `✅` : `❌` }} {{ ch.message }}
+      </p>
+    </div>
+
+    <div class="card_actions">
+      <button @click="closeCard">OK!</button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useStore } from '../store';
+
+export default defineComponent({
+  setup() {
+    return {
+      store: useStore(),
+    };
+  },
+
+  computed: {
+    changesResponseComp() {
+      return this.store.changesResponse.map((ch) => ({
+        resolved: ch.split(' ')[0] == 'v',
+        message: ch.replace(/^[v|x] /, ''),
+      }));
+    },
+  },
+
+  methods: {
+    closeCard() {
+      this.store.changesResponse.length = 0;
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.bg-dimmer {
+  position: fixed;
+  z-index: 998;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+
+  background-color: #0000004f;
+}
+
+h1 {
+  text-align: center;
+}
+
+.card_actions {
+  display: flex;
+  justify-content: center;
+}
+</style>
+

src/router.ts

@@ -18,15 +18,5 @@ const router = createRouter({
   routes,
 });
 
-router.beforeEach((to, from, next) => {
-  const token = window.localStorage.getItem('auth-token');
-
-  if (!token && to.path != '/login') return next({ path: '/login' });
-
-  if (token && to.path == '/login') return next({ path: '/' });
-  // else if (to.path == '/login') return next({ path: '/' });
-
-  return next();
-});
 
 export default router;

src/store.ts

@@ -1,11 +1,13 @@
 import { defineStore } from 'pinia';
-import { Availability, ChangeProp, HeaderTypes, IStore } from './types/types';
+import { AuthState, Availability, ChangeProp, HeaderTypes, IStore } from './types/types';
 import { getAvailabilityValue } from './types/typeUitls';
 
 export const useStore = defineStore('store', {
   state: () =>
     ({
       dataState: 'LOADING',
+      authState: AuthState.LOADING,
+
       unsavedChanges: false,
       stationList: [],
       backupList: [],
@@ -20,6 +22,7 @@ export const useStore = defineStore('store', {
       user: null,
       isAuthorized: false,
       notifyDiscord: true,
+
       alertMessage: '',
       confirmMessage: '',
 

src/types/types.ts

@@ -62,8 +62,16 @@ export type ChangeItem = {
   toRemove?: boolean;
 };
 
+export enum AuthState {
+  'LOADING' = 0,
+  'AUTHORIZED' = 1,
+  'UNAUTHORIZED' = 2,
+}
+
 export interface IStore {
   dataState: string;
+  authState: AuthState;
+
   unsavedChanges: boolean;
   stationList: SceneryRowItem[];
   backupList: SceneryRowItem[];
@@ -83,3 +91,13 @@ export interface IStore {
 
   changesResponse: string[];
 }
+
+export interface ILoginResponse {
+  token: string;
+  user: IUser;
+}
+
+export interface IUser {
+  name: string;
+  id: string;
+}

src/views/LoginView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="login">
+  <div class="login" v-if="store.authState == AuthState.UNAUTHORIZED">
     <div class="login-header">
       <img src="/icon-logo.svg" alt="logo" />
       <h1>Stacjownik Station Manager</h1>
@@ -14,7 +14,7 @@
       <br />
       <input type="password" id="password" v-model="password" />
       <br />
-      <button>Zaloguj</button>
+      <button>{{ loginState == LoginState.LOADING ? 'Logowanie...' : 'Zaloguj się' }}</button>
     </form>
   </div>
 </template>
@@ -24,13 +24,12 @@ import axios from 'axios';
 import { defineComponent } from 'vue';
 import dataMixin from '../mixins/dataMixin';
 import { useStore } from '../store';
+import { AuthState, ILoginResponse } from '../types/types';
 
-interface LoginResponse {
-  token: string;
-  user: {
-    name: string;
-    id: string;
-  };
+enum LoginState {
+  INITIALIZED = 0,
+  LOADING = 1,
+  LOADED = 2,
 }
 
 export default defineComponent({
@@ -40,18 +39,20 @@ export default defineComponent({
     return {
       name: '',
       password: '',
+      loginState: LoginState.INITIALIZED,
+      LoginState,
       store: useStore(),
+      AuthState,
     };
   },
 
   methods: {
     async signIn(e: Event) {
       e.preventDefault();
-
-      console.log(import.meta.env.VITE_API_URL);
+      this.loginState = LoginState.LOADING;
 
       try {
-        const data: LoginResponse = (
+        const data: ILoginResponse = (
           await axios.post(
             `${this.API_URL}/auth/login`,
             { username: this.name, password: this.password },
@@ -63,7 +64,9 @@ export default defineComponent({
           )
         ).data;
 
-        this.store.isAuthorized = true;
+        this.store.authState = AuthState.AUTHORIZED;
+        this.loginState = LoginState.LOADED;
+
         this.store.token = data.token;
         this.store.user = data.user;
 
@@ -73,6 +76,9 @@ export default defineComponent({
         this.loadData();
         this.$router.push('/');
       } catch (e: any) {
+        this.store.authState = AuthState.UNAUTHORIZED;
+        this.loginState = LoginState.LOADED;
+
         if (!e.response || e.response.status === undefined) {
           this.store.alertMessage = 'Wystąpił błąd podczas łączenia z serwerem!';
           return;

src/views/ManagerView.vue

@@ -1,6 +1,7 @@
 <template>
-  <div class="manager">
+  <div class="manager" v-if="store.authState == AuthState.AUTHORIZED">
     <RoutesModal v-if="store.currentStation" />
+    <UpdateCard v-if="store.changesResponse.length > 0" />
 
     <hr color="white" />
     <TableActions />
@@ -59,16 +60,18 @@ import { defineComponent } from 'vue';
 import changeMixin from '../mixins/changeMixin';
 import dataMixin from '../mixins/dataMixin';
 import { useStore } from '../store';
-import { SceneryRowItem, Availability } from '../types/types';
+import { SceneryRowItem, Availability, AuthState } from '../types/types';
 import RoutesModal from '../components/RoutesModal.vue';
 import TableActions from '../components/TableActions.vue';
 import routesMixin from '../mixins/routesMixin';
+import UpdateCard from '../components/UpdateCard.vue';
 
 export default defineComponent({
-  components: { RoutesModal, TableActions },
+  components: { RoutesModal, TableActions, UpdateCard },
   mixins: [dataMixin, changeMixin, routesMixin],
 
   data: () => ({
+    AuthState,
     headerNameList: {
       name: 'Nazwa',
       url: 'URL',