little-lines/frontend
Archived
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases 2 Activity

Update Login

Browse source
This commit is contained in:
T-angmo 2023-10-01 02:03:16 +07:00
parent 44c8350384
commit 930eb2dbde
2 changed files with 89 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

101
src/views/Login.vue
View file

@ -3,31 +3,78 @@
<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>
<div class="text-center mt-8 mb-16">
<div class="text-h4 font-weight-bold">
ยินดีต้อนรับกลับสู่
<div>Little Lines</div>
</div>
</div>
<div class="mx-5">
<v-text-field
class="username"
v-model="input.username"
label="อีเมล"
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-btn :to="{name: 'register'}">ฉันต้องการสมัครสมาชิก</v-btn>
<v-contaioner>
<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>

8
src/views/Register.vue
View file

@ -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%;
}