Better validation on text fields, change AlertBanner to Snackbar

software/src/pages/accountPage/accountDataCard.vue

@@ -1,10 +1,51 @@
 <script setup lang="ts">
 import cardView from '@/components/cardView.vue';
-import outlinedButton from '@/components/outlinedButton.vue';
 import { useAccountStore } from '@/data/stores/accountStore';
-import { ref } from 'vue';
+import { useFeedbackStore } from '@/data/stores/feedbackStore';
 
 const accountStore = useAccountStore()
+const feedbackStore = useFeedbackStore()
+
+const passwordRules = [
+  value => {
+    if (value) {
+      return true
+    } else {
+      return feedbackStore.i18n.t('required')
+    }
+  },
+  value => {
+    if (value?.length >= 8) {
+      return true
+    } else {
+      return feedbackStore.i18n.t('passwordToShort')
+    }
+  }
+]
+
+const stringRules = [
+  value => {
+    if (value) {
+      return true
+    } else {
+      return feedbackStore.i18n.t('required')
+    }
+  },
+  value => {
+    if (/[^0-9]/.test(value)) {
+      return true
+    } else {
+      return feedbackStore.i18n.t('noDigitsAllowed')
+    }
+  },
+  value => {
+    if (value?.length >= 3) {
+      return true
+    } else {
+      return feedbackStore.i18n.t('notEnoughChars')
+    }
+  }
+]
 </script>
 
 <template>
@@ -12,6 +53,15 @@ const accountStore = useAccountStore()
     :title="$t('account.masterData')"
     icon="mdi-account"
   >
+    <v-row>
+      <v-col>
+        <v-text-field
+          :label="$t('account.email')"
+          v-model="accountStore.userAccount.email"
+          disabled
+        />
+      </v-col>
+    </v-row>
     <v-row>
       <v-col>
         <v-text-field
@@ -25,6 +75,7 @@ const accountStore = useAccountStore()
           :label="$t('account.password')"
           v-model="accountStore.userAccount.password"
           type="password"
+          :rules="passwordRules"
         />
       </v-col>
     </v-row>
@@ -34,12 +85,14 @@ const accountStore = useAccountStore()
         <v-text-field
           :label="$t('userInfo.firstName')"
           v-model="accountStore.userAccount.firstName"
+          :rules="stringRules"
         />
       </v-col>
       <v-col>
         <v-text-field
           :label="$t('userInfo.lastName')"
           v-model="accountStore.userAccount.lastName"
+          :rules="stringRules"
         />
       </v-col>
     </v-row>

software/src/pages/accountPage/addressesCard.vue

@@ -3,6 +3,8 @@ import cardView from '@/components/cardView.vue';
 import { useAccountStore } from '@/data/stores/accountStore';
 import outlinedButton from '@/components/outlinedButton.vue';
 import { AddressModel } from '@/data/models/addressModel';
+import { useFeedbackStore } from '@/data/stores/feedbackStore';
+import { getNumberStartRules, getPostalRules, getStringRules } from '@/scripts/validationRules';
 
 const accountStore = useAccountStore()
 </script>
@@ -27,12 +29,16 @@ const accountStore = useAccountStore()
               <v-text-field
                 :label="$t('userInfo.street')"
                 v-model="address.street"
+                :rules="getStringRules()"
+                clearable
               />
             </v-col>
             <v-col>
               <v-text-field
                 :label="$t('userInfo.houseNumber')"
                 v-model="address.houseNumber"
+                :rules="getNumberStartRules()"
+                clearable
               />
             </v-col>
           </v-row>
@@ -42,12 +48,16 @@ const accountStore = useAccountStore()
               <v-text-field
                 :label="$t('userInfo.postalCode')"
                 v-model="address.postalCode"
+                :rules="getPostalRules()"
+                clearable
               />
             </v-col>
             <v-col>
               <v-text-field
                 :label="$t('userInfo.city')"
                 v-model="address.city"
+                :rules="getStringRules()"
+                clearable
               />
             </v-col>
           </v-row>

software/src/pages/accountPage/paymentsCard.vue

@@ -3,6 +3,7 @@ import cardView from '@/components/cardView.vue';
 import { useAccountStore } from '@/data/stores/accountStore';
 import outlinedButton from '@/components/outlinedButton.vue';
 import { PaymentModel } from '@/data/models/paymentModel';
+import { getIbanRules, getStringRules } from '@/scripts/validationRules';
 
 const accountStore = useAccountStore()
 
@@ -29,12 +30,14 @@ const accountStore = useAccountStore()
               <v-text-field
                 :label="$t('userInfo.bankName')"
                 v-model="payment.bankName"
+                :rules="getStringRules()"
               />
             </v-col>
             <v-col>
               <v-text-field
                 :label="$t('userInfo.iban')"
                 v-model="payment.iban"
+                :rules="getIbanRules()"
               />
             </v-col>
           </v-row>

