register communication

frontend/src/App.vue

@@ -54,9 +54,11 @@
             <v-card class="main">
               <v-card-actions>
                 <v-spacer></v-spacer>
-                <v-btn  icon @click="dialog = false"><v-icon>mdi-window-close</v-icon></v-btn>
+                <v-btn icon @click="dialog = false">
+                  <v-icon>mdi-window-close</v-icon>
+                </v-btn>
               </v-card-actions>
-              <SignIn v-on:signIn="signIn"/>
+              <SignIn v-on:signIn="signIn" v-on:signUp="signUp" />
               <p id="loginError"></p>
             </v-card>
           </v-dialog>
@@ -81,9 +83,7 @@
                   <v-list-item-subtitle>Admin</v-list-item-subtitle>
                 </v-list-item-content>
 
-                <v-list-item-action>
+                <v-list-item-action></v-list-item-action>
-
-                </v-list-item-action>
               </v-list-item>
             </v-list>
 
@@ -92,12 +92,7 @@
             <v-list>
               <v-list-item>
                 <v-list-item-action>
-                  <v-switch
+                  <v-switch color="primary" :input-value="login" @change="login= !login"></v-switch>
-
-                    color="primary"
-                    :input-value="login"
-                    @change="login= !login"
-                  ></v-switch>
                 </v-list-item-action>
                 <v-list-item-title>View as Guest</v-list-item-title>
               </v-list-item>
@@ -127,9 +122,9 @@
 </template>
 
 <script>
-
 import SignIn from "./views/SignIn.vue";
-var baseUri = "http://plesk.icaotix.de:5000";
+//var baseUri = "http://plesk.icaotix.de:5000";
+import { baseUri } from './variables.js'
 export default {
   components: {
     SignIn
@@ -142,31 +137,60 @@ export default {
     login: true,
     dialog: false,
     menu: false
-    
   }),
   methods: {
     signIn(loginData) {
-
-
       var xhttp = new XMLHttpRequest();
 
       xhttp.onreadystatechange = function() {
-  if (this.status == 200 & this.readyState ==4) {
+        if ((this.status == 200) & (this.readyState == 4)) {
-    sessionStorage.setItem("jwt", this.getResponseHeader("Authorization"));
+          sessionStorage.setItem(
+            "jwt",
+            this.getResponseHeader("Authorization")
+          );
           location.reload();
-
-    
         } else if (this.status != 200 && this.status != 0) {
-  
+          document.getElementById("loginError").innerHTML =
-    document.getElementById("loginError").innerHTML="Login not successfull";
+            "Login not successfull";
         }
       };
       xhttp.open("POST", baseUri + "/login", true);
-  xhttp.send('{"username": "' + loginData.username +'", "password": "'+ loginData.password +'"}');
+      xhttp.send(
- 
+        '{"username": "' +
-    }
+          loginData.username +
-
+          '", "password": "' +
+          loginData.password +
+          '"}'
+      );
     },
+    signUp(signupData) {
+      var xhttp = new XMLHttpRequest();
+
+      xhttp.onreadystatechange = function() {
+        if ((this.status == 201) & (this.readyState == 4)) {     
+          location.reload();
+        } else if (this.status != 201 && this.status != 0) {
+          document.getElementById("loginError").innerHTML =
+            "The username already exist";
+        }
+      };
+      xhttp.open("POST", baseUri + "/sign-up", true);
+      xhttp.setRequestHeader("Content-Type", "application/json");
+      xhttp.send(
+          '{'+
+          '"firstname": "' +
+          signupData.firstname +
+          '", "lastname": "' +
+          signupData.lastname +
+          '", "username": "' +
+          signupData.username +
+          '", "password": "' +
+          signupData.password +
+          '"}'
+      );
+    }
+  },
+
   created() {
     this.$vuetify.theme.dark = true;
   }

frontend/src/variables.js

@@ -0,0 +1 @@
+export const baseUri = 'http://plesk.icaotix.de:5000'

frontend/src/views/SignIn.vue

@@ -79,6 +79,7 @@
                       <v-text-field
                         label="Firstname"
                         name="FirstnameR"
+                        v-model="firstname"
                         prepend-icon="mdi-account-box"
                         type="text"
                         color="primary "
@@ -86,6 +87,7 @@
                       <v-text-field
                         label="Lastname"
                         name="LastnameR"
+                        v-model="lastname"
                         prepend-icon="mdi-account-box"
                         type="text"
                         color="primary"
@@ -93,6 +95,7 @@
                       <v-text-field
                         label="Username"
                         name="UsernameR"
+                        v-model="usernameR"
                         prepend-icon="mdi-account"
                         type="text"
                         color="primary"
@@ -100,14 +103,16 @@
                       <v-text-field
                         label="Password"
                         name="PasswordR"
+                        v-model="passwordR"
                         prepend-icon="mdi-key"
                         type="password"
                         color="primary"
                       />
                     </v-form>
+                    <p id="missingR"></p>
                   </v-card-text>
                   <div class="text-center mt-n5">
-                    <v-btn color="logowhite" rounded outlined >Sign Up</v-btn>
+                    <v-btn color="logowhite" rounded outlined v-on:click="signup()">Sign Up</v-btn>
                   </div>
                 </v-col>
               </v-row>
@@ -125,6 +130,10 @@ export default {
     step: 1,
     username: "",
     password: "",
+    firstname: "",
+    lastname: "",
+    usernameR: "",
+    passwordR: ""
    
   }),
   props: {
@@ -144,6 +153,20 @@ export default {
       }
 
      
+    },
+    signup(){
+      if (this.usernameR != "" && this.passwordR != "") {
+         document.getElementById("missingR").innerHTML= "";
+        const signupData = {
+          firstname: this.firstname,
+          lastname: this.lastname,
+          username: this.usernameR,
+          password: this. passwordR
+        }
+        this.$emit('signUp', signupData);
+      }else {
+        document.getElementById("missingR").innerHTML= "Please fill out all fields";
+      }
     }
   }
 };