Update Login

src/views/Login.vue

@@ -3,31 +3,78 @@
   <v-app>
     <top-bar :show-back-icon="true" :page-title="pageTitle" />  
     <v-main>
-      <v-container>
+      <div class="text-center mt-8 mb-16">
-        <v-form name="login-form">
+            <div class="text-h4 font-weight-bold">
-          <div class="mb-3">
+              ยินดีต้อนรับกลับสู่
-            <label for="username">Username: </label>
+              <div>Little Lines</div>
-            <input type="text" id="username" v-model="input.username" />
+            </div>
-          </div>
+      </div>
-          <div class="mb-3">
+
-            <label for="password">Password: </label>
+      <div class="mx-5">
-            <input type="password" id="password" v-model="input.password" />
+          <v-text-field 
-          </div>
+            class="username" 
-          
+            v-model="input.username" 
-        </v-form>
+            label="อีเมล" 
-      </v-container>
+            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="รหัสผ่าน" 
+            variant="solo"
+          >
+            <template v-slot:append-inner>
+                <img
+                  class="iconEdit"
+                  :src="edit"
+                >
+                <img
+                  class="iconEyeNotLooking"
+                  :src="eyeNotLooking"
+                >
+            </template>
+          </v-text-field>
+        </div>   
       
-            <v-btn @click.prevent="login">ลงชื่อเข้าใช้</v-btn>
+        <v-contaioner>
-            <v-btn :to="{name: 'register'}">ฉันต้องการสมัครสมาชิก</v-btn>
+            <v-row class="button">
+              <v-btn @click.prevent="login" rounded="xl" variant="flat" class="text-white" width="45vw" height="44px" color="#f16322">
+              ลงชื่อเข้าใช้</v-btn>
+            </v-row>
+            <v-row class="button">
+              <v-btn class="text-none" rounded="xl" variant="tonal" width="45vw" height="44px">
+                ลงชื่อเข้าใช้ด้วย Google</v-btn>
+            </v-row>
+            <v-row class="button">
+              <v-btn :to="{name: 'register'}" rounded="xl" variant="tonal" width="45vw" height="44px">
+                ฉันต้องการสมัครสมาชิก</v-btn>
+            </v-row>
+        </v-contaioner>
+        
+        
        
     </v-main>
   </v-app>
 
 </template>
 
+<script setup>
+import edit from '../../icons/Material/edit.svg';
+import eyeNotLooking from '../../icons/Material/eye-not-looking.svg';
+</script>
+
 <script>
 import {RouterLink} from 'vue-router';
 import TopBar from '@/components/TopBar.vue';
+import { VContainer } from 'vuetify/lib/components/index.mjs';
 
 export default {
   components: {
@@ -79,5 +126,27 @@ export default {
     }
   }
 };
-
 </script>
+
+<style>
+.username {
+  margin-bottom: -21px;
+}
+.iconEdit, .iconEyeNotLooking {
+  width: 25px;
+  height: 25px;
+}
+.iconEdit {
+  margin-right: 10px;
+}
+.iconEyeNotLooking {
+  margin-right: 10px;
+  margin-left: 10px;
+}
+.button {
+  padding: 10px;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+}
+</style>

src/views/Register.vue

@@ -15,7 +15,7 @@
           <v-text-field 
             class="username" 
             v-model="input.username" 
-            label="Username" 
+            label="อีเมล" 
             variant="solo"
           >
             <template v-slot:append-inner>
@@ -29,7 +29,7 @@
           <v-text-field 
             class="password" 
             v-model="input.password" 
-            label="Password" 
+            label="รหัสผ่าน" 
             variant="solo"
           >
             <template v-slot:append-inner>
@@ -47,7 +47,7 @@
           <v-text-field 
             class="passwordC" 
             v-model="input.passwordConfirm" 
-            label="Password Confirmation" 
+            label="ยืนยันรหัสผ่าน" 
             variant="solo"
           >
             <template v-slot:append-inner>
@@ -150,7 +150,7 @@ import eyeNotLooking from '../../icons/Material/eye-not-looking.svg';
 }
 .check {
   display: flex;
-  justify-content:space-around;
+  justify-content:center;
   padding-top: 5%;
   padding-bottom: 5%;
 }