Move software files one directory up, Readme

src/pages/account/accountDataPage/accountDataCard.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import cardView from '@/components/basics/cardView.vue';
+import { useAccountStore } from '@/stores/account.store';
+import { useFeedbackStore } from '@/stores/feedback.store';
+
+const accountStore = useAccountStore()
+const feedbackStore = useFeedbackStore()
+
+const passwordRules = [
+  value => {
+    if (value) {
+      return true
+    } else {
+      return feedbackStore.i18n.t('misc.validation.required')
+    }
+  },
+  value => {
+    if (value?.length >= 8) {
+      return true
+    } else {
+      return feedbackStore.i18n.t('misc.validation.notEnoughChars')
+    }
+  }
+]
+
+const stringRules = [
+  value => {
+    if (value) {
+      return true
+    } else {
+      return feedbackStore.i18n.t('misc.validation.required')
+    }
+  },
+  value => {
+    if (/[^0-9]/.test(value)) {
+      return true
+    } else {
+      return feedbackStore.i18n.t('misc.validation.noDigitsAllowed')
+    }
+  },
+  value => {
+    if (value?.length >= 3) {
+      return true
+    } else {
+      return feedbackStore.i18n.t('misc.validation.notEnoughChars')
+    }
+  }
+]
+</script>
+
+<template>
+  <card-view
+    :title="$t('account.masterData')"
+    icon="mdi-account"
+  >
+    <v-row>
+      <v-col>
+        <v-text-field
+          :label="$t('account.userData.email')"
+          v-model="accountStore.userAccount.email"
+          disabled
+        />
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col>
+        <v-text-field
+          :label="$t('account.userData.username')"
+          v-model="accountStore.userAccount.username"
+          disabled
+        />
+      </v-col>
+      <v-col>
+        <v-text-field
+          :label="$t('account.userData.password')"
+          v-model="accountStore.userAccount.password"
+          type="password"
+          :rules="passwordRules"
+        />
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <v-text-field
+          :label="$t('account.userData.firstName')"
+          v-model="accountStore.userAccount.firstName"
+          :rules="stringRules"
+        />
+      </v-col>
+      <v-col>
+        <v-text-field
+          :label="$t('account.userData.lastName')"
+          v-model="accountStore.userAccount.lastName"
+          :rules="stringRules"
+        />
+      </v-col>
+    </v-row>
+  </card-view>
+</template>

src/pages/account/accountDataPage/accountManagingCard.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import cardView from '@/components/basics/cardView.vue';
+import confirmDialog from '@/components/basics/confirmDialog.vue';
+import outlinedButton from '@/components/basics/outlinedButton.vue';
+import { useAccountStore } from '@/stores/account.store';
+import { ref } from 'vue';
+
+const showConfirmDialog = ref(false)
+const accountStore = useAccountStore()
+</script>
+
+<template>
+  <card-view
+    :title="$t('account.accountManagement')"
+    icon="mdi-account-edit"
+  >
+    <v-row>
+      <v-col class="d-flex justify-center align-center">
+        <outlined-button
+          prepend-icon="mdi-delete"
+          color="red"
+          :loading="accountStore.fetchInProgress"
+          @click="showConfirmDialog = true"
+        >
+          {{ $t("account.deleteAccount.deleteAccount") }}
+        </outlined-button>
+      </v-col>
+
+      <v-col class="d-flex justify-center align-center">
+        <outlined-button
+          prepend-icon="mdi-content-save"
+          color="green"
+          :loading="accountStore.fetchInProgress"
+          @click="accountStore.updateAccount()"
+        >
+          {{ $t("misc.actions.save") }}
+        </outlined-button>
+      </v-col>
+    </v-row>
+  </card-view>
+
+  <confirm-dialog
+    v-model="showConfirmDialog"
+    :title="$t('account.deleteAccount.dialog.title')"
+    :description="$t('account.deleteAccount.dialog.description')"
+    :on-confirm="() => accountStore.deleteAccount(accountStore.userAccount)"
+  />
+</template>

