feat: Add user agent detection

src/routes/root.ts

@@ -8,7 +8,6 @@ export const rootRoute = new Hono();
 rootRoute.get("/", realIP, presentation, context => {
 	// Move request to correct route
 	const { port, ipAddress } = context.req.query();
-
 	if (port) {
 		if (ipAddress) {
 			return context.redirect(`/${ipAddress}/${port}`);
@@ -17,7 +16,10 @@ rootRoute.get("/", realIP, presentation, context => {
 		}
 	}
 
+	// Render index page
+	const userAgent = context.req.header("User-Agent");
 	return render(context, "index", {
 		ip: context.get("ip"),
+		userAgent,
 	});
 });

templates/base.njk.html

@@ -29,9 +29,11 @@
 				background-color: #212126;
 				width: 100%;
 				max-width: 40em;
-				margin: 0 auto;
+				margin: 2em auto;
 				border-radius: 1em;
 				padding: 3em;
+
+				overflow: scroll;
 			}
 
 			h2 {

templates/index.njk.html

@@ -76,6 +76,16 @@
 		<img width="1em" src="/static/copy.svg" alt="Copy" />
 	</button>
 </p>
+<p>
+	Your User-Agent (Header): <i>{{userAgent}}</i>
+	<button class="copy" id="copy-user-agent">
+		<img width="1em" src="/static/copy.svg" alt="Copy" />
+	</button>
+</p>
+<p id="user-agent-navigator" style="display: none">
+	Your User-Agent detected via JavaScript:
+	<i id="user-agent-navigator-value"></i>
+</p>
 
 <strong> Check if your port is reachable: </strong>
 <pre><code><span class="comment">$</span> <span class="command">curl</span> amiopen.now/<span class="input">&lt;port&gt;</span>
@@ -102,12 +112,31 @@
 	<pre><code><span class="comment">$</span> <span class="command">ssh</span> <span class="secondary">hello</span>@amiopen.now</code></pre>
 </i>
 {% endblock %} {% block scripts %}
-<script defer>
+<script defer async>
 	const $copyButton = document.getElementById("copy-ip");
 	const ip = "{{ip}}";
 
 	$copyButton.addEventListener("click", () => {
 		navigator.clipboard.writeText(ip);
 	});
+
+	const $copyUserAgentButton = document.getElementById("copy-user-agent");
+	const userAgent = "{{userAgent}}";
+
+	$copyUserAgentButton.addEventListener("click", () => {
+		navigator.clipboard.writeText(userAgent);
+	});
+
+	if (navigator.userAgent && navigator.userAgent !== "{{userAgent}}") {
+		const $userAgentNavigator = document.getElementById(
+			"user-agent-navigator",
+		);
+		const $userAgentNavigatorValue = document.getElementById(
+			"user-agent-navigator-value",
+		);
+
+		$userAgentNavigator.style.display = "block";
+		$userAgentNavigatorValue.innerText = navigator.userAgent;
+	}
 </script>
 {% endblock %}