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>
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>
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>
Add eslint to require stricter typescript rules, particularly around
required hook dependencies. This commit also updates any files that
were now throwing errors with eslint.
Updates #10261
Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
Enforcing inclusion of our OSS license at the top of .ts and .tsx
files. Also updates any relevant files in the repo that were
previously missing the license comment. An additional `@license`
comment is added to client/web/src/index.tsx to preserve the
license in generated Javascript.
Updates #10261
Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