src/pages/account/accountDataPage/addressesCard.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import cardView from '@/components/basics/cardView.vue';
+import { useAccountStore } from '@/stores/account.store';
+import outlinedButton from '@/components/basics/outlinedButton.vue';
+import { AddressModel } from '@/data/models/user/addressModel';
+import { getNumberStartRules, getPostalRules, getStringRules } from '@/scripts/validationRules';
+
+const accountStore = useAccountStore()
+</script>
+
+<template>
+  <card-view 
+    icon="mdi-home"
+    :title="$t('account.userData.address')"
+  >
+    <v-expansion-panels v-if="accountStore.userAccount.addresses.length > 0">
+      <v-expansion-panel
+        v-for="address in accountStore.userAccount.addresses"
+        color="primary"
+      >
+        <template #title>
+          {{ address.street + ' ' + address.houseNumber }}
+        </template>
+
+        <template #text>
+          <v-row class="pt-5">
+            <v-col>
+              <v-text-field
+                :label="$t('account.userData.street')"
+                v-model="address.street"
+                :rules="getStringRules()"
+                clearable
+              />
+            </v-col>
+            <v-col>
+              <v-text-field
+                :label="$t('account.userData.houseNumber')"
+                v-model="address.houseNumber"
+                :rules="getNumberStartRules()"
+                clearable
+              />
+            </v-col>
+          </v-row>
+
+          <v-row>
+            <v-col>
+              <v-text-field
+                :label="$t('account.userData.postalCode')"
+                v-model="address.postalCode"
+                :rules="getPostalRules()"
+                clearable
+              />
+            </v-col>
+            <v-col>
+              <v-text-field
+                :label="$t('account.userData.placeOfResidence')"
+                v-model="address.city"
+                :rules="getStringRules()"
+                clearable
+              />
+            </v-col>
+          </v-row>
+
+          <v-row>
+            <v-col class="d-flex justify-center align-center">
+              <outlined-button
+                @click="accountStore.removeAddress(address)"
+                color="red"
+                prepend-icon="mdi-delete"
+              >
+                {{ $t('misc.actions.remove') }}
+              </outlined-button>
+            </v-col>
+          </v-row>
+        </template>
+      </v-expansion-panel>
+    </v-expansion-panels>
+
+    <v-empty-state
+      v-else
+      :title="$t('account.noAddresses')"
+      icon="mdi-home-off"
+    />
+
+    <template #actions>
+      <outlined-button
+        @click="accountStore.userAccount.addresses.push(new AddressModel())"
+        prepend-icon="mdi-plus"
+        color="green"
+      >
+        {{ $t('misc.actions.add') }}
+      </outlined-button>
+    </template>
+  </card-view>
+</template>

src/pages/account/accountDataPage/index.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import accountDataCard from './accountDataCard.vue';
+import accountManagingCard from './accountManagingCard.vue';
+import addressesCard from './addressesCard.vue';
+import paymentsCard from './paymentsCard.vue';
+import { useRouter } from 'vue-router';
+import accountSubPageLayout from '@/layouts/accountSubPageLayout.vue';
+
+const router = useRouter()
+</script>
+
+<template>
+  <account-sub-page-layout>
+    <v-row>
+      <v-col>
+        <account-data-card />
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <addresses-card />
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <payments-card />
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <account-managing-card />
+      </v-col>
+    </v-row>
+  </account-sub-page-layout>
+</template>

