35 Commits

Author SHA1 Message Date
Sonia Appasamy
38ea8f8c9c client/web: add Inter font
Adds Inter font and uses it as the default for the web UI.
Creates a new /assets folder to house the /fonts, and moves /icons
to live here too.

Updates #10261

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-11-17 17:09:37 -05:00
Sonia Appasamy
e75be017e4 client/web: add exit node selector
Add exit node selector (in full management client only) that allows
for advertising as an exit node, or selecting another exit node on
the Tailnet for use.

Updates #10261

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-11-17 16:45:33 -05:00
Will Norris
f880c77df0 client/web: split login from nodeUpdate
This creates a new /api/up endpoint which is exposed in the login
client, and is solely focused on logging in. Login has been removed from
the nodeUpdate endpoint.

This also adds support in the LoginClientView for a stopped node that
just needs to reconnect, but not necessarily reauthenticate.  This
follows the same pattern in `tailscale up` of just setting the
WantRunning user pref.

Updates tailscale/corp#14335

Signed-off-by: Will Norris <will@tailscale.com>
2023-11-17 12:12:31 -08:00
Sonia Appasamy
980f1f28ce client/web: hide unimplemented links
Hiding links to unimplemented settings pages.

Updates #10261

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-11-17 14:24:46 -05:00
Sonia Appasamy
7238586652 client/web: fix margins on login popover
Updates #10261

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-11-16 14:08:08 -05:00
Sonia Appasamy
4f409012c5 client/web: when readonly, add check for TS connection
When the viewing user is accessing a webclient not over Tailscale,
they must connect over Tailscale before being able to log into the
full management client, which is served over TS. This change adds
a check that the user is able to access the node's tailscale IP.
If not able to, the signin button is disabled. We'll also be adding
Copy here to help explain to the user that they must connect to
Tailscale before proceeding.

