16.02 Create a Login & Register Page (and Route)

This commit is contained in:
Fredrick W Warren 2021-02-12 10:38:25 -08:00
parent ee30273261
commit a4edd61735
4 changed files with 25 additions and 110 deletions

View File

@ -3,10 +3,15 @@
<q-header elevated>
<q-toolbar>
<q-toolbar-title class="absolute-center">
Quasar App
Awesome Todo
</q-toolbar-title>
<div>Quasar v{{ $q.version }}</div>
<q-btn
to="/auth"
flat
icon-right="account_circle"
label="Login"
class="absolute-right"
/>
</q-toolbar>
</q-header>

View File

@ -1,107 +0,0 @@
<template>
<q-layout view="lHh Lpr lFf">
<q-header elevated>
<q-toolbar>
<q-btn
flat
dense
round
icon="menu"
aria-label="Menu"
@click="leftDrawerOpen = !leftDrawerOpen"
/>
<q-toolbar-title>
Quasar App
</q-toolbar-title>
<div>Quasar v{{ $q.version }}</div>
</q-toolbar>
</q-header>
<q-drawer
v-model="leftDrawerOpen"
show-if-above
bordered
content-class="bg-grey-1"
>
<q-list>
<q-item-label
header
class="text-grey-8"
>
Essential Links
</q-item-label>
<EssentialLink
v-for="link in essentialLinks"
:key="link.title"
v-bind="link"
/>
</q-list>
</q-drawer>
<q-page-container>
<router-view />
</q-page-container>
</q-layout>
</template>
<script>
import EssentialLink from 'components/EssentialLink.vue'
const linksData = [
{
title: 'Docs',
caption: 'quasar.dev',
icon: 'school',
link: 'https://quasar.dev'
},
{
title: 'Github',
caption: 'github.com/quasarframework',
icon: 'code',
link: 'https://github.com/quasarframework'
},
{
title: 'Discord Chat Channel',
caption: 'chat.quasar.dev',
icon: 'chat',
link: 'https://chat.quasar.dev'
},
{
title: 'Forum',
caption: 'forum.quasar.dev',
icon: 'record_voice_over',
link: 'https://forum.quasar.dev'
},
{
title: 'Twitter',
caption: '@quasarframework',
icon: 'rss_feed',
link: 'https://twitter.quasar.dev'
},
{
title: 'Facebook',
caption: '@QuasarFramework',
icon: 'public',
link: 'https://facebook.quasar.dev'
},
{
title: 'Quasar Awesome',
caption: 'Community Quasar projects',
icon: 'favorite',
link: 'https://awesome.quasar.dev'
}
]
export default {
name: 'MainLayout',
components: { EssentialLink },
data () {
return {
leftDrawerOpen: false,
essentialLinks: linksData
}
}
}
</script>

13
src/pages/PageAuth.vue Normal file
View File

@ -0,0 +1,13 @@
<template>
<p>Auth Page</p>
</template>
<script>
export default {
}
</script>
<style>
</style>

View File

@ -15,6 +15,10 @@ const routes = [
{
path: '/settings/help',
component: () => import('pages/PageHelp.vue')
},
{
path: '/auth',
component: () => import('pages/PageAuth.vue')
}
]
},