update: auth & update modal

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;