(feat): init commit of Vue frontend

src/App.vue

@@ -1,15 +1,17 @@
 <template>
-  <img alt="Vue logo" src="./assets/logo.png">
-  <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <Login />
+  <LoggedinPage />
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import Login from './components/UserLogin.vue';
+import LoggedinPage from './components/LoggedinPage.vue';
 
 export default {
   name: 'App',
   components: {
-    HelloWorld
+    Login,
+    LoggedinPage
   }
 }
 </script>

src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/LoggedinPage.vue

@@ -0,0 +1,19 @@
+<template>
+    <div class="logged-in">
+      <h2>You have successfully logged in!</h2>
+      <p>Welcome back to RideAware!</p>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    name: 'LoggedInPage',
+  };
+  </script>
+  
+  <style scoped>
+  .logged-in {
+    text-align: center;
+  }
+  </style>
+  

src/components/UserLogin.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="login">
+    <h2>Login to RideAware</h2>
+    <form @submit.prevent="login">
+      <div>
+        <label for="username">Username:</label>
+        <input type="text" id="username" v-model="username" required />
+      </div>
+      <div>
+        <label for="password">Password:</label>
+        <input type="password" id="password" v-model="password" required />
+      </div>
+      <button type="submit">Login</button>
+    </form>
+    <p v-if="error" class="error">{{ error }}</p>
+  </div>
+</template>
+
+<script>
+import axios from 'axios';
+export default {
+  name: 'UserLogin',
+  data() {
+    return {
+      username: '',
+      password: '',
+      error: null,
+    };
+  },
+  methods: {
+    async login() {
+      try {
+        const response = await axios.post('http://127.0.0.1:5000/login', {
+          username: this.username,
+          password: this.password,
+        });
+        console.log('Login successful:', response.data);
+        // Redirect to logged-in page on success
+        this.$router.push('/logged-in');
+      } catch (error) {
+        console.error('Login failed:', error.response.data);
+        this.error = error.response.data.error || 'An error occurred';
+      }
+    },
+  },
+};
+</script>

src/main.js

@@ -1,4 +1,7 @@
-import { createApp } from 'vue'
-import App from './App.vue'
+import { createApp } from 'vue';
+import App from './App.vue';
+import router from './router';
 
-createApp(App).mount('#app')
+const app = createApp(App);
+app.use(router);
+app.mount('#app');

src/router/index.js

@@ -0,0 +1,16 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import Login from '../components/UserLogin.vue';
+import LoggedinPage from '@/components/LoggedinPage.vue';
+
+const routes = [
+  { path: '/', component: Login },
+  { path: '/logged-in', component: LoggedinPage}
+  //{ path: '/dashboard', component: () => import('../components/Dashboard.vue') }, // Placeholder for a dashboard page
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
+export default router;