Begin implementing Pinia
This commit is contained in:
parent
b0c3eaf33d
commit
8bc042aa19
114
lifetracker-vue/package-lock.json
generated
114
lifetracker-vue/package-lock.json
generated
@ -10,7 +10,9 @@
|
||||
"dependencies": {
|
||||
"@handsontable/vue3": "^12.3.3",
|
||||
"appwrite": "^11.0.0",
|
||||
"axios": "^1.4.0",
|
||||
"handsontable": "^12.3.3",
|
||||
"node": "^20.0.0",
|
||||
"pinia": "^2.0.35",
|
||||
"vue": "^3.2.47",
|
||||
"vue-router": "^4.1.6"
|
||||
@ -776,6 +778,29 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/axios": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz",
|
||||
"integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==",
|
||||
"dependencies": {
|
||||
"follow-redirects": "^1.15.0",
|
||||
"form-data": "^4.0.0",
|
||||
"proxy-from-env": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/axios/node_modules/form-data": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
|
||||
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
|
||||
"dependencies": {
|
||||
"asynckit": "^0.4.0",
|
||||
"combined-stream": "^1.0.8",
|
||||
"mime-types": "^2.1.12"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/balanced-match": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
|
||||
@ -1081,6 +1106,25 @@
|
||||
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
|
||||
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
|
||||
},
|
||||
"node_modules/follow-redirects": {
|
||||
"version": "1.15.2",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
|
||||
"integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "individual",
|
||||
"url": "https://github.com/sponsors/RubenVerborgh"
|
||||
}
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=4.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"debug": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/for-each": {
|
||||
"version": "0.3.3",
|
||||
"resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
|
||||
@ -1685,6 +1729,26 @@
|
||||
"integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/node": {
|
||||
"version": "20.0.0",
|
||||
"resolved": "https://registry.npmjs.org/node/-/node-20.0.0.tgz",
|
||||
"integrity": "sha512-4R1vw5hKUjQw3x65x9g/ape/XlY/ZFHaQWB+jQLFJIJkVKJPDSY4oj3O6qgXOvv2wwgEpK9J2SvJUjuL6zu0uA==",
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"node-bin-setup": "^1.0.0"
|
||||
},
|
||||
"bin": {
|
||||
"node": "bin/node"
|
||||
},
|
||||
"engines": {
|
||||
"npm": ">=5.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/node-bin-setup": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/node-bin-setup/-/node-bin-setup-1.1.3.tgz",
|
||||
"integrity": "sha512-opgw9iSCAzT2+6wJOETCpeRYAQxSopqQ2z+N6BXwIMsQQ7Zj5M8MaafQY8JMlolRR6R1UXg2WmhKp0p9lSOivg=="
|
||||
},
|
||||
"node_modules/node-fetch": {
|
||||
"version": "2.6.7",
|
||||
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
|
||||
@ -1936,6 +2000,11 @@
|
||||
"node": "^10 || ^12 || >=14"
|
||||
}
|
||||
},
|
||||
"node_modules/proxy-from-env": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
|
||||
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
|
||||
},
|
||||
"node_modules/read-pkg": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
|
||||
@ -2983,6 +3052,28 @@
|
||||
"integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==",
|
||||
"dev": true
|
||||
},
|
||||
"axios": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz",
|
||||
"integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==",
|
||||
"requires": {
|
||||
"follow-redirects": "^1.15.0",
|
||||
"form-data": "^4.0.0",
|
||||
"proxy-from-env": "^1.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"form-data": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
|
||||
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
|
||||
"requires": {
|
||||
"asynckit": "^0.4.0",
|
||||
"combined-stream": "^1.0.8",
|
||||
"mime-types": "^2.1.12"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"balanced-match": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
|
||||
@ -3234,6 +3325,11 @@
|
||||
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
|
||||
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
|
||||
},
|
||||
"follow-redirects": {
|
||||
"version": "1.15.2",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
|
||||
"integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
|
||||
},
|
||||
"for-each": {
|
||||
"version": "0.3.3",
|
||||
"resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
|
||||
@ -3661,6 +3757,19 @@
|
||||
"integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node": {
|
||||
"version": "20.0.0",
|
||||
"resolved": "https://registry.npmjs.org/node/-/node-20.0.0.tgz",
|
||||
"integrity": "sha512-4R1vw5hKUjQw3x65x9g/ape/XlY/ZFHaQWB+jQLFJIJkVKJPDSY4oj3O6qgXOvv2wwgEpK9J2SvJUjuL6zu0uA==",
|
||||
"requires": {
|
||||
"node-bin-setup": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node-bin-setup": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/node-bin-setup/-/node-bin-setup-1.1.3.tgz",
|
||||
"integrity": "sha512-opgw9iSCAzT2+6wJOETCpeRYAQxSopqQ2z+N6BXwIMsQQ7Zj5M8MaafQY8JMlolRR6R1UXg2WmhKp0p9lSOivg=="
|
||||
},
|
||||
"node-fetch": {
|
||||
"version": "2.6.7",
|
||||
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
|
||||
@ -3810,6 +3919,11 @@
|
||||
"source-map-js": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"proxy-from-env": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
|
||||
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
|
||||
},
|
||||
"read-pkg": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
|
||||
|
||||
@ -12,7 +12,9 @@
|
||||
"dependencies": {
|
||||
"@handsontable/vue3": "^12.3.3",
|
||||
"appwrite": "^11.0.0",
|
||||
"axios": "^1.4.0",
|
||||
"handsontable": "^12.3.3",
|
||||
"node": "^20.0.0",
|
||||
"pinia": "^2.0.35",
|
||||
"vue": "^3.2.47",
|
||||
"vue-router": "^4.1.6"
|
||||
|
||||
@ -1,8 +1,13 @@
|
||||
<script>
|
||||
<script setup>
|
||||
import { useSessionStore } from "../stores/session";
|
||||
const storeSession = useSessionStore();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="year == 2023">
|
||||
You are not logged in.
|
||||
<div v-if="!storeSession.isConnected">
|
||||
Not connected.
|
||||
<button @click="storeSession.login">
|
||||
Connect!
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,15 +1,12 @@
|
||||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
import { createApp } from 'vue';
|
||||
import { createPinia } from 'pinia';
|
||||
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import App from './App.vue';
|
||||
import router from './router';
|
||||
|
||||
import './assets/main.css'
|
||||
import './assets/main.css';
|
||||
|
||||
const pinia = createPinia()
|
||||
const app = createApp(App)
|
||||
const pinia = createPinia();
|
||||
const app = createApp(App).use(router).use(pinia);
|
||||
|
||||
app.use(router)
|
||||
app.use(pinia)
|
||||
|
||||
app.mount('#app')
|
||||
app.mount('#app');
|
||||
|
||||
51
lifetracker-vue/src/stores/session.ts
Normal file
51
lifetracker-vue/src/stores/session.ts
Normal file
@ -0,0 +1,51 @@
|
||||
import type { ISession } from '@/types/session';
|
||||
import axios from 'axios';
|
||||
import { defineStore } from 'pinia';
|
||||
import { Client, Account, ID } from 'appwrite';
|
||||
|
||||
export const useSessionStore = defineStore({
|
||||
id: 'sessionState',
|
||||
state: () => ({
|
||||
session: [] as ISession[],
|
||||
}),
|
||||
getters: {
|
||||
isConnected: (state) => state.session['userId'] == 'ryan',
|
||||
},
|
||||
actions: {
|
||||
connect() {
|
||||
const appwriteclient = new Client()
|
||||
.setEndpoint('http://ryanpandya.com:8080/v1')
|
||||
.setProject('lifetracker');
|
||||
|
||||
const account = new Account(appwriteclient);
|
||||
const promise = account.getSession('current');
|
||||
var session: ISession = {
|
||||
email: '',
|
||||
userId: '',
|
||||
id: '',
|
||||
};
|
||||
promise.then(
|
||||
function (response) {
|
||||
response.providerUid;
|
||||
response.userId;
|
||||
response.$id;
|
||||
},
|
||||
function (error) {
|
||||
self.email = null;
|
||||
self.userId = null;
|
||||
self.password = null;
|
||||
self.session = false;
|
||||
}
|
||||
);
|
||||
},
|
||||
login() {
|
||||
const session: ISession = {
|
||||
id: 'moot',
|
||||
userId: 'ryan',
|
||||
email: 'ryan@ryanpandya.com',
|
||||
};
|
||||
this.session = session;
|
||||
console.log('Logged in');
|
||||
},
|
||||
},
|
||||
});
|
||||
5
lifetracker-vue/src/types/session.ts
Normal file
5
lifetracker-vue/src/types/session.ts
Normal file
@ -0,0 +1,5 @@
|
||||
export interface ISession {
|
||||
id: string;
|
||||
userId: string;
|
||||
email: string;
|
||||
}
|
||||
@ -1,28 +1,7 @@
|
||||
<script>
|
||||
// Try to connect
|
||||
import { Client, Account, ID } from 'appwrite';
|
||||
|
||||
const appwriteclient = new Client()
|
||||
.setEndpoint('http://ryanpandya.com:8080/v1') // Your API Endpoint
|
||||
.setProject('lifetracker'); // Your project ID
|
||||
|
||||
const account = new Account(appwriteclient);
|
||||
var email; var userId; var password; var session;
|
||||
export default {
|
||||
mounted(){
|
||||
const promise = account.getSession('current');
|
||||
var self = this;
|
||||
promise.then(function (response) {
|
||||
self.email = response.providerUid;
|
||||
self.userId = response.userId;
|
||||
self.session = response.$id;
|
||||
}, function (error) {
|
||||
self.email = null;
|
||||
self.userId = null;
|
||||
self.password = null;
|
||||
self.session = false;
|
||||
});
|
||||
},
|
||||
mounted(){},
|
||||
data(){
|
||||
return {
|
||||
userId: userId,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user