Some changes

src/components/MainForm.vue

@@ -88,8 +88,8 @@ function setConfirmationModal(event : Event) {
                            v-bind:dark = "isDarkTheme"/>
           </div>
         </div>
-        <button class="button is-info mt-5">Submit</button>
+        <button class="button is-info mt-5">Zapisz</button>
-        <button class="button is-info mt-5 ml-3" @click="setConfirmationModal">Potwierdź</button>
+        <button class="button is-success mt-5 ml-3" @click="setConfirmationModal">Potwierdź</button>
       </div>
     </div>
     <div v-for="category in categories" :key="category.Kod">
@@ -105,6 +105,7 @@ function setConfirmationModal(event : Event) {
                   type="text"
                   placeholder="Kwota"
                   v-model="product.Twr_Cena"
+                  v-bind:class="{ 'is-success has-background-light': product.Quantity != undefined && product.Quantity as unknown as string != '' }"
                 />
               </div>
             </div>
@@ -115,20 +116,21 @@ function setConfirmationModal(event : Event) {
                   type="text"
                   placeholder="Kwota"
                   v-model="product.Twr_CenaZ"
+                  v-bind:class="{ 'is-success has-background-light': product.Quantity != undefined && product.Quantity as unknown as string != '' }"
                 />
               </div>
             </div>
             <div class="column">
               <div class="field has-addons">
                 <p class="control">
-                  <span class="select is-small">
+                  <span class="select is-small" v-bind:class="{ 'is-success has-background-light': product.Quantity != undefined }">
                     <select v-model="product.ChosenOption" readonly>
                       <option v-for="option in product.Options" :key="option">{{ option }}</option>
                     </select>
                   </span>
                 </p>
                 <p class="control is-expanded">
-                  <input class="input is-small" type="text" placeholder="Ilość" v-model="product.Quantity">
+                  <input class="input is-small" type="text" placeholder="Ilość" v-model="product.Quantity" v-bind:class="{ 'is-success': product.Quantity != undefined }">
                 </p>
               </div>
             </div>
@@ -139,10 +141,10 @@ function setConfirmationModal(event : Event) {
     </div>
     <div class="columns mt-1 is-variable is-mobile">
       <div class = "column is-6">
-        <button class="button is-info is-fullwidth is-large">Submit</button>
+        <button class="button is-info is-fullwidth is-large">Zapisz</button>
       </div>
       <div class = "is-large column is-6 ml-3">
-        <button class="button is-info is-fullwidth is-large" @click="showConfirmationModal = true">Potwierdź</button>
+        <button class="button is-success is-fullwidth is-large" @click="showConfirmationModal = true">Potwierdź</button>
       </div>
     </div>
   </form>

src/components/NavBar.vue

@@ -6,6 +6,7 @@ import { useOrdersStore } from '@/stores/orders.store'
 import { useContractorsStore } from '@/stores/contractors.store'
 import { useCategoriesStore } from '@/stores/categories.store'
 import { storeToRefs } from 'pinia'
+import { useUserStore } from '@/stores/user.store'
 
 const activator =  ref(false);
 
@@ -13,6 +14,9 @@ const siteControlStore = useSiteControlStore();
 const ordersStore = useOrdersStore();
 const contractorsStore = useContractorsStore();
 const categoriesStore = useCategoriesStore();
+const userStore = useUserStore();
+
+const { username } = storeToRefs(userStore);
 
 
 function makeBurger() {
@@ -83,9 +87,12 @@ function newOrder() {
             <button class="button is-info" @click="newOrder">
             Nowe Zamówienie
             </button>
-            <button class="button is-light" @click="routeLogin">
+            <button class="button is-light" @click="routeLogin" v-if="username == undefined">
               Log in
             </button>
+            <button class="button is-light is-static" @click="routeLogin" v-if="username != undefined">
+              {{ username }}
+            </button>
           </div>
         </div>
       </div>

src/components/OrdersSelector.vue

@@ -11,6 +11,7 @@ const searchOrderDate = ref<Date>();
 const isOutOfBuffer = ref<boolean>(false);
 const isInBufor = ref<boolean>(false);
 const { orders } = storeToRefs(ordersStore);
+const areOrdersLoading = ref<boolean>(false);
 
 watch(isInBufor, (val) => {
   if(val && val == isOutOfBuffer.value) {
@@ -34,11 +35,13 @@ function viewOrder(uuid : string) {
 
 async function fetchOrders(event : Event) {
   event.preventDefault();
+  areOrdersLoading.value = true;
   if(isInBufor.value) {
     orders.value = await ordersStore.fetchOrdersInBuffer();
   } else if (isOutOfBuffer.value) {
     orders.value = await ordersStore.fetchOrdersOutOfBuffer();
   }
+  areOrdersLoading.value = false;
 }
 
 </script>
@@ -70,7 +73,7 @@ async function fetchOrders(event : Event) {
             </label>
           </div>
         </div>
-        <button class="button is-primary is-small is-expanded" @click="fetchOrders">Pobierz zamówienia</button>
+        <button class="button is-primary is-small is-expanded" @click="fetchOrders"  :class="{ 'is-loading': areOrdersLoading }">Pobierz zamówienia</button>
       </div>
     </form>
     <div class="box">

src/main.ts

@@ -10,13 +10,14 @@ import ConfirmedForm from '@/components/ConfirmedForm.vue'
 import LoadingComponent from '@/components/LoadingComponent.vue'
 import axios from 'axios'
 import LoginModal from '@/components/LoginModal.vue'
-import { createPinia } from 'pinia'
+import { createPinia, storeToRefs } from 'pinia'
 import VueCookies from 'vue3-cookies'
 import { router } from '@/router/router'
 import { useSiteControlStore } from '@/stores/siteControl.store'
 import { useCategoriesStore } from '@/stores/categories.store'
 import { useOrdersStore } from '@/stores/orders.store'
 import { useContractorsStore } from '@/stores/contractors.store'
+import { useUserStore } from '@/stores/user.store'
 
 const app = createApp(App);
 const pinia = createPinia();
@@ -34,6 +35,16 @@ export const axiosInstance = axios.create({
   withCredentials: true
 });
 
+axiosInstance.interceptors.response.use( (response) => {
+  return response;
+}, (error) => {
+  if (error.response.status == 401) {
+    const userStore = useUserStore();
+    storeToRefs(userStore).username.value = undefined;
+    router.push('/login');
+  }
+});
+
 app.component('VueDatePicker', VueDatePicker);
 app.component('ConfirmationModal', ConfirmationModal);
 app.component('LoginModal', LoginModal);

src/stores/user.store.ts

@@ -0,0 +1,9 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+
+export const useUserStore = defineStore('user', () => {
+  const username = ref<string>();
+
+  return {username};
+})

src/views/LoginView.vue

@@ -3,6 +3,8 @@ import { Form, Field } from 'vee-validate';
 import * as Yup from 'yup';
 import { axiosInstance } from '@/main'
 import { router } from '@/router/router'
+import { useUserStore } from '@/stores/user.store'
+import { storeToRefs } from 'pinia'
 
 const schema = Yup.object().shape({
   username: Yup.string().required('Nazwa użytkownika jest wymagana'),
@@ -25,6 +27,8 @@ async function onSubmit(values : any, { setErrors } : any) {
     }
   });
   if(body != undefined && body.status == 200) {
+    const userStore = useUserStore();
+    localStorage.setItem("username", username);
     await router.push('/');
   }
 

src/views/MainView.vue

@@ -24,22 +24,28 @@ import { storeToRefs } from 'pinia'
 import { useCategoriesStore } from '@/stores/categories.store'
 import { useOrdersStore } from '@/stores/orders.store'
 import { useSiteControlStore } from '@/stores/siteControl.store'
+import { useUserStore } from '@/stores/user.store'
 
 const contractorsStore = useContractorsStore();
 const categoriesStore = useCategoriesStore();
 const ordersStore = useOrdersStore();
 const siteControlStore = useSiteControlStore();
+const userStore = useUserStore();
 const contractors = storeToRefs(contractorsStore).contractors;
 const contractor = storeToRefs(contractorsStore).contractor;
 const categories = storeToRefs(categoriesStore).categories;
-
 const { uuid, order } = storeToRefs(ordersStore);
-
+const { username } = storeToRefs(userStore);
 const { isForm, isOrders, showConfirmationModal, isLoading } = storeToRefs(siteControlStore);
 
+
 async function  fetchData() {
   await categoriesStore.fetchCategories();
   await contractorsStore.fetchContractors();
+  const usernameString = localStorage.getItem("username");
+  if(usernameString != null) {
+    username.value = usernameString;
+  }
   isLoading.value = false;
 }