Add a new device registration route (#121)

* added a new device registration form

* removed unused variables

* remove old register html

* bind new device key from url

* remove redirect

* clear nodekey query string param after successuful addition

* expand bool flipping

* added documention on nodekey

* remove null check

* tweak wording

Author: adrum

documentation/route_queries.md

@@ -0,0 +1,27 @@
+# Route Queries
+
+Some routes offer additional behavior to a route when a `?` exists in the URL. These are called query string parameters or route queries. Route queries are used to modify the behavior of a route. Below are the available route queries.
+
+## Devices
+
+/devices.html
+
+### Parameters
+
+#### `?nodekey={nodekey of a pending device}`
+
+When this parameter exists, it will automatically open the New Device form and pre-fill the Device Key input automatically. Everything right of the `=` is used as the value of the input.
+
+Below is an example of how to set up a redirect in NGINX from the default headscale /register/{nodekey} URL to utilize this parameter:
+
+```nginx
+    ...
+
+    location /register/nodekey {
+        rewrite ^/register/(.*)$ /web/devices.html?nodekey=$1 redirect;
+    }
+
+    location /web {
+
+    ...
+```

src/lib/devices/CreateDevice.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
 	import { fade } from 'svelte/transition';
-	import { userStore, deviceStore } from '$lib/common/stores';
+	import { userStore } from '$lib/common/stores';
 	import { getDevices, newDevice } from '$lib/common/apiFunctions.svelte';
 	import { alertStore } from '$lib/common/stores.js';
 	import { base } from '$app/paths';
+	import { page } from '$app/stores';
+	import { goto } from "$app/navigation";
 
 	// whether the new card html element is visible
 	export let newDeviceCardVisible = false;
+	export let newDeviceKey = '';
 	let newDeviceForm: HTMLFormElement;
-	let newDeviceKey = '';
 	let selectedUser = '';
 
 	let tabs = ['Default Configuration', 'With Preauth Keys', 'With OIDC'];
@@ -20,8 +22,15 @@
 				.then((response) => {
 					newDeviceCardVisible = false;
 					newDeviceKey = '';
+
 					// refresh devices after editing
 					getDevices();
+
+					// Clear device key in url
+					if ($page.url.searchParams.get('nodekey')) {
+						$page.url.searchParams.delete('nodekey');
+						goto(`?${$page.url.searchParams.toString()}`);
+					}
 				})
 				.catch((error) => {
 					$alertStore = error;

src/routes/devices.html/+page.svelte

@@ -1,6 +1,7 @@
 <!-- typescript -->
 <script lang="ts">
 	import { base } from '$app/paths';
+	import { page } from '$app/stores';
 	import { getDevices, getUsers } from '$lib/common/apiFunctions.svelte';
 	import { apiTestStore, deviceFilterStore, deviceStore } from '$lib/common/stores.js';
 	import CreateDevice from '$lib/devices/CreateDevice.svelte';
@@ -10,7 +11,9 @@
 	import { onMount } from 'svelte';
 	import { fade } from 'svelte/transition';
 
-	let newDeviceCardVisible = false;
+	let newDeviceKey = $page.url.searchParams.get('nodekey') ?? '';
+
+	let newDeviceCardVisible = newDeviceKey.length > 0 ? true : false;
 
 	//
 	// Component Variables
@@ -54,7 +57,7 @@
 				>
 			</table>
 
-			<CreateDevice bind:newDeviceCardVisible />
+			<CreateDevice bind:newDeviceCardVisible bind:newDeviceKey />
 
 			{#each $deviceStore as device}
 				{#if $deviceFilterStore.includes(device)}