Whole site refactor. Added pinia stores and authentication capability.

src/views/LoginView.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { Form, Field } from 'vee-validate';
+import * as Yup from 'yup';
+
+const schema = Yup.object().shape({
+  username: Yup.string().required('Username is required'),
+  password: Yup.string().required('Password is required')
+});
+
+function onSubmit(values : any) {
+  const { username, password } = values;
+
+}
+</script>
+
+<template>
+  <div>
+    <div class="alert alert-info">
+      Username: test<br />
+      Password: test
+    </div>
+    <h2>Login</h2>
+    <Form @submit="onSubmit" :validation-schema="schema" v-slot="{ errors, isSubmitting }">
+      <div class="form-group">
+        <label>Username</label>
+        <Field name="username" type="text" class="form-control" :class="{ 'is-invalid': errors.username }" />
+        <div class="invalid-feedback">{{errors.username}}</div>
+      </div>
+      <div class="form-group">
+        <label>Password</label>
+        <Field name="password" type="password" class="form-control" :class="{ 'is-invalid': errors.password }" />
+        <div class="invalid-feedback">{{errors.password}}</div>
+      </div>
+      <div class="form-group">
+        <button class="btn btn-primary" :disabled="isSubmitting">
+          <span v-show="isSubmitting" class="spinner-border spinner-border-sm mr-1"></span>
+          Login
+        </button>
+      </div>
+      <div v-if="errors.apiError" class="alert alert-danger mt-3 mb-0">{{errors.apiError}}</div>
+    </Form>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/views/MainView.vue

@@ -0,0 +1,77 @@
+<template>
+  <NavBar/>
+
+  <div v-if="isLoading">
+    <LoadingComponent/>
+  </div>
+  <div v-else>
+    <div v-if="isForm">
+      <MainForm
+        v-if="order == undefined || order.MZN_Bufor==1"
+      />
+      <ConfirmedForm v-else-if="order.MZN_Bufor==0"/>
+    </div>
+    <OrdersSelector class="box is-shadowless" v-else-if="isOrders"
+    />
+  </div>
+  <ConfirmationModal v-show="showConfirmationModal" @close="showConfirmationModal = false" @confirm="closeConfirmationModal" :order-uuid="uuid"></ConfirmationModal>
+</template>
+
+<script setup lang="ts">
+import '@/assets/base.css'
+import { useContractorsStore } from '@/stores/contractors.store'
+import { storeToRefs } from 'pinia'
+import { useCategoriesStore } from '@/stores/categories.store'
+import { useOrdersStore } from '@/stores/orders.store'
+import { useSiteControlStore } from '@/stores/siteControl.store'
+
+const contractorsStore = useContractorsStore();
+const categoriesStore = useCategoriesStore();
+const ordersStore = useOrdersStore();
+const siteControlStore = useSiteControlStore();
+const contractors = storeToRefs(contractorsStore).contractors;
+const contractor = storeToRefs(contractorsStore).contractor;
+const categories = storeToRefs(categoriesStore).categories;
+
+const { uuid, order } = storeToRefs(ordersStore);
+
+const { isForm, isOrders, showConfirmationModal, isLoading } = storeToRefs(siteControlStore);
+
+async function  fetchData() {
+  await categoriesStore.fetchCategories();
+  await contractorsStore.fetchContractors();
+  isLoading.value = false;
+}
+
+function closeConfirmationModal() {
+  showConfirmationModal.value = false;
+  if (uuid.value != undefined) {
+    isLoading.value = true;
+    ordersStore.loadOrder(uuid.value, true, contractor, contractors, categories);
+  }
+}
+
+siteControlStore.checkTheme();
+fetchData();
+</script>
+
+<style>
+@media screen and (min-width: 500px) {
+  .box {
+    --bulma-box-padding: 1.5rem;
+  }
+}
+@media screen and (max-width: 500px) {
+  .box {
+    --bulma-box-padding: 0.75rem;
+  }
+}
+
+:root {
+  min-height: 100vh;
+}
+
+body {
+  min-height: 100vh;
+}
+</style>

src/views/index.ts

@@ -0,0 +1,2 @@
+export { default as LoginView } from "./LoginView.vue";
+export { default as MainView } from "./MainView.vue";