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

src/components/BottomNavigation.vue

@@ -4,7 +4,9 @@
                     <v-btn :to="{name: 'home'}"
                     block rounded="lg"
                     min-width="20px"
-                    max-width="120px">
+                    max-width="120px"
+                    class = "white-border"
+                    >
                         <v-icon>mdi-map</v-icon>
                         แผนที่
                     </v-btn>
@@ -13,7 +15,8 @@
                     <v-btn :to="{name: 'favorite'}"
                     block rounded="lg"
                     min-width="20px"
-                    max-width="120px">
+                    max-width="120px"
+                    class = "white-border">
                         <v-icon>mdi-heart</v-icon>
                         สถานที่โปรด
                     </v-btn>
@@ -21,7 +24,8 @@
                     <v-btn :to="{name: 'setting'}"
                     block rounded="lg"
                     min-width="20px"
-                    max-width="120px">
+                    max-width="120px"
+                    class = "white-border">
                         <v-icon>mdi-cog</v-icon>
                         การตั้งค่า
                     </v-btn>
@@ -39,7 +43,7 @@ import {RouterLink} from 'vue-router';
 </script>
 
 <style>
-.v-btn {
+.white-border {
   min-width: 50px;
   border: 3px solid rgba(255, 255, 255, 1);
 }

src/components/TopBar.vue

@@ -0,0 +1,34 @@
+<template>
+  <v-app-bar app class="custom-app-bar">
+    <v-app-bar-nav-icon @click="goBack" v-if="showBackIcon">
+      <v-icon large>mdi-arrow-left</v-icon> 
+    </v-app-bar-nav-icon>
+    <v-toolbar-title class="text-center">{{ pageTitle }}</v-toolbar-title>
+  </v-app-bar>
+</template>
+
+<script>
+export default {
+  props: {
+    showBackIcon: {
+      type: Boolean,
+      default: false
+    },
+    pageTitle: {
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    goBack() {
+      this.$router.go(-1);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.custom-app-bar {
+  box-shadow: none;
+}
+</style>

src/plugins/router.js

@@ -6,6 +6,7 @@ const routes = [
     {path: '/favorite', name: 'favorite', component: () => import('@/views/Favorite.vue')},
     {path: '/setting', name: 'setting', component: () => import('@/views/Setting.vue')},
     {path: '/destination-info', name: 'destination-info', component: () => import('@/views/DestinationInfo.vue')},
+    {path: '/login', name: 'login', component: () => import('@/views/Login.vue')},
 ]
 const router = createRouter({
     routes,

src/views/DestinationInfo.vue

@@ -5,8 +5,3 @@
 <script setup>
     import DestinationInfoCard from '@/components/DestinationInfoCard.vue';
 </script>
-
-
-<style>
-
-</style>

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>

src/views/Setting.vue

@@ -1,49 +1,20 @@
 <template>
-    <v-sheet class="d-flex justify-center">
+<v-app>
-
+    <v-container class="d-flex justify-center align-center">
-        <v-sheet class="ma-2 pa-4 mb-auto">
+        <div>
-
+            <h1>Heading</h1>
-            <v-row class="ma-2" justify="space-around">
+        <h2>Sub-Heading</h2>
-            <v-avatar
+      <v-container class="d-flex justify-center align-center">
-                color="grey"
+        <v-btn class="ma-2" width="150" :to="{name: 'login'}">ลงชื่อเข้าใช้</v-btn>
-                size="128"
+        <v-btn class="ma-2" width="150">สมัครสมาชิค</v-btn>
-            >
+      </v-container>
-            <v-img cover src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/User-avatar.svg/1200px-User-avatar.svg.png"></v-img>
+        </div>
-            </v-avatar>
+    </v-container>
-            </v-row>
-
-            <v-list-item
-            center
-                class="text-black"
-                title="SRP Rottenmango"
-                subtitle="sasha@example.org"
-            >
-            </v-list-item>
-        </v-sheet>
-        
-    </v-sheet>
-
     <v-sheet class="d-flex justify-center ma-2">
         <v-sheet class="mb-auto"
         max-width="420px"
         min-width="200px"
         width="95vw">
-        
-            <v-list class = "ma-2" density="compact">
-                <v-list-item
-                    v-for="(item, i) in account_items"
-                    :key="i"
-                    :value="item"
-                >
-                <template v-slot:append>
-                <v-icon :icon="item.icon"></v-icon>
-                </template>
-
-                    <v-list-item-title v-text="item.text"></v-list-item-title>
-                </v-list-item>
-            </v-list>
-
-            
             <v-list class = "ma-2" density="compact">
                 <v-list-subheader>การแสดงผล</v-list-subheader>
 
@@ -91,6 +62,7 @@
         </v-sheet>
         
     </v-sheet>   
+</v-app> 
 
 </template>
 
@@ -99,7 +71,8 @@
 import {RouterLink} from 'vue-router';
 
 const account_items = [
-    { text: 'ตั้งค่าบัญชี',icon: 'mdi-chevron-right'},
+    { text: 'ตั้งค่าบัญชี',
+    icon: 'mdi-chevron-right'},
     
   ]
 
@@ -113,7 +86,8 @@ const display_items = [
   ]
 
   const about_items = [
-    { text: 'เกี่ยวกับ',icon: 'mdi-chevron-right',}
+    { text: 'เกี่ยวกับ',
+    icon: 'mdi-chevron-right',}
   ]