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

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

View file

@ -4,7 +4,9 @@
<v-btn :to="{name: 'home'}" <v-btn :to="{name: 'home'}"
block rounded="lg" block rounded="lg"
min-width="20px" min-width="20px"
max-width="120px"> max-width="120px"
class = "white-border"
>
<v-icon>mdi-map</v-icon> <v-icon>mdi-map</v-icon>
แผนท แผนท
</v-btn> </v-btn>
@ -13,7 +15,8 @@
<v-btn :to="{name: 'favorite'}" <v-btn :to="{name: 'favorite'}"
block rounded="lg" block rounded="lg"
min-width="20px" min-width="20px"
max-width="120px"> max-width="120px"
class = "white-border">
<v-icon>mdi-heart</v-icon> <v-icon>mdi-heart</v-icon>
สถานทโปรด สถานทโปรด
</v-btn> </v-btn>
@ -21,7 +24,8 @@
<v-btn :to="{name: 'setting'}" <v-btn :to="{name: 'setting'}"
block rounded="lg" block rounded="lg"
min-width="20px" min-width="20px"
max-width="120px"> max-width="120px"
class = "white-border">
<v-icon>mdi-cog</v-icon> <v-icon>mdi-cog</v-icon>
การตงค การตงค
</v-btn> </v-btn>
@ -39,7 +43,7 @@ import {RouterLink} from 'vue-router';
</script> </script>
<style> <style>
.v-btn { .white-border {
min-width: 50px; min-width: 50px;
border: 3px solid rgba(255, 255, 255, 1); border: 3px solid rgba(255, 255, 255, 1);
} }

34
src/components/TopBar.vue Normal file
View file

@ -0,0 +1,34 @@
<template>
<v-app-bar app class="custom-app-bar">
<v-app-bar-nav-icon @click="goBack" v-if="showBackIcon">
<v-icon large>mdi-arrow-left</v-icon>
</v-app-bar-nav-icon>
<v-toolbar-title class="text-center">{{ pageTitle }}</v-toolbar-title>
</v-app-bar>
</template>
<script>
export default {
props: {
showBackIcon: {
type: Boolean,
default: false
},
pageTitle: {
type: String,
default: ''
}
},
methods: {
goBack() {
this.$router.go(-1);
}
}
};
</script>
<style scoped>
.custom-app-bar {
box-shadow: none;
}
</style>

View file

@ -6,6 +6,7 @@ const routes = [
{path: '/favorite', name: 'favorite', component: () => import('@/views/Favorite.vue')}, {path: '/favorite', name: 'favorite', component: () => import('@/views/Favorite.vue')},
{path: '/setting', name: 'setting', component: () => import('@/views/Setting.vue')}, {path: '/setting', name: 'setting', component: () => import('@/views/Setting.vue')},
{path: '/destination-info', name: 'destination-info', component: () => import('@/views/DestinationInfo.vue')}, {path: '/destination-info', name: 'destination-info', component: () => import('@/views/DestinationInfo.vue')},
{path: '/login', name: 'login', component: () => import('@/views/Login.vue')},
] ]
const router = createRouter({ const router = createRouter({
routes, routes,

View file

@ -5,8 +5,3 @@
<script setup> <script setup>
import DestinationInfoCard from '@/components/DestinationInfoCard.vue'; import DestinationInfoCard from '@/components/DestinationInfoCard.vue';
</script> </script>
<style>
</style>

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>

View file

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