Commit Graph

15 Commits (e9f203d747e895c4cc4d8c636781651d7f162209)

Author SHA1 Message Date
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>
2 years ago
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>
2 years ago
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>
2 years ago
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>
2 years ago
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>
2 years ago
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>
2 years ago
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>
2 years ago
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>
2 years ago
Sonia Appasamy 7d61b827e8 client/web: adjust colors and some UI margins
Updates #10261

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2 years ago
Sonia Appasamy 6e30c9d1fe client/web: add eslint
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>
2 years ago
Sonia Appasamy 5f40b8a0bc scripts/check_license_headers: enforce license on ts/tsx files
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>
2 years ago
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>
2 years ago
Sonia Appasamy 7238586652 client/web: fix margins on login popover
Updates #10261

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2 years ago
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>
2 years ago
Sonia Appasamy 86c8ab7502 client/web: add readonly/manage toggle
Updates tailscale/corp#14335

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
2 years ago