Prepare for alpha

* vaadin-combo-box as searchable room-select * re-org demo-room-select for building static demo-site * fix manual logout() not working and create a new client on login()
pik · Nov 22, 2016 · 4ed25f3 · 4ed25f3
1 parent 78d81fb
commit 4ed25f3
Show file tree

Hide file tree

Showing 8 changed files with 100 additions and 44 deletions.
diff --git a/README.md b/README.md
@@ -2,8 +2,6 @@
 
 Interlocutor is a decentralized comment software built on matrix(http://matrix.org/) as a Polymer Wecomponent, it is under active development and not ready for production use. 
 
-### Why use decentralized comment software? 
-
 ### Moderation Features
 
 Currently interlocutor supports upvotes and flags which are accesible to all users. By default a discussion loads the default moderation settings setup by the content provider. The settings page then allows a user to alter the default settings for comment visibility based on an upvote-threshold or a flag-kill-threshold. Trustred moderator-identities can be added or removed by a user (a moderator flagging a comment will cause it to disappear independent of flag-kill-threshold). User-local settings are persisted on a per discussion basis.

diff --git a/bower.json b/bower.json
@@ -9,7 +9,8 @@
     "iron-collapse": "^1.2.1",
     "moment": "^2.14.1",
     "paper-dialog": "^1.1.0",
-    "paper-toast": "git@github.com:pik/paper-toast.git#vertical-align-transition"
+    "paper-toast": "git@github.com:pik/paper-toast.git#vertical-align-transition",
+    "vaadin-combo-box": "^1.1.5"
   },
   "devDependencies": {
     "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",

diff --git a/demo/index.html b/demo/index.html
@@ -8,25 +8,9 @@
     <meta name="mobile-web-app-capable" content="yes">
 
     <link rel="manifest" href="../manifest.json">
-    <link rel="import" href="../elements/demo-room-select.html">
-    <link rel="import" href="../interlocutor-app.html">
-
-<!--     <link rel="import" href="./bower_components/iron-demo-helpers/demo-snippet.html"> -->
-    <link rel="import" href="../bower_components/iron-demo-helpers/demo-pages-shared-styles.html">
-
-    <style is="custom-style" include="demo-pages-shared-styles"></style>
+    <link rel="import" href="../interlocutor-demo-app.html">
   </head>
   <body>
-    <h2 style="text-align: center">Interlocutor Demo</h2>
-    <!-- room-id="!UWPATDTIHMNoEKyXqn:pik-test" -->
-
-    <demo-room-select app-id='interlocutorApp'>
-    </demo-room-select>
-    <interlocutor-app
-      id='interlocutorApp'
-      default-login="interlocutorTester"
-      default-password="18404081b72e2630"
-      home-server-address="https://matrix.org">
-    </interlocutor-app>
+    <interlocutor-demo-app></interlocutor-demo-app>
   </body>
 </html>
diff --git a/elements/matrix-behavior.html b/elements/matrix-behavior.html
@@ -132,23 +132,33 @@
       return (!instaGib && flagCount < settings.flagKillThreshold)
     },
 