src/pages/account/accountDataPage/paymentsCard.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import cardView from '@/components/basics/cardView.vue';
+import { useAccountStore } from '@/stores/account.store';
+import outlinedButton from '@/components/basics/outlinedButton.vue';
+import { PaymentModel } from '@/data/models/user/paymentModel';
+import { getIbanRules, getStringRules } from '@/scripts/validationRules';
+import cardViewOneLine from '@/components/basics/cardViewOneLine.vue';
+
+const accountStore = useAccountStore()
+</script>
+
+<template>
+  <card-view 
+    icon="mdi-currency-usd"
+    :title="$t('account.userData.payment')"
+  >
+    <v-row>
+      <v-col>
+        <card-view-one-line
+          color="amber"
+          prepend-icon="mdi-alert"
+          :title="$t('account.noRealPaymentsNeeded')"
+        />
+      </v-col>
+    </v-row>
+
+    <v-row v-if="accountStore.userAccount.payments.length > 0">
+      <v-col>
+        <v-expansion-panels>
+          <v-expansion-panel
+            v-for="payment in accountStore.userAccount.payments"
+            color="primary"
+          >
+            <template #title>
+              {{ payment.bankName }}
+            </template>
+            <template #text>
+              <v-row class="pt-5">
+                <v-col>
+                  <v-text-field
+                    :label="$t('account.userData.bankName')"
+                    v-model="payment.bankName"
+                    :rules="getStringRules()"
+                  />
+                </v-col>
+                <v-col>
+                  <v-text-field
+                    :label="$t('account.userData.iban')"
+                    v-model="payment.iban"
+                    :rules="getIbanRules()"
+                  />
+                </v-col>
+              </v-row>
+
+              <v-row>
+                <v-col class="d-flex justify-center align-center">
+                  <outlined-button
+                    @click="accountStore.removePayment(payment)"
+                    color="red"
+                    prepend-icon="mdi-delete"
+                  >
+                    {{ $t('misc.actions.remove') }}
+                  </outlined-button>
+                </v-col>
+              </v-row>
+            </template>
+          </v-expansion-panel>
+        </v-expansion-panels>
+      </v-col>
+    </v-row>
+
+    <v-row v-else>
+      <v-col>
+        <v-empty-state
+          :title="$t('account.noPayments')"
+          icon="mdi-currency-usd-off"
+        />
+      </v-col>
+    </v-row>
+
+
+
+    <template #actions>
+      <outlined-button
+        @click="accountStore.userAccount.payments.push(new PaymentModel())"
+        prepend-icon="mdi-plus"
+        color="green"
+      >
+        {{ $t('misc.actions.add') }}
+      </outlined-button>
+    </template>
+  </card-view>
+</template>

src/pages/account/accountHomePage/index.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { useAccountStore } from '@/stores/account.store';
+import cardView from '@/components/basics/cardView.vue';
+import { useRouter } from 'vue-router';
+
+const accountStore = useAccountStore()
+const router = useRouter()
+</script>
+
+<template>
+  <v-container max-width="1000">
+    <v-row>
+      <v-col>
+        <card-view
+          :title="$t('misc.greeting', { msg: accountStore.userAccount.username })"
+          icon="mdi-hand-wave"
+        >
+          <v-container>
+            <v-row>
+              <v-col>
+                <card-view
+                  :title="$t('order.order', 2)"
+                  icon="mdi-basket-check"
+                  @click="router.push('/account/orders')"
+                >
+                  {{ $t('order.ordersDescription') }}
+                </card-view>
+              </v-col>
+            </v-row>
+
+            <v-row>
+              <v-col>
+                <card-view
+                  :title="$t('account.accountManagement')"
+                  icon="mdi-account"
+                  @click="router.push('/account/data')"
+                >
+                  {{ $t('account.accountManagementDescription') }}
+                </card-view>
+              </v-col>
+            </v-row>
+
+            <v-row>
+              <v-col>
+                <card-view
+                  :title="$t('account.logout.logout')"
+                  icon="mdi-logout"
+                  @click="accountStore.logout(); router.push('/account/login')"
+                >
+                  {{ $t('account.logout.logoutDescription') }}
+                </card-view>
+              </v-col>
+            </v-row>
+          </v-container>
+        </card-view>
+        
+      </v-col>
+    </v-row>
+  </v-container>
+</template>

src/pages/account/loginPage/index.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import loginForm from './loginForm.vue';
+import registerForm from './registerForm.vue';
+
+const showRegisterCard = ref(false)
+</script>
+
+<template>
+  <v-container max-width="500">
+    <v-expand-transition>
+      <v-row v-if="!showRegisterCard">
+        <v-col>
+          <login-form v-model:show-register-card="showRegisterCard" />
+        </v-col>
+      </v-row>
+    </v-expand-transition>
+
+    <v-expand-transition>
+      <v-row v-if="showRegisterCard">
+        <v-col>
+          <register-form v-model:show-register-card="showRegisterCard" />
+        </v-col>
+      </v-row>
+    </v-expand-transition>
+  </v-container>
+</template>

