chris/website-gemompel
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Add GUI for handling rejected connection attempts

Browse source
This commit is contained in:
Jonas Herzig 2018-09-23 14:10:55 +02:00
parent 60413ecbea
commit 5eefeeb721
3 changed files with 86 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
app/index.html
View file

@ -65,6 +65,64 @@
</form>
</div>
<!-- /ko -->
<!-- ko with: connectErrorDialog -->
<div class="connect-dialog error-dialog dialog" data-bind="visible: visible()">
<div class="dialog-header">
Failed to connect
</div>
<form data-bind="submit: connect">
<table>
<tr>
<td colspan=2>
<!-- ko if: type() == 0 || type() == 8 -->
The connection has been refused.
<!-- /ko -->
<!-- ko if: type() == 1 -->
The server uses an incompatible version.
<!-- /ko -->
<!-- ko if: type() == 2 -->
Your user name was rejected. Maybe try a different one?
<!-- /ko -->
<!-- ko if: type() == 3 -->
The given password is incorrect.
The user name you have chosen requires a special one.
<!-- /ko -->
<!-- ko if: type() == 4 -->
The given password is incorrect.
<!-- /ko -->
<!-- ko if: type() == 5 -->
The user name you have chosen is already in use.
<!-- /ko -->
<!-- ko if: type() == 6 -->
The server is full.
<!-- /ko -->
<!-- ko if: type() == 7 -->
The server requires you to provide a client certificate
which is not supported by this web application.
<!-- /ko -->
<br>
The server reports:
<br>
"<span class="connect-error-reason" data-bind="text: reason"></span>"
</td>
</tr>
<tr data-bind="visible: type() == 2 || type() == 3 || type() == 5">
<td>Username</td>
<td><input id="username" type="text" data-bind="value: username"></td>
</tr>
<tr data-bind="visible: type() == 3 || type() == 4">
<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" value="Cancel"
data-bind="click: hide, visible: !joinOnly()">
<input class="dialog-submit" type="submit" value="Retry">
</div>
</form>
</div>
<!-- /ko -->
<!-- ko with: settingsDialog -->
<div class="settings-dialog dialog" data-bind="visible: $data">
<div class="dialog-header">

29
app/index.js
View file

@ -38,6 +38,22 @@ function ConnectDialog () {
}
}
function ConnectErrorDialog (connectDialog) {
var self = this
self.type = ko.observable(0)
self.reason = ko.observable('')
self.username = connectDialog.username
self.password = connectDialog.password
self.joinOnly = connectDialog.joinOnly
self.visible = ko.observable(false)
self.show = self.visible.bind(self.visible, true)
self.hide = self.visible.bind(self.visible, false)
self.connect = () => {
self.hide()
connectDialog.connect()
}
}
function ConnectionInfo () {
var self = this
self.visible = ko.observable(false)
@ -131,6 +147,7 @@ class GlobalBindings {
this.settings = new Settings()
this.client = null
this.connectDialog = new ConnectDialog()
this.connectErrorDialog = new ConnectErrorDialog(this.connectDialog)
this.connectionInfo = new ConnectionInfo()
this.commentDialog = new CommentDialog()
this.settingsDialog = ko.observable()
@ -246,11 +263,13 @@ class GlobalBindings {
this.client.setSelfMute(true)
}
}, err => {
if (err.type == 4) {
log('Connection error: invalid server password')
} else {
log('Connection error:', err)
}
if (err.$type && err.$type.name === 'Reject') {
this.connectErrorDialog.type(err.type)
this.connectErrorDialog.reason(err.reason)
this.connectErrorDialog.show()
} else {
log('Connection error:', err)
}
})
}

4
themes/MetroMumbleLight/main.css
View file

@ -303,3 +303,7 @@ form {
padding: 2px;
width: calc(100% - 8px);
}
.connect-dialog.error-dialog {
width: 400px;
left: calc(50% - 200px);
}