automatic login

client/src/components/connect.vue

@@ -9,7 +9,7 @@
         <span>Please Login</span>
         <input type="text" placeholder="Username" v-model="username" />
         <input type="password" placeholder="Password" v-model="password" />
-        <button type="submit" @click.stop.prevent="connect">
+        <button type="submit" @click.stop.prevent="login">
           Connect
         </button>
       </form>
@@ -147,17 +147,24 @@
 <script lang="ts">
   import { Component, Ref, Watch, Vue } from 'vue-property-decorator'
   import { get, set } from '~/utils/localstorage'
+
   @Component({ name: 'neko-connect' })
   export default class extends Vue {
     private username = ''
     private password = ''
 
+    mounted() {
+      if (this.$accessor.username !== '' && this.$accessor.password !== '') {
+        this.$accessor.login({ username: this.$accessor.username, password: this.$accessor.password })
+      }
+    }
+
     get connecting() {
       return this.$accessor.connecting
     }
 
-    connect() {
-      this.$accessor.connect({ username: this.username, password: this.password })
+    login() {
+      this.$accessor.login({ username: this.username, password: this.password })
     }
   }
 </script>

client/src/components/settings.vue

@@ -35,6 +35,9 @@
           <span />
         </label>
       </li>
+      <li v-if="connected">
+        <button @click.stop.prevent="logout">Logout</button>
+      </li>
     </ul>
   </div>
 </template>
@@ -69,6 +72,22 @@
           line-height: 24px;
         }
 
+        button {
+          cursor: pointer;
+          border-radius: 5px;
+          padding: 4px;
+          background: $style-primary;
+          color: $text-normal;
+          text-align: center;
+          text-transform: uppercase;
+          font-weight: bold;
+          line-height: 30px;
+          margin: 5px 0;
+          border: none;
+          display: block;
+          width: 100%;
+        }
+
         .switch {
           justify-self: flex-end;
           position: relative;
@@ -173,6 +192,10 @@
 
   @Component({ name: 'neko-settings' })
   export default class extends Vue {
+    get connected() {
+      return this.$accessor.connected
+    }
+
     get scroll() {
       return this.$accessor.settings.scroll.toString()
     }
@@ -212,5 +235,9 @@
     set chat_sound(value: boolean) {
       this.$accessor.settings.setSound(value)
     }
+
+    logout() {
+      this.$accessor.logout()
+    }
   }
 </script>

client/src/neko/base.ts

@@ -73,6 +73,28 @@ export abstract class BaseClient extends EventEmitter<BaseEvents> {
     }
   }
 
+  protected disconnect() {
+    if (this._timeout) {
+      clearTimeout(this._timeout)
+    }
+
+    if (this.socketOpen) {
+      try {
+        this._ws!.close()
+      } catch (err) {}
+      this._ws = undefined
+    }
+
+    if (this.peerConnected) {
+      try {
+        this._peer!.close()
+      } catch (err) {}
+      this._peer = undefined
+    }
+
+    this._state = 'disconnected'
+  }
+
   public sendData(event: 'wheel' | 'mousemove', data: { x: number; y: number }): void
   public sendData(event: 'mousedown' | 'mouseup' | 'keydown' | 'keyup', data: { key: number }): void
   public sendData(event: string, data: any) {
@@ -165,14 +187,6 @@ export abstract class BaseClient extends EventEmitter<BaseEvents> {
       }
     }
 
