Merge pull request #85 from speckleworks/Dim/dev/client-ws-fixes

adds continue as guest button that triggers loading flow too (needed …

src/components/LoginScreen.vue

@@ -12,6 +12,7 @@
           <md-input type='password' v-model='password'></md-input>
         </md-field>
         <md-button class='md-primary md-raised' @click.native='login'>Login</md-button>
+        <md-button class='md-primary xxx-md-raised' @click.native='continueAsGuest'>Continue as guest</md-button>
         <div v-show='loginError' class='login-error'>
           <br>
           <md-icon>warning</md-icon>
@@ -22,14 +23,13 @@
   </div>
 </template>
 <script>
-
 export default {
   name: 'LoginScreen',
   computed: {
     logoUrl( ) { return window.SpkAppConfig.logoUrl },
     serverUrl( ) { return this.$store.state.server },
-    isIOS ( ) {
-      return (typeof window.orientation !== "undefined") && (navigator.userAgent.indexOf('OS X') !== -1)
+    isIOS( ) {
+      return ( typeof window.orientation !== "undefined" ) && ( navigator.userAgent.indexOf( 'OS X' ) !== -1 )
     },
   },
   data( ) {
@@ -40,6 +40,9 @@ export default {
     }
   },
   methods: {
+    continueAsGuest( ) {
+      this.$emit( 'success', { guest: true } )
+    },
     login( ) {
       if ( this.email === '' ) return
       if ( this.password === '' ) return
@@ -64,25 +67,9 @@ export default {
 </script>
 <style scoped>
 .login-card {
-  /*width: 400px;*/
-  /*text-align: center;*/
   pointer-events: auto;
 }
 
-.login-screen {
-/*  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1000;
-  pointer-events: none;
-  background-color: rgba(0, 0, 255, 0.5)*/
-}
-
 .login-error {
   color: #FF0000 !important;
 }

src/components/SidebarMenu.vue

@@ -23,15 +23,15 @@
           </md-button>
           <md-menu-content>
             <md-menu-item @click='logOut'>
-              <span>Logout</span>
+              <span>{{isGuest ? "Login" : "Logout"}}</span>
             </md-menu-item>
-            <md-menu-item>
+            <md-menu-item v-if='!isGuest'>
               <a :href="linkToAdmin" target="_blank">Admin</a>
             </md-menu-item>
           </md-menu-content>
         </md-menu>
       </md-card-header>
-      <md-card-content style='background: white;'>
+      <md-card-content style='background: white;' v-if='!isGuest'>
         <div class='md-layout md-alignment-center-left'>
           <md-button class='md-layout-item md-size-10 md-icon-button md-dense md-primary no-margin' @click.native='getStreams'>
             <md-icon>refresh</md-icon>
@@ -83,7 +83,8 @@ export default {
   data( ) {
     return {
       showLogin: false,
-      user: { name: 'Not initialised' },
+      isGuest: true,
+      user: { name: 'Anonymous 🐸 ' },
       streams: [ ],
       searchFilter: null,
       itemsPerPage: 10,
@@ -92,7 +93,8 @@ export default {
   },
   methods: {
     logOut( ) {
-      this.$store.commit( 'SET_USER', {} )
+      let account = { apitoken: '', name: 'Anonymous', guest: true }
+      this.$store.commit( 'SET_USER', account )
       window.localStorage.setItem( 'userAccount', null )
       window.localStorage.setItem( 'token', null )
       this.user = null
@@ -109,12 +111,14 @@ export default {
         this.$store.commit( 'SET_USER', { account } )
         this.$http.defaults.headers.common[ 'Authorization' ] = jwtToken
         this.user = args.account
+        this.isGuest = false
         this.getStreams( )
-
       } else if ( args.guest === true ) {
+        console.log('asdf')
         let account = { apitoken: '', name: 'Anonymous', guest: true }
         this.$store.commit( 'SET_USER', { account } )
         this.showLogin = false
+        this.isGuest = true
       }
       bus.$emit( 'login-flow-finalised' )
     },