User registration completed

software/src/data/models/accountModel.ts

@@ -0,0 +1,13 @@
+export class AccountModel {
+  id: number
+  username: string = ""
+  password: string = ""
+  street: string = ""
+  houseNumber: number = 0
+  postalCode: number = 0
+  city: string = ""
+  firstName: string = ""
+  lastName: string = ""
+  createdAt: string = ""
+  updatedAt: string = ""
+}

software/src/locales/english.json

@@ -36,7 +36,7 @@
   "username": "Username",
   "password": "Password",
   "login": "Login",
-  "noAccountRegister": "No Account? Register now!",
+  "noAccountRegister": "Create new Account!",
   "register": "Create Account",
   "userInfo": {
     "firstName": "First Name",
@@ -45,5 +45,6 @@
     "houseNumber": "House Number",
     "postalCode": "Postal Code",
     "city": "City"
-  }
+  },
+  "backToLogin": "Back to Login"
 }

software/src/locales/german.json

@@ -36,7 +36,7 @@
   "username": "Username",
   "password": "Passwort",
   "login": "Login",
-  "noAccountRegister": "Noch keinen Account? Jetzt anmelden!",
+  "noAccountRegister": "Neuen Account erstellen!",
   "register": "Account erstellen",
   "userInfo": {
     "firstName": "Vorname",
@@ -45,5 +45,6 @@
     "houseNumber": "Hausnummer",
     "postalCode": "Postleitzahl",
     "city": "Stadt"
-  }
+  },
+  "backToLogin": "Zurück zum Login"
 }

software/src/pages/loginPage/index.vue

@@ -2,18 +2,35 @@
 import { ref } from 'vue';
 import loginForm from './loginForm.vue';
 import registerForm from './registerForm.vue';
+import BannerModel from '@/data/models/bannerModel';
+import alertBanner from '@/components/alertBanner.vue';
 
-const showRegisterDialog = ref(false)
+const showRegisterCard = ref(false)
+const banner = ref(new BannerModel())
 </script>
 
 <template>
-  <v-container max-width="600">
+  <v-container max-width="800">
     <v-row>
       <v-col>
-        <login-form v-model:show-register-dialog="showRegisterDialog" />
+        <alert-banner v-model:alert-banner="banner" />
       </v-col>
     </v-row>
-  </v-container>
 
-  <register-form v-model:show-register-dialog="showRegisterDialog" />
+    <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:banner="banner" v-model:show-register-card="showRegisterCard" />
+        </v-col>
+      </v-row>
+    </v-expand-transition>
+  </v-container>
 </template>

software/src/pages/loginPage/loginForm.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const showRegisterDialog = defineModel("showRegisterDialog", { type: Boolean, default: false })
+const showRegisterCard = defineModel("showRegisterCard", { type: Boolean, default: false })
 </script>
 
 <template>