software/src/pages/basketPage/index.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { useBasketStore } from '@/data/stores/basketStore';
 import productsTable from './productsTable.vue';
-import alertBanner from '@/components/alertBanner.vue';
 import cardView from '@/components/cardView.vue';
 import orderingDialog from './orderingDialog.vue';
 import outlinedButton from '@/components/outlinedButton.vue';
@@ -15,11 +14,6 @@ const showOrderingDialog = ref()
 
 <template>
   <v-container max-width="1000">
-    <v-row>
-      <v-col>
-        <alert-banner />
-      </v-col>
-    </v-row>
     <v-row>
       <v-col>
         <card-view

software/src/pages/loginPage/index.vue

@@ -2,19 +2,12 @@
 import { ref } from 'vue';
 import loginForm from './loginForm.vue';
 import registerForm from './registerForm.vue';
-import alertBanner from '@/components/alertBanner.vue';
 
 const showRegisterCard = ref(false)
 </script>
 
 <template>
-  <v-container max-width="800">
-    <v-row>
-      <v-col>
-        <alert-banner />
-      </v-col>
-    </v-row>
-
+  <v-container max-width="500">
     <v-expand-transition>
       <v-row v-if="!showRegisterCard">
         <v-col>

software/src/pages/loginPage/loginForm.vue

