Commit Graph

157 Commits

Author SHA1 Message Date
Sonia Appasamy
4fb679d9cd client/web: fix redirect logic when accessing login client over TS IP
Was previously failing to redirect to the manage client when accessing
the login client with the Tailscale IP.

Updates #10261
Fixes tailscale/corp#16348

Co-authored-by: Will Norris <will@tailscale.com>
Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-12-13 12:22:06 -05:00
Sonia Appasamy
77f5d669fa client/web: fix key expiry text when expiry disabled
Displays "No expiry" when disabled.

Updates #10261

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-12-12 17:38:35 -05:00
Sonia Appasamy
06af3e3014 client/web: only add cache header for assets
Updates #10261

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-12-12 15:51:22 -05:00
Sonia Appasamy
dd0279a6c9 client/web: fix ts connection check
Updates #10261

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-12-12 15:10:30 -05:00
Sonia Appasamy
343f4e4f26 client/web: refresh auth after syno login
Makes sure we refresh auth state after synology auth has run.

Updates #10261

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-12-12 13:41:54 -05:00
Will Norris
1b7d289fad client/web: add debug card to details page
Add a new "Debug" card at the bottom of the details page. It's maybe
premature to add a separate card for this, since all it currently lists
is whether the device is using TUN mode and (for Synology) the DSM
version. But I think it may be helpful to add client connectivity data
(like shown on admin console machine page) as well as a bug report
button.  Those can come soon after the 1.56 launch.

Updates #10261

Signed-off-by: Will Norris <will@tailscale.com>
2023-12-12 10:18:28 -08:00
Sonia Appasamy
1aee6e901d client/web: use prefs.ControlURLOrDefault from controlSupportsCheckMode
To be safe, use `prefs.ControlURLOrDefault()` rather than the current
`prefs.ControlURL` directly.

Updates #10261

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-12-12 11:03:58 -05:00
Will Norris
d2fbdb005d client/web: use CSP hash for inline javascript
Calculate and set the hash of the one inline script we have in
index.html. That script is unlikely to change, so hardcoding the hash
seems fine for now.

Updates #10261
Updates tailscale/corp#16266

Signed-off-by: Will Norris <will@tailscale.com>
2023-12-11 20:22:56 -08:00
Sonia Appasamy
bc9b9e8f69 client/web: restrict using an exit node on a couple more platforms
Completed testing of the new UI on the existing platforms that use
it. From testing, QNAP, Unraid, and Home Assistant (in addition to
Synology) all do not play well with using an exit node. For now,
we're disabling this setting from the UI. CLI should be updated to
also disallow selection of an exit node from these platforms.
All platforms still allow for advertising as an exit node.

Co-authored-by: Will Norris <will@tailscale.com>

Updates #10261

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-12-11 20:14:39 -05:00
Will Norris
fc69301fd1 client/web: don't show login button if /ok errors
When displaying the login client, we check for connectivity to the
management client by calling it's /ok handler. If that response is
non-200, then there is something wrong with the management client, so
don't render the login button.

Updates #10261

