add persistent auth session

src/background/session.ts

@@ -40,6 +40,7 @@ const authSession = async (_event, payload: string | UserCreds | null): Promise<
             if (res === 'locked') {
                 reject(res);
             } else {
+                console.log('Success!');
                 auth = true;
                 resolve(res);
             }
@@ -48,11 +49,12 @@ const authSession = async (_event, payload: string | UserCreds | null): Promise<
 
         if (!payload) {
             socket.send('no-token');
-        } else if (typeof payload === 'string' || payload instanceof String) {
+        } else if (payload instanceof String || typeof payload === 'string') {
             socket.send(payload);
         } else {
             socket.send(JSON.stringify(payload));
         }
+
     });
 };
 
@@ -95,18 +97,19 @@ export const initSession = () => {
     socket.binaryType = 'arraybuffer';
 
     // handle renderer auth-token event
-    ipcMain.removeHandler('auth-user'); // avoid setting duplicate handlers
-    ipcMain.handle('auth-user', authSession);
+    ipcMain.removeHandler('auth-session'); // avoid setting duplicate handlers
+    ipcMain.handle('auth-session', authSession);
 
     // Connect to the backend.
     socket.on('open', () => {
-        console.log('Success! Connected to Crimata Servers.');
+        console.log('Connected to Crimata Servers.');
 
-        // fetch token from renderer
+        // call auth renderer event on connection
         backgroundMitt.emit('ipc-renderer', {
-            endpoint: 'fetch-token',
+            endpoint: 'auth',
             message: null
         });
+
         success = true;
 
     });

src/components/taInput/inputController.ts

@@ -1,4 +1,4 @@
-import { ref, watch, onUnmounted, onMounted } from "vue";
+import { ref, watch, onUnmounted, onMounted, inject } from "vue";
 import useKeyDownHandler from "@/modules/keyDownHandler/useKeyDownHandler";
 import useMediaStream from "@/modules/mediaStream";
 import useAudioVisualizer from './audioDetails/audioVisualizer';
@@ -18,10 +18,29 @@ export default function useInputController() {
     const audioBubbleWidth = ref(10);
     let stream: MediaStream;
 
-    const { keyDownHandler, input } = useKeyDownHandler();
-    const { textInputXoffset, renderTextInput } = useTextVisualizer(input);
+    const emitter: any = inject("mitt");
     const { visualizeStreamAsPaths, expandBubble } = useAudioVisualizer(visualizeStream);
 
+    // send message on ENTER
+    const enterCallback = (input: string) => {
+
+        const message = {
+          audio: 0,
+          text: input
+        };
+        emitter.emit("animateSend", message);
+
+        // await response
+        window.postMessage({
+          myTypeField: 'send-message',
+          message: message
+        }, '*')
+
+    }
+
+    const { keyDownHandler, input } = useKeyDownHandler(enterCallback);
+    const { textInputXoffset, renderTextInput } = useTextVisualizer(input);
+
     // stops stream recording on space key up
     function keyupHandler(e: any) {
         if (e.key === " " && visualizeStream.value) {

src/components/taInput/textDetails/textVisualizer.ts

@@ -32,7 +32,7 @@ export default function useTextVisualizer(input: Ref<string>) {
         }
     }
 
-    emitter.on("newSelfMessage", async (payload: any) => {
+    emitter.on("animateSend", async (payload: any) => {
         const inputEl = document.getElementsByClassName("inputContainer");
         const foreignEl = inputEl[0] as HTMLElement;
         animateSend(foreignEl, inputHeight.value, input);

src/modules/auth.ts

@@ -2,12 +2,12 @@ import { reactive, toRefs } from 'vue';
 import { useIpc } from './ipc';
 
 interface AuthState {
-    accessToken?: string | null;
+    accessToken: string | null;
     error?: Error;
 }
 
 const state = reactive<AuthState>({
-    accessToken: undefined,
+    accessToken: null,
     error: undefined,
 });
 
@@ -16,7 +16,7 @@ const AUTH_KEY = 'crimata_token';
 const token = window.localStorage.getItem(AUTH_KEY);
 
 const authToken = async () => {
-   const { data, invoke  } = useIpc('auth-user');
+   const { data, invoke  } = useIpc('auth-session');
     try {
         await invoke(token);
         state.accessToken = data.value;
@@ -28,29 +28,26 @@ const authToken = async () => {
     }
 }
 
-// authenticate on socket connect
-window.ipcRenderer.on("fetch-token", async (_event, _arg) => {
-    authToken();
+// authenticate on auth event
+window.ipcRenderer.on("auth", async (_event, _arg) => {
+    await authToken();
 });
 
 if (token) {
-    authToken();
+    state.accessToken = token;
 }
 
 export const useAuth = () => {
-    const setToken = (token: string, remember: boolean) => {
-        if (remember) {
-            // Save
-            window.localStorage.setItem(AUTH_KEY, token);
-        }
 
+    const setToken = (token: string) => {
+        window.localStorage.setItem(AUTH_KEY, token);
         state.accessToken = token;
         state.error = undefined;
     }
 
-    const logout = (): Promise<void> => {
+    const logout = (): Promise<null> => {
         window.localStorage.removeItem(AUTH_KEY);
-        return Promise.resolve(state.accessToken = undefined);
+        return Promise.resolve(state.accessToken = null);
     }
 
     return {

src/modules/keyDownHandler/useKeyDownHandler.ts

@@ -1,36 +1,18 @@
-import { ref, inject } from "vue";
+import { ref } from "vue";
 import keyboardNameMap from "./keyBoardMaps/keyboardNameMap";
 import keyboardCharMap from "./keyBoardMaps/keyboardCharMap";
-// This catches keys from a physical keyboard, a soft keyboard on a tablet, or a
-// scanner attached via USB
-export default function useKeyDownHandler() {
-  interface KeyDownEvent {
+
+interface KeyDownEvent {
     keyCode: number;
     shiftKey: boolean;
-  }
+}
+
+// This catches keys from a physical keyboard, a soft keyboard on a tablet, or a
+// scanner attached via USB
+export default function useKeyDownHandler(enterCallback: (input: string) => void | null) {
 
-  const emitter: any = inject("mitt");
   const input = ref("");
 
-  // submits newSelfMessage event
-  function handleEnterKey() {
-    // does nothing if input value is empty
-    if (input.value === "") {
-      return;
-    }
-    const message = {
-      text: input.value,
-      audio: 0
-    };
-    // fire event with message payload
-    emitter.emit("newSelfMessage", message);
-
-    window.postMessage({
-      myTypeField: 'send-message',
-      message: message
-    }, '*')
-  }
-
   function keyDownHandler(e: KeyDownEvent) {
     // keyboardCharMap is an array of arrays, with each inner
     // array having 2 columns - un-shifted, and shifted values.
@@ -49,7 +31,7 @@ export default function useKeyDownHandler() {
     const cmd = keyboardNameMap[e.keyCode];
     switch (cmd) {
       case "ENTER":
-        handleEnterKey();
+        enterCallback(input.value);
         break;
       case "BACK_SPACE":
         input.value = input.value.slice(0, -1);
@@ -66,4 +48,4 @@ export default function useKeyDownHandler() {
     keyDownHandler,
     input
   };
-}
+}

src/router.ts

@@ -20,7 +20,9 @@ const routes: Array<RouteRecordRaw> = [
     path: "/splash",
     name: "splash",
     component: Splash,
-    meta: { requiresAuth: false },
+    meta: {
+        requiresAuth: false
+    },
   },
   {
     path: "/login",
@@ -41,14 +43,19 @@ const router = createRouter({
   routes
 });
 
+// route auth check
 router.beforeEach((to, from, next) => {
   const { accessToken } = useAuth();
 
   // Not logged into a guarded route?
-  if (to.meta.requiresAuth && !accessToken?.value) next({ name: 'login' });
+  if (to.meta.requiresAuth && !accessToken.value) {
+      next({ name: 'login' })
+  }
 
   // Logged in for an auth route
-  else if ((to.name == 'login' || to.name == 'register') && accessToken!.value) next({ name: 'home' });
+  else if ((to.name == 'login' || to.name == 'register') && accessToken.value){
+      next({ name: 'home' });
+  }
 
   // Carry On...
   else next();

src/views/login.vue

@@ -21,7 +21,7 @@
     <button class="button" @click.prevent="submit">Submit</button>
 
     <!-- back to login button: position: fixed  -->
-    <button class="button2" @click.prevent="switchView">Create an account</button>  
+    <button class="button2" @click.prevent="switchView">Create an account</button>
   </form>
 </template>
 
@@ -45,9 +45,9 @@ export default defineComponent({
 
     const email = ref("");
     const password = ref("");
-    const rememberMe = ref(false);
+    const rememberMe = ref(true);
 
-    const {  data,  invoke  } = useIpc('auth-user');
+    const {  data,  invoke  } = useIpc('auth-session');
 
     const submit = async () => {
         const payload = {
@@ -57,8 +57,7 @@ export default defineComponent({
         };
         try {
             await invoke(payload);
-            console.log('testing incoke', data.value)
-            setToken(data.value, rememberMe.value);
+            setToken(data.value);
             router.push({ name: "home" });
         } catch(e){
             console.log('Error loging in.')

src/views/register.vue

@@ -29,12 +29,8 @@
 
 <script lang="ts">
 import {
-  computed,
   defineComponent,
-  onErrorCaptured,
-  reactive,
   ref,
-  toRefs,
 } from "vue";
 import { useRouter } from "vue-router";
 import { useIpc } from "@/modules/ipc";
@@ -53,7 +49,7 @@ export default defineComponent({
     const password = ref("");
     const password2 = ref("");
 
-    const { invoke, data,} = useIpc("auth-user");
+    const { invoke, data,} = useIpc("auth-session");
     const { setToken } = useAuth();
     const router = useRouter();
 
@@ -86,7 +82,7 @@ export default defineComponent({
       if (validate()) {
           try {
               await invoke(payload);
-              setToken(data.value, true);
+              setToken(data.value);
               router.push({ name: "home" });
           } catch(e) {
               console.log('Failed to register.')