added support for server passwords

app/index.html

@@ -21,7 +21,7 @@
     </div>
     <div id="container" style="display: none" data-bind="visible: true">
       <!-- ko with: connectDialog --> 
-        <div class="connect-dialog" data-bind="visible: visible">
+      <div class="connect-dialog" data-bind="visible: visible"> 
           <div class="dialog-header">
             Connect to Server
           </div>
@@ -43,6 +43,10 @@
                   <td>Username</td>
                   <td><input id="username" type="text" data-bind="value: username"></td>
                 </tr>
+		<tr>
+                  <td>Password</td>
+                  <td><input id="password" type="password" data-bind="value: password"></td>
+                </tr>
             </table>
             <div class="dialog-footer">
               <input class="dialog-close" type="button" data-bind="click: hide" value="Cancel">

app/index.js

@@ -27,12 +27,13 @@ function ConnectDialog () {
   self.port = ko.observable('443')
   self.token = ko.observable('')
   self.username = ko.observable('')
+  self.password = ko.observable('')
   self.visible = ko.observable(true)
   self.show = self.visible.bind(self.visible, true)
   self.hide = self.visible.bind(self.visible, false)
   self.connect = function () {
     self.hide()
-    ui.connect(self.username(), self.address(), self.port(), self.token())
+    ui.connect(self.username(), self.address(), self.port(), self.token(), self.password())
   }
 }
 
@@ -81,7 +82,7 @@ class GlobalBindings {
       return '[' + new Date().toLocaleTimeString('en-US') + ']'
     }
 
-    this.connect = (username, host, port, token) => {
+    this.connect = (username, host, port, token, password) => {
       this.resetClient()
 
       log('Connecting to server ', host)
@@ -89,12 +90,12 @@ class GlobalBindings {
       // TODO: token
       mumbleConnect(`wss://${host}:${port}`, {
         username: username,
+        password: password,
         codecs: CodecsBrowser
       }).done(client => {
         log('Connected!')
 
         this.client = client
-
         // Prepare for connection errors
         client.on('error', function (err) {
           log('Connection error:', err)
@@ -434,6 +435,9 @@ window.onload = function () {
   if (queryParams.username) {
     ui.connectDialog.username(queryParams.username)
   }
+  if (queryParams.password) {
+    ui.connectDialog.password(queryParams.password)
+  }
   ko.applyBindings(ui)
 }
 

themes/MetroMumbleLight/main.css

@@ -233,7 +233,7 @@ form {
 .connect-dialog {
   position: absolute;
   width: 300px;
-  height: 197px;
+  height: 227px;
   top: calc(50% - 100px);
   left: calc(50% - 150px);
   background-color: #eee;
@@ -250,3 +250,12 @@ form {
   padding: 2px;
   width: calc(100% - 8px);
 }
+.connect-dialog input[type=password] {
+  font-size: 15px;
+  border: 1px gray solid;
+  border-radius: 3px;
+  background-color: white;
+  color: black;
+  padding: 2px;
+  width: calc(100% - 8px);
+}