From 7a693d51f9f181a76245c63ff840b0afb78d05e0 Mon Sep 17 00:00:00 2001
From: rchrist <rchrist@stud.hs-heilbronn.de>
Date: Tue, 23 Apr 2019 16:58:22 +0200
Subject: [PATCH] register page added

---
 frontend/src/layouts/MyLayout.vue |  14 +++
 frontend/src/pages/Register.vue   | 180 ++++++++++++++++++++++++++++++
 frontend/src/router/routes.js     |   5 +
 3 files changed, 199 insertions(+)
 create mode 100644 frontend/src/pages/Register.vue

diff --git a/frontend/src/layouts/MyLayout.vue b/frontend/src/layouts/MyLayout.vue
index 6bc4eb9..ab73ffc 100644
--- a/frontend/src/layouts/MyLayout.vue
+++ b/frontend/src/layouts/MyLayout.vue
@@ -99,6 +99,20 @@
             <q-item-label>Login</q-item-label>
           </q-item-section>
         </q-item>
+        <q-item
+          clickable
+          class="text-primary"
+          v-ripple
+          tag="a"
+          to="/Register"
+        >
+          <q-item-section avatar>
+            <q-icon name="assignment"/>
+          </q-item-section>
+          <q-item-section>
+            <q-item-label>Register</q-item-label>
+          </q-item-section>
+        </q-item>
       </q-list>
     </q-drawer>
 
diff --git a/frontend/src/pages/Register.vue b/frontend/src/pages/Register.vue
new file mode 100644
index 0000000..efb2487
--- /dev/null
+++ b/frontend/src/pages/Register.vue
@@ -0,0 +1,180 @@
+<template>
+  <div class="q-pa-md">
+    <form class="register">
+      <div class="q-pa-md">
+        <div class="column q-gutter-lg" style="">
+          <div class="col">
+            <div class="">
+              <div class="" style="max-width: 440px">
+                <q-input outlined filled stack-label v-model="user.name" type="text"
+                         label="Nutzername eingeben (mindestens 2 Zeichen)"/>
+              </div>
+            </div>
+          </div>
+            <div class="col">
+              <div class="">
+                <div class="" style="max-width: 440px">
+                  <q-input outlined filled stack-label v-model="user.email" type="text" label="Email eingeben (gültige Email)"/>
+                </div>
+              </div>
+            </div>
+            <div class="col">
+              <div class="">
+                <div class="" style="max-width: 440px">
+                  <q-input outlined filled stack-label v-model="user.checkemail" type="text"
+                           label="Email erneut eingeben" placeholer="Email"/>
+                </div>
+              </div>
+            </div>
+            <div class="col">
+              <div class="">
+                <div class="" style="max-width: 440px">
+                  <q-input outlined filled stack-label v-model="user.password" type="password"
+                           label="Passwort eingeben (mindestens 8 Zeichen)"/>
+                </div>
+              </div>
+            </div>
+            <div class="col">
+              <div class="">
+                <div class="" style="max-width: 440px">
+                  <q-input outlined filled stack-label v-model="user.checkpassword" type="password"
+                           label="Passwort erneut eingeben"/>
+                </div>
+              </div>
+            </div>
+            <div class="col">
+              <div class="">
+                <div class="" style="max-width: 440px">
+                  <q-btn
+                    label="Sign up"
+                    color="primary"
+                    class="full-width"
+                    type="submit"
+                    @click="register()"
+                    unelevated
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+    </form>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return{
+        user: {
+          name:"",
+          email:"",
+          checkemail:"",
+          password: "",
+          checkpassword: "",
+        },
+      }
+    },
+    methods: {
+      register: function () {
+        this.login();
+        console.log(localStorage.getItem('registerToken'));
+        if(this.user.email===this.user.checkemail&&this.user.password===this.user.checkpassword){
+          this.login();
+          const data = {
+            name: this.user.name,
+            password: this.user.password,
+            email: this.user.email,
+            roles: [
+              {
+                role: "CACHER",
+                domain: "geocaching.de"
+              }
+            ]
+          };
+
+          console.log("POST /api/register/ - json: " + JSON.stringify(data));
+
+          this.$axios.post('http://www.se.hs-heilbronn.de:8090/buga19usermanagement/account/register', data)
+            .then((response) => {
+              console.log("POST /api/login/ - response: ");
+              console.log(response.data);
+              console.log("TOKEN");
+              console.log(response.data.token);
+            })
+            .catch((error) => {
+              let message;
+              let header = "Fehler: ";
+              if (error.response) {
+                console.log("ERROR RESPONSE")
+                // The request was made and the server responded with a status code
+                // that falls out of the range of 2xx
+                message = error.response.data.error;
+                header += error.response.status;
+              } else if (error.request) {
+                // The request was made but no response was received
+                // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
+                // http.ClientRequest in node.js
+                message = error.request;
+              } else {
+                // Something happened in setting up the request that triggered an Error
+                console.log('Error', error.message);
+                message = error.message;
+              }
+              console.log(error.config);
+              this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: message, title: header,});
+            })
+        } else {
+
+          if(this.user.email!=this.user.checkemail) {
+            this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {
+              message: "Email stimmt nicht überein",
+              title: "Fehler",
+            });
+          } else if (this.user.password!=this.user.checkpassword){
+            this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {
+              message: "Passwort stimmt nicht überein",
+              title: "Fehler",
+            });
+          }
+        }
+      },
+      login: function () {
+
+        const logindata = {
+          email: "register@bugageocaching.de",
+          password: "reguser2019"
+        };
+
+        console.log("GET /api/login/ - json: " + JSON.stringify(logindata));
+
+        this.$axios.post('http://www.se.hs-heilbronn.de:8090/buga19usermanagement/account/login', logindata)
+          .then((response) => {
+            localStorage.setItem('registerToken', JSON.stringify(response.data));
+          })
+          .catch((error) => {
+            let message;
+            let header = "Fehler: ";
+            if (error.response) {
+              console.log("ERROR RESPONSE")
+              // The request was made and the server responded with a status code
+              // that falls out of the range of 2xx
+              message = error.response.data.error;
+              header += error.response.status;
+            } else if (error.request) {
+              // The request was made but no response was received
+              // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
+              // http.ClientRequest in node.js
+              message = error.request;
+            } else {
+              // Something happened in setting up the request that triggered an Error
+              console.log('Error', error.message);
+              message = error.message;
+            }
+            console.log(error.config);
+            this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { message: message, title: header, });
+          })
+      },
+    },
+  };
+</script>
diff --git a/frontend/src/router/routes.js b/frontend/src/router/routes.js
index 362b097..03ffe42 100644
--- a/frontend/src/router/routes.js
+++ b/frontend/src/router/routes.js
@@ -54,6 +54,11 @@ const routes = [
    path: "/profile/",
       component: () => import("layouts/MyLayout.vue"),
     children: [{ path: "", component: () => import("pages/Profile.vue") }]
+  },
+  {
+    path: "/register/",
+    component: () => import("layouts/MyLayout.vue"),
+    children: [{ path: "", component: () => import("pages/Register.vue") }]
   }
 ];