Signed-off-by: Will Norris <will@tailscale.com>
2023-12-11 16:54:47 -08:00
Mario Minardi
4e012794fc
client/web: add metric logging when viewing local / remote node (#10555)
Add metric logging for the case where a user is viewing a local or remote
node.

Updates https://github.com/tailscale/tailscale/issues/10261

Signed-off-by: Mario Minardi <mario@tailscale.com>
2023-12-11 13:50:15 -07:00
Mario Minardi
763b9daa84
client/web: add visual indication for exit node pending approval (#10532)
Add visual indication when running as an exit node prior to receiving
admin approval.

Updates https://github.com/tailscale/tailscale/issues/10261

Signed-off-by: Mario Minardi <mario@tailscale.com>
Co-authored-by: Sonia Appasamy <sonia@tailscale.com>
2023-12-11 13:40:29 -07:00
Will Norris
e9f203d747 client/web: open new window if iframed
Previously, we were only breaking out of iframes when accessing the
login client over a local IP address (where viewerIdentity is not set).
We need to also handle the case where the user is accessing the login
client over the Tailscale IP, and similarly break out of the iframe when
logging into the management client.

Updates #10261

Signed-off-by: Will Norris <will@tailscale.com>
2023-12-11 11:41:36 -08:00
Will Norris
970dc2a976 client/web: remove 'unsafe-inline' from CSP
I seem to recall I needed this for things to work properly with the vite
dev server, but that doesn't seem to be the case anymore?  Everything
seems to work fine without it.  If we still have issues, we'll need to
look into using a nonce or integrity attribute.

Updates #10261
Fixes tailscale/corp#16266

Signed-off-by: Will Norris <will@tailscale.com>
2023-12-11 10:25:41 -08:00
Mario Minardi
109929d110
client/web: add endpoint for logging device detail click metric (#10505)
Add an endpoint for logging the device detail click metric to allow for
this metric to be logged without having a valid session which is the
case when in readonly mode.

Updates https://github.com/tailscale/tailscale/issues/10261

Signed-off-by: Mario Minardi <mario@tailscale.com>
2023-12-11 10:50:06 -07:00
Will Norris
5a2e6a6f7d client/web: use Home Assistant's X-Ingress-Path header
When running on Home Assistant, use the X-Ingress-Path header to set the
URLPrefix that is passed to the frontend.

Also fix handling of errNotUsingTailscale in the auth handler
(previously it falling through to a later case and returning a 500).
Instead, it's just a terminal state with no auth needed.

Also disable SSH on Home Assistant, since it causes problems on startup
and doesn't make much sense anyway for that platform.

Updates #10261

Signed-off-by: Will Norris <will@tailscale.com>
2023-12-08 16:36:21 -08:00
Sonia Appasamy
a4c7b0574a client/web: add confirmation dialogs
Add confirmation dialogs for disconnecting and stopping advertisement
of a subnet route.

Updates #10261

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-12-08 19:31:21 -05:00
Will Norris
69b56462fc client/web: check content-type on PATCH requests
Updates #10261
Fixes tailscale/corp#16267

Signed-off-by: Will Norris <will@tailscale.com>
2023-12-08 16:18:18 -08:00
Will Norris
c615fe2296 client/web: add security attributes on session cookie
Limit cookies to HTTP requests (not accessible from javascript).
Set SameSite to "Lax", which is similar to "Strict" but allows for
cookies to be included in requests that come from offsite links.  This
will be necessary when we link to the web client from the admin console.

Updates #10261
Fixes tailscale/corp#16265

Signed-off-by: Will Norris <will@tailscale.com>
2023-12-08 16:18:05 -08:00
Sonia Appasamy
261b6f1e9f client/web: limit updates ui to unstable builds
The updates view still needs a final design pass, limit to unstable
track for now.

Updates #10261

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-12-08 17:57:47 -05:00
Will Norris
33de922d57 client/web: only enforce path prefix in CGI mode
The client has changed a bit since we introduced the path prefix.  It is
now used for two things:

- its original purpose, of ensuring that when the client is run in CGI
  mode at arbitrary paths, then relative paths for assets continue to
  work

- we also now pass the path to the frontend and use wouter to manage
  routes for the various subpages of the client.

When the client is run behind a reverse proxy (as it is in Home
Assistant), it is common for the proxy to rewrite the request so that
the backend application doesn't see the path it's being served at. In
this case, we don't need to call enforcePrefix, since it's already
stripped before it reaches us.  However, wouter (or react router
library) still sees the original path in the browser, and needs to know
what part of it is the prefix that needs to be stripped off.

We're handling this by now only calling enforcePrefix when run in CGI
mode. For Home Assistant, or any other platform that runs the client
behind a reverse proxy with a custom path, they will still need to pass
the `-prefix` flag to `tailscale web`, but we will only use it for route
handling in the frontend.

Updates #10261

Signed-off-by: Will Norris <will@tailscale.com>
2023-12-08 14:54:22 -08:00
Sonia Appasamy
c2319f0dfa client/web: fix serveAPIAuth in Login mode
In Login mode, must first run system auth. But once authorized,
should be able to reach rest of auth logic to check whether the
user can manage the node. This results in showing/hiding the
sign in button in the frontend login toggle.

Updates #10261

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-12-08 17:42:46 -05:00
Sonia Appasamy
7c172df791 client/web: fix 500 error after logout
Calling DebugPacketFilterRules fails when the node is not logged
in, which was causing 500 errors on the node data endpoint after
logging the node out.

Updates #10261

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-12-08 17:17:50 -05:00
Mario Minardi
21958d2934
client/web: add logging of device management type for web client (#10492)
Add logging of device management type for the web client auth flow. Namely,
this differentiates between viewing a node you do not own, viewing a local
tagged node, viewing a remote tagged node, managing a local node, and
managing a remote node.

Updates https://github.com/tailscale/tailscale/issues/10261

Signed-off-by: Mario Minardi <mario@tailscale.com>
2023-12-08 13:15:57 -07:00
Sonia Appasamy
ddb4b51122 client/web: always run platform auth for login mode
Even if connected to the login client over tailscale, still check
platform auth so the browser can obtain the tokens it needs to make
platform requests complete successfully.

Updates #10261

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-12-08 13:42:10 -05:00
Sonia Appasamy
d5d42d0293 client/web: small UI cleanups
Updates:
* Card component used throughout instead of custom card class
* SSH toggle changed to non-editable text/status icon in readonly
* Red error text on subnet route input when route post failed

Updates #10261

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-12-08 12:45:09 -05:00
Sonia Appasamy
e5e5ebda44 client/web: precompress assets
Precompress webclient assets with precompress util. This cuts our
css and js build sizes to about 1/3 of non-compressed size. Similar
compression done on tsconnect and adminhttp assets.

Updates #10261

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-12-07 20:57:31 -05:00
Sonia Appasamy
97f8577ad2 client/web: restructure api mutations into hook
This commit makes some restructural changes to how we handle api
posting from the web client frontend.

Now that we're using SWR, we have less of a need for hooks like
useNodeData that return a useSWR response alongside some mutation
callbacks. SWR makes it easy to mutate throughout the UI without
needing access to the original data state in order to reflect
updates. So, we can fetch data without having to tie it to post
callbacks that have to be passed around through components.

In an effort to consolidate our posting endpoints, and make it
easier to add more api handlers cleanly in the future, this change
introduces a new `useAPI` hook that returns a single `api` callback
that can make any changes from any component in the UI. The hook
itself handles using SWR to mutate the relevant data keys, which
get globally reflected throughout the UI.

As a concurrent cleanup, node types are also moved to their own
types.ts file, to consolidate data types across the app.

Updates #10261

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-12-07 18:32:32 -05:00
Sonia Appasamy
ef4f1e3a0b client/web: add loading state to app
Displays animated loading dots while initial auth and data endpoints
are fetching.

Updates #10261

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-12-07 17:08:15 -05:00
Mario Minardi
f5f21c213c
client/web: add additional web client metrics logging (#10462)
Add additional web client metric logging. Namely, add logging events for
auth / deauth, enable / disable using exit node, enable / disable SSH,
enable / disable advertise routes, and click events on the device details
button.

Updates https://github.com/tailscale/tailscale/issues/10261

Signed-off-by: Mario Minardi <mario@tailscale.com>
2023-12-07 09:24:25 -07:00
Sonia Appasamy
95655405b8 client/web: start using swr for some fetching
Adds swr to the web client, and starts by using it from the
useNodeData hook.

Updates #10261

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-12-06 21:20:13 -05:00
Sonia Appasamy
014ae98297 client/web: style tweaks
Style changes made in live pairing session.

Updates #10261

Co-authored-by: Will Norris <will@tailscale.com>
Co-authored-by: Alessandro Mingione <alessandro@tailscale.com>
Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-12-06 17:31:53 -05:00
Sonia Appasamy
2731a9da36 client/web: fix exit node selector styling
Remove padding on top of search bar, remove rounded corners of
bottom border of earch bar, and add auto focus.

Updates #10261

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-12-06 16:19:52 -05:00
Sonia Appasamy
a54a4f757b client/web: add licenses and policies links
Adds a footer to the device details page that mirrors license and
policy content on other Tailscale clients.

Updates #10261

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-12-06 13:44:52 -05:00
Sonia Appasamy
cc6729a0bc .github/workflows: add webclient workflow
Add workflow to run yarn lint/test/format-check against the web
client on pull requests.

Updates #10261

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-12-06 13:21:27 -05:00
Mario Minardi
4a24db852a
client/web: use IPv4 instead of IP in login view (#10483)
The IP property in node data was renamed to IPv4 but refactoring the usage
of the property was missed in this file.

Updates https://github.com/tailscale/tailscale/issues/10261

Signed-off-by: Mario Minardi <mario@tailscale.com>
2023-12-06 10:08:23 -07:00
Sonia Appasamy
a95b3cbfa8 client/web: add copyable components throughout UI
Updates the IP address on home view to open a copyable list of node
addresses on click. And makes various values on the details view
copyable text items, mirroring the machine admin panel table.

As part of these changes, pulls the AddressCard, NiceIP and QuickCopy
components from the admin panel, with the AddressCard slightly modified
to avoid needing to also pull in the CommandLine component.

A new toaster interface is also added, allowing us to display success
and failure toasts throughout the UI. The toaster code is slightly
modified from it's admin form to avoid the need for some excess
libraries.

Updates #10261

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-12-05 16:52:19 -05:00
Will Norris
c5208f8138 client/web: small tweaks for small screens
Add left and right padding around entire client so that the cards don't
run into the side of the screen. Also tighten up vertical spacing in
couple of places.

Updates #10261

Signed-off-by: Will Norris <will@tailscale.com>
2023-12-05 08:05:09 -08:00
Mario Minardi
6b083a8ddf
client/web: add metric logging logic to the web client (#10434)
Add metric logging logic for the web client frontend. This is an initial
pass of adding the base logic, plus a single point where it is used for
validation that the logging is working correctly. More metric logging
calls will follow in subsquent PRs.

Updates https://github.com/tailscale/tailscale/issues/10261

Signed-off-by: Mario Minardi <mario@tailscale.com>
2023-12-05 08:28:19 -07:00
Will Norris
9c4b73d77d client/web: handle login client inside an iframe
If the login client is inside an iframe, open the management client in a
new window, since it can't be loaded in the frame.

Updates #10261

Signed-off-by: Will Norris <will@tailscale.com>
2023-12-04 14:28:51 -08:00
Will Norris
9441a4e15d client/web: render 404 message in empty card
Switch the "feature disabled" page to use the same treatment.

Updates #10261

Signed-off-by: Will Norris <will@tailscale.com>
2023-12-04 14:04:15 -08:00
Sonia Appasamy
65643f6606 client/web: update device and connected icon
Updates #10261

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-12-04 16:39:56 -05:00
Will Norris
f5989f317f client/web: handle offline exit nodes
If the currently selected exit node is offline, render the exit node
selector in red with an error message. Update exit nodes in the dropdown
to indicate if they are offline, and don't allow them to be selected.

This also updates some older color values to use the new colors.

Updates #10261

Signed-off-by: Will Norris <will@tailscale.com>
2023-12-04 13:31:05 -08:00
Sonia Appasamy
b144391c06 client/web: add cancel button to subnet router input section
Updates #10261

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-12-04 16:28:28 -05:00
Sonia Appasamy
95e9d22a16 client/web: button, link, and other small UI updates
Makes the following changes:
* Use “link” class in various spots
* Remove button appearance on Exit Node dropdown in readonly mode
* Update `-stone-` colors to `-gray-` (couple spots missed by
  original color config commit)
* Pull full ui/button component from admin panel, and update
  buttons throughout UI to use this component
* Remove various buttons in readonly view to match mocks
* Add route (and “pending approval”) highlights to Subnet router
  settings card
* Delete legacy client button styles from index.css
* Fix overflow of IPv6 address on device details view

Updates #10261

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-12-04 15:50:29 -05:00
Will Norris
f9550e0bed client/web: indicate if ACLs prevent access
Use the packet filter rules to determine if any device is allowed to
connect on port 5252.  This does not check whether a specific device can
connect (since we typically don't know the source device when this is
used).  Nor does it specifically check for wide-open ACLs, which is
something we may provide a warning about in the future.

Update the login popover content to display information when the src
device is unable to connect to the dst device over its Tailscale IP. If
we know it's an ACL issue, mention that, otherwise list a couple of
things to check. In both cases, link to a placeholder URL to get more
information about web client connection issues.

Updates #10261

Signed-off-by: Will Norris <will@tailscale.com>
2023-12-01 16:51:12 -08:00
Sonia Appasamy
5e125750bc client/web: center and fix height of header
Centers login pill with Tailscale icon, and fixes height of login
pill.

Updates #10261

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-12-01 16:05:36 -08:00
Sonia Appasamy
7a4ba609d9 client/web: show features based on platform support
Hiding/disabling UI features when not available on the running
client.

Updates #10261

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-12-01 17:01:13 -05:00
Sonia Appasamy
7d61b827e8 client/web: adjust colors and some UI margins
Updates #10261

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-12-01 15:41:57 -05:00
Sonia Appasamy
b155c7a091 client/web: move postcss config into package.json
A little cleanup.

Updates #10261

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-12-01 12:21:49 -05:00