added login page

src/App.vue

@@ -5,24 +5,22 @@
 </template>
 
 <style lang="scss">
+  html, body {
+    margin: 0;
+    padding: 0;
+  }
 
-html, body {
-  margin: 0;
-  padding: 0;
-}
-
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    height: 100vh;
-    width: 100vw;
- }
-
+  #app {
+    font-family: Avenir, Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-align: center;
+    color: #2c3e50;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      height: 100vh;
+      width: 100vw;
+   }
 </style>

src/background.ts

@@ -1,4 +1,9 @@
-import { app, protocol, BrowserWindow, ipcMain } from "electron";
+import { 
+  app, 
+  protocol, 
+  BrowserWindow, 
+  ipcMain 
+} from "electron";
 import { createProtocol } from "vue-cli-plugin-electron-builder/lib";
 import installExtension, { VUEJS_DEVTOOLS } from "electron-devtools-installer";
 import * as path from "path";
@@ -26,21 +31,16 @@ function createWindow() {
     maximizable: false,
 
     // Postition at launch
-    x: 100,
-    y: 100,
+    x: 10,
+    y: 10,
 
     webPreferences: {
       devTools: false,
-
-      nodeIntegration: 
-        (process.env.ELECTRON_NODE_INTEGRATION as unknown) as boolean,
-
-      preload: path.join(__dirname, "preload.js")
-
     }
 
   });
 
