Add dialog to create new user

software/src/App.vue

@@ -29,7 +29,7 @@ i18n.global.locale = userStore.language
           <div v-if="!navRail">{{ $t('menu.shopping') }}</div>
           <div v-else></div>
         </v-list-subheader>
-        <v-list-item :title="$t('menu.products')" prepend-icon="mdi-store" to="/products" link />
+        <v-list-item :title="$t('menu.products')" prepend-icon="mdi-store" to="/" link />
         <v-list-item :title="$t('menu.basket')" to="/basket" link >
           <template v-slot:prepend>
             <v-badge color="primary" :content="basketStore.itemsInBasket.length">

software/src/components/actionDialog.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ModelRef } from 'vue';
+
+const showDialog: ModelRef<boolean> = defineModel()
+
+defineProps({
+  title: String,
+  subtitle: String,
+  imageUrl: {
+    type: String,
+    default: ""
+  }
+})
+</script>
+
+<template>
+  <v-dialog max-width="800" v-model="showDialog">
+    <v-card :title="title" >
+      <v-img v-if="imageUrl != ''" :src="imageUrl" max-height="300" />
+
+      <v-card-text>
+        <slot name="content"></slot>
+      </v-card-text>
+
+      <v-card-actions>
+        <slot name="actions"></slot>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>

software/src/locales/english.json

@@ -36,5 +36,14 @@
   "username": "Username",
   "password": "Password",
   "login": "Login",
-  "noAccountRegister": "No Account? Register now!"
+  "noAccountRegister": "No Account? Register now!",
+  "register": "Create Account",
+  "userInfo": {
+    "firstName": "First Name",
+    "lastName": "Family Name",
+    "street": "Street",
+    "houseNumber": "House Number",
+    "postalCode": "Postal Code",
+    "city": "City"
+  }
 }

software/src/locales/german.json

@@ -36,5 +36,14 @@
   "username": "Username",
   "password": "Passwort",
   "login": "Login",
-  "noAccountRegister": "Noch keinen Account? Jetzt anmelden!"
+  "noAccountRegister": "Noch keinen Account? Jetzt anmelden!",
+  "register": "Account erstellen",
+  "userInfo": {
+    "firstName": "Vorname",
+    "lastName": "Nachname",
+    "street": "Straße",
+    "houseNumber": "Hausnummer",
+    "postalCode": "Postleitzahl",
+    "city": "Stadt"
+  }
 }

software/src/pages/helpPage/index.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  Help
+</template>

software/src/pages/loginPage/index.vue

@@ -1,14 +1,19 @@
 <script setup lang="ts">
-import LoginForm from './loginForm.vue';
+import { ref } from 'vue';
+import loginForm from './loginForm.vue';
+import registerForm from './registerForm.vue';
 
+const showRegisterDialog = ref(false)
 </script>
 
 <template>
   <v-container max-width="600">
     <v-row>
       <v-col>
-        <login-form />
+        <login-form v-model:show-register-dialog="showRegisterDialog" />
       </v-col>
     </v-row>
   </v-container>
+
+  <register-form v-model:show-register-dialog="showRegisterDialog" />
 </template>

software/src/pages/loginPage/loginForm.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+const showRegisterDialog = defineModel("showRegisterDialog", { type: Boolean, default: false })
 </script>
 
 <template>
@@ -25,14 +26,9 @@
     </v-container>
 
     <v-card-text class="text-center">
-      <a
-        class="text-secondary text-decoration-none"
-        href="#"
-        rel="noopener noreferrer"
-        target="_blank"
-      >
-        {{ $t('noAccountRegister') }} <v-icon icon="mdi-chevron-right"/>
-      </a>
+      <v-btn flat append-icon="mdi-chevron-right" @click="showRegisterDialog = true">
+        {{ $t('noAccountRegister') }}
+      </v-btn>
     </v-card-text>
   </v-card>
 </template>