-    login(username, password) {
+    createClientAndLogin(username, password, homeServerAddress) {
+      window.client = matrixcs.createClient(homeServerAddress)
+      client.txnId = 0
       const _login = function () {
-          delete client.credentials.userId
-          delete client._http.opts.accessToken
           return client.loginWithPassword(username, password).then((result) => {
             client.credentials.userId = result.user_id
             client._http.opts.accessToken  = result.access_token
             return result
         })
-      }.bind(this)
+      }
+
+      let promise
       if (client.credentials.userId) {
-        return client.logout().then(_login, (err) => {
+        client.stopClient()
+        promise = client.logout().then(_login, (err) => {
           console.log(err)
         })
       } else {
-        return _login()
+        promise = _login()
       }
+
+      return promise.then((result)=> {
+        client.startClient({ pendingEventOrdering: 'detached' })
+        return result
+      }, (err) => {
+        console.log(err)
+      })
     },
 
     addEvent (event) {

diff --git a/elements/matrix-login.html b/elements/matrix-login.html
@@ -42,6 +42,9 @@
       userId: {
         type: String,
         notify: true
+      },
+      homeServerAddress: {
+        type: String
       }
     },
 
@@ -50,7 +53,7 @@
     },
 
     login() {
-      MatrixBehavior.login(this.$.username.value, this.$.password.value)
+      MatrixBehavior.createClientAndLogin(this.$.username.value, this.$.password.value, this.homeServerAddress)
         .then((result) => {
           this.$.username.value = this.$.password.value = ''
           this.userId = result.user_id

diff --git a/interlocutor-app.html b/interlocutor-app.html
@@ -46,7 +46,7 @@
         <template is="dom-if" if="[[!userId]]">
           <paper-button on-tap="openLogin">Login</paper-button>
         </template>
-        <matrix-login id="login" tabindex="-1" with-backdrop user-id="{{userId}}"></matrix-login>
+        <matrix-login id="login" tabindex="-1" with-backdrop user-id="{{userId}}" home-server-address="[[homeServerAddress]]"></matrix-login>
       </span>
       <span class='settings-section' hidden="[[!clientReady]]">
         <paper-icon-button on-tap="openSettings" icon="settings"></paper-icon-button>
@@ -156,6 +156,11 @@
       clientReady: {
         type: Boolean,
         value: false,
+      },
+
+      loggedIn: {
+        type: Boolean,
+        notify: true
       }
     },
 
@@ -164,13 +169,8 @@
     },
 
     initializeClient() {
-      if (this.client) return
-      window.client = this.client = matrixcs.createClient(this.homeServerAddress)
-      client.txnId = 0
-      this.login(this.defaultLogin, this.defaultPassword).then((result)=> {
-        client.startClient({ pendingEventOrdering: 'detached' })
-      }, (err) => {
-        console.log(err)
+      this.createClientAndLogin(this.defaultLogin, this.defaultPassword, this.homeServerAddress).then((success) => {
+        this.loggedIn = true
       })
     },
 
@@ -190,8 +190,10 @@
     },
 
     onLoggedIn(userId) {
-      if (!this.roomId) return
-      client.joinRoom(this.roomId)
+      this.loggedIn = true
+      if (this.roomId) {
+        client.joinRoom(this.roomId)
+      }
     },
 
     initializeComments() {
@@ -233,7 +235,8 @@
     },
 
     logout() {
-      this.login(this.defaultLogin, this.defaultPassword).then((success) => {
+      this.loggedIn = false
+      this.createClientAndLogin(this.defaultLogin, this.defaultPassword, this.homeServerAddress).then((success) => {
         this.userId = null
       })
     },

diff --git a/interlocutor-demo-app.html b/interlocutor-demo-app.html
@@ -0,0 +1,37 @@
+<link rel="import" href="./interlocutor-app.html">
+<link rel="import" href="./interlocutor-demo-room-select.html">
+<link rel="import" href="./bower_components/iron-demo-helpers/demo-pages-shared-styles.html">
+
+<dom-module id="interlocutor-demo-app">
+  <template>
+    <style>
+    </style>
+    <h2 style="text-align: center">Interlocutor Demo</h2>
+
+    <interlocutor-demo-room-select
+      app-id='interlocutorApp'
+      logged-in="{{loggedIn}}">
+    </interlocutor-demo-room-select>
+    <interlocutor-app
+      logged-in="{{loggedIn}}"
+      id='interlocutorApp'
+      default-login="interlocutorTester"
+      default-password="18404081b72e2630"
+      home-server-address="http://localhost:8008">
+    </interlocutor-app>
+  </template>
+
+<script>
+  Polymer({
+    is: 'interlocutor-demo-app',
+
+    properties: {
+      loggedIn: {
+        type: Boolean,
+        default: false,
+      }
+    }
+
+  })
+</script>
+</dom-module>
diff --git a/elements/demo-room-select.html → interlocutor-demo-room-select.html b/elements/demo-room-select.html → interlocutor-demo-room-select.html
@@ -1,11 +1,12 @@
 <link rel="import" href="../bower_components/polymer/polymer.html">
 <!-- <link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html"> -->
 <link rel="import" href="../bower_components/paper-button/paper-button.html">
+<link rel="import" href="../bower_components/vaadin-combo-box/vaadin-combo-box.html">
 <link rel="import" href="../bower_components/paper-input/paper-input.html">
 
-<link rel="import" href="./matrix-behavior.html">
+<link rel="import" href="./elements/matrix-behavior.html">
 
-<dom-module id="demo-room-select">
+<dom-module id="interlocutor-demo-room-select">
   <template>
     <style>
       :host {
@@ -39,7 +40,7 @@
     </div>
     <div class="room-navigation">
       <div class="room-subnav">
-        <paper-input label="Discussion Alias or Id" value="{{aliasOrId}}" minlength="2" auto-validate=true> </paper-input>
+        <vaadin-combo-box label="Discussion Alias or Id" value="{{aliasOrId}}" minlength="2" auto-validate=true items="[[rooms]]"> </vaadin-combo-box >
         <paper-button on-tap="joinRoom">join</paper-button>
       </div>
       <div class="room-subnav">
@@ -52,13 +53,14 @@
   <script>
     Polymer({
 
-      is: 'demo-room-select',
+      is: 'interlocutor-demo-room-select',
 
       behaviors: [
         MatrixBehavior
       ],
       observers: [
-        '_currentRoomAlias(currentRoomId)'
+        '_currentRoomAlias(currentRoomId)',
+        '_setupRoomList(loggedIn)',
       ],
 
       properties: {
@@ -81,9 +83,27 @@
         },
         appId: {
           type: String
+        },
+        rooms: {
+          type: Array,
+          value() { return [] }
+        },
+        loggedIn: {
+          type: Boolean
         }
       },
 
+      _setupRoomList(loggedIn) {
+        if (!loggedIn) return
+        client.on('sync', (syncState, oldState, data) => {
+          if (syncState === "PREPARED") {
+            this.rooms = client.getRooms().map((room) => {
+              return room.roomId
+            })
+          }
+        })
+      },
+
       joinRoom() {
         if (this.alias === '') return
         client.joinRoom(this.aliasOrId).then((result) => {