From 0df3b1f6e52b4def137c2ad4810f31121c04491b Mon Sep 17 00:00:00 2001
From: Keith Irwin <git@ki9.us>
Date: Tue, 1 Nov 2022 18:02:49 -0600
Subject: [PATCH] Added basic knockout bits to match user setup frontend

---
 front/admin.html |  8 ++++----
 front/admin.js   | 22 +++++++++++++++++++++-
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/front/admin.html b/front/admin.html
index 88e26f7..9609f83 100644
--- a/front/admin.html
+++ b/front/admin.html
@@ -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>
diff --git a/front/admin.js b/front/admin.js
index e157586..8bbc660 100644
--- a/front/admin.js
+++ b/front/admin.js
@@ -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()
 }