add register page (mockup)

src/plugins/router.js

@@ -7,6 +7,7 @@ const routes = [
     {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')},
+    {path: '/register', name: 'register', component: () => import('@/views/Register.vue')},
 ]
 const router = createRouter({
     routes,

src/views/Login.vue

@@ -18,7 +18,7 @@
       </v-container>
       
             <v-btn @click.prevent="login">ลงชื่อเข้าใช้</v-btn>
-            <v-btn >ฉันต้องการสมัครสมาชิก</v-btn>
+            <v-btn :to="{name: 'register'}">ฉันต้องการสมัครสมาชิก</v-btn>
        
     </v-main>
   </v-app>
@@ -26,7 +26,7 @@
 </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 {RouterLink} from 'vue-router';
 import TopBar from '@/components/TopBar.vue';
 
 export default {
@@ -36,7 +36,7 @@ export default {
   name: 'Login',
   data() {
     return {
-      pageTitle: 'ตั้งค่าบัญชี', // Set the page title here
+      pageTitle: 'ลงชื่อเข้าใช้',
       input: {
         username: '',
         password: ''
@@ -45,7 +45,6 @@ export default {
   },
   methods: {
     login() {
-      // Make sure username OR password are not empty
       if (this.input.username !== '' || this.input.password !== '') {
         console.log('Authenticated: Checking with Backend');
       } else {

src/views/Privacy.vue

@@ -0,0 +1,23 @@
+<template>
+    <v-app>
+      <top-bar :show-back-icon="true" :page-title="pageTitle" />  
+      <v-main>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam quisquam quo accusamus totam excepturi consectetur obcaecati, corporis voluptates! Ut ipsum voluptatibus fugit qui fugiat. Ipsam blanditiis eveniet molestias quasi vitae?
+      </v-main>
+    </v-app>
+  
+</template>
+
+<script>
+  import TopBar from '@/components/TopBar.vue';
+  export default { 
+    components: {
+    TopBar
+  },
+  data() {
+    return {
+      pageTitle: 'นโยบายความเป็นส่วนตัว', // Set the page title here
+    };
+  },
+}
+  </script>

src/views/Register.vue

@@ -0,0 +1,63 @@
+<template>
+
+    <v-app>
+      <top-bar :show-back-icon="true" :page-title="pageTitle" />  
+      <v-main>
+        <v-container>
+          <v-form name="register-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>
+            <div class="mb-3">
+              <label for="password">Password Confirmation: </label>
+              <input type="passwordConfirm" id="passwordConfirm" v-model="input.passwordConfirm" />
+            </div>
+            
+          </v-form>
+        </v-container>
+        
+              <v-btn @click.prevent="login">สมัครสมาชิค</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: 'register',
+    data() {
+      return {
+        pageTitle: 'สมัครสมาชิค', // Set the page title here
+        input: {
+          username: '',
+          password: '',
+          passwordConfirm:''
+        }
+      };
+    },
+    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

@@ -6,7 +6,7 @@
         <h2>Sub-Heading</h2>
       <v-container class="d-flex justify-center align-center">
         <v-btn class="ma-2" width="150" :to="{name: 'login'}">ลงชื่อเข้าใช้</v-btn>
-        <v-btn class="ma-2" width="150">สมัครสมาชิค</v-btn>
+        <v-btn class="ma-2" width="150" :to="{name: 'register'}">สมัครสมาชิค</v-btn>
       </v-container>
         </div>
     </v-container>