invalid credentials error on login.vue

src/background/session.ts

@@ -27,7 +27,7 @@ interface TextMessage {
     content: string;
 }
 
-const ip = 'ws://127.0. 0.1';
+const ip = 'ws://127.0.0.1';
 const port = 8760;
 const reconnectTimeout = 3000; //ms
 let socket: WebSocket;

src/views/login.vue

@@ -1,6 +1,7 @@
 <template>
   <form id="login" @submit.prevent="submit">
 
+
     <!-- login title -->
     <div id="loginTitle">
       <div>Login</div>
@@ -25,6 +26,9 @@
     <!-- submit button; position: fixed -->
     <button class="submitButton button" type="submit">Submit</button>
 
+    <div class="invalid" v-if="invalid">
+        Incorrect Credentials
+    </div>
   </form>
 
     <!-- back to login button: position: fixed  -->
@@ -52,6 +56,7 @@ export default defineComponent({
     const email = ref("");
     const password = ref("");
     const rememberMe = ref(true);
+    const invalid = ref(false);
 
     const { invoke } = useIpc();
 
@@ -64,9 +69,11 @@ export default defineComponent({
         try {
             const res = await invoke('auth-session', payload);
             setToken(res);
+            invalid.value = false;
             router.push({ name: "home" });
         } catch(e){
-            console.log('Error loging in.')
+            invalid.value = true;
+            console.log('Error loging in.');
         }
     };
 
@@ -79,7 +86,8 @@ export default defineComponent({
       email,
       password,
       rememberMe,
-      switchView
+      switchView,
+      invalid
     };
   },
 });
@@ -110,7 +118,7 @@ export default defineComponent({
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding-bottom: 30px;
+  padding-bottom: 20px;
 }
 
 .inputBox {
@@ -177,4 +185,12 @@ export default defineComponent({
   cursor: pointer;
 }
 
+.invalid {
+    margin-bottom: 30px;
+    font-family: "SF Compact Display";
+    font-weight: bold;
+    font-size: 14px;
+    color: #F53737;
+}
+
 </style>