@@ -9,10 +9,28 @@ const showRegisterCard = defineModel("showRegisterCard", { type: Boolean, defaul
 const loginInProgress = ref(false)
 const username = ref("duranduran")
 const password = ref("H4nn0ver")
+const usernameWrong = ref(false)
+const passwordWrong = ref(false)
 
 async function startLogin() {
   loginInProgress.value = true
-  await accountStore.login(username.value, password.value)
+  usernameWrong.value = false
+  passwordWrong.value = false
+
+  if (username.value == null || username.value.length == 0) {
+    usernameWrong.value = true
+  } 
+
+  if (password.value == null || password.value.length == 0) {
+    passwordWrong.value = true
+  }
+
+  if (username.value != null && username.value.length > 0 && 
+    password.value != null && password.value.length > 0)
+  {
+    await accountStore.login(username.value, password.value)
+  }
+
   loginInProgress.value = false
 }
 </script>
@@ -21,14 +39,26 @@ async function startLogin() {
   <card-view :title="$t('menu.login')" prepend-icon="mdi-login" elevation="8">
     <v-row>
       <v-col>
-        <v-text-field :label="$t('account.username')" prepend-icon="mdi-account" clearable v-model="username"/>
+        <v-text-field
+          :label="$t('account.username')"
+          prepend-icon="mdi-account"
+          v-model="username"
+          :error="usernameWrong"
+          clearable
+        />
       </v-col>
     </v-row>
 
     <v-row>
       <v-col>
-        <v-text-field :label="$t('account.password')" prepend-icon="mdi-key" type="password" 
-          clearable v-model="password" />
+        <v-text-field
+          :label="$t('account.password')"
+          prepend-icon="mdi-key"
+          type="password" 
+          v-model="password"
+          :error="passwordWrong"
+          clearable
+        />
       </v-col>
     </v-row>
 

software/src/pages/loginPage/registerForm.vue

@@ -4,90 +4,14 @@ import { ref } from 'vue';
 import cardView from '@/components/cardView.vue';
 import outlinedButton from '@/components/outlinedButton.vue';
 import { useAccountStore } from '@/data/stores/accountStore';
-import { i18n } from '@/plugins/i18n';
 import { useFeedbackStore } from '@/data/stores/feedbackStore';
+import { getEmailRules, getPasswordRules, getStringRules } from '@/scripts/validationRules';
 
 const newUser = ref(new AccountModel())
 const showRegisterCard = defineModel("showRegisterCard", { type: Boolean, default: false })
 const accountStore = useAccountStore()
-const feedbackStore = useFeedbackStore()
 const registerInProgress = ref(false)
 
-const stringRules = [
-  value => {
-    if (value) {
-      return true
-    } else {
-      return feedbackStore.i18n.t('required')
-    }
-  },
-  value => {
-    if (/[^0-9]/.test(value)) {
-      return true
-    } else {
-      return feedbackStore.i18n.t('noDigitsAllowed')
-    }
-  },
-  value => {
-    if (value?.length >= 4) {
-      return true
-    } else {
-      return feedbackStore.i18n.t('notEnoughChars')
-    }
-  }
-]
-
-const passwordRules = [
-  value => {
-    if (value) {
-      return true
-    } else {
-      return feedbackStore.i18n.t('required')
-    }
-  },
-  value => {
-    if (value?.length >= 8) {
-      return true
-    } else {
-      return feedbackStore.i18n.t('passwordToShort')
-    }
-  }
-]
-
-const postalRules = [
-  value => {
-    if (/[0-9]/.test(value)) {
-      return true
-    } else {
-      return feedbackStore.i18n.t('onlyDigitsAllowed')
-    }
-  },
-  value => {
-    if (value?.length == 5) {
-      return true
-    } else {
-      return feedbackStore.i18n.t('notEnoughChars')
-    }
-  }
-]
-
-const numberRules = [
-  value => {
-    if (value) {
-      return true
-    } else {
-      return feedbackStore.i18n.t('required')
-    }
-  },
-  value => {
-    if (/[0-9]/.test(value)) {
-      return true
-    } else {
-      return feedbackStore.i18n.t('onlyDigitsAllowed')
-    }
-  },
-]
-
 async function registerAccount() {
   registerInProgress.value = true
 
@@ -97,7 +21,10 @@ async function registerAccount() {
 </script>
 
 <template>
-  <card-view :title="$t('account.register')">
+  <card-view
+    :title="$t('account.register')"
+    icon="mdi-account-plus"
+  >
     <v-row>
       <v-col>
         <v-text-field
@@ -105,10 +32,12 @@ async function registerAccount() {
           prepend-icon="mdi-account"
           v-model="newUser.username"
           clearable
-          :rules="stringRules"
+          :rules="getStringRules()"
         />
       </v-col>
+    </v-row>
 
+    <v-row>
       <v-col>
         <v-text-field
           :label="$t('account.password')"
@@ -116,7 +45,7 @@ async function registerAccount() {
           type="password"
           v-model="newUser.password"
           clearable
-          :rules="passwordRules"
+          :rules="getPasswordRules()"
         />
       </v-col>
     </v-row>
@@ -124,60 +53,11 @@ async function registerAccount() {
     <v-row>
       <v-col>
         <v-text-field
-          :label="$t('userInfo.firstName')"
-          prepend-icon="mdi-card-account-details"
-          v-model="newUser.firstName"
+          :label="$t('account.email')"
+          prepend-icon="mdi-mail"
+          v-model="newUser.email"
+          :rules="getEmailRules()"
           clearable
-          :rules="stringRules"
-        />
-      </v-col>
-
-      <v-col>
-        <v-text-field
-          :label="$t('userInfo.lastName')"
-          v-model="newUser.lastName"
-          clearable
-          :rules="stringRules"
-        />
-      </v-col>
-    </v-row>
-
-    <v-row>
-      <v-col>
-        <v-text-field
-          :label="$t('userInfo.street')"
-          prepend-icon="mdi-numeric"
-          v-model="newUser.addresses[0].street"
-          clearable
-          :rules="stringRules"
-        />
-      </v-col>
-      <v-col cols="4">
-        <v-text-field
-          :label="$t('userInfo.houseNumber')"
-          v-model="newUser.addresses[0].houseNumber"
-          clearable
-          :rules="numberRules"
-        />
-      </v-col>
-    </v-row>
-
-    <v-row>
-      <v-col cols="4">
-        <v-text-field
-          :label="$t('userInfo.postalCode')"
-          prepend-icon="mdi-city"
-          v-model="newUser.addresses[0].postalCode"
-          clearable
-          :rules="postalRules"
-        />
-      </v-col>
-      <v-col>
-        <v-text-field
-          :label="$t('userInfo.city')"
-          v-model="newUser.addresses[0].city"
-          clearable
-          :rules="stringRules"
         />
       </v-col>
     </v-row>

software/src/pages/preferencesPage/index.vue

@@ -1,13 +1,10 @@
 <script setup lang="ts">
 import pageSetup from './pageSetup.vue';
 import systemSetup from './systemSetup.vue';
-import alertBanner from '@/components/alertBanner.vue';
 </script>
 
 <template>
   <v-container max-width="800">
-    <alert-banner />
-
     <v-row>
       <v-col>
         <page-setup />

software/src/pages/preferencesPage/systemSetup.vue

@@ -25,10 +25,13 @@ getServerState()
   })
 
 async function resetDb() {
+  serverOnline.value = ServerStateEnum.PENDING
+
   await resetDatabase()
     .then(result => {
       if (result.status == 200) {
         feedbackStore.changeBanner(BannerStateEnum.DATABASERESETSUCCESSFUL)
+        serverOnline.value = ServerStateEnum.ONLINE
       }
     })
 

software/src/pages/productsPage/index.vue

@@ -3,7 +3,6 @@ import productCard from "./productCard.vue"
 import productDetails from "./productDetailsDialog.vue"
 import { ref, watch } from "vue";
 import { useProductStore } from "@/data/stores/productStore";
-import alertBanner from "@/components/alertBanner.vue";
 import filterNavDrawer from "./filterNavDrawer.vue";
 import { ProductModel } from '@/data/models/productModel';
 
@@ -24,12 +23,6 @@ watch(() => productStore.onlyDiscounts, async () => { productStore.filterProduct
 
 <template>
   <v-container max-width="1000">
-    <v-row>
-      <v-col>
-        <alert-banner />
-      </v-col>
-    </v-row>
-    
     <v-row dense>
       <v-col
         v-if="productStore.filteredProducts.length > 0"