Merge branch '79-update-users-properties-from-frontend' into 'master'

Resolve "Update users properties from frontend"

Closes #79

See merge request marcel.schwarz/2020ss-qbc-geofence-timetracking!63

backend/src/main/java/de/hft/geotime/security/WebSecurity.java

@@ -11,6 +11,7 @@ import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
 import org.springframework.web.cors.CorsConfiguration;
 import org.springframework.web.cors.CorsConfigurationSource;
 import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
+import java.util.Arrays;
 
 import static de.hft.geotime.security.SecurityConstants.SIGN_UP_URL;
 
@@ -43,8 +44,10 @@ public class WebSecurity extends WebSecurityConfigurerAdapter {
 
     @Bean
     CorsConfigurationSource corsConfigurationSource() {
+		final CorsConfiguration configuration = new CorsConfiguration().applyPermitDefaultValues();
+        configuration.addAllowedMethod("*");
         final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
-        source.registerCorsConfiguration("/**", new CorsConfiguration().applyPermitDefaultValues());
+        source.registerCorsConfiguration("/**", configuration);
         return source;
     }
 }

frontend/src/App.vue

@@ -173,7 +173,7 @@ export default {
           sessionStorage.setItem("loggedin", true);
         
         } else if (this.status != 200 && this.status != 0) {
-          console.log(this.loggedIn);
+      
           document.getElementById("loginError").innerHTML =
             "Login not successfull";
         }

frontend/src/router/index.js

@@ -10,6 +10,7 @@ import Login from "../views/Login.vue";
 import Register from "../views/Register.vue";
 import StatisticOverview from "../views/StatisticOverview.vue";
 import Users from "../views/Users.vue";
+import EditUser from "../views/EditUser.vue";
 
 Vue.use(VueRouter);
 
@@ -66,6 +67,11 @@ const routes = [
     name: "Users",
     component: Users
   },
