From a958f53edc74038a33ce317b86b5db0511d0d024 Mon Sep 17 00:00:00 2001
From: Andrew Gundersen <gundersena@xavier.edu>
Date: Thu, 11 Feb 2021 15:32:00 -0600
Subject: [PATCH] moving splash code from components to views

---
 src/background/session.ts       | 11 ++++
 src/components/login/index.vue  | 95 ---------------------------------
 src/components/splash/index.vue | 73 -------------------------
 src/router.ts                   |  7 +++
 src/views/splash.vue            | 61 ++++++++++++++++++++-
 5 files changed, 77 insertions(+), 170 deletions(-)
 delete mode 100644 src/components/login/index.vue
 delete mode 100644 src/components/splash/index.vue

diff --git a/src/background/session.ts b/src/background/session.ts
index 6fb80eb..80a74aa 100644
--- a/src/background/session.ts
+++ b/src/background/session.ts
@@ -32,15 +32,20 @@ let auth = false;
 
 const authSession = async (_event, payload: string | UserCreds | null): Promise<string> => {
     return new Promise((resolve, reject) => {
+
         console.log('authenticating...');
+
         backgroundMitt.on('auth-res', (res: string) => {
+
             if (res === 'locked') {
                 reject(res);
             } else {
                 auth = true;
                 resolve(res);
             }
+
         });
+
         if (!payload) {
             socket.send('no-token');
         } else if (typeof payload === 'string' || payload instanceof String) {
@@ -74,7 +79,10 @@ export const sendMessage = (content: TextMessage | Buffer) => {
     }
 }
 
+// Run every time we want to connect to backend.
 export const initSession = () => {
+
+    // Close existing sockets.
     if (socket) {
         socket.removeAllListeners();
         socket.terminate();
@@ -82,6 +90,7 @@ export const initSession = () => {
         success = false;
     }
 
+    // Init new socket.
     socket = new WebSocket(`${ip}:${port}`);
     socket.binaryType = 'arraybuffer';
 
@@ -89,6 +98,7 @@ export const initSession = () => {
     ipcMain.removeHandler('auth-user'); // avoid setting duplicate handlers
     ipcMain.handle('auth-user', authSession);
 
+    // Connect to the backend.
     socket.on('open', () => {
         console.log('Success! Connected to Crimata Servers.');
 
@@ -101,6 +111,7 @@ export const initSession = () => {
 
     });
 
+    // Handle for failed connect, try again.
     socket.on('error', (_e) => {
         console.log('ERROR: Failed to connect.');
         socket.removeAllListeners();
diff --git a/src/components/login/index.vue b/src/components/login/index.vue
deleted file mode 100644
index c75d625..0000000
--- a/src/components/login/index.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<template>
-  <div id="login">
-
-    <!-- login title -->   
-    <div id="loginTitle">Login</div>
-
-    <!-- username and password forms --> 
-    <div id="loginBox">   
-
-      <!-- username -->   
-      <input 
-        class="input" 
-        type="text" 
-        v-model="login.username" 
-        placeholder="username" 
-      />
-
-      <!-- password -->
-      <input 
-        class="input" 
-        type="password" 
-        v-model="login.password" 
-        placeholder="Password" 
-      />
-
-    </div>
-
-    <!-- submit button --> 
-    <button class="button" v-on:click="submitCreds">Submit</button>
-
-  </div>
-</template>
-
-<script lang="ts">
-
-import { defineComponent } from "vue";
-
-export default defineComponent({
-
-  name: "Login",
-
-  data: function() {
-return {
-    login: {
-      username: "",
-      password: ""
-    }
-  };
-}
-
-});
-
-</script>
-
-<style lang="scss" scoped>
-
-  #login {
-    width: 350px;
-    height: 500px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    background-color: #e6e6e6;
-  }
-
-  #loginBox {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .input {
-    background-color: #B9B9B9;
-    border: none;
-    color: white;
-    padding: 16px;
-    text-decoration: none;
-    margin: 4px 2px;
-    cursor: pointer;
-    border-radius: 10px;
-  }
-
-  .button {
-    background-color: #58C4FD;
-    border: none;
-    color: white;
-    padding: 10px 20px;
-    text-decoration: none;
-    border-radius: 20px;
-    font-weight: bold;
-  }
-  
-</style>
\ No newline at end of file
diff --git a/src/components/splash/index.vue b/src/components/splash/index.vue
deleted file mode 100644
index 3b0a133..0000000
--- a/src/components/splash/index.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template>
-  <div id="splash">
-    <svg 
-      xmlns="http://www.w3.org/2000/svg" 
-      width="57.046" 
-      height="52.759" 
-      viewBox="0 0 57.046 52.759"
-    >
-      <g transform="translate(-4127 -507)">
-        <g transform="translate(3949 332.206)">
-          <g transform="translate(178 174.794)">
-            <g transform="translate(0 27.405)">
-              <circle 
-                cx="12.677" 
-                cy="12.677" 
-                r="12.677" 
-                transform="translate(0 0)" 
-                fill="#383838"
-              />
-              <circle 
-                cx="12.677" 
-                cy="12.677" 
-                r="12.677" 
-                transform="translate(31.692 0)" 
-                fill="#383838"
-              />
-            </g>
-            <circle 
-              cx="12.677" 
-              cy="12.677" 
-              r="12.677" 
-              transform="translate(15.822 0)" 
-              fill="#383838"
-            />
-            <path 
-              d="M36.27,83.67" 
-              transform="translate(-23.569 -43.588)" 
-              fill="#ff0"
-            />
-          </g>
-        </g>
-      </g>
-    </svg>    
-  </div>
-</template>
-
-<script lang="ts">
-
-import { defineComponent } from "vue";
-
-export default defineComponent({
-
-  name: "Splash",
-
-});
-
-</script>
-
-<style lang="scss" scoped>
-
-  #splash {
-    width: 350px;
-    height: 500px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: #EBEBEB;
-    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.3);
-    // border-radius: 20px;
-  }
-
-</style>
-
diff --git a/src/router.ts b/src/router.ts
index f8aa2bf..eedf589 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -5,12 +5,19 @@ import {
   RouteRecordRaw
 } from "vue-router";
 import Home from "@/views/home.vue";
+import Splash from "@/views/splash.vue";
 import { useAuth } from '@/modules/auth';
 
 // Define the routes (/*) for the app here.
 const routes: Array<RouteRecordRaw> = [
   {
     path: "/",
+    name: "splash",
+    component: Splash,
+    meta: { requiresAuth: false },
+  },
+  {
+    path: "/home",
     name: "home",
     component: Home,
     meta: { requiresAuth: true },
diff --git a/src/views/splash.vue b/src/views/splash.vue
index dbe7d0f..1db66eb 100644
--- a/src/views/splash.vue
+++ b/src/views/splash.vue
@@ -1,5 +1,47 @@
 <template>
-  <SplashComponent />
+  <div id="splash">
+    <svg 
+      xmlns="http://www.w3.org/2000/svg" 
+      width="57.046" 
+      height="52.759" 
+      viewBox="0 0 57.046 52.759"
+    >
+      <g transform="translate(-4127 -507)">
+        <g transform="translate(3949 332.206)">
+          <g transform="translate(178 174.794)">
+            <g transform="translate(0 27.405)">
+              <circle 
+                cx="12.677" 
+                cy="12.677" 
+                r="12.677" 
+                transform="translate(0 0)" 
+                fill="#383838"
+              />
+              <circle 
+                cx="12.677" 
+                cy="12.677" 
+                r="12.677" 
+                transform="translate(31.692 0)" 
+                fill="#383838"
+              />
+            </g>
+            <circle 
+              cx="12.677" 
+              cy="12.677" 
+              r="12.677" 
+              transform="translate(15.822 0)" 
+              fill="#383838"
+            />
+            <path 
+              d="M36.27,83.67" 
+              transform="translate(-23.569 -43.588)" 
+              fill="#ff0"
+            />
+          </g>
+        </g>
+      </g>
+    </svg>    
+  </div>
 </template>
 
 <script lang="ts">
@@ -14,4 +56,19 @@ export default defineComponent({
 
 });
 
-</script>
\ No newline at end of file
+</script>
+
+<style lang="scss" scoped>
+
+  #splash {
+    width: 350px;
+    height: 500px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #EBEBEB;
+    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.3);
+    // border-radius: 20px;
+  }
+
+</style>
\ No newline at end of file
-- 
2.43.0