New connecting screen

src/assets/transparentLogo.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="500pt" height="500pt" viewBox="0 0 500 500" version="1.1" xmlns="http://www.w3.org/2000/svg">
+<g id="#ffffffff">
+<path fill="#ffffff" opacity="1.00" d=" M 55.68 85.80 C 56.79 82.77 59.50 79.88 62.98 80.09 C 67.87 80.43 72.02 83.42 76.04 85.97 C 87.31 93.85 97.48 103.15 107.75 112.27 C 122.97 126.03 137.94 140.08 153.21 153.80 C 168.59 167.50 183.95 181.37 201.07 192.90 C 207.70 197.08 214.84 201.80 223.03 201.46 C 238.71 201.78 254.41 201.84 270.09 201.57 C 275.23 201.24 280.58 202.07 285.49 200.16 C 292.06 197.69 297.93 193.73 303.65 189.75 C 319.26 178.53 333.60 165.68 347.90 152.87 C 363.35 138.88 378.54 124.61 394.07 110.71 C 404.84 101.22 415.45 91.39 427.61 83.68 C 431.46 81.45 436.40 78.55 440.78 81.12 C 444.88 84.05 445.41 89.47 446.36 94.03 C 446.71 99.30 446.94 104.74 445.83 109.92 C 443.74 132.85 438.90 155.40 435.08 178.07 C 430.03 205.90 424.26 233.58 418.16 261.19 C 413.18 283.20 408.13 305.22 401.62 326.83 C 395.31 348.05 383.35 367.98 365.97 381.91 C 358.27 388.14 349.85 393.39 341.40 398.52 C 321.57 409.25 299.11 413.72 277.01 417.02 C 266.08 418.38 255.08 420.03 244.03 419.30 C 228.16 417.94 212.32 415.79 196.79 412.16 C 183.61 409.00 170.46 405.00 158.59 398.32 C 146.00 390.62 133.23 382.68 123.33 371.55 C 110.49 357.48 102.06 339.87 97.18 321.56 C 86.11 282.04 77.82 241.80 69.72 201.58 C 68.01 192.91 66.37 184.23 64.83 175.52 C 61.10 152.75 55.67 130.19 54.07 107.11 C 54.21 100.01 53.08 92.60 55.68 85.80 M 84.85 142.00 C 84.71 151.13 86.29 160.17 87.88 169.13 C 91.93 189.71 97.13 210.12 104.29 229.85 C 105.75 233.20 106.70 237.01 109.38 239.65 C 113.85 240.63 118.33 238.78 122.50 237.35 C 132.74 233.25 142.42 227.80 151.49 221.55 C 154.17 219.55 157.06 217.68 159.08 214.96 C 159.46 213.61 158.64 212.32 158.24 211.08 C 154.53 202.82 148.92 195.62 143.45 188.47 C 131.72 173.72 118.96 159.73 104.93 147.11 C 99.39 142.40 93.80 137.26 86.69 135.07 C 84.96 136.95 85.00 139.61 84.85 142.00 M 402.83 140.74 C 394.70 146.89 387.43 154.08 380.30 161.34 C 370.34 171.70 360.87 182.55 352.28 194.07 C 348.21 199.69 344.09 205.39 341.45 211.85 C 341.05 213.05 340.21 214.64 341.47 215.67 C 344.16 218.66 347.57 220.89 350.86 223.16 C 359.46 228.81 368.51 233.86 378.12 237.58 C 382.09 238.92 386.35 240.58 390.59 239.67 C 393.15 237.23 394.06 233.65 395.46 230.51 C 401.73 213.57 406.32 196.05 410.24 178.43 C 412.59 167.07 414.89 155.61 415.17 143.98 C 415.03 140.98 415.43 137.51 413.30 135.07 C 409.46 136.24 406.00 138.31 402.83 140.74 M 165.52 259.72 C 157.03 262.66 152.55 271.67 151.00 279.98 C 149.33 289.47 150.58 299.86 155.97 308.02 C 159.06 312.70 164.23 316.59 170.09 316.26 C 175.68 315.89 180.28 311.96 183.20 307.43 C 187.71 300.24 189.04 291.44 188.21 283.09 C 187.35 275.67 184.66 268.02 178.94 262.95 C 175.35 259.74 170.19 258.27 165.52 259.72 M 326.49 259.81 C 319.11 262.39 314.83 269.87 312.92 277.05 C 310.34 287.12 311.26 298.41 316.77 307.38 C 319.85 312.22 324.95 316.41 330.96 316.28 C 337.50 316.04 342.66 310.98 345.57 305.49 C 349.80 297.26 350.66 287.51 348.70 278.53 C 347.22 272.00 344.00 265.48 338.36 261.60 C 334.95 259.21 330.45 258.53 326.49 259.81 M 238.49 322.32 C 235.78 323.65 235.75 327.26 237.26 329.51 C 239.95 333.80 244.07 336.92 248.05 339.96 C 247.26 342.85 246.02 345.72 243.84 347.84 C 236.23 355.78 220.70 354.79 215.53 344.56 C 214.42 342.67 214.16 338.18 210.98 339.99 C 210.00 342.94 212.27 345.90 213.67 348.41 C 222.15 360.64 243.53 358.81 250.00 345.45 C 254.41 354.50 265.71 358.33 275.11 355.93 C 282.22 354.34 288.18 348.33 289.43 341.12 C 289.46 339.22 286.14 338.93 285.98 340.93 C 284.89 343.96 283.48 346.96 280.92 349.05 C 271.71 357.22 254.29 352.59 251.95 339.96 C 255.33 337.39 258.73 334.74 261.41 331.42 C 263.05 329.52 264.23 327.03 263.55 324.49 C 261.73 321.12 257.40 320.97 254.04 320.70 C 248.87 320.78 243.30 320.00 238.49 322.32 Z" />
+<path fill="#ffffff" opacity="1.00" d=" M 240.85 326.14 C 246.87 324.96 253.14 324.97 259.17 326.13 C 257.08 330.12 253.28 332.74 249.99 335.67 C 246.71 332.75 242.93 330.12 240.85 326.14 Z" />
+</g>
+</svg>

