Change createTimetrackAccount to use axios

frontend/src/views/CreateTimeTrackAccount.vue

@@ -1,12 +1,11 @@
 <template>
-  <v-container id="createAccountListen">
+  <v-container @keyup.enter.prevent="addAccount">
     <v-card align-center>
       <p class="text-center logowhite--text" style="font-size:30pt">Details</p>
-
       <v-form>
         <v-text-field
           label="name"
-          v-model="newname"
+          v-model="accountData.name"
           name="name"
           prepend-icon="mdi-account-tie"
           type="text"
@@ -14,7 +13,7 @@
         />
         <v-text-field
           label="revenue"
-          v-model="newrevenue"
+          v-model="accountData.revenue"
           name="revenue"
           prepend-icon="mdi-currency-usd"
           type="text"
@@ -22,73 +21,50 @@
         />
         <v-text-field
           label="description"
-          v-model="newdescription"
+          v-model="accountData.description"
           name="description"
           prepend-icon="mdi-information-variant"
           type="text"
           color="primary"
         />
       </v-form>
-
       <div class="text-center ma-3">
-        <v-btn rounded color="logowhite" outlined dark v-on:click="addAccount()">Add</v-btn>
+        <v-btn rounded color="logowhite" outlined dark @click="addAccount">Add</v-btn>
       </div>
     </v-card>
   </v-container>
 </template>
 <script>
   import {BASE_URI} from "../globals";
+  import axios from "axios"
 
   export default {
     name: "CreateTimeTrackAccount",
     data: () => ({
       user: sessionStorage.getItem("timeTrackAccountListUserId"),
-      newname: "",
-      newrevenue: "",
-      newdescription: "",
+      accountData: {name: "", revenue: "", description: ""}
     }),
-
     methods: {
       addAccount() {
-        if (this.newname != "" || this.newrevenue != "" || this.newdescription != "") {
-          var xhttp = new XMLHttpRequest();
-          var suc;
-          xhttp.onreadystatechange = function () {
-            if ((this.status == 201) & (this.readyState == 4)) {
-              suc = true;
-            }
-          };
-          xhttp.open("POST", BASE_URI + "/accounts", false);
-          xhttp.setRequestHeader("Content-Type", "application/json");
-
-          xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
-          xhttp.send(
-            "{" +
-            '"user": "' +
-            this.user +
-            '", "revenue": "' +
-            this.newrevenue +
-            '", "name": "' +
-            this.newname +
-            '", "description": "' +
-            this.newdescription +
-            '"}'
-          );
-          if (suc == true) {
-            this.$router.push("/timetrackaccounts");
+        if (Object.values(this.accountData).every(data => data)) {
+          let postData = {
+            user: this.user,
+            ...this.accountData
           }
+          let config = {
+            headers: {
+              'Authorization': sessionStorage.getItem("jwt")
+            }
+          }
+          axios.post(BASE_URI + "/accounts", postData, config)
+            .then(() => {
+              this.$router.push("/timetrackaccounts")
+            })
+            .catch(err => {
+              console.log("Error " + err)
+            })
         }
       },
-    },
-    mounted() {
-      var listen = document.getElementById('createAccountListen');
-      listen.addEventListener("keyup", e => {
-        if (e.keyCode === 13) {
-          e.preventDefault();
-
-          this.addAccount();
-        }
-      });
     }
   };
 </script>