software/src/pages/loginPage/registerForm.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import actionDialog from '@/components/actionDialog.vue';
+
+const showRegisterDialog = defineModel("showRegisterDialog", { type: Boolean, required: true })
+</script>
+
+<template>
+  <action-dialog v-model="showRegisterDialog" :title="$t('register')">
+    <template #content>
+      <v-row>
+        <v-col>
+          <v-text-field :label="$t('username')" prepend-icon="mdi-account" clearable />
+        </v-col>
+
+        <v-col>
+          <v-text-field :label="$t('password')" prepend-icon="mdi-key" type="password" clearable />
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col>
+          <v-text-field :label="$t('userInfo.firstName')" prepend-icon="mdi-card-account-details" clearable />
+        </v-col>
+
+        <v-col>
+          <v-text-field :label="$t('userInfo.lastName')" clearable />
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col>
+          <v-text-field :label="$t('userInfo.street')" prepend-icon="mdi-numeric" clearable />
+        </v-col>
+        <v-col cols="4">
+          <v-text-field :label="$t('userInfo.houseNumber')"  clearable />
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col cols="4">
+          <v-text-field :label="$t('userInfo.postalCode')" prepend-icon="mdi-city" clearable />
+        </v-col>
+        <v-col>
+          <v-text-field :label="$t('userInfo.city')" clearable />
+        </v-col>
+      </v-row>
+
+    </template>
+
+    <template #actions>
+      <v-btn prepend-icon="mdi-account-plus" color="primary" variant="outlined">{{ $t('register') }}</v-btn>
+    </template>
+  </action-dialog>
+</template>

software/src/pages/productsPage/productDetails.vue

@@ -5,6 +5,7 @@ import { CategoryModel } from '@/data/models/categoryModel';
 import { ModelRef, ref } from 'vue';
 import { useBasketStore } from '@/data/stores/basketStore';
 import { calcProductPrice, productToBasketItem } from '@/scripts/productScripts';
+import ActionDialog from '@/components/actionDialog.vue'
 
 const showDialog: ModelRef<boolean> = defineModel()
 const nrOfArticles = ref(1)
@@ -23,11 +24,13 @@ function addProductToBasket() {
 </script>
 
 <template>
-  <v-dialog max-width="800" v-model="showDialog">
-    <v-card :title="product.name" :subtitle="product.brand" >
-      <v-img :src="'http://127.0.0.1:3000/static/' + product.imageUrl" max-height="300" />
-
-      <v-card-text>
+  <action-dialog
+    :title="product.name"
+    :subtitle="product.brand"
+    :image-url="'http://127.0.0.1:3000/static/' + product.imageUrl"
+    v-model="showDialog"
+  >
+    <template #content>
       <v-row>
         <v-col>
           <v-icon :icon="productCategory.icon" />
@@ -60,17 +63,12 @@ function addProductToBasket() {
           {{ calcProductPrice(product, nrOfArticles) }} €
         </v-col>
       </v-row>
-      </v-card-text>
+    </template>
 
-      <v-card-actions>
-        <v-btn
-          prepend-icon="mdi-cart-plus"
-          @click="addProductToBasket"
-        >
+    <template #actions>
+      <v-btn prepend-icon="mdi-cart-plus" @click="addProductToBasket" color="primary" variant="outlined">
         {{ $t('addToBasket') }}
       </v-btn>
-      </v-card-actions>
-    </v-card>
-    
-  </v-dialog>
+    </template>
+  </action-dialog>
 </template>

software/src/router/routes.ts

@@ -4,14 +4,16 @@ import PreferencesPage from "@/pages/preferencesPage/index.vue";
 import ProductsPage from "@/pages/productsPage/index.vue";
 import LoginPage from "@/pages/loginPage/index.vue"
 import BasketPage from "@/pages/basketPage/index.vue"
+import HelpPage from "@/pages/helpPage/index.vue"
 
 const routes = [
-  { path: '/products', component: ProductsPage },
+  { path: '/', component: ProductsPage },
   { path: '/account', component: AccountPage },
   { path: '/orders', component: OrdersPage },
   { path: '/preferences', component: PreferencesPage },
   { path: '/login', component: LoginPage },
-  { path: '/basket', component: BasketPage }
+  { path: '/basket', component: BasketPage },
+  { path: '/help', component: HelpPage }
 ]
 
 export default routes