No real progress, but syncing from work

lifetracker-vue/src/components/AuthNav.vue

@@ -1,13 +1,15 @@
 <script setup>
 import { useSessionStore } from "../stores/session";
 const storeSession = useSessionStore();
+
+storeSession.connect();
 </script>
 
 <template>
     <div v-if="!storeSession.isConnected">
         Not connected.
-        <button @click="storeSession.login">
-            Connect!
-        </button>
+    </div>
+    <div v-if="storeSession.isConnected">
+        Connected as {{ storeSession.session.userId }}.
     </div>
 </template>

lifetracker-vue/src/stores/session.ts

@@ -3,6 +3,12 @@ import axios from 'axios';
 import { defineStore } from 'pinia';
 import { Client, Account, ID } from 'appwrite';
 
+const appwriteclient = new Client()
+        .setEndpoint('http://ryanpandya.com:8080/v1')
+        .setProject('lifetracker');
+
+const account = new Account(appwriteclient);
+
 export const useSessionStore = defineStore({
   id: 'sessionState',
   state: () => ({
@@ -12,12 +18,17 @@ export const useSessionStore = defineStore({
     isConnected: (state) => state.session['userId'] == 'ryan',
   },
   actions: {
+    logout() {
+      const promise = this.account.deleteSession(this.session);
+      var self = this;
+      promise.then(function (response) {
+          self.userId = null; self.email = null; self.session = false;                
+          console.log(response); // Success
+      }, function (error) {
+          console.log(error); // Failure
+      });
+    },
     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: '',
@@ -26,26 +37,38 @@ export const useSessionStore = defineStore({
       };
       promise.then(
         function (response) {
-          response.providerUid;
-          response.userId;
-          response.$id;
+          session.email = response.providerUid;
+          session.userId = response.userId;
+          session.id = response.$id;
+          console.log('Connected to existing session');
+          session = session;
         },
         function (error) {
-          self.email = null;
-          self.userId = null;
-          self.password = null;
-          self.session = false;
+          session.email = null;
+          session.userId = null;
+          session.id = null;
+          console.log('No existing session; starting fresh.');
+          return session;
         }
       );
     },
-    login() {
-      const session: ISession = {
-        id: 'moot',
-        userId: 'ryan',
-        email: 'ryan@ryanpandya.com',
+    login(email : string, password : string) {
+      console.log(this.session);
+      const promise = account.createEmailSession(email, password);
+      var session: ISession = {
+        email: '',
+        userId: '',
+        id: '',
       };
-      this.session = session;
-      console.log('Logged in');
+      promise.then(function (response) {
+        session.email = response.providerUid;
+        session.userId = response.userId;
+        session.id = response.$id;
+        console.log('Logged in');
+        return session;        
+      }, function (error) {
+        console.log('Error');
+      });
     },
   },
 });

lifetracker-vue/src/views/DatabaseView.vue

@@ -1,7 +1,13 @@
+<script setup>
+import { useSessionStore } from "../stores/session";
+const storeSession = useSessionStore();
+</script>
+
 <script>
 var email; var userId; var password; var session;
 export default {
-    mounted(){},
+    mounted(){
+    },
     data(){
             return {
                 userId: userId,
@@ -9,53 +15,29 @@ export default {
                 password: password,
                 error: null,
                 session: session,
-                account: account
                 }
         },
     methods: {
         connect() {
-            const promise = this.account.createEmailSession(this.email, this.password);
-
-            var self = this;
-            promise.then(function (response) {
-                self.session = response;
-                self.userId = response.userId;
-                self.error = false;
-
-            }, function (error) {
-                self.session = false;
-                self.error = error;
-            });
-        },
-        logout() {
-
-
-            const promise = this.account.deleteSession(this.session);
-            var self = this;
-            promise.then(function (response) {
-                self.userId = null; self.email = null; self.session = false;                
-                console.log(response); // Success
-            }, function (error) {
-                console.log(error); // Failure
-            });
+            console.log("Legacy method called.");
         }
     }
 }
 </script>
 <template>
-    <div v-if="session == null">
+    <div v-if="storeSession.session == null">
         Loading...
     </div>
-    <div v-if="session==false" id="form">
+    <div v-if="storeSession.session == false" id="form">
         <h2>Not connected yet.</h2>
         <div id="login">
             <input name="email" type="text" v-model="email" placeholder="email" />
             <input name="password" type="password" v-model="password" placeholder="password"/>
-            <button @click="connect">Connect to database</button>
+            <button @click="storeSession.login(email, password)">Connect to database</button>
             <h3 class="error" v-if="error">{{ error }}</h3>
         </div>
     </div>
-    <div v-if="session">
+    <div v-if="storeSession.session.id">
         <h2>Welcome back, {{ userId }}!</h2>
         <div class="flex">
             <button @click="logout">Log Out</button>