src/pages/account/loginPage/loginForm.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import cardView from '@/components/basics/cardView.vue';
+import outlinedButton from '@/components/basics/outlinedButton.vue';
+import { useAccountStore } from '@/stores/account.store';
+import { useRouter } from 'vue-router';
+
+const accountStore = useAccountStore()
+const showRegisterCard = defineModel("showRegisterCard", { type: Boolean, default: false })
+const router = useRouter()
+
+async function startLogin() {
+  accountStore.login()
+    .then(result => {
+      if (accountStore.userAccountToken != "") {
+        router.push("/account/home")
+      }
+    })
+}
+</script>
+
+<template>
+  <card-view
+    :title="$t('account.login.login')"
+    icon="mdi-login"
+    max-width="600"
+  >
+    <v-row>
+      <v-col>
+        <v-text-field
+          :label="$t('account.userData.username')"
+          prepend-icon="mdi-account"
+          v-model="accountStore.loginData.username"
+          variant="outlined"
+          clearable
+          @keyup.enter="startLogin"
+        />
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <v-text-field
+          :label="$t('account.userData.password')"
+          prepend-icon="mdi-key"
+          type="password" 
+          variant="outlined"
+          v-model="accountStore.loginData.password"
+          clearable
+          @keyup.enter="startLogin"
+        />
+      </v-col>
+    </v-row>
+
+    <template #actions>
+      <outlined-button 
+        @click="showRegisterCard = true"
+        prepend-icon="mdi-plus"
+        :loading="accountStore.fetchInProgress"
+      >
+        {{ $t('account.register') }}
+      </outlined-button>
+
+      <outlined-button
+        append-icon="mdi-arrow-right"
+        @click="startLogin"
+        :loading="accountStore.fetchInProgress"
+        color="green"
+      >
+        {{ $t('account.login.login') }}
+      </outlined-button>
+    </template>
+  </card-view>
+</template>

src/pages/account/loginPage/registerForm.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import cardView from '@/components/basics/cardView.vue';
+import outlinedButton from '@/components/basics/outlinedButton.vue';
+import { useAccountStore } from '@/stores/account.store';
+import { getEmailRules, getPasswordRules, getStringRules } from '@/scripts/validationRules';
+import { useRouter } from 'vue-router';
+
+const showRegisterCard = defineModel("showRegisterCard", { type: Boolean, default: false })
+const accountStore = useAccountStore()
+const router = useRouter()
+
+async function registerAccount() {
+  accountStore.registerAccount()
+    .then(result => {
+      if (result) {
+        showRegisterCard.value = false
+      }
+    })
+}
+</script>
+
+<template>
+  <card-view
+    :title="$t('account.register')"
+    icon="mdi-account-plus"
+  >
+    <v-row>
+      <v-col>
+        <v-text-field
+          :label="$t('account.userData.username')"
+          prepend-icon="mdi-account"
+          v-model="accountStore.registerData.username"
+          clearable
+          hide-details
+          variant="outlined"
+          :rules="getStringRules()"
+        />
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <v-text-field
+          :label="$t('account.userData.password')"
+          prepend-icon="mdi-key"
+          type="password"
+          v-model="accountStore.registerData.password"
+          clearable
+          hide-details
+          variant="outlined"
+          :rules="getPasswordRules()"
+        />
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <v-text-field
+          :label="$t('account.userData.email')"
+          prepend-icon="mdi-mail"
+          v-model="accountStore.registerData.email"
+          :rules="getEmailRules()"
+          variant="outlined"
+          hide-details
+          clearable
+        />
+      </v-col>
+    </v-row>
+
+    <template #actions>
+      <outlined-button
+        prepend-icon="mdi-arrow-left" 
+        @click="showRegisterCard = false"
+        :disabled="accountStore.fetchInProgress"
+      >
+        {{ $t('account.login.backToLogin') }}
+      </outlined-button>
+
+      <outlined-button
+        prepend-icon="mdi-account-plus"
+        @click="registerAccount"
+        :loading="accountStore.fetchInProgress"
+      >
+        {{ $t('account.register') }}
+      </outlined-button>
+    </template>
+  </card-view>
+</template>

