fix(fe): connect to websocket after user logged in

web2/src/App.vue

@@ -287,7 +287,7 @@
               </v-list-item-content>
             </v-list-item>
 
-            <v-list-item key="edit" @click="passwordDialog = true">
+            <v-list-item key="password" @click="passwordDialog = true">
               <v-list-item-icon>
                 <v-icon>mdi-lock</v-icon>
               </v-list-item-icon>
@@ -446,7 +446,8 @@ import TaskLogView from '@/components/TaskLogView.vue';
 import ProjectForm from '@/components/ProjectForm.vue';
 import UserForm from '@/components/UserForm.vue';
 import ChangePasswordForm from '@/components/ChangePasswordForm.vue';
-import EventBus from './event-bus';
+import EventBus from '@/event-bus';
+import socket from '@/socket';
 
 const PROJECT_COLORS = [
   'red',
@@ -530,12 +531,11 @@ export default {
     try {
       await this.reloadData();
       this.state = 'success';
-    } catch (err) { // notify about problem and sign out
+    } catch (err) {
       EventBus.$emit('i-snackbar', {
         color: 'error',
         text: getErrorMessage(err),
       });
-      // EventBus.$emit('i-session-end');
     }
   },
 
@@ -546,15 +546,6 @@ export default {
       this.snackbarText = e.text;
     });
 
-    EventBus.$on('i-session-end', async () => {
-      await this.signOut();
-    });
-
-    EventBus.$on('i-session-create', async () => {
-      await this.reloadData();
-      await this.trySelectMostSuitableProject();
-    });
-
     EventBus.$on('i-account-change', async () => {
       await this.loadUserInfo();
     });
@@ -664,6 +655,10 @@ export default {
     },
 
     async reloadData() {
+      if (!socket.isRunning()) {
+        socket.start();
+      }
+
       await this.loadUserInfo();
       await this.loadProjects();
 
@@ -756,6 +751,8 @@ export default {
       this.snackbarColor = '';
       this.snackbarText = '';
 
+      socket.stop();
+
       (await axios({
         method: 'post',
         url: '/api/auth/logout',

web2/src/lib/Socket.js

@@ -12,20 +12,26 @@ export default class Socket extends Listenable {
     }
     this.ws = this.websocketCreator();
     this.ws.onclose = () => {
+      if (!this.isRunning()) {
+        return;
+      }
       setTimeout(() => {
         this.start();
       }, 2000);
     };
     this.ws.onmessage = ({ data }) => {
-      try {
-        this.callListeners(JSON.parse(data));
-      } catch (e) {
-        console.error(e);
-      }
+      this.callListeners(JSON.parse(data));
     };
   }
 
+  isRunning() {
+    return this.ws != null;
+  }
+
   stop() {
+    if (!this.ws) {
+      return;
+    }
     this.ws.close();
     delete this.ws;
   }

web2/src/socket.js

@@ -5,6 +5,4 @@ const socket = new Socket(() => {
   return new WebSocket(`${protocol}://${document.location.host}/api/ws`);
 });
 
-socket.start();
-
 export default socket;

web2/src/views/Auth.vue

@@ -1,68 +1,5 @@
 <template>
   <div class="auth">
-    <v-dialog
-      v-model="forgotPasswordDialog"
-      max-width="290"
-      persistent
-    >
-      <v-card>
-        <v-card-title class="headline">Forgot password?</v-card-title>
-
-        <v-alert
-          :value="forgotPasswordSubmitted"
-          color="success"
-        >
-          Check your inbox.
-        </v-alert>
-
-        <v-alert
-          :value="forgotPasswordError"
-          color="error"
-        >
-          {{ forgotPasswordError }}
-        </v-alert>
-
-        <v-card-text>
-          <v-form
-            ref="forgotPasswordForm"
-            lazy-validation
-            v-model="forgotPasswordFormValid"
-          >
-            <v-text-field
-              v-model="email"
-              label="Email"
-              :rules="emailRules"
-              required
-              :disabled="forgotPasswordSubmitting"
-            ></v-text-field>
-          </v-form>
-        </v-card-text>
-
-        <v-card-actions>
-          <v-spacer></v-spacer>
-
-          <v-btn
-            color="green darken-1"
-            text
-            :disabled="forgotPasswordSubmitting"
-            @click="forgotPasswordDialog = false"
-          >
-            Cancel
-          </v-btn>
-
-          <v-btn
-            color="green darken-1"
-            text
-            :disabled="forgotPasswordSubmitting"
-            @click="submitForgotPassword()"
-          >
-            Reset Password
-          </v-btn>
-        </v-card-actions>
-
-      </v-card>
-    </v-dialog>
-
     <v-container
       fluid
       fill-height
@@ -79,7 +16,7 @@
         <h3 class="text-center mb-8">SEMAPHORE</h3>
 
         <v-alert
-          :value="signInError"
+          :value="signInError != null"
           color="error"
           style="margin-bottom: 20px;"
         >{{ signInError }}</v-alert>
@@ -123,7 +60,6 @@
 <script>
 import axios from 'axios';
 import { getErrorMessage } from '@/lib/error';
-import EventBus from '@/event-bus';
 
 export default {
   data() {
@@ -131,19 +67,11 @@ export default {
       signInFormValid: false,
       signInError: null,
       signInProcess: false,
+
       password: '',
       username: '',
-
-      forgotPasswordFormValid: false,
-      forgotPasswordError: false,
-      forgotPasswordSubmitted: false,
-      forgotPasswordSubmitting: false,
-      forgotPasswordDialog: false,
       email: '',
 
-      newPassword: '',
-      newPassword2: '',
-
       emailRules: [
         (v) => !!v || 'Email is required',
       ],
@@ -159,7 +87,7 @@ export default {
 
   async created() {
     if (this.isAuthenticated()) {
-      EventBus.$emit('i-session-create');
+      document.location = '/';
     }
   },
 
@@ -168,31 +96,6 @@ export default {
       return document.cookie.includes('semaphore=');
     },
 
-    async submitForgotPassword() {
-      this.forgotPasswordSubmitted = false;
-      this.forgotPasswordError = null;
-
-      if (!this.$refs.forgotPasswordForm.validate()) {
-        return;
-      }
-
-      this.forgotPasswordSubmitting = true;
-      try {
-        await axios({
-          method: 'post',
-          url: '/v1/session/forgot-password',
-          data: {
-            email: this.email,
-          },
-        });
-        this.forgotPasswordSubmitted = true;
-      } catch (err) {
-        this.forgotPasswordError = err.response.data.error;
-      } finally {
-        this.forgotPasswordSubmitting = false;
-      }
-    },
-
     async signIn() {
       this.signInError = null;
 
@@ -212,21 +115,18 @@ export default {
           },
         });
 
-        EventBus.$emit('i-session-create');
+        document.location = '/';
       } catch (err) {
-        this.signInError = getErrorMessage(err);
+        console.log(err);
+        if (err.response.status === 401) {
+          this.signInError = 'Incorrect login or password';
+        } else {
+          this.signInError = getErrorMessage(err);
+        }
       } finally {
         this.signInProcess = false;
       }
     },
-
-    forgotPassword() {
-      this.forgotPasswordError = null;
-      this.forgotPasswordSubmitted = false;
-      this.email = '';
-      this.$refs.forgotPasswordForm.resetValidation();
-      this.forgotPasswordDialog = true;
-    },
   },
 };
 </script>