Make registration screen easier to use (juanfont#1975)

lkiesow · web-flow · commit 51676c668bbe · 2024-06-15T09:40:49.000+02:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -58,6 +58,7 @@ after improving the test harness as part of adopting [#1460](https://github.com/
 - Log available update as warning [#1877](https://github.com/juanfont/headscale/pull/1877)
 - Add `autogroup:internet` to Policy [#1917](https://github.com/juanfont/headscale/pull/1917)
 - Restore foreign keys and add constraints [#1562](https://github.com/juanfont/headscale/pull/1562)
+- Make registration page easier to use on mobile devices
 
 ## 0.22.3 (2023-05-12)
 
diff --git a/hscontrol/handlers.go b/hscontrol/handlers.go
@@ -143,14 +143,26 @@ var registerWebAPITemplate = template.Must(
 <html>
 	<head>
 		<title>Registration - Headscale</title>
+		<meta name=viewport content="width=device-width, initial-scale=1">
+		<style>
+			body {
+				font-family: sans;
+			}
+			code {
+				display: block;
+				padding: 20px;
+				border: 1px solid #bbb;
+				background-color: #eee;
+			}
+		</style>
 	</head>
 	<body>
 		<h1>headscale</h1>
 		<h2>Machine registration</h2>
 		<p>
 			Run the command below in the headscale server to add this machine to your network:
 		</p>
-		<pre><code>headscale nodes register --user USERNAME --key {{.Key}}</code></pre>
+		<code>headscale nodes register --user USERNAME --key {{.Key}}</code>
 	</body>
 </html>
 `))
