Update register

src/views/Register.vue

@@ -3,32 +3,87 @@
     <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="password" id="passwordConfirm" v-model="input.passwordConfirm" />
-            </div>
         
-          </v-form>
+          <div class="text-center mt-8 mb-16">
-        </v-container>
+            <div class="text-h4">
+              <div class="font-weight-bold">Little Lines</div>
+            </div>
+            <div>ระบบนำทางสำหรับ Micromobility</div>
+          </div>
          
-              <v-btn @click.prevent="register">สมัครสมาชิค</v-btn>
+        <div class="mx-5">
+          <v-text-field 
+            class="username" 
+            v-model="input.username" 
+            label="Username" 
+            variant="solo"
+          >
+            <template v-slot:append-inner>
+                <img
+                  class="iconEdit"
+                  :src="edit"
+                >
+            </template>
+          </v-text-field>
+
+          <v-text-field 
+            class="password" 
+            v-model="input.password" 
+            label="Password" 
+            variant="solo"
+          >
+            <template v-slot:append-inner>
+                <img
+                  class="iconEdit"
+                  :src="edit"
+                >
+                <img
+                  class="iconEyeNotLooking"
+                  :src="eyeNotLooking"
+                >
+            </template>
+          </v-text-field>
+
+          <v-text-field 
+            class="passwordC" 
+            v-model="input.passwordConfirm" 
+            label="Password Confirmation" 
+            variant="solo"
+          >
+            <template v-slot:append-inner>
+                <img
+                  class="iconEdit"
+                  :src="edit"
+                >
+                <img
+                  class="iconEyeNotLooking"
+                  :src="eyeNotLooking"
+                >
+            </template>
+          </v-text-field>
+        </div>        
+        
+        <v-checkbox color="#F16322" class="check">
+          <template v-slot:label>
+            <div>ฉันได้อ่านและยอมรับ</div>
+            <a href="https://www.google.co.th/?hl=th" >นโยบายความเป็นส่วนตัว</a>
+          </template>
+        </v-checkbox>
+        
+        <v-btn @click.prevent="register" rounded="xl" variant="flat" class="text-white" width="45vw" height="44px" color="#f16322">
+          สมัครสมาชิก</v-btn>
         
       </v-main>
     </v-app>
   
   </template>
 
-  <script>
+<script setup>
+import edit from '../../icons/Material/edit.svg';
+import eyeNotLooking from '../../icons/Material/eye-not-looking.svg';
+</script>
+
+<script>
   import TopBar from '@/components/TopBar.vue';
   
   export default {
@@ -38,7 +93,7 @@
     name: 'register',
     data() {
       return {
-        pageTitle: 'สมัครสมาชิค', 
+        pageTitle: 'สมัครสมาชิก', 
         input: {
           username: '',
           password: '',
@@ -82,7 +137,40 @@
           console.log('Username and Password cannot be empty');
         }
       }
-    }
+    },
   };
-  </script>
+</script>
+
+<style>
+.user {
+  background-color: aqua;
+}
+.username, .password {
+  margin-bottom: -21px;
+}
+.check {
+  display: flex;
+  justify-content:space-around;
+  padding-top: 5%;
+  padding-bottom: 5%;
+}
+.text-white {
+  margin: 0;
+  position: absolute;
+  left: 50%;
+  -ms-transform: translateX(-50%);
+  transform: translateX(-50%);
+}
+.iconEdit, .iconEyeNotLooking {
+  width: 25px;
+  height: 25px;
+}
+.iconEdit {
+  margin-right: 10px;
+}
+.iconEyeNotLooking {
+  margin-right: 10px;
+  margin-left: 10px;
+}
+</style>
   

src/views/Setting.vue

@@ -6,7 +6,7 @@
         <h2>ลงชื่อเข้าใช้เพื่อบันทึกการตั้งค่าอย่างปลอดภัย</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" :to="{name: 'register'}">สมัครสมาชิค</v-btn>
+        <v-btn class="ma-2" width="150" :to="{name: 'register'}">สมัครสมาชิก</v-btn>
       </v-container>
         </div>
     </v-container>