Merge pull request #68 from encrypt94/add-mumble-tokens

Support access tokens

app/index.html

@@ -40,10 +40,6 @@
                   <td>Port</td>
                   <td><input id="port" type="text" data-bind="value: port" required></td>
                 </tr>
-                <tr data-bind="if: $root.config.connectDialog.token">
-                  <td>Token</td>
-                  <td><input id="token" type="text" data-bind="value: token"></td>
-                </tr>
                 <tr data-bind="if: $root.config.connectDialog.username">
                   <td>Username</td>
                   <td><input id="username" type="text" data-bind="value: username" required></td>
@@ -52,6 +48,23 @@
                   <td>Password</td>
                   <td><input id="password" type="password" data-bind="value: password"></td>
                 </tr>
+                <tr data-bind="if: $root.config.connectDialog.token">
+                  <td>Tokens</td>
+                  <td>
+                      <input type="text" data-bind='value: tokenToAdd, valueUpdate: "afterkeydown"'>
+                  </td>
+                </tr>
+                <tr data-bind="if: $root.config.connectDialog.token">
+                      <td></td>
+                      <td>
+                        <button class="dialog-submit" type="button" data-bind="enable: selectedTokens().length > 0, click: removeSelectedTokens()">Remove</button>
+                        <button class="dialog-submit" type="button" data-bind="enable: tokenToAdd().length > 0, click: addToken()">Add</button>
+                     </td>
+                </tr>
+               <tr data-bind="if: $root.config.connectDialog.token, visible: tokens().length > 0">
+                <td></td>
+                  <td><select id="token" multiple="multiple" height="5" data-bind="options:tokens, selectedOptions:selectedTokens"></select></td>
+                </tr>
                 <tr data-bind="if: $root.config.connectDialog.channelName">
                   <td>Channel</td>
                   <td><input  id="channelName" type="text" data-bind="value: channelName"></td>

app/index.js

@@ -52,7 +52,9 @@ function ConnectDialog () {
   var self = this
   self.address = ko.observable('')
   self.port = ko.observable('')
-  self.token = ko.observable('')
+  self.tokenToAdd = ko.observable('')
+  self.selectedTokens = ko.observableArray([])
+  self.tokens = ko.observableArray([])
   self.username = ko.observable('')
   self.password = ko.observable('')
   self.channelName = ko.observable('')
@@ -62,7 +64,19 @@ function ConnectDialog () {
   self.hide = self.visible.bind(self.visible, false)
   self.connect = function () {
     self.hide()
-    ui.connect(self.username(), self.address(), self.port(), self.token(), self.password(), self.channelName())
+    ui.connect(self.username(), self.address(), self.port(), self.tokens(), self.password(), self.channelName())
+  }
+
+  self.addToken = function() {
+    if ((self.tokenToAdd() != "") && (self.tokens.indexOf(self.tokenToAdd()) < 0)) {
+      self.tokens.push(self.tokenToAdd())
+    }
+    self.tokenToAdd("")
+  }
+
+  self.removeSelectedTokens = function() {
+      this.tokens.removeAll(this.selectedTokens())
+      this.selectedTokens([])
   }
 }
 
@@ -332,7 +346,7 @@ class GlobalBindings {
       return '[' + new Date().toLocaleTimeString('en-US') + ']'
     }
 
-    this.connect = (username, host, port, token, password, channelName = "") => {
+    this.connect = (username, host, port, tokens = [], password, channelName = "") => {
       this.resetClient()
 
       this.remoteHost(host)
@@ -347,7 +361,8 @@ class GlobalBindings {
       // TODO: token
       this.connector.connect(`wss://${host}:${port}`, {
         username: username,
-        password: password
+        password: password,
+        tokens: tokens
       }).done(client => {
         log('Connected!')
 
@@ -362,6 +377,9 @@ class GlobalBindings {
         window.matrixWidget.setAlwaysOnScreen(true)
 
         // Register all channels, recursively 
+        if(channelName.indexOf("/") != 0) {
+          channelName = "/"+channelName;
+        }
         const registerChannel = (channel, channelPath) => {
           this._newChannel(channel)
           if(channelPath === channelName) {
@@ -895,7 +913,11 @@ window.onload = function () {
     useJoinDialog = false
   }
   if (queryParams.token) {
-    ui.connectDialog.token(queryParams.token)
+    var tokens = queryParams.token
+    if (!Array.isArray(tokens)) {
+      tokens = [tokens]
+    }
+    ui.connectDialog.tokens(tokens)
   }
   if (queryParams.username) {
     ui.connectDialog.username(queryParams.username)

themes/MetroMumbleLight/main.scss

@@ -444,7 +444,7 @@ form {
   top: calc(50% - 10px);
   left: calc(50% - 100px);
 }
-.connect-dialog input[type=text] {
+.connect-dialog input[type=text], select {
   font-size: 15px;
   border: 1px $dialog-input-border-color solid;
   border-radius: 3px;