+
   if (process.env.WEBPACK_DEV_SERVER_URL) {
     // Load the url of the dev server if in development mode
     win.loadURL(process.env.WEBPACK_DEV_SERVER_URL as string);
@@ -53,6 +53,7 @@ function createWindow() {
   }
 
 
+  // Websockets config.
   win.webContents.on('did-finish-load', () => {
 
     // Define the websocket
@@ -90,6 +91,7 @@ function createWindow() {
   win.on("closed", () => {
     win = null;
   });
+
 }
 
 // Quit when all windows are closed.
@@ -126,13 +128,17 @@ app.on("ready", async () => {
 
 // Exit cleanly on request from parent process in development mode.
 if (isDevelopment) {
+
+  // For windows.
   if (process.platform === "win32") {
     process.on("message", data => {
       if (data === "graceful-exit") {
         app.quit();
       }
     });
-  } else {
+  } 
+
+  else {
     process.on("SIGTERM", () => {
       app.quit();
     });

src/components/login/index.vue

@@ -0,0 +1,23 @@
+<template>
+  Login Componant
+</template>
+
+<script lang="ts">
+
+export default {
+
+  name: "Login",
+
+};
+
+</script>
+
+<style lang="scss" scoped>
+  #messenger {
+    width: 350px;
+    height: 500px;
+    background-color: #e6e6e6;
+    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.3);
+    // border-radius: 20px;
+  }
+</style>

src/components/messenger/mockMessages.ts

@@ -1,161 +0,0 @@
-import { Message } from "@/types/message/index";
-
-const Messages: Message[] = [
-    {
-        content: "Welcome",
-        context: "ai",
-        subContext: "",
-        modifier: "ai",
-        id: "2",
-        time: ""
-    },
-    {
-        content:
-            "add friend",
-        context: "launch",
-        subContext: "",
-        modifier: "sf",
-        id: "1",
-        time: ""
-    },
-    {
-        content: "Did you mean to addcontact?",
-        context: "addcontact",
-        subContext: "",
-        modifier: "ai",
-        id: "5",
-        time: ""
-    },
-    {
-        content: "yes",
-        context: "fulfill",
-        subContext: "",
-        modifier: "sf",
-        id: "6",
-        time: ""
-    },
-
-    {
-        content: "Hey Anna, did you get the paper done?",
-        context: "Mesage from Tommy McConville",
-        subContext: "New Conversation",
-        modifier: "ai",
-        id: "3",
-        time: ""
-    },
-    {
-        content: "Hey do you know Enrique Hernandez?",
-        context: "Message from Crimata",
-        subContext: "",
-        modifier: "ai",
-        id: "7",
-        time: ""
-    },
-
-    {
-        content: "Yes posting it online soon.",
-        context: "You to Tommy McConville",
-        subContext: "",
-        modifier: "sf",
-        id: "4",
-        time: ""
-    },
-    {
-        content: "Hey do you know Enrique Hernandez?",
-        context: "Message from Crimata",
-        subContext: "",
-        modifier: "ai",
-        id: "8",
-        time: ""
-    },
-    {
-        content: "Hey Anna, did you get the paper done?",
-        context: "Message from Tommy McConville",
-        subContext: "",
-        modifier: "ai",
-        id: "9",
-        time: ""
-    },
-    {
-        content: "Hey Anna, did you get the paper done?",
-        context: "Message from Tommy McConville",
-        subContext: "",
-        modifier: "ai",
-        id: "10",
-        time: ""
-    },
-    {
-        content: "Yes posting it online soon.",
-        context: "Message from Tommy McConville",
-        subContext: "",
-        modifier: "sf",
-        id: "11",
-        time: ""
-    },
-    {
-        content:
-            "I can be there at 5 pm tomorrow to greet you at a Chick file with my almond and chive salad.",
-        context: "You to Tommy McConville",
-        subContext: "",
-        modifier: "sf",
-        id: "12",
-        time: ""
-    },
-    {
-        content: "Hey Anna, did you get the paper done?",
-        context: "Message from Tommy McConville",
-        subContext: "",
-        modifier: "ai",
-        id: "13",
-        time: ""
-    },
-    {
-        content: "Hey Anna, did you get the paper done?",
-        context: "Message from Tommy McConville",
-        subContext: "",
-        modifier: "ai",
-        id: "14",
-        time: ""
-    },
-    {
-        content: "Yes posting it online soon.",
-        context: "You to Tommy McConville",
-        subContext: "",
-        modifier: "sf",
-        id: "15",
-        time: ""
-    },
-    {
-        content: "Sweet, thanks!",
-        context: "Message from Tommy McConville",
-        subContext: "",
-        modifier: "ai",
-        id: "16",
-        time: ""
-    },
-    {
-        content: "Hey do you know Enrique Hernandez?",
-        context: "Message from Crimata AI",
-        subContext: "",
-        modifier: "ai",
-        id: "17",
-        time: ""
-    },
-    {
-        content: "Yes posting it online soon.",
-        context: "You to Tommy McConville",
-        subContext: "",
-        modifier: "sf",
-        id: "18",
-        time: ""
-    },
-    {
-        content: "Sweet, thanks!",
-        context: "Message from Tommy McConville",
-        subContext: "",
-        modifier: "ai",
-        id: "19",
-        time: ""
-    },
-];
-export default Messages;

src/main.ts

@@ -1,16 +1,18 @@
-import { createApp } from "vue";
+// src/main.ts
+
 import App from "./App.vue";
 import router from "./router";
 
-// animation library
-import anime from "animejs";
-
-// event handler library
 import mitt from "mitt";
+import anime from "animejs";
+import { createApp } from "vue";
+
+// Handle events.
 const emitter = mitt();
 
-createApp(App)
-  .use(router)
-  .provide("animejs", anime)
-  .provide("mitt", emitter)
-  .mount("#app");
+const app = createApp(App)
+
+app.use(router)
+app.provide("animejs", anime)
+app.provide("mitt", emitter)
+app.mount("#app");

src/router.ts

@@ -5,18 +5,28 @@ import {
     RouteRecordRaw 
 } from "vue-router";
 
-import HomeIndex from "../views/home/index.vue";
+import Home from "./views/home.vue";
+import Login from "./views/login.vue";
 
+// Define the routes (/*) for the app here.
 const routes: Array<RouteRecordRaw> = [
+
   {
     path: "/",
     name: "Home",
-    component: HomeIndex
+    component: Home
   },
+
+  {
+    path: "/login",
+    name: "Login",
+    component: Login
+  },
+
 ];
 
 const router = createRouter({
-  history: process.env.IS_ELECTRON ? createWebHashHistory() : createWebHistory(process.env.BASE_URL),
+  history: createWebHashHistory(),
   routes
 });
 

src/views/home.vue

@@ -3,10 +3,15 @@
 </template>
 
 <script lang="ts">
+
 import { defineComponent } from "vue";
 import Messenger from "@/components/messenger/index.vue";
+
 export default defineComponent({
-  name: "HomeIndex",
+    
+  name: "Home",
   components: { Messenger },
+
 });
+
 </script>

src/views/login.vue

@@ -0,0 +1,17 @@
+<template>
+    <Login />
+</template>
+
+<script lang="ts">
+
+import { defineComponent } from "vue";
+import Login from "@/components/login/index.vue";
+
+export default defineComponent({
+
+  name: "Login",
+  components: { Login },
+
+});
+
+</script>

testServer.js

@@ -0,0 +1,44 @@
+const WebSocket = require("ws");
+
+const testMessage = {
+  content: 'Hello from test server!' ,
+  context: 'test message',
+  subContext: '',
+  modifiers: 'ai',
+  id: "0",
+  time: 'test'
+}
+const wss = new WebSocket.Server({
+  port: 8080
+  // perMessageDeflate: {
+  //   zlibDeflateOptions: {
+  //     // See zlib defaults.
+  //     chunkSize: 1024,
+  //     memLevel: 7,
+  //     level: 3
+  //   },
+  //   zlibInflateOptions: {
+  //     chunkSize: 10 * 1024
+  //   },
+  //   // Other options settable:
+  //   clientNoContextTakeover: true, // Defaults to negotiated value.
+  //   serverNoContextTakeover: true, // Defaults to negotiated value.
+  //   serverMaxWindowBits: 10, // Defaults to negotiated value.
+  //   // Below options specified as default values.
+  //   concurrencyLimit: 10, // Limits zlib concurrency for perf.
+  //   threshold: 1024 // Size (in bytes) below which messages
+  //   // should not be compressed.
+  // }
+});
+
+wss.on("connection", function connection(ws, req) {
+  ws.on("message", function incoming(message) {
+    console.log(message)
+    // const parsed = JSON.parse(message)
+    //   console.log(parsed)
+  });
+
+  const ip = req.socket.remoteAddress;
+  console.log("received connection from", ip);
+  ws.send(JSON.stringify(testMessage));
+});

tsconfig.json

@@ -31,6 +31,7 @@
     ]
   },
   "include": [
+    "src/*.ts",
     "src/**/*.ts",
     "src/**/*.tsx",
     "src/**/*.vue",