@@ -16,19 +16,15 @@ const showRegisterDialog = defineModel("showRegisterDialog", { type: Boolean, de
           <v-text-field :label="$t('password')" prepend-icon="mdi-key" type="password" clearable />
         </v-col>
       </v-row>
-
-      <v-row>
-        <v-col>
-          <!-- todo -->
-          <v-btn prepend-icon="mdi-send" color="primary" block>{{ $t('login') }}</v-btn>
-        </v-col>
-      </v-row>
     </v-container>
 
-    <v-card-text class="text-center">
-      <v-btn flat append-icon="mdi-chevron-right" @click="showRegisterDialog = true">
+    <v-card-actions>
+      <v-btn variant="outlined" @click="showRegisterCard = true" color="primary" prepend-icon="mdi-plus">
         {{ $t('noAccountRegister') }}
       </v-btn>
-    </v-card-text>
+      <v-spacer />
+      <v-btn variant="outlined" append-icon="mdi-arrow-right" color="primary">{{ $t('login') }}</v-btn>
+    </v-card-actions>
+
   </v-card>
 </template>

software/src/pages/loginPage/registerForm.vue

@@ -1,54 +1,107 @@
 <script setup lang="ts">
-import actionDialog from '@/components/actionDialog.vue';
+import { AccountModel } from '@/data/models/accountModel';
+import BannerModel from '@/data/models/bannerModel';
+import axios from 'axios';
+import { ref } from 'vue';
 
-const showRegisterDialog = defineModel("showRegisterDialog", { type: Boolean, required: true })
+const newUser = ref(new AccountModel())
+const banner = defineModel("banner", { required: true, type: BannerModel })
+const showRegisterCard = defineModel("showRegisterCard", { type: Boolean, default: false })
+
+function registerUser() {
+  axios.post('http://127.0.0.1:3000/accounts/', newUser.value)
+    .then(res => {
+      console.log(res.status)
+      if (res.status == 200) {
+        banner.value.message = "Created!"
+        banner.value.color = "green"
+        banner.value.icon = "mdi-check"
+        banner.value.show = true
+      }
+    })
+    .catch((error) => {
+      if (error.status == 400) {
+        banner.value.color = "red"
+        banner.value.icon = "mdi-alert-circle"
+        banner.value.message = error.response.data.error
+        banner.value.show = true
+      }
+    })
+}
 </script>
 
 <template>
-  <action-dialog v-model="showRegisterDialog" :title="$t('register')">
-    <template #content>
+  <v-card :title="$t('register')">
+    <v-container>
       <v-row>
         <v-col>
-          <v-text-field :label="$t('username')" prepend-icon="mdi-account" clearable />
+          <v-text-field
+            :label="$t('username')"
+            prepend-icon="mdi-account"
+            v-model="newUser.username"
+            clearable
+          />
         </v-col>
 
         <v-col>
-          <v-text-field :label="$t('password')" prepend-icon="mdi-key" type="password" clearable />
+          <v-text-field
+            :label="$t('password')"
+            prepend-icon="mdi-key"
+            type="password"
+            v-model="newUser.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-text-field
+            :label="$t('userInfo.firstName')"
+            prepend-icon="mdi-card-account-details"
+            v-model="newUser.firstName"
+            clearable
+          />
         </v-col>
 
         <v-col>
-          <v-text-field :label="$t('userInfo.lastName')" clearable />
+          <v-text-field :label="$t('userInfo.lastName')" v-model="newUser.lastName" clearable />
         </v-col>
       </v-row>
 
       <v-row>
         <v-col>
-          <v-text-field :label="$t('userInfo.street')" prepend-icon="mdi-numeric" clearable />
+          <v-text-field
+            :label="$t('userInfo.street')"
+            prepend-icon="mdi-numeric"
+            v-model="newUser.street"
+            clearable
+          />
         </v-col>
         <v-col cols="4">
-          <v-text-field :label="$t('userInfo.houseNumber')"  clearable />
+          <v-text-field :label="$t('userInfo.houseNumber')" v-model="newUser.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-text-field
+            :label="$t('userInfo.postalCode')"
+            prepend-icon="mdi-city"
+            v-model="newUser.postalCode"
+            clearable
+          />
         </v-col>
         <v-col>
-          <v-text-field :label="$t('userInfo.city')" clearable />
+          <v-text-field :label="$t('userInfo.city')" v-model="newUser.city" clearable />
         </v-col>
       </v-row>
-
-    </template>
+    </v-container>
 
     <template #actions>
-      <v-btn prepend-icon="mdi-account-plus" color="primary" variant="outlined">{{ $t('register') }}</v-btn>
+      <v-btn prepend-icon="mdi-arrow-left" color="primary" variant="outlined" @click="showRegisterCard = false">{{ $t('backToLogin') }}</v-btn>
+      <v-spacer />
+      <v-btn prepend-icon="mdi-account-plus" color="primary" variant="outlined" @click="registerUser">{{ $t('register') }}</v-btn>
     </template>
-  </action-dialog>
+  </v-card>
 </template>