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

add login mockup (for backend to testing) reading desc please + minor css fix

Browse source
This commit is contained in:
SRP-mango 2023-09-01 03:10:33 +07:00
parent d2ed7fc3ea
commit 9b4b1a993c
6 changed files with 119 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/views/DestinationInfo.vue
View file

@ -4,9 +4,4 @@
<script setup>
import DestinationInfoCard from '@/components/DestinationInfoCard.vue';
</script>
<style>
</style>
</script>

58
src/views/Login.vue Normal file
View file

@ -0,0 +1,58 @@
<template>
<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>
<v-btn @click.prevent="login">ลงชื่อเข้าใช้</v-btn>
<v-btn >ฉันต้องการสมัครสมาชิก</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: 'Login',
data() {
return {
pageTitle: 'ตั้งค่าบัญชี', // Set the page title here
input: {
username: '',
password: ''
}
};
},
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>

60
src/views/Setting.vue
View file

@ -1,49 +1,20 @@
<template>
<v-sheet class="d-flex justify-center">
<v-sheet class="ma-2 pa-4 mb-auto">
<v-row class="ma-2" justify="space-around">
<v-avatar
color="grey"
size="128"
>
<v-img cover src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/User-avatar.svg/1200px-User-avatar.svg.png"></v-img>
</v-avatar>
</v-row>
<v-list-item
center
class="text-black"
title="SRP Rottenmango"
subtitle="sasha@example.org"
>
</v-list-item>
</v-sheet>
</v-sheet>
<v-app>
<v-container class="d-flex justify-center align-center">
<div>
<h1>Heading</h1>
<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-container>
</div>
</v-container>
<v-sheet class="d-flex justify-center ma-2">
<v-sheet class="mb-auto"
max-width="420px"
min-width="200px"
width="95vw">
<v-list class = "ma-2" density="compact">
<v-list-item
v-for="(item, i) in account_items"
:key="i"
:value="item"
>
<template v-slot:append>
<v-icon :icon="item.icon"></v-icon>
</template>
<v-list-item-title v-text="item.text"></v-list-item-title>
</v-list-item>
</v-list>
<v-list class = "ma-2" density="compact">
<v-list-subheader>การแสดงผล</v-list-subheader>
@ -90,7 +61,8 @@
</v-btn>
</v-sheet>
</v-sheet>
</v-sheet>
</v-app>
</template>
@ -99,7 +71,8 @@
import {RouterLink} from 'vue-router';
const account_items = [
{ text: 'ตั้งค่าบัญชี',icon: 'mdi-chevron-right'},
{ text: 'ตั้งค่าบัญชี',
icon: 'mdi-chevron-right'},
]
@ -113,7 +86,8 @@ const display_items = [
]
const about_items = [
{ text: 'เกี่ยวกับ',icon: 'mdi-chevron-right',}
{ text: 'เกี่ยวกับ',
icon: 'mdi-chevron-right',}
]