register communication

frontend/src/App.vue

@@ -20,7 +20,7 @@
               <v-list-item-title>Time Records</v-list-item-title>
             </v-list-item-content>
           </v-list-item>
-            <v-list-item link to="/statistics" v-bind:class="{'d-none':!login}">
+          <v-list-item link to="/statistics" v-bind:class="{'d-none':!login}">
             <v-list-item-action>
               <v-icon>mdi-chart-bar</v-icon>
             </v-list-item-action>
@@ -46,18 +46,20 @@
         <v-toolbar-title>Geo Timetracking</v-toolbar-title>
         <v-spacer></v-spacer>
         <!-- Modal -->
-        <v-row justify="center" >
+        <v-row justify="center">
-          <v-dialog v-model="dialog" width="70%"  persistent>
+          <v-dialog v-model="dialog" width="70%" persistent>
             <template v-slot:activator="{ on }">
               <v-btn color="primary" dark v-on="on">Login</v-btn>
             </template>
             <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>
+              <p id="loginError"></p>
             </v-card>
           </v-dialog>
         </v-row>
@@ -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) {
+    signIn(loginData) {
+      var xhttp = new XMLHttpRequest();
 
+      xhttp.onreadystatechange = function() {
+        if ((this.status == 200) & (this.readyState == 4)) {
+          sessionStorage.setItem(
+            "jwt",
+            this.getResponseHeader("Authorization")
+          );
+          location.reload();
+        } else if (this.status != 200 && this.status != 0) {
+          document.getElementById("loginError").innerHTML =
+            "Login not successfull";
+        }
+      };
+      xhttp.open("POST", baseUri + "/login", true);
+      xhttp.send(
+        '{"username": "' +
+          loginData.username +
+          '", "password": "' +
+          loginData.password +
+          '"}'
+      );
+    },
+    signUp(signupData) {
+      var xhttp = new XMLHttpRequest();
 
-  var xhttp = new XMLHttpRequest();
+      xhttp.onreadystatechange = function() {
-
+        if ((this.status == 201) & (this.readyState == 4)) {     
-xhttp.onreadystatechange = function() {
+          location.reload();
-  if (this.status == 200 & this.readyState ==4) {
+        } else if (this.status != 201 && this.status != 0) {
-    sessionStorage.setItem("jwt", this.getResponseHeader("Authorization"));
+          document.getElementById("loginError").innerHTML =
-    location.reload();
+            "The username already exist";
-
+        }
-    
+      };
-  }else if(this.status != 200 && this.status !=0) {
+      xhttp.open("POST", baseUri + "/sign-up", true);
-  
+      xhttp.setRequestHeader("Content-Type", "application/json");
-    document.getElementById("loginError").innerHTML="Login not successfull";
+      xhttp.send(
-  }
+          '{'+
-};
+          '"firstname": "' +
-  xhttp.open("POST", baseUri + "/login", true);
+          signupData.firstname +
-  xhttp.send('{"username": "' + loginData.username +'", "password": "'+ loginData.password +'"}');
+          '", "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";
+      }
     }
   }
 };