+  {
+    path: "/edituser",
+    name: "EditUser",
+    component: EditUser
+  },
   {
     path: '*',
     component: missing

frontend/src/views/EditUser.vue

@@ -0,0 +1,229 @@
+<template >
+  <v-container>
+    <v-card align-center>
+      <div class="text-center ma-3">
+      <h2 class="text-center display-2 logowhite--text">User to edit:</h2>
+      <h3 class="text-center display-2 logowhite--text">{{username}}</h3>
+      
+        
+      </div>
+    </v-card>
+    <v-card align-center>
+      <h3 class="text-center display-2 logowhite--text">User Information</h3>
+
+      <v-form>
+        <v-text-field
+          label="firstname"
+          v-model="firstname"
+          name="firstname"
+          prepend-icon="mdi-account"
+          type="text"
+          color="primary"
+        />
+        <v-text-field
+          label="lastname"
+          v-model="lastname"
+          name="lastname"
+          prepend-icon="mdi-account"
+          type="text"
+          color="primary"
+        />
+      </v-form>
+
+      <div class="text-center ma-3">
+        <v-btn rounded color="logowhite" outlined dark v-on:click="editUserInformation()">Edit</v-btn>
+      </div>
+      <p id="noudata"></p>
+    </v-card>
+    <v-card align-center>
+      <h3 class="text-center display-2 logowhite--text">Location</h3>
+
+      <v-form>
+        <v-text-field
+          label="latitude"
+          v-model="latitude"
+          name="latitude"
+          prepend-icon="mdi-map-marker"
+          type="text"
+          color="primary"
+        />
+        <v-text-field
+          label="longitude"
+          v-model="longitude"
+          name="longitude"
+          prepend-icon="mdi-map-marker"
+          type="text"
+          color="primary"
+        />
+        <v-text-field
+          label="radius"
+          v-model="radius"
+          name="radius"
+          prepend-icon="mdi-map-marker-radius"
+          type="text"
+          color="primary"
+        />
+      </v-form>
+
+      <div class="text-center ma-3">
+        <v-btn rounded color="logowhite" outlined dark v-on:click="editLocation()">Edit</v-btn>
+      </div>
+      <p id="locationnotcomplete"></p>
+    </v-card>
+  </v-container>
+</template>
+<script>
+import { baseUri } from "../variables";
+export default {
+  name: "Edituser",
+  data: () => ({
+    firstname: "",
+    lastname: "",
+    longitude: "",
+    latitude: "",
+    radius: "",
+    username:  sessionStorage.getItem("usernameedit")
+  }),
+
+  methods: {
+    editUserInformation() {
+      var link = sessionStorage.getItem("edituser");
+      document.getElementById("noudata").innerHTML = "";
+      if (this.firstname != "" && this.lastname != "") {
+        var xhttp = new XMLHttpRequest();
+
+        xhttp.onreadystatechange = function() {
+          if ((this.status == 200) & (this.readyState == 4)) {
+            alert("sucsessful");
+          }
+        };
+        xhttp.open("PATCH", link, true);
+        xhttp.setRequestHeader("Content-Type", "application/json");
+
+        xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
+        xhttp.send(
+          "{" +
+            '"firstname": "' +
+            this.firstname +
+            '", "lastname": "' +
+            this.lastname +
+            '"}'
+        );
+      } else if (this.firstname != "") {
+        var xhttpfirst = new XMLHttpRequest();
+
+        xhttpfirst.onreadystatechange = function() {
+          if ((this.status == 200) & (this.readyState == 4)) {
+            alert("sucsessful");
+          }
+        };
+        xhttpfirst.open("PATCH", link, true);
+        xhttpfirst.setRequestHeader("Content-Type", "application/json");
+        xhttpfirst.setRequestHeader(
+          "Authorization",
+          sessionStorage.getItem("jwt")
+        );
+        xhttpfirst.send("{" + '"firstname": "' + this.firstname + '"}');
+      } else if (this.lastname != "") {
+        var xhttplast = new XMLHttpRequest();
+
+        xhttplast.onreadystatechange = function() {
+          if ((this.status == 200) & (this.readyState == 4)) {
+            alert("sucsessful");
+          }
+        };
+        xhttplast.open("PATCH", link, true);
+        xhttplast.setRequestHeader("Content-Type", "application/json");
+        xhttplast.setRequestHeader(
+          "Authorization",
+          sessionStorage.getItem("jwt")
+        );
+        xhttplast.send("{" + '"lastname": "' + this.lastname + '"}');
+      } else {
+        document.getElementById("noudata").innerHTML = "please fill out at lest one field";
+      }
+    },
+    editLocation() {
+      var numericerror = false;
+      var link = sessionStorage.getItem("edituser");
+      if (this.longitude != "" && this.latitude != "" && this.radius) {
+        var xhttp = new XMLHttpRequest();
+
+        xhttp.onreadystatechange = function() {
+          if ((this.status == 201) & (this.readyState == 4)) {
+            var location = JSON.parse(xhttp.responseText);
+            sessionStorage.setItem("locationlink", location._links.self.href);
+          } else if(this.readyState == 4 ){
+            
+            
+            numericerror = true;
+            document.getElementById("locationnotcomplete").innerHTML = "Only numeric values are allowed";
+          }
+        };
+        xhttp.open("POST", baseUri + "/locations", false);
+        xhttp.setRequestHeader("Content-Type", "application/json");
+
+        xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
+        xhttp.send(
+          "{" +
+            '"latitude": "' +
+            this.latitude +
+            '", "longitude": "' +
+            this.longitude +
+            '", "radius": "' +
+            this.radius +
+            '"}'
+        );
+        
+        
+        if (numericerror == false) {
+        
+          var xhttpadd = new XMLHttpRequest();
+
+          xhttpadd.onreadystatechange = function() {
+            if ((this.status == 200) & (this.readyState == 4)) {
+              alert("sucsessful");
+            }
+          };
+          xhttpadd.open("PATCH", link, true);
+          xhttpadd.setRequestHeader("Content-Type", "application/json");
+          xhttpadd.setRequestHeader(
+            "Authorization",
+            sessionStorage.getItem("jwt")
+          );
+          xhttpadd.send(
+            "{" +
+              '"location": "' +
+              sessionStorage.getItem("locationlink") +
+              '"}'
+          );
+          document.getElementById("locationnotcomplete").innerHTML = "";
+          sessionStorage.removeItem("locationlink");
+        }
+      } else {
+        document.getElementById("locationnotcomplete").innerHTML = "please fill out all fields";
+      }
+    }
+  },
+  created() {
+    var userxhttp = new XMLHttpRequest();
+    userxhttp.onreadystatechange = function() {
+      if (this.readyState == 4 && this.status == 200) {
+        var username = JSON.parse(userxhttp.responseText);     
+        sessionStorage.setItem(
+          "usernameedit",
+          username.username
+        );
+      }
+    };
+    userxhttp.open("GET",sessionStorage.getItem("edituser"), false);
+
+    userxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
+
+    userxhttp.send(null);
+    this.username = sessionStorage.getItem("usernameedit");
+  }
+  
+  
+};
+</script>

frontend/src/views/Users.vue

@@ -14,20 +14,22 @@ export default {
     UsersItems
   },
   data: () => ({
-    users: JSON.parse(sessionStorage.getItem("users"))
+    users: JSON.parse(sessionStorage.getItem("users")),
+    dialog: false
   }),
   methods: {
-    edituser(username) {
+    edituser(userlink) {
-      alert("Not Implemented. TimeRecordId: " + username);
+     
+      sessionStorage.setItem("edituser", userlink);
+
+      window.location.href = "http://localhost:8080/edituser";
     }
   },
   created() {
     var xhttp = new XMLHttpRequest();
     xhttp.onreadystatechange = function() {
       if (this.readyState == 4 && this.status == 200) {
-        var usersInformation = JSON.parse(xhttp.responseText);
+        var usersInformation = JSON.parse(xhttp.responseText);     
-        console.log(usersInformation);
-        console.log(usersInformation._embedded.users);
         sessionStorage.setItem(
           "users",
           JSON.stringify(usersInformation._embedded.users)

frontend/src/views/UsersItems.vue

@@ -36,7 +36,7 @@
               <v-icon v-else>mdi-pencil</v-icon>
             </v-btn>
           </template>
-          <v-btn fab dark small color="green" @click="$emit('edit-user', user.username)">
+          <v-btn fab dark small color="green" @click="$emit('edit-user', user._links.self.href)">
             <v-icon>mdi-file-document-edit</v-icon>
           </v-btn>
           <v-btn fab dark small color="red" @click="$emit('del-user', user.username)">