Add new peer from admin frontend

back/lib/admin/peer/list

@@ -33,7 +33,7 @@ ip="${1}"
 qs="$(<<<"${2}" tr '&' '\n' | sed 's/?//')"
 un="$(<<<"${qs}" grep -oP 'un=(.*)' | sed 's/^un=//' | xargs)"
 
-printf '%s requested peer listing...\n' "${ip}" >>"${LOGFILE}"
+printf 'Admin %s requested peer listing...\n' "${ip}" >>"${LOGFILE}"
 
 # Create token if needed
 token="$(grep "${ip}" "${TOKENS_FILE}" | cut -f2)"

front/admin.html

@@ -17,15 +17,17 @@
 		</tr></tbody>
 	</table>
 	
-	<!--<h2>Add peer</h2>
-	<p>To add a new peer, type in a hostname and click add.  The hostname must be 3-10 lowercase letters and numbers <code>/[a-z0-9]{3,10}/</code>.  Keep it short for your own sake!</p>
+	<h2>Add peer</h2>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:newPeerName,event:{keypress:addKeyPress}" placeholder="mypc1"></input>
+		<input type="text" data-bind="textInput:newPeerHostname,event:{keypress:addKeyPress}" placeholder="phone"></input>
+		<select data-bind="options:users,optionsText:'name',value:newPeerUser,optionsCaption:'pick user...'"></select>
+		<span>.mytld</span>
 		<button data-bind="click:addPeer,disable:isAdding,text:addText">Add</button>
 	</div>
 	<p>After clicking "Add", the new peer's 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>
 	<hr>
-	<pre data-bind="text:newConfigText"></pre>-->
+	<pre data-bind="text:newConfigText"></pre>
 	
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js" integrity="sha512-2AL/VEauKkZqQU9BHgnv48OhXcJPx9vdzxN1JrKDVc4FPU/MEE/BZ6d9l0mP7VmvLsjtYwqiYQpDskK9dG8KBA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 	<script src="/admin.js"></script>

front/admin.js

@@ -8,17 +8,23 @@ function Peer(data) {
 	this.isDeleting = ko.observable(false)
 	this.deleteText = ko.computed(() => this.isDeleting()?'Deleting...':'Delete')
 }
+function User(data) {
+	this.name = data.name
+	this.number = data.number
+}
 
 function PeerList() {
 	let self = this
 	self.peers = ko.observableArray([])
-	self.newPeerName = ko.observable('')
+	self.newPeerHostname = ko.observable('')
+	self.newPeerUser = ko.observable('')
 	self.newConfigText = ko.observable('')
 	self.isAdding = ko.observable(false)
 	self.addText = ko.computed(() => self.isAdding()?'Adding...':'Add')
+	self.users = ko.observableArray({})
 	
 	// Initial loading
-	self.getUser = async () => {
+	self.getUsers = async () => {
 		let res; try {
 			res = await fetch(`${API_URL}/peer/`)
 		} catch (err) {
@@ -41,7 +47,13 @@ function PeerList() {
 					(a,b) => a.ipv4.split('.')[2] - b.ipv4.split('.')[2])
 				.map( (i)=>new Peer(i))
 			)
-			self.token = user.token
+			self.users(
+				user.peers.map( (u)=>new User({
+					name: u.domain.split('.')[1],
+					number: u.ipv4.split('.')[2],
+				}) )
+			)
+			self.token(user.token)
 		}
 	}
 	
@@ -108,7 +120,7 @@ function PeerList() {
 		}
 	}
 	
-	self.getUser()
+	self.getUsers()
 }
 
 ko.applyBindings(new PeerList())