src/pages/account/ordersPage/index.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { useAccountStore } from '@/stores/account.store';
+import orderItem from './orderItem.vue';
+import accountSubPageLayout from '@/layouts/accountSubPageLayout.vue';
+import circularProgressIndeterminate from '@/components/basics/circularProgressIndeterminate.vue';
+import { useOrderStore } from '@/stores/order.store';
+
+const accountStore = useAccountStore()
+const orderStore = useOrderStore()
+
+orderStore.getOrdersOfAccount(accountStore.userAccount)
+</script>
+
+<template>
+  <account-sub-page-layout>
+    <!-- During fetching state -->
+    <v-row
+      v-if="orderStore.fetchInProgress"
+    >
+      <v-col class="text-center">
+        <circular-progress-indeterminate />
+      </v-col>
+    </v-row>
+
+    <!-- Display all orders -->
+    <v-row
+      v-else-if="orderStore.orders.length > 0"
+      v-for="order in orderStore.orders"
+    >
+      <v-col>
+        <order-item
+          :order="order"
+        />
+      </v-col>
+    </v-row>
+
+    <!-- No orders -->
+    <v-row v-else>
+      <v-col>
+        <v-empty-state
+          icon="mdi-basket-off"
+          :title="$t('order.noOrders')"
+          :text="$t('order.noOrdersText')"
+        />
+      </v-col>
+    </v-row>
+  </account-sub-page-layout>
+</template>

src/pages/account/ordersPage/orderItem.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import cardView from '@/components/basics/cardView.vue';
+import ticketListItem from '@/components/pageParts/ticketListItem.vue';
+import { OrderApiModel } from '@/data/models/apiEndpoints/orderApiModel';
+import moment from 'moment';
+
+defineProps({
+  order: OrderApiModel
+})
+</script>
+
+<template>
+  <card-view
+    :title="$t('order.orderedAt') + ' ' + moment(order.orderedAt).format('DD.MM.YY, HH:mm') + ' ' + $t('order.oclock')"
+    variant="outlined"
+  >
+    <v-row>
+      <v-col>
+        <v-card variant="outlined" class="ml-5 pa-3">
+          <div class="text-h6">
+            <v-icon icon="mdi-home" />
+            {{ $t('account.userData.address', 1) }}
+          </div>
+
+          <div class="pl-9">{{ order.address.street }} {{ order.address.houseNumber }}</div>
+          <div class="pl-9">{{ order.address.postalCode }} {{ order.address.city }}</div>
+        </v-card>
+      </v-col>
+
+      <v-col>
+        <v-card variant="outlined" class="mr-5 pa-3">
+          <div class="text-h6">
+            <v-icon icon="mdi-currency-usd" />
+            {{ $t('account.userData.payment', 1) }}
+          </div>
+          <div class="pl-9">{{ order.payment.bankName }}</div>
+          <div class="pl-9">{{ order.payment.iban }}</div>
+        </v-card>
+      </v-col>
+    </v-row>
+
+    <v-row v-for="ticket of order.tickets">
+      <v-col>
+        <ticket-list-item
+          :concert="ticket.concert"
+          :event="ticket.concert.name"
+          :band="ticket.concert.band"
+          :location="ticket.concert.location"
+          :city="ticket.concert.location.city"
+          :image="ticket.concert.image"
+          :seat-nr="ticket.seat.seatNr"
+          :seat-group="ticket.seat.seatRow.seatGroup.name"
+          :seat-row="ticket.seat.seatRow.row"
+        />
+      </v-col>
+    </v-row>
+  </card-view>
+</template>