-    this._peer.onsignalingstatechange = event => {
-      this.emit('debug', `peer signal state chagned: ${this._peer!.signalingState}`)
-    }
-
-    this._peer.onconnectionstatechange = event => {
-      this.emit('debug', `peer connection state chagned: ${this._peer!.connectionState}`)
-    }
-
     this._peer.oniceconnectionstatechange = event => {
       this._state = this._peer!.iceConnectionState
 
@@ -213,7 +227,7 @@ export abstract class BaseClient extends EventEmitter<BaseEvents> {
 
   private setRemoteDescription(payload: SignalPayload) {
     if (this.peerConnected) {
-      this.emit('warn', `received ${event} with no peer!`)
+      this.emit('warn', `attempting to set remote description while peer connected`, payload)
       return
     }
     this._peer!.setRemoteDescription({ type: 'answer', sdp: payload.sdp })
@@ -292,24 +306,7 @@ export abstract class BaseClient extends EventEmitter<BaseEvents> {
   }
 
   protected onDisconnected(reason?: Error) {
-    if (this._timeout) {
-      clearTimeout(this._timeout)
-    }
-
-    if (this.socketOpen) {
-      try {
-        this._ws!.close()
-      } catch (err) {}
-      this._ws = undefined
-    }
-
-    if (this.peerConnected) {
-      try {
-        this._peer!.close()
-      } catch (err) {}
-      this._peer = undefined
-    }
-
+    this.disconnect()
     this.emit('debug', `disconnected:`, reason)
     this[EVENT.DISCONNECTED](reason)
   }

client/src/neko/index.ts

@@ -28,22 +28,40 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
   private $vue!: Vue
   private $accessor!: typeof accessor
 
+  private get id() {
+    return this.$accessor.user.id
+  }
+
   init(vue: Vue) {
     this.$vue = vue
     this.$accessor = vue.$accessor
   }
 
-  connect(password: string, username: string) {
+  private cleanup() {
+    this.$accessor.setConnected(false)
+    this.$accessor.remote.reset()
+    this.$accessor.user.reset()
+    this.$accessor.video.reset()
+    this.$accessor.chat.reset()
+  }
+
+  login(password: string, username: string) {
     const url =
       process.env.NODE_ENV === 'development'
         ? `ws://${location.host.split(':')[0]}:${process.env.VUE_APP_SERVER_PORT}/`
         : `${/https/gi.test(location.protocol) ? 'wss' : 'ws'}://${location.host}/`
 
-    super.connect(url, password, username)
+    this.connect(url, password, username)
   }
 
-  private get id() {
-    return this.$accessor.user.id
+  logout() {
+    this.disconnect()
+    this.cleanup()
+    this.$vue.$swal({
+      title: 'You have logged out!',
+      icon: 'info',
+      confirmButtonText: 'ok',
+    })
   }
 
   /////////////////////////////
@@ -67,13 +85,7 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
   }
 
   protected [EVENT.DISCONNECTED](reason?: Error) {
-    this.$accessor.setConnected(false)
-
-    this.$accessor.remote.reset()
-    this.$accessor.user.reset()
-    this.$accessor.video.reset()
-    this.$accessor.chat.reset()
-
+    this.cleanup()
     this.$vue.$notify({
       group: 'neko',
       type: 'error',

client/src/store/index.ts

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import { useAccessor, mutationTree, actionTree } from 'typed-vuex'
+import { get, set } from '~/utils/localstorage'
 
 import * as video from './video'
 import * as chat from './chat'
@@ -11,12 +12,19 @@ import * as client from './client'
 import * as emoji from './emoji'
 
 export const state = () => ({
+  username: get<string>('username', ''),
+  password: get<string>('password', ''),
   connecting: false,
   connected: false,
   locked: false,
 })
 
 export const mutations = mutationTree(state, {
+  setLogin(state, { username, password }: { username: string; password: string }) {
+    state.username = username
+    state.password = password
+  },
+
   setLocked(state, locked: boolean) {
     state.locked = locked
   },
@@ -29,20 +37,30 @@ export const mutations = mutationTree(state, {
   setConnected(state, connected: boolean) {
     state.connected = connected
     state.connecting = false
+    if (connected) {
+      set('username', state.username)
+      set('password', state.password)
+    }
   },
 })
 
 export const actions = actionTree(
   { state, mutations },
   {
-    //
     initialise(store) {
       accessor.emoji.initialise()
     },
 
-    //
-    connect(store, { username, password }: { username: string; password: string }) {
-      $client.connect(password, username)
+    login({ state }, { username, password }: { username: string; password: string }) {
+      accessor.setLogin({ username, password })
+      $client.login(password, username)
+    },
+
+    logout({ state }) {
+      accessor.setLogin({ username: '', password: '' })
+      set('username', '')
+      set('password', '')
+      $client.logout()
     },
   },
 )