From 4a43b5813d87f593ca2cb1d71590d9991d947409 Mon Sep 17 00:00:00 2001 From: Patrick Toal Date: Mon, 6 Nov 2023 22:55:15 -0500 Subject: [PATCH] Basic auth working --- quasar.config.js | 2 +- src/boot/appwrite.ts | 27 ++++++++-------- src/layouts/MainLayout.vue | 40 ++++++++++++----------- src/pages/LoginPage.vue | 66 +++++++++++++------------------------- src/router/index.ts | 25 ++++++++++++++- src/router/routes.ts | 16 +++++++-- src/stores/account.ts | 19 ----------- src/stores/index.ts | 32 ++++++++++++++++++ src/stores/store-flag.d.ts | 10 ++++++ 9 files changed, 138 insertions(+), 99 deletions(-) delete mode 100644 src/stores/account.ts create mode 100644 src/stores/index.ts create mode 100644 src/stores/store-flag.d.ts diff --git a/quasar.config.js b/quasar.config.js index aeeb676..22eb311 100644 --- a/quasar.config.js +++ b/quasar.config.js @@ -98,7 +98,7 @@ module.exports = configure(function (/* ctx */) { // directives: [], // Quasar plugins - plugins: [], + plugins: ['LocalStorage', 'SessionStorage'], }, // animations: 'all', // --- includes all animations diff --git a/src/boot/appwrite.ts b/src/boot/appwrite.ts index 785dfd0..cae4b20 100644 --- a/src/boot/appwrite.ts +++ b/src/boot/appwrite.ts @@ -1,23 +1,22 @@ import { boot } from 'quasar/wrappers'; -import { Client, Account } from 'appwrite'; +import { Client, Account, ID } from 'appwrite'; -export const client = new Client(); +const client = new Client(); client .setEndpoint('https://cloud.appwrite.io/v1') .setProject('653ef6f76baf06d68034'); -client.subscribe('account', (response) => { - console.log(response); -}); +const account = new Account(client); -export const account = new Account(client); +// // TODO: Auto-logout on session deletion / expiry +// if (user.value) { +// client.subscribe('account', (response) => { +// console.log(response); +// }); +// } -export default boot(({ app, urlPath, redirect }) => { - // Redirect to login page if unauthenticated. - try { - const current = await account.get(); - } catch (err) { - redirect('/Login'); - } -}); +// export default boot(({ app, urlPath, redirect }) => { +// }); + +export { client, account }; diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue index cb85f42..5f41199 100644 --- a/src/layouts/MainLayout.vue +++ b/src/layouts/MainLayout.vue @@ -12,6 +12,8 @@ /> OYS Borrow a Boat +
Logged in as: {{ loggedInUser.name }}
+ @@ -20,7 +22,7 @@ Essential Links @@ -33,9 +35,12 @@ - diff --git a/src/pages/LoginPage.vue b/src/pages/LoginPage.vue index da70783..8c6fc02 100644 --- a/src/pages/LoginPage.vue +++ b/src/pages/LoginPage.vue @@ -12,20 +12,13 @@
Log in
- +
Error!
{{ errorMessage }}
-

- {{ - loggedInUser - ? `Logged in as ${loggedInUser.name}` - : 'Not logged in' - }} -

@@ -93,44 +86,29 @@ strong { } - diff --git a/src/router/index.ts b/src/router/index.ts index 4531114..48cabef 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -7,6 +7,7 @@ import { } from 'vue-router'; import routes from './routes'; +import { account } from 'boot/appwrite'; /* * If not building with SSR mode, you can @@ -20,7 +21,9 @@ import routes from './routes'; export default route(function (/* { store, ssrContext } */) { const createHistory = process.env.SERVER ? createMemoryHistory - : (process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory); + : process.env.VUE_ROUTER_MODE === 'history' + ? createWebHistory + : createWebHashHistory; const Router = createRouter({ scrollBehavior: () => ({ left: 0, top: 0 }), @@ -32,5 +35,25 @@ export default route(function (/* { store, ssrContext } */) { history: createHistory(process.env.VUE_ROUTER_BASE), }); + const accountRoutes = ['login', 'register']; + + Router.beforeEach(async (to, from, next) => { + const name = to.name as string; + try { + const session = await account.getSession('current'); + to.meta.session = session; + + if (accountRoutes.includes(name)) { + return next({ name: 'index' }); + } + } catch { + if (!accountRoutes.includes(name)) { + return next({ name: 'login' }); + } + } + + next(); + }); + return Router; }); diff --git a/src/router/routes.ts b/src/router/routes.ts index 220a014..92242f8 100644 --- a/src/router/routes.ts +++ b/src/router/routes.ts @@ -4,12 +4,24 @@ const routes: RouteRecordRaw[] = [ { path: '/', component: () => import('layouts/MainLayout.vue'), - children: [{ path: '', component: () => import('pages/IndexPage.vue') }], + name: 'index', + children: [ + { + path: '', + component: () => import('pages/IndexPage.vue'), + }, + ], }, { - path: '/Login', + path: '/login', component: () => import('pages/LoginPage.vue'), + name: 'login', }, + // { + // path: '/register', + // component: () => import('pages/RegisterPage.vue'), + // name: 'register' + // }, // Always leave this as last one, // but you can also remove it { diff --git a/src/stores/account.ts b/src/stores/account.ts deleted file mode 100644 index 101ad52..0000000 --- a/src/stores/account.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { defineStore } from 'pinia'; - -export const useCounterStore = defineStore('counter', { - state: () => ({ - counter: 0 - }), - - getters: { - doubleCount (state) { - return state.counter * 2; - } - }, - - actions: { - increment () { - this.counter++; - } - } -}); diff --git a/src/stores/index.ts b/src/stores/index.ts new file mode 100644 index 0000000..d7b189d --- /dev/null +++ b/src/stores/index.ts @@ -0,0 +1,32 @@ +import { store } from 'quasar/wrappers'; +import { createPinia } from 'pinia'; +import { Router } from 'vue-router'; + +/* + * When adding new properties to stores, you should also + * extend the `PiniaCustomProperties` interface. + * @see https://pinia.vuejs.org/core-concepts/plugins.html#typing-new-store-properties + */ +declare module 'pinia' { + export interface PiniaCustomProperties { + readonly router: Router; + } +} + +/* + * If not building with SSR mode, you can + * directly export the Store instantiation; + * + * The function below can be async too; either use + * async/await or return a Promise which resolves + * with the Store instance. + */ + +export default store((/* { ssrContext } */) => { + const pinia = createPinia(); + + // You can add Pinia plugins here + // pinia.use(SomePiniaPlugin) + + return pinia; +}); diff --git a/src/stores/store-flag.d.ts b/src/stores/store-flag.d.ts new file mode 100644 index 0000000..7677175 --- /dev/null +++ b/src/stores/store-flag.d.ts @@ -0,0 +1,10 @@ +/* eslint-disable */ +// THIS FEATURE-FLAG FILE IS AUTOGENERATED, +// REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING +import "quasar/dist/types/feature-flag"; + +declare module "quasar/dist/types/feature-flag" { + interface QuasarFeatureFlags { + store: true; + } +}