updating login

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="app" v-if="ready">
+  <div id="app" v-if="(windowReady && sessionReady)">
 
     <button class="titlebar" />
 
@@ -28,55 +28,90 @@
 
 <script lang="ts">
 import { defineComponent, onMounted, onUnmounted, ref } from "vue";
+import { IpcRendererEvent } from "electron";
+import { authRequest } from '@/modules/message'; 
 import { useIpc } from "@/modules/ipc";
-import Splash from "@/components/splash.vue"
+
+import Splash from "@/components/splash.vue";
+import Messenger from "@/components/messenger.vue";
+import Login from "@/components/login.vue";
 
 export default defineComponent({
-  components: { Splash },
+  components: { 
+    Splash,
+    Messenger,
+    Login
+  },
 
   setup() {
+    const { post, invoke } = useIpc();
 
-    const ready = ref(false);
+    const auth = ref(false);
+    const windowReady = ref(false);
+    const sessionReady = ref(false);
 
-    // Whether user is logged in.
-    let auth = ref(false);
+    // When connection is established, we send key over.
+    const onOpen = (_event: IpcRendererEvent, payload: any) => {
+      console.log(`Connected to Crimata.`)
+      const key = window.localStorage.getItem("key");
+
+      if (key) {
+        console.log(`Sending key: ${key}`)
+        post("client-message", authRequest(key, false, false))
+      } 
+
+      else {
+        console.log("No key, session ready.")
+        sessionReady.value = true
+      }
 
-    // Attempt token login
-    const key = window.localStorage.getItem(AUTH_KEY);
-    
-    if (key) {
-      post("client-message", key)
     }
 
-    // onAuthResponse
-    const onAuthResponse = (_event: IpcMainEvent, payload: Auth) => {
-      if (payload.token) {
+    // Update authenticate state on auth message from server.
+    const onAuthResponse = (_event: IpcRendererEvent, payload: any) => {
+      const key = payload.message.key
+      const usr = payload.message.usr
+      console.log(`Received auth response: ${usr}, ${key}`)
+
+      if (key) {
+        console.log(`Auth success, saving key: ${key}.`)
+        window.localStorage.setItem("key", payload.message.key)
         auth.value = true;
       }
+
+      else {
+        console.log(`Auth failed, clearing local storage.`)
+        window.localStorage.clear()
+        auth.value = false;
+      }
+
+      console.log("Session is ready.")
+      sessionReady.value = true
+
     }
 
     // Post navbar action to backend.
     const callNavbar = (action: string) => {
-      post('nav-bar', action);
+      invoke("nav-bar", action);
     }
 
-
     onMounted(() => {
-        window.ipcRenderer.on("auth-response", onAuthResponse)
-
-
-        window.ipcRenderer.on("window-ready", () => ready.value = true);
+      window.ipcRenderer.on("on-connect", onOpen)
+      window.ipcRenderer.on("auth-response", onAuthResponse)
+      window.ipcRenderer.on("window-ready", () => windowReady.value = true);
     });
 
     onUnmounted(() => {
-        window.ipcRenderer.removeAllListeners("window-ready")
-        window.ipcRenderer.removeAllListeners("auth-response")
+      window.ipcRenderer.removeAllListeners("on-connect")
+      window.ipcRenderer.removeAllListeners("window-ready")
+      window.ipcRenderer.removeAllListeners("auth-response")
     })
 
     return {
         callNavbar,
-        ready,
-        auth,
+        sessionReady,
+        windowReady,
+        auth
     }
   }
 })