From f2d4ce12d4e800dd15bf60edaeac8030d33cc385 Mon Sep 17 00:00:00 2001 From: Patrick Toal Date: Fri, 17 Nov 2023 17:15:37 -0500 Subject: [PATCH] Refactor components. Improve design. Improve routing --- quasar.config.js | 1 + src/boot/appwrite.ts | 64 ++++++++++++++++- src/components/BoatPreviewComponent.vue | 55 ++++++++++++++ src/components/LeftDrawer.vue | 8 +++ src/components/ReferencePreviewComponent.vue | 51 +++++++++++++ src/components/models.ts | 8 +++ src/css/quasar.variables.scss | 2 + src/layouts/MainLayout.vue | 22 ++---- src/pages/BoatPage.vue | 76 ++++++-------------- src/pages/IndexPage.vue | 11 ++- src/pages/LoginPage.vue | 61 +--------------- src/pages/ReferencePage.vue | 23 +++++- src/pages/TaskPage.vue | 8 +++ src/router/index.ts | 17 +++-- src/router/navlinks.ts | 6 ++ src/router/routes.ts | 7 +- src/stores/auth.ts | 4 +- 17 files changed, 278 insertions(+), 146 deletions(-) create mode 100644 src/components/BoatPreviewComponent.vue create mode 100644 src/components/ReferencePreviewComponent.vue create mode 100644 src/pages/TaskPage.vue diff --git a/quasar.config.js b/quasar.config.js index c109dab..d68af43 100644 --- a/quasar.config.js +++ b/quasar.config.js @@ -104,6 +104,7 @@ module.exports = configure(function (/* ctx */) { 'SessionStorage', 'AppFullscreen', 'AddressbarColor', + 'Dialog', ], }, diff --git a/src/boot/appwrite.ts b/src/boot/appwrite.ts index 889448e..ed02b28 100644 --- a/src/boot/appwrite.ts +++ b/src/boot/appwrite.ts @@ -1,11 +1,13 @@ import { boot } from 'quasar/wrappers'; import { Client, Account, Databases, ID } from 'appwrite'; import { useAuthStore } from 'src/stores/auth'; +import { Dialog, Notify } from 'quasar'; +import { Router } from 'vue-router'; const client = new Client(); client - .setEndpoint('https://cloud.appwrite.io/v1') + .setEndpoint('https://api.bab.toal.ca/v1') .setProject('653ef6f76baf06d68034'); const account = new Account(client); @@ -16,8 +18,64 @@ export default boot(({ app, urlPath, router }) => { // Initialize store const authStore = useAuthStore(); authStore.init().then(() => { - authStore.currentUser && router.push('/'); + authStore.currentUser && router.replace('/'); }); }); -export { client, account, databases, ID, appDatabaseId }; +async function logout(router: Router) { + Dialog.create({ + title: 'Logout', + message: 'Are you sure?', + cancel: true, + persistent: true, + }).onOk(async () => { + const authStore = useAuthStore(); + await authStore.logout(); + Notify.create({ + message: 'Logged out!', + type: 'warning', + position: 'top', + timeout: 2000, + group: false, + }); + router.replace({ name: 'login' }); + }); +} + +function login(router: Router, email: string, password: string) { + const notification = Notify.create({ + type: 'primary', + position: 'top', + spinner: true, + message: 'Logging you in...', + timeout: 8000, + group: false, + }); + const authStore = useAuthStore(); + authStore + .login(email, password) + .then(() => { + notification({ + type: 'positive', + message: 'Logged in!', + timeout: 2000, + spinner: false, + icon: 'check_circle', + }); + console.log('Redirecting to index page'); + router.replace({ name: 'index' }); + }) + .catch(function (reason: Error) { + notification({ + type: 'negative', + message: 'Login failed.', + timeout: 1, + }); + Dialog.create({ + title: 'Login Error!', + message: reason.message, + persistent: true, + }); + }); +} +export { client, account, databases, ID, appDatabaseId, login, logout }; diff --git a/src/components/BoatPreviewComponent.vue b/src/components/BoatPreviewComponent.vue new file mode 100644 index 0000000..d20d6fb --- /dev/null +++ b/src/components/BoatPreviewComponent.vue @@ -0,0 +1,55 @@ + + + diff --git a/src/components/LeftDrawer.vue b/src/components/LeftDrawer.vue index 03a6cd7..9283bcf 100644 --- a/src/components/LeftDrawer.vue +++ b/src/components/LeftDrawer.vue @@ -17,6 +17,10 @@ {{ link.name }} + + Logout + @@ -25,6 +29,10 @@ diff --git a/src/components/models.ts b/src/components/models.ts index 0dd7f7e..718c361 100644 --- a/src/components/models.ts +++ b/src/components/models.ts @@ -1,4 +1,5 @@ export interface Boat { + id: number; name: string; class: string; year: number; @@ -7,3 +8,10 @@ export interface Boat { export interface test { totalCount: number; } + +export interface ReferenceEntry { + id: number; + title: string; + subtitle: string; + content: string; +} diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss index 9f2ae80..802cdd5 100644 --- a/src/css/quasar.variables.scss +++ b/src/css/quasar.variables.scss @@ -12,6 +12,8 @@ // to match your app's branding. // Tip: Use the "Theme Builder" on Quasar's documentation website. +$body-font-size: 18px !default; + $primary: #14539a; $secondary: #999999; $accent: #ed323a; diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue index 07891df..9e662fc 100644 --- a/src/layouts/MainLayout.vue +++ b/src/layouts/MainLayout.vue @@ -12,8 +12,11 @@ /> OYS Borrow a Boat -
{{ loggedInUser.name }}
- + + +
{{ loggedInUser.name.split(' ')[0] }}
+ + @@ -27,7 +30,6 @@ diff --git a/src/pages/IndexPage.vue b/src/pages/IndexPage.vue index 4936f21..674c123 100644 --- a/src/pages/IndexPage.vue +++ b/src/pages/IndexPage.vue @@ -2,11 +2,15 @@ - + import { defineComponent } from 'vue'; import { links } from 'src/router/navlinks.js'; +import { useAuthStore } from 'stores/auth'; + +const auth = useAuthStore(); defineComponent({ name: 'IndexPage', diff --git a/src/pages/LoginPage.vue b/src/pages/LoginPage.vue index dca688f..819c910 100644 --- a/src/pages/LoginPage.vue +++ b/src/pages/LoginPage.vue @@ -31,7 +31,7 @@ > @@ -43,22 +43,6 @@ flat > --> - - - - -
Login Failed
- - - - Login failed: {{ message }} - - - - - - - @@ -83,53 +67,12 @@ diff --git a/src/pages/ReferencePage.vue b/src/pages/ReferencePage.vue index 1675e69..063df07 100644 --- a/src/pages/ReferencePage.vue +++ b/src/pages/ReferencePage.vue @@ -1,8 +1,25 @@ diff --git a/src/pages/TaskPage.vue b/src/pages/TaskPage.vue new file mode 100644 index 0000000..1675e69 --- /dev/null +++ b/src/pages/TaskPage.vue @@ -0,0 +1,8 @@ + + + diff --git a/src/router/index.ts b/src/router/index.ts index 4e16800..8a2188e 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -35,13 +35,18 @@ export default route(function (/* { store, ssrContext } */) { history: createHistory(process.env.VUE_ROUTER_BASE), }); - Router.beforeEach(async (to, from, next) => { + Router.beforeEach((to) => { const auth = useAuthStore(); - return !to.meta.accountRoute && !auth.currentUser - ? next({ name: 'login' }) - : to.meta.accountRoute && auth.currentUser - ? next({ name: 'index' }) - : next(); + + if (!auth.ready) { + return false; + } + + if (auth.currentUser) { + return to.meta.accountRoute ? { name: 'index' } : true; + } else { + return to.name == 'login' ? true : { name: 'login' }; + } }); return Router; diff --git a/src/router/navlinks.ts b/src/router/navlinks.ts index 505f96a..36687a4 100644 --- a/src/router/navlinks.ts +++ b/src/router/navlinks.ts @@ -35,4 +35,10 @@ export const links = [ icon: 'info_outline', front_links: true, }, + { + name: 'Tasks', + to: 'task', + icon: 'build', + front_links: true, + }, ]; diff --git a/src/router/routes.ts b/src/router/routes.ts index 0df041f..a56c754 100644 --- a/src/router/routes.ts +++ b/src/router/routes.ts @@ -25,6 +25,11 @@ const routes: RouteRecordRaw[] = [ component: () => import('pages/CertificationPage.vue'), name: 'certification', }, + { + path: '/task', + component: () => import('pages/TaskPage.vue'), + name: 'task', + }, { path: '/checklist', component: () => import('pages/ChecklistPage.vue'), @@ -63,7 +68,7 @@ const routes: RouteRecordRaw[] = [ component: () => import('pages/LoginPage.vue'), name: 'login', meta: { - accountRoute: true, + publicRoute: true, }, }, // { diff --git a/src/stores/auth.ts b/src/stores/auth.ts index eada6d2..112841d 100644 --- a/src/stores/auth.ts +++ b/src/stores/auth.ts @@ -5,6 +5,7 @@ import { ref } from 'vue'; export const useAuthStore = defineStore('auth', () => { const currentUser = ref | null>(null); + const ready = ref(false); async function init() { try { @@ -12,6 +13,7 @@ export const useAuthStore = defineStore('auth', () => { } catch { currentUser.value = null; } + ready.value = true; } async function register(email: string, password: string) { @@ -27,5 +29,5 @@ export const useAuthStore = defineStore('auth', () => { return account.deleteSession('current').then((currentUser.value = null)); } - return { currentUser, register, login, logout, init }; + return { currentUser, register, login, logout, init, ready }; });