Update register

This commit is contained in:
T-angmo 2023-09-30 20:01:47 +07:00
parent 2ebc4f571d
commit 44c8350384
2 changed files with 112 additions and 24 deletions

View file

@ -3,32 +3,87 @@
<v-app> <v-app>
<top-bar :show-back-icon="true" :page-title="pageTitle" /> <top-bar :show-back-icon="true" :page-title="pageTitle" />
<v-main> <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-main>
</v-app> </v-app>
</template> </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'; import TopBar from '@/components/TopBar.vue';
export default { export default {
@ -38,7 +93,7 @@
name: 'register', name: 'register',
data() { data() {
return { return {
pageTitle: 'สมัครสมาชิ', pageTitle: 'สมัครสมาชิ',
input: { input: {
username: '', username: '',
password: '', password: '',
@ -82,7 +137,40 @@
console.log('Username and Password cannot be empty'); 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>

View file

@ -6,7 +6,7 @@
<h2>ลงชอเขาใชเพอบนทกการตงคาอยางปลอดภ</h2> <h2>ลงชอเขาใชเพอบนทกการตงคาอยางปลอดภ</h2>
<v-container class="d-flex justify-center align-center"> <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: '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> </v-container>
</div> </div>
</v-container> </v-container>