add login mockup (for backend to testing) reading desc please + minor css fix

src/views/Login.vue

@@ -0,0 +1,58 @@
+<template>
+
+  <v-app>
+    <top-bar :show-back-icon="true" :page-title="pageTitle" />  
+    <v-main>
+      <v-container>
+        <v-form name="login-form">
+          <div class="mb-3">
+            <label for="username">Username: </label>
+            <input type="text" id="username" v-model="input.username" />
+          </div>
+          <div class="mb-3">
+            <label for="password">Password: </label>
+            <input type="password" id="password" v-model="input.password" />
+          </div>
+          
+        </v-form>
+      </v-container>
+      
+            <v-btn @click.prevent="login">ลงชื่อเข้าใช้</v-btn>
+            <v-btn >ฉันต้องการสมัครสมาชิก</v-btn>
+       
+    </v-main>
+  </v-app>
+
+</template>
+
+<script>
+// mango : i have a problem with css due to the icon theme so i make some mock up to testing login/register
+import TopBar from '@/components/TopBar.vue';
+
+export default {
+  components: {
+    TopBar
+  },
+  name: 'Login',
+  data() {
+    return {
+      pageTitle: 'ตั้งค่าบัญชี', // Set the page title here
+      input: {
+        username: '',
+        password: ''
+      }
+    };
+  },
+  methods: {
+    login() {
+      // Make sure username OR password are not empty
+      if (this.input.username !== '' || this.input.password !== '') {
+        console.log('Authenticated: Checking with Backend');
+      } else {
+        console.log('Username and Password cannot be empty');
+      }
+    }
+  }
+};
+
+</script>