Added basic knockout bits to match user setup frontend
parent
ba69f775be
commit
0df3b1f6e5
|
@ -20,7 +20,7 @@
|
|||
<h2>Add peer</h2>
|
||||
<p>To add a new peer, type in a hostname and select a user. The hostname must be 3-10 lowercase letters and numbers <code>/[a-z0-9]{3,10}/</code>. </p>
|
||||
<div>
|
||||
<input type="text" data-bind="textInput:newPeerHostname,event:{keypress:addKeyPress}" placeholder="phone"></input>
|
||||
<input type="text" data-bind="textInput:newPeerHostname,event:{keypress:addPeerKeyPress}" placeholder="phone"></input>
|
||||
<select data-bind="options:users,optionsText:'name',value:newPeerUser,optionsCaption:'(user)'"></select>
|
||||
21
|
||||
<button data-bind="click:addPeer,disable:isAddingPeer,text:addPeerText">Add</button>
|
||||
|
@ -30,8 +30,8 @@
|
|||
<h2>Add user</h2>
|
||||
<p>To add a new user, type in the user's first device name and a username and click 'add'. The hostname and username must each be 3-10 lowercase letters and numbers <code>/[a-z0-9]{3,10}/</code>. </p>
|
||||
<div>
|
||||
<input type="text" data-bind="textInput:newUserHostname,event:{keypress:addKeyPress}" placeholder="pc1"></input>
|
||||
<input type="text" data-bind="textInput:newUsername,event:{keypress:addKeyPress}" placeholder="joe"></input>
|
||||
<input type="text" data-bind="textInput:newUserHostname,event:{keypress:addUserKeyPress}" placeholder="pc1"></input>
|
||||
<input type="text" data-bind="textInput:newUsername,event:{keypress:addUserKeyPress}" placeholder="joe"></input>
|
||||
<button data-bind="click:addUser,disable:isAddingUser,text:addUserText">Add</button>
|
||||
</div>
|
||||
<p>After clicking "Add", the new user's first peer config will appear below. Copy and paste it into your wireguard client and start the service. <b>This configuration will not be shown again!</b> If you lose the config, you will need to delete the peer and recreate it. </p>
|
||||
|
@ -41,7 +41,7 @@
|
|||
<div>
|
||||
<select data-bind="options:users,optionsText:'name',value:userToDelete,optionsCaption:'(user)'"></select>
|
||||
21
|
||||
<button data-bind="click:deleteUser,disable:isDeletingUser,text:deleteUserText">Delete</button>
|
||||
<button data-bind="click:delUser,disable:isDeletingUser,text:deleteUserText">Delete</button>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
|
|
@ -24,6 +24,13 @@ function PeerList() {
|
|||
self.isAddingPeer = ko.observable(false)
|
||||
self.addPeerText = ko.computed(() => self.isAddingPeer()?'Adding...':'Add')
|
||||
self.users = ko.observableArray([])
|
||||
self.newUserHostname = ko.observable('')
|
||||
self.newUsername = ko.observable('')
|
||||
self.isAddingUser = ko.observable(false)
|
||||
self.addUserText = ko.computed(() => self.isAddingUser()?'Adding...':'Add')
|
||||
self.userToDelete = ko.observable('')
|
||||
self.isDeletingUser = ko.observable(false)
|
||||
self.deleteUserText = ko.computed(() => self.isDeletingUser()?'Deleting...':'Delete')
|
||||
self.token = ko.observable('')
|
||||
|
||||
// Initial loading
|
||||
|
@ -101,7 +108,7 @@ function PeerList() {
|
|||
}
|
||||
}
|
||||
// Listen for user hitting enter key
|
||||
self.addKeyPress = (d,e) => {
|
||||
self.addPeerKeyPress = (d,e) => {
|
||||
if (e.keyCode === 13) self.addPeer()
|
||||
return true
|
||||
}
|
||||
|
@ -128,6 +135,19 @@ function PeerList() {
|
|||
}
|
||||
}
|
||||
|
||||
self.addUser = async () => {
|
||||
//TODO
|
||||
}
|
||||
// Listen for user hitting enter key
|
||||
self.addUserKeyPress = (d,e) => {
|
||||
if (e.keyCode === 13) self.addUser()
|
||||
return true
|
||||
}
|
||||
|
||||
self.delUser = async (user) => {
|
||||
//TODO
|
||||
}
|
||||
|
||||
self.getUsers()
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue