[PR #1972] [CLOSED] feat: HTML template to register a node #2428

Closed
opened 2025-12-29 03:21:14 +01:00 by adam · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/juanfont/headscale/pull/1972
Author: @longregen
Created: 6/11/2024
Status: Closed

Base: mainHead: feat/register-template


📝 Commits (2)

  • 06c55a0 feat: register template
  • 34d124b feat: register with qr if javascript

📊 Changes

2 files changed (+2891 additions, -27 deletions)

View changed files

hscontrol/assets/register_template.html (+2885 -0)
📝 hscontrol/handlers.go (+6 -27)

📄 Description

I was trying to get a somewhat non-technical user to access my network. When using the tailscale app on iOS, we got presented with an HTML for registering the node. This was a little shocking in comparison with the rest of the experience.

So, I went on to https://v0.dev; asked it to craft a little QR code registration website, and exported it as a static HTML page. I connected it with https://github.com/davidshimjs/qrcodejs/. I then added some js code to add a copy button. I made sure it all works without javascript. I copied the "embed" approach from the OIDC routes.

This can be a controversial PR; but I think it adds some value. Now, due to how important security is in this project, I'm not sure you will be inclined at all to accept this approach; particularly I'm not happy that:

  • This embeds too much CSS and makes the download pretty heavy (currently sitting at 93kb)
  • It clutters the repository with generated code and makes checkouts heavier
  • It's dubious whether our use case is also important for other headscale users

Here's how it looks like (on dark-mode):
Screenshot 2024-06-11 at 12-05-53 Headscale Registration

Without js:
Screenshot 2024-06-11 at 12-06-05 Headscale Registration

I would like to know your opinions, and I'm happy to contribute a solution with a different approach that satisfies you. One approach that I thought of involved allowing for the configuration of a templates folder; so that it can be modified at runtime and not compile time.

Looking forward to your comments!

Summary by CodeRabbit

  • New Features

    • Introduced a new registration interface for Headscale nodes with a responsive design.
    • Added functionality for dynamic QR code generation to simplify machine registration.
    • Enabled users to copy registration commands easily from the interface.
  • Improvements

    • Enhanced maintainability of the registration web API by separating HTML content from source code.

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/juanfont/headscale/pull/1972 **Author:** [@longregen](https://github.com/longregen) **Created:** 6/11/2024 **Status:** ❌ Closed **Base:** `main` ← **Head:** `feat/register-template` --- ### 📝 Commits (2) - [`06c55a0`](https://github.com/juanfont/headscale/commit/06c55a0ca6b27b77399931b5aaa9175b5f55c78f) feat: register template - [`34d124b`](https://github.com/juanfont/headscale/commit/34d124bbd2481e63a8a7d2d50f9c3e82a378e021) feat: register with qr if javascript ### 📊 Changes **2 files changed** (+2891 additions, -27 deletions) <details> <summary>View changed files</summary> ➕ `hscontrol/assets/register_template.html` (+2885 -0) 📝 `hscontrol/handlers.go` (+6 -27) </details> ### 📄 Description I was trying to get a somewhat non-technical user to access my network. When using the tailscale app on iOS, we got presented with an HTML for registering the node. This was a little shocking in comparison with the rest of the experience. So, I went on to https://v0.dev; asked it to craft a little QR code registration website, and exported it as a static HTML page. I connected it with https://github.com/davidshimjs/qrcodejs/. I then added some js code to add a copy button. I made sure it all works without javascript. I copied the "embed" approach from the OIDC routes. This can be a controversial PR; but I think it adds some value. Now, due to how important security is in this project, I'm not sure you will be inclined at all to accept this approach; particularly I'm not happy that: * This embeds too much CSS and makes the download pretty heavy (currently sitting at 93kb) * It clutters the repository with generated code and makes checkouts heavier * It's dubious whether our use case is also important for other headscale users Here's how it looks like (on dark-mode): ![Screenshot 2024-06-11 at 12-05-53 Headscale Registration](https://github.com/juanfont/headscale/assets/114724657/abb748c8-6393-45f9-9419-79f7617c2979) Without js: ![Screenshot 2024-06-11 at 12-06-05 Headscale Registration](https://github.com/juanfont/headscale/assets/114724657/b62d2776-130a-4d16-bcd7-d7a7ab1a111f) I would like to know your opinions, and I'm happy to contribute a solution with a different approach that satisfies you. One approach that I thought of involved allowing for the configuration of a templates folder; so that it can be modified at runtime and not compile time. Looking forward to your comments! <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Introduced a new registration interface for Headscale nodes with a responsive design. - Added functionality for dynamic QR code generation to simplify machine registration. - Enabled users to copy registration commands easily from the interface. - **Improvements** - Enhanced maintainability of the registration web API by separating HTML content from source code. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
adam added the pull-request label 2025-12-29 03:21:14 +01:00
adam closed this issue 2025-12-29 03:21:14 +01:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/headscale#2428