From f6e4bfdf2f5d3006a0ed3453f5cf3021bd8c1210 Mon Sep 17 00:00:00 2001
From: Tobias Zoghaib <tobias.zoghaib@stud.uni-hannover.de>
Date: Tue, 10 Sep 2024 18:50:47 +0200
Subject: [PATCH] Add dialog to create new user

---
 software/src/App.vue                          |  2 +-
 software/src/components/actionDialog.vue      | 30 ++++++
 software/src/locales/english.json             | 11 ++-
 software/src/locales/german.json              | 11 ++-
 software/src/pages/helpPage/index.vue         |  6 ++
 software/src/pages/loginPage/index.vue        |  9 +-
 software/src/pages/loginPage/loginForm.vue    | 12 +--
 software/src/pages/loginPage/registerForm.vue | 54 +++++++++++
 .../src/pages/productsPage/productDetails.vue | 92 +++++++++----------
 software/src/router/routes.ts                 |  6 +-
 10 files changed, 171 insertions(+), 62 deletions(-)
 create mode 100644 software/src/components/actionDialog.vue
 create mode 100644 software/src/pages/helpPage/index.vue
 create mode 100644 software/src/pages/loginPage/registerForm.vue

diff --git a/software/src/App.vue b/software/src/App.vue
index 81f06bc..81b575b 100644
--- a/software/src/App.vue
+++ b/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">
diff --git a/software/src/components/actionDialog.vue b/software/src/components/actionDialog.vue
new file mode 100644
index 0000000..08c8ec4
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/software/src/locales/english.json b/software/src/locales/english.json
index 6957d01..443360c 100644
--- a/software/src/locales/english.json
+++ b/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"
+  }
 }
\ No newline at end of file
diff --git a/software/src/locales/german.json b/software/src/locales/german.json
index bb5176c..237d1e4 100644
--- a/software/src/locales/german.json
+++ b/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"
+  }
 }
\ No newline at end of file
diff --git a/software/src/pages/helpPage/index.vue b/software/src/pages/helpPage/index.vue
new file mode 100644
index 0000000..d1f6730
--- /dev/null
+++ b/software/src/pages/helpPage/index.vue
@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  Help
+</template>
\ No newline at end of file
diff --git a/software/src/pages/loginPage/index.vue b/software/src/pages/loginPage/index.vue
index a1e8862..6de2249 100644
--- a/software/src/pages/loginPage/index.vue
+++ b/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>
\ No newline at end of file
diff --git a/software/src/pages/loginPage/loginForm.vue b/software/src/pages/loginPage/loginForm.vue
index dfcedf8..e01348c 100644
--- a/software/src/pages/loginPage/loginForm.vue
+++ b/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>
\ No newline at end of file
diff --git a/software/src/pages/loginPage/registerForm.vue b/software/src/pages/loginPage/registerForm.vue
new file mode 100644
index 0000000..281728b
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/software/src/pages/productsPage/productDetails.vue b/software/src/pages/productsPage/productDetails.vue
index ec5d316..0fb28ed 100644
--- a/software/src/pages/productsPage/productDetails.vue
+++ b/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,54 +24,51 @@ 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" />
+  <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" />
+          {{ productCategory.name }}
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col>
+          {{ product.description }}
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col>
+          <v-number-input
+            :reverse="false"
+            controlVariant="default"
+            :label="$t('quantity')"
+            :hideInput="false"
+            :inset="false"
+            v-model="nrOfArticles"
+            :min="1"
+            :max="10"
+            density="comfortable"
+          />
+        </v-col>
 
-      <v-card-text>
-        <v-row>
-          <v-col>
-            <v-icon :icon="productCategory.icon" />
-            {{ productCategory.name }}
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col>
-            {{ product.description }}
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col>
-            <v-number-input
-              :reverse="false"
-              controlVariant="default"
-              :label="$t('quantity')"
-              :hideInput="false"
-              :inset="false"
-              v-model="nrOfArticles"
-              :min="1"
-              :max="10"
-              density="comfortable"
-            />
-          </v-col>
+        <v-spacer />
 
-          <v-spacer />
+        <v-col cols="2" class="justify-center d-flex">
+          {{ calcProductPrice(product, nrOfArticles) }} €
+        </v-col>
+      </v-row>
+    </template>
 
-          <v-col cols="2" class="justify-center d-flex">
-            {{ calcProductPrice(product, nrOfArticles) }} €
-          </v-col>
-        </v-row>
-      </v-card-text>
-
-      <v-card-actions>
-        <v-btn
-          prepend-icon="mdi-cart-plus"
-          @click="addProductToBasket"
-        >
-          {{ $t('addToBasket') }}
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-    
-  </v-dialog>
+    <template #actions>
+      <v-btn prepend-icon="mdi-cart-plus" @click="addProductToBasket" color="primary" variant="outlined">
+        {{ $t('addToBasket') }}
+      </v-btn>
+    </template>
+  </action-dialog>
 </template>
\ No newline at end of file
diff --git a/software/src/router/routes.ts b/software/src/router/routes.ts
index aac969b..7674891 100644
--- a/software/src/router/routes.ts
+++ b/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
\ No newline at end of file