yet another quality commit

Author: jazzlikethat

src/components/BarChart.vue

@@ -3,7 +3,7 @@ import * as d3 from "d3";
 export default {
   name: "BarChart",
   props: ["chartData", "attrClass"],
-  template: "<div></div",
+  template: "<div></div>",
   methods: {
     drawBarChart() {
       let dataset = [];

src/components/PieChart.vue

@@ -3,7 +3,7 @@ import * as d3 from "d3";
 export default {
   name: "PieChart",
   props: ["chartData", "attrClass"],
-  template: "<div></div",
+  template: "<div></div>",
   methods: {
     drawPieChart() {
       let dataset = [];
@@ -26,15 +26,7 @@ export default {
 
       let color = d3
         .scaleOrdinal()
-        .range([
-          "#98abc5",
-          "#8a89a6",
-          "#7b6888",
-          "#6b486b",
-          "#a05d56",
-          "#d0743c",
-          "#ff8c00"
-        ]);
+        .range(["#b3b300", "#8a89a6", "#d0743c", "#ff8c00"]);
 
       let arc = d3
         .arc()

src/views/Login.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="login-container">
-    <form class="form-signin">
+    <form class="form-signin" @submit="onSubmit">
       <label for="inputEmail" class="sr-only">Username</label>
       <input
         type="text"
@@ -20,13 +20,12 @@
         placeholder="Password"
         required
       />
-      <button
-        class="btn btn-lg btn-primary btn-block"
-        v-on:click="login()"
-        type="submit"
-      >
+      <button class="btn btn-lg btn-primary btn-block" type="submit">
         Sign in
       </button>
+      <div class="error-message" v-show="showErrorMessage">
+        <span>Incorrect username or password. Please try again.</span>
+      </div>
     </form>
   </div>
 </template>
@@ -39,19 +38,15 @@ export default {
       input: {
         username: "",
         password: ""
-      }
+      },
+      showErrorMessage: false
     };
   },
   methods: {
-    login() {
-      if (
-        this.input.username.trim() === "" ||
-        this.input.password.trim() === ""
-      ) {
-        // show an error message to the user
-        return;
-      }
+    onSubmit(event) {
+      event.preventDefault();
 
+      let authenticated = false;
       let mockAccounts = this.$parent.mockAccounts;
       for (let i = 0; i < mockAccounts.length; i++) {
         let account = mockAccounts[i];
@@ -62,9 +57,14 @@ export default {
         ) {
           continue;
         }
-        this.$emit("authenticated", true);
+        authenticated = true;
+        this.$emit("authenticated", authenticated);
         this.$router.replace({ name: "home" });
       }
+
+      if (!this.authenticated) {
+        this.showErrorMessage = true;
+      }
     }
   }
 };
@@ -78,6 +78,11 @@ export default {
   align-items: center;
   padding-top: 40px;
   padding-bottom: 40px;
+
+  .error-message {
+    margin-top: 15px;
+    font-size: 85%;
+  }
 }
 
 .form-signin {

vue.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  runtimeCompiler: true
+};