app/ayanova/src/views/login.vue

@@ -0,0 +1,47 @@
+<template>
+    <div id="login">
+        <h1>Login</h1>
+        <input type="text" name="username" v-model="input.username" placeholder="Username" />
+        <input type="password" name="password" v-model="input.password" placeholder="Password" />
+        <button type="button" v-on:click="login()">Login</button>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'Login',
+        data() {
+            return {
+                input: {
+                    username: "",
+                    password: ""
+                }
+            }
+        },
+        methods: {
+            login() {
+                if(this.input.username != "" && this.input.password != "") {
+                    if(this.input.username == this.$store.state.mockAccount.username && this.input.password == this.$store.state.mockAccount.password) {
+                        this.$emit("authenticated", true);
+                        this.$router.replace({ name: "secure" });
+                    } else {
+                        console.log("The username and / or password is incorrect");
+                    }
+                } else {
+                    console.log("A username and password must be present");
+                }
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    #login {
+        width: 500px;
+        border: 1px solid #CCCCCC;
+        background-color: #FFFFFF;
+        margin: auto;
+        margin-top: 200px;
+        padding: 20px;
+    }
+</style>

app/ayanova/src/views/secure.vue

@@ -0,0 +1,26 @@
+<template>
+    <div id="secure">
+        <h1>Secure Area</h1>
+        <p>
+            This is a secure area
+        </p>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'Secure',
+        data() {
+            return {};
+        }
+    }
+</script>
+
+<style scoped>
+    #secure {
+        background-color: #FFFFFF;
+        border: 1px solid #CCCCCC;
+        padding: 20px;
+        margin-top: 10px;
+    }
+</style>