updating login

src/components/controllers/audioCtrl.ts

@@ -3,7 +3,7 @@ import { onMounted, onUnmounted, ref, Ref } from "vue";
 import useMitt from "@/modules/mitt";
 import { useIpc } from '@/modules/ipc';
 import keyboardNameMap from "../keyBoardMaps/keyboardNameMap";
-import { renderMessage } from '@/modules/message';
+import { renderMessage, clientMessage } from '@/modules/message';
 
 
 function showRecIcon () {
@@ -34,7 +34,7 @@ function hideRecIcon () {
 export default function useAudioInputController (typing: Ref) {
 
     // For sending messages.
-    const { post } = useIpc();
+    const { post, invoke } = useIpc();
     const { emitter } = useMitt();
 
     // Keepp track of when we are recording.
@@ -49,10 +49,7 @@ export default function useAudioInputController (typing: Ref) {
         // Start recording on space bar.
         if (cmd == "SPACE" && !recording.value && !typing.value) {
 
-            post('update-recorder', {
-                isRecording: true,
-                uid: null
-            });
+            post('start-recording', "");
 
             showRecIcon()
             recording.value = true;
@@ -62,7 +59,7 @@ export default function useAudioInputController (typing: Ref) {
 
     }
 
-    const onKeyUp = (e: KeyboardEvent) => {
+    const onKeyUp = async (e: KeyboardEvent) => {
         const cmd = keyboardNameMap[e.keyCode];
 
         // Stop recording on space up.
@@ -72,10 +69,12 @@ export default function useAudioInputController (typing: Ref) {
             const message = renderMessage("", "", "", "sf")
             emitter.emit("self-message", message);
 
-            const audio = invoke('update-recorder', {
-                isRecording: false,
-                uid: message.uid
-            });
+            // Stop recording and get audio from recorder.
+            const audio = await invoke('stop-recording', "");
+            
+            // Send message to the backend for processing.
+            const clientM = clientMessage("", audio, message.uid);
+            post('client-message', clientM);
 
             hideRecIcon()
             recording.value = false;

src/components/login.vue

@@ -0,0 +1,173 @@
+<template>
+  <form id="login" @submit.prevent="submitForm">
+
+
+    <!-- login title -->
+    <div id="loginTitle">
+      <div>Login</div>
+    </div>
+
+    <!-- username and password forms -->
+    <div id="loginBox">
+      <!-- username -->
+      <div class="inputBox">
+        <input class="input" type="text" v-model="usr" />
+        <div class="inputModifier">Email</div>
+      </div>
+
+
+      <!-- password -->
+      <div class="inputBox">
+        <input class="input" type="password" v-model="pwd" />
+        <div class="inputModifier">Password</div>
+      </div>
+    </div>
+
+    <!-- submit button; position: fixed -->
+    <button class="submitButton button" type="submit">Submit</button>
+    
+  </form>
+
+    <!-- back to login button: position: fixed  -->
+    <button class="createAccountButton button" @click.prevent="switchView">Create account</button>
+</template>
+
+<script lang="ts">
+
+import { defineComponent, ref } from "vue";
+import { useAuth } from "@/modules/auth";
+import { useIpc } from "@/modules/ipc";
+import useMessages from "@/modules/messages";
+import { authRequest } from '@/modules/message'; 
+
+export default defineComponent({
+  name: "Login",
+
+  setup() {
+
+    const { post } = useIpc();
+    const { setToken } = useAuth();
+    const { resetMessages } = useMessages();
+
+    let usr = ref("");
+    let pwd = ref("");
+
+    // Submit login credentials to the backend.
+    const submitForm = () => {
+      console.log(`Submitting login form: ${usr.value}, ${pwd.value}`)
+      post("client-message", authRequest(false, usr.value, pwd.value))
+    }
+
+    return {
+      usr,
+      pwd,
+      submitForm
+    }
+
+  },
+
+});
+
+</script>
+
+<style lang="scss" scoped>
+#login {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+#loginTitle {
+  font-family: "SF Pro Text";
+  min-width: 181px;
+  font-size: 24px;
+  font-weight: bold;
+  text-align: left;
+  padding-bottom: 10px;
+}
+
+#loginBox {
+  font-family: "SF Compact Display";
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding-bottom: 20px;
+}
+
+.inputBox {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 10px;
+}
+
+.input {
+  background-color: #B9B9B9;
+  border: none;
+  outline: none;
+  padding: 16px;
+  text-decoration: none;
+  margin: 4px 2px;
+  cursor: pointer;
+  border-radius: 10px;
+}
+
+.inputModifier {
+  min-width: 181px;
+  font-size: 12px;
+  font-weight: bold;
+  text-align: left;
+  margin-left: 15px;
+}
+
+.submitButton {
+  font-family: "SF Compact Display";
+  position: fixed;
+  margin-top: 141px;
+  background-color: #58C4FD;
+  color: white;
+  padding: 10px 30px;
+  border-radius: 20px;
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.submitButton:active {
+  background-color: #4296C3;
+}
+
+.createAccountButton {
+  position: absolute;
+  border: none;
+  background-color: #EBEBEB;
+  text-decoration: none;
+  color: #58C4FD;
+  font-weight: bold;
+  bottom: 20px;
+  right: 20px;
+}
+
+.button {
+  border: none;
+  outline: none;
+  text-decoration: none;
+}
+
+.button:hover {
+  cursor: pointer;
+}
+
+.invalid {
+    margin-bottom: 30px;
+    font-family: "SF Compact Display";
+    font-weight: bold;
+    font-size: 14px;
+    color: #F53737;
+}
+
+</style>

src/components/messenger.vue

@@ -0,0 +1,97 @@
+<template>
+  <InputItem />
+  <Settings />
+
+  <div id="recIcon" />
+
+  <!-- List of message bubbles. -->
+  <div id="messenger">
+    <MessageItem v-for="message in messages" :message="message[1]" :key="message[0]" />
+  </div>
+
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, onUnmounted } from "vue";
+import MessageItem from "@/components/messageItem.vue";
+import InputItem from "@/components/inputItem/inputItem.vue";
+import Settings from "@/components/settings.vue";
+import useMitt from "@/modules/mitt";
+import useMessages from '@/modules/messages';
+
+export default defineComponent({
+  name: "Messenger",
+  components: {
+    MessageItem,
+    InputItem,
+    Settings
+  },
+  setup() {
+
+    // Listen for self-messages from inputItem.
+    const { emitter } = useMitt();
+
+    // Handle messages in view.
+    const { messages, updateMessageView } = useMessages();
+
+    // Update message view on new content.
+    const onNewContent = (_event: any, payload: any) => {
+      updateMessageView(payload.message)
+    }
+
+    onMounted(() => {
+
+      // Front end listener.
+      emitter.on('self-message', (message) => updateMessageView(message));
+
+      // Back end listener.
+      window.ipcRenderer.on("render-message", onNewContent);
+
+    });
+
+    onUnmounted(() => {
+      window.ipcRenderer.removeAllListeners("render-message");
+      window.ipcRenderer.removeAllListeners("annotate-message");
+      emitter.all.clear();
+    });
+
+    return {
+      messages
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+#messenger {
+  width: 100vw;
+  height: 100vh;
+  overflow: auto;
+}
+
+#messenger::-webkit-scrollbar {
+  display: none;
+}
+
+#recIcon {
+  position: fixed;
+  right: 0;
+
+  opacity: 0;
+  transform: scale(0.0);
+
+  margin-top: 24px;
+  margin-right: 66px;
+
+
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #FF3B3B;
+
+  z-index: 2;
+
+}
+
+
+</style>

src/components/settings.vue

@@ -28,8 +28,7 @@
   import { defineComponent, ref } from "vue";
   import { useAuth } from "@/modules/auth";
   import  { useIpc } from "@/modules/ipc";
-  import { useRouter } from "vue-router";
-
+  import { logoutRequest } from '@/modules/message'; 
 
   export default defineComponent({
     name: "Settings",
@@ -38,8 +37,6 @@
       const toggleSettings = ref(false);
 
       const { post } = useIpc();
-      const { logout } = useAuth();
-      const router = useRouter();
 
       // Listen for escape key to close settings.
       const onEscape = (e: any) => {
@@ -57,7 +54,8 @@
 
       // We ask server to log us out.
       const onLogout = () => {
-        post("auth-request", "logout")
+        console.log("Submitting logout request.")
+        post("client-message", logoutRequest())
       }
 
       return {