src/components/app/ConnectingScreen copy.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="connecting-screen">
+    <div class="center-box">
+      <div class="cat-face">
+        <div class="eyes" />
+        <div class="animation" />
+      </div>
+      <div class="message">
+        Connecting...
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.connecting-screen {
+  display: flex;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.76);
+  color: white;
+}
+.center-box {
+  margin: auto;
+}
+
+.cat-face {
+  height: 300px;
+  width: 300px;
+  background-position: center;
+  background-size: 100%;
+  background-repeat: no-repeat;
+  background-image: url(./../../assets/logo.png);
+  display: flex;
+  position: relative;
+}
+.animation {
+  height: 280px;
+  width: 280px;
+  border: 16px solid #3498db;
+  border-top: 16px solid white;
+  border-radius: 50%;
+  animation: spin 2s linear infinite;
+  flex-shrink: 0;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.eyes {
+  position: absolute;
+  left: 180px;
+  top: 166px;
+  height: 0px;
+  width: 25px;
+  background: white;
+  animation: blink 5s cubic-bezier(0.17, 0.41, 0.76, 0.98);
+  animation-iteration-count: infinite;
+}
+@keyframes blink {
+  20%,
+  100% {
+    height: 0px;
+  }
+  0% {
+    height: 0 px;
+  }
+  10% {
+    height: 35px;
+  }
+}
+
+.message {
+  text-align: center;
+  margin-top: 20px;
+  font-size: 20px;
+  user-select: none;
+}
+</style>

src/components/app/ConnectingScreen.vue

@@ -2,71 +2,85 @@
   <div class="connecting-screen">
     <div class="center-box">
       <div class="cat-face">
-        <div class="eyes" />
-        <div class="animation" />
+        <div class="eye" />
       </div>
       <div class="message">
-        Connecting...
+        {{ message }}
+      </div>
+      <div class="button" v-if="errMessage" @click="logoutButton">
+        Logout
       </div>
     </div>
   </div>
 </template>
 
-<style scoped>
+<script>
+export default {
+  methods: {
+    logoutButton() {
+      this.$store.dispatch("logout");
+      location.href = "/"
+    }
+  },
+  computed: { 
+    errMessage () {
+      return this.$store.getters.connectionErrorMessage;
+    },
+    status() {
+      return this.$store.getters.connectionStatus;
+    },
+    message() {
+      const status = this.status;
+      if (this.errMessage) return this.errMessage;
+      if (status === 0) return "Connecting...";
+      if (status === 1) return "Authenticating...";
+      if (status === 2) return "Ready!";
+      return "";
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
 .connecting-screen {
-  display: flex;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
-  background: rgba(0, 0, 0, 0.76);
+  display: flex;
+  background: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(5px);
+  height: 100%;
+  width: 100%;
   color: white;
+  align-content: center;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999999;
 }
-.center-box {
-  margin: auto;
-}
-
 .cat-face {
-  height: 300px;
-  width: 300px;
-  background-position: center;
+  position: relative;
+  width: 200px;
+  height: 200px;
   background-size: 100%;
   background-repeat: no-repeat;
-  background-image: url(./../../assets/logo.png);
-  display: flex;
-  position: relative;
+  background-position: center;
+  background-image: url(./../../assets/transparentLogo.svg);
 }
-.animation {
-  height: 280px;
-  width: 280px;
-  border: 16px solid #3498db;
-  border-top: 16px solid white;
-  border-radius: 50%;
-  animation: spin 2s linear infinite;
-  flex-shrink: 0;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.eyes {
+.eye {
   position: absolute;
-  left: 180px;
-  top: 166px;
-  height: 0px;
-  width: 25px;
-  background: white;
-  animation: blink 5s cubic-bezier(0.17, 0.41, 0.76, 0.98);
+  right: 60px;
+  top: 100px;
+  width: 20px;
+  height: 1px;
+  background-size: 100%;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+ip1sAAAAASUVORK5CYII=);
+  animation: wink 2s cubic-bezier(0.17, 0.41, 0.76, 0.98);
   animation-iteration-count: infinite;
 }
-@keyframes blink {
+
+@keyframes wink {
   20%,
   100% {
     height: 0px;
@@ -78,11 +92,23 @@
     height: 35px;
   }
 }
-
+.center-box {
+  display: flex;
+  flex-direction: column;
+}
 .message {
   text-align: center;
-  margin-top: 20px;
-  font-size: 20px;
-  user-select: none;
+}
+.button {
+  background: rgba(0, 0, 0, 0.3);
+  align-self: center;
+  padding: 10px;
+  margin-top: 10px;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: 0.2s;
+  &:hover {
+    background: rgba(0, 0, 0, 0.5);
+  }
 }
 </style>

src/store/index.js

@@ -30,14 +30,33 @@ export const store = new Vuex.Store({
     members: membersModule
   },
   state: {
-    currentTab: 0
+    currentTab: 0,
+    // 0 : connecting
+    // 1: connected
+    // 2: authenticated
+    // 3: error
+    connectionStatus: 0,
+    connectionErrorMessage: null
   },
   getters: {
     currentTab(state) {
       return state.currentTab;
+    },
+    connectionStatus(state) {
+      return state.connectionStatus;
+    },
+    connectionErrorMessage(state) {
+      return state.connectionErrorMessage;
     }
   },
   actions: {
+    setConnectionStatus({ commit }, status) {
+      commit("SET_CONNECTION_STATUS", status);
+    },
+    setConnectionErrorMessage({ commit }, message) {
+      commit("SET_CONNECTION_ERROR_MESSAGE", message);
+      commit("SET_CONNECTION_STATUS", 3);
+    },
     setCurrentTab({ commit }, currentTab) {
       localStorage.setItem("currentTab", currentTab);
       commit("SET_CURRENT_TAB", currentTab);
@@ -46,6 +65,12 @@ export const store = new Vuex.Store({
   mutations: {
     SET_CURRENT_TAB(state, currentTab) {
       state.currentTab = currentTab;
+    },
+    SET_CONNECTION_STATUS(state, status) {
+      state.connectionStatus = status;
+    },
+    SET_CONNECTION_ERROR_MESSAGE(state, message) {
+      state.connectionErrorMessage = message;
     }
   }
 });

src/store/modules/socketIOModule.js

@@ -1,28 +1,36 @@
 import config from "@/config";
 import { bus } from "../../main";
-import { router } from "./../../router";
+//import { router } from "./../../router";
 import DesktopNotification from "@/utils/ElectronJS/DesktopNotification";
 import isElectron from "@/utils/ElectronJS/isElectron";
 import { isMobile } from "@/utils/Mobile";
 
 const actions = {
-  socket_authErr(context) {
-    context.dispatch("logout");
-    router.push({ path: "/" });
+  socket_authErr(context, message) {
+    context.dispatch("setConnectionErrorMessage", message, {
+      root: true
+    });
   },
-  socket_connect() {
+  socket_connect(context) {
+    context.dispatch("setConnectionStatus", 1, { root: true });
     this._vm.$socket.client.emit("authentication", {
       token: localStorage.getItem("hauthid")
     });
   },
+  socket_disconnect(context) {
+    context.dispatch("setConnectionStatus", 0, { root: true });
+    context.commit("user", null);
+  },
   socket_error(context, error) {
-    // if the token is invalid.
-    if (error === "Authentication error") {
-      context.dispatch("logout");
-      router.push({ path: "/" });
-    }
+    console.log(error);
+    context.dispatch(
+      "setConnectionErrorMessage",
+      "Something went wrong. Reload the page.",
+      { root: true }
+    );
   },
   socket_success(context, data) {
+    context.dispatch("setConnectionStatus", 2, { root: true });
     const {
       user,
       serverMembers,
@@ -270,9 +278,6 @@ const actions = {
   socket_multiDeviceStatus(context, data) {
     context.commit("changeStatus", data.status);
   },
-  socket_disconnect(context) {
-    context.commit("user", null);
-  },
   socket_multiDeviceUserAvatarChange(context, data) {
     context.commit("changeAvatar", data.avatarID);
   },

src/views/App.vue

@@ -2,9 +2,9 @@
   <div id="app" ref="app" :class="{ desktop: isElectron }">
     <vue-headful :title="title" description="Nertivia Chat Client" />
     <div class="background-color"></div>
-    <transition name="fade-between-two" appear>
-      <ConnectingScreen v-if="!loggedIn" />
-      <div class="box" v-if="loggedIn">
+    <transition name="fade-between-two" appear mode="in-out">
+      <ConnectingScreen v-if="!ready" />
+      <div class="box" v-if="ready">
         <div class="frame" v-if="isElectron">
           <div class="window-buttons">
             <electron-frame-buttons />
@@ -84,7 +84,8 @@ export default {
   data() {
     return {
       title: "Nertivia",
-      isElectron: window && window.process && window.process.type
+      isElectron: window && window.process && window.process.type,
+      ready: false,
     };
   },
   methods: {
@@ -162,6 +163,11 @@ export default {
   watch: {
     getWindowWidth(dimensions) {
       this.resizeEvent(dimensions);
+    },
+    loggedIn(val) {
+      setTimeout(() => {
+        this.ready = val;
+      });
     }
   },
   async mounted() {