Updates #10261

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-11-16 13:46:54 -05:00
Sonia Appasamy
96ad9b6138 client/web: remove legacy-client-view.tsx
Updates #10261

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-11-15 18:12:13 -05:00
Naman Sood
d5c460e83c
client/{tailscale,web}: add initial webUI frontend for self-updates (#10191)
Updates #10187.

Signed-off-by: Naman Sood <mail@nsood.in>
2023-11-15 16:04:44 -05:00
Will Norris
03e780e9af client/web: disable the "disable" button when disabled
We currently disable the exit-node drop down selector when the user is
in read-only mode, but we missed disabling the "Disable" button also.
Previously, it would display an error when clicked.

Updates tailscale/corp#14335

Signed-off-by: Will Norris <will@tailscale.com>
2023-11-15 11:05:59 -08:00
Will Norris
60957e1077 client/web: fix back button on devices with URL prefix
Move Header component inside Router so that links are relative to the
router base URL.

Updates tailscale/corp#14335

Signed-off-by: Will Norris <will@tailscale.com>
2023-11-14 15:30:13 -08:00
Sonia Appasamy
c9bfb7c683 client/web: add Tailscale SSH view
Updates tailscale/corp#14335

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-11-13 15:49:45 -05:00
Sonia Appasamy
86c8ab7502 client/web: add readonly/manage toggle
Updates tailscale/corp#14335

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-11-10 15:01:34 -05:00
Sonia Appasamy
d544e80fc1 client/web: populate device details view
Fills /details page with real values, passed back from the /data
endpoint.

Updates tailscale/corp#14335

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-11-08 17:59:58 -05:00
Will Norris
623f669239 client/web: pass URL prefix to frontend
This allows wouter to route URLs properly when running in CGI mode.

Updates tailscale/corp#14335

Signed-off-by: Will Norris <will@tailscale.com>
2023-11-07 11:13:01 -08:00
Sonia Appasamy
0753ad6cf8 client/web: move useNodeData out of App component
Only loading data once auth request has completed.

Updates tailscale/corp#14335

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-11-07 13:31:05 -05:00
Sonia Appasamy
5e095ddc20 client/web: add initial framework for exit node selector
Updates tailscale/corp#14335

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-11-07 11:30:22 -05:00
Sonia Appasamy
de2af54ffc client/web: pipe newSession through to readonly view
Updates tailscale/corp#14335

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-11-07 11:12:40 -05:00
Sonia Appasamy
d73e923b73 client/web: add device details view
Initial addition of device details view on the frontend. A little
more backend piping work to come to fill all of the detail fields,
for now using placeholders.

Updates tailscale/corp#14335

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-11-07 10:59:18 -05:00
Will Norris
3e9026efda client/web: show manage button in readonly view
We render the readonly view in two situations:
- the client is in login mode, and the device is connected
- the client is in manage mode, but the user does not yet have a session

If the user is not authenticated, and they are not currently on the
Tailscale IP address, render a "Manage" button that will take them to
the Tailcale IP of the device and immediately start check mode.

Still to do is detecting if they have connectivity to the Tailscale IP,
and disabling the button if not.

Updates tailscale/corp#14335

Signed-off-by: Will Norris <will@tailscale.com>
2023-11-07 07:50:26 -08:00
Sonia Appasamy
7df2c5d6b1 client/web: add route management for ui pages
Using wouter, a lightweight React routing library.

Updates tailscale/corp#14335

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-11-06 15:55:55 -05:00
Sonia Appasamy
f2a4c4fa55 client/web: build out client home page
Hooks up more of the home page UI.

Updates tailscale/corp#14335

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-11-06 15:35:15 -05:00
Sonia Appasamy
e5dcf7bdde client/web: move auth session creation out of /api/auth
Splits auth session creation into two new endpoints:

/api/auth/session/new - to request a new auth session

/api/auth/session/wait - to block until user has completed auth url

Updates tailscale/corp#14335

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-11-03 15:30:04 -04:00
Will Norris
4ce4bb6271 client/web: limit authorization checks to API calls
This completes the migration to setting up authentication state in the
client first before fetching any node data or rendering the client view.

Notable changes:
 - `authorizeRequest` is now only enforced on `/api/*` calls (with the
   exception of /api/auth, which is handled early because it's needed to
   initially setup auth, particularly for synology)
 - re-separate the App and WebClient components to ensure that auth is
   completed before moving on
 - refactor platform auth (synology and QNAP) to fit into this new
   structure. Synology no longer returns redirect for auth, but returns
   authResponse instructing the client to fetch a SynoToken

Updates tailscale/corp#14335

Signed-off-by: Will Norris <will@tailscale.com>
2023-11-02 13:01:09 -07:00
Will Norris
237c6c44cd client/web: call /api/auth before rendering any client views
For now this is effectively a noop, since only the ManagementClientView
uses the auth data. That will change soon.

Updates tailscale/corp#14335

Signed-off-by: Will Norris <will@tailscale.com>
2023-11-01 12:09:38 -07:00
Sonia Appasamy
6f214dec48 client/web: split out UI components
This commit makes the following structural changes to the web
client interface. No user-visible changes.

1. Splits login, legacy, readonly, and full management clients into
   their own components, and pulls them out into their own view files.
2. Renders the same Login component for all scenarios when the client
   is not logged in, regardless of legacy or debug mode. Styling comes
   from the existing legacy login, which is removed from legacy.tsx
   now that it is shared.
3. Adds a ui folder to hold non-Tailscale-specific components,
   starting with ProfilePic, previously housed in app.tsx.

Updates tailscale/corp#14335

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-10-31 13:15:07 -04:00
Sonia Appasamy
73bbf941f8 client/web: hook up auth flow
Connects serveTailscaleAuth to the localapi webclient endpoint
and pipes auth URLs and session cookies back to the browser to
redirect users from the frontend.

All behind debug flags for now.

Updates tailscale/corp#14335

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-10-19 13:26:22 -04:00
Sonia Appasamy
5429ee2566 client/web: add debug mode for web client ui updates
UI updates staged behind debug mode flags. Initial new views added
in app.tsx, rendered based on the current debug setting.

Updates tailscale/corp#14335

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-09-28 15:45:33 -04:00
Sonia Appasamy
e952564b59 client/web: pipe unraid csrf token through apiFetch
Ensures that we're sending back the csrf token for all requests
made back to unraid clients.

Updates tailscale/corp#13775

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-08-29 18:55:52 -04:00
Sonia Appasamy
da6eb076aa client/web: add localapi proxy
Adds proxy to the localapi from /api/local/ web client endpoint.
The localapi proxy is restricted to an allowlist of those actually
used by the web client frontend.

Updates tailscale/corp#13775

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-08-29 17:54:59 -04:00
Sonia Appasamy
50b558de74 client/web: hook up remaining legacy POST requests
Hooks up remaining legacy POST request from the React side in --dev.

Updates tailscale/corp#13775

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-08-22 12:42:12 -04:00
Sonia Appasamy
077bbb8403 client/web: add csrf protection to web client api
Adds csrf protection and hooks up an initial POST request from
the React web client.

Updates tailscale/corp#13775

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-08-21 15:02:02 -04:00
Sonia Appasamy
18280ebf7d client/web: hook up data fetching to fill --dev React UI
Updates tailscale/corp#13775

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-08-16 16:14:26 -04:00
Will Norris
9c4364e0b7 client/web: copy existing UI to basic react components
This copies the existing go template frontend into very crude react
components that will be driven by a simple JSON api for fetching and
updating data.  For now, this returns a static set of test data.

This just implements the simple existing UI, so I've put these all in a
"legacy" component, with the expectation that we will rebuild this with
more properly defined components, some pulled from corp.

Updates tailscale/corp#13775

Signed-off-by: Will Norris <will@tailscale.com>
2023-08-15 12:01:36 -07:00
Sonia Appasamy
12238dab48 client/web: add tailwind styling to react app
Updates tailscale/corp#13775

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-08-14 15:29:12 -04:00
Sonia Appasamy
3f12b9c8b2 client/web: pipe through to React in dev mode
Updates tailscale/corp#13775

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2023-08-11 11:33:27 -04:00