25 Commits

Author SHA1 Message Date
Brian Manifold
d4c7b48754 refactor(portal): update asset config in portal (#9504)
Why:

* This commit brings our web app inline with how new Phoenix
applications manage and configure js/css/font assets. Along with that
this commit updates our Tailwind and esbuild tools.
2025-06-10 23:00:44 +00:00
Brian Manifold
3f3f007920 fix(portal): Update copy to clipboard button (#8907)
Why:

* The copy to clipboard button was not working at all on the API new
token page due to the fact that the FlowbiteJS library expects the
presence of the elements in the DOM on first render. This was not true
of the API Token code block. Along with that issue the existing code
blocks copy to clipboard buttons did not give any visual indication that
the copy had been completed. It was also somewhat difficult to see the
copy to clipboard button on those code blocks as well. This commit
updates the buttons to be more visible, as well as adds a phx-hook to
make sure the FlowbiteJS init functions are run on every code block even
if it's inserted after the initial load of the page and adds functions
that are run as a callback to toggle the button text and icon to show
the text has been copied.
2025-04-26 00:43:43 +00:00
Jamil
6f7f6a4f34 style: Enforce code style across all supported languages using Prettier (#7322)
This ensure that we run prettier across all supported filetypes to check
for any formatting / style inconsistencies. Previously, it was only run
for files in the website/ directory using a deprecated pre-commit
plugin.

The benefit to keeping this in our pre-commit config is that devs can
optionally run these checks locally with `pre-commit run --config
.github/pre-commit-config.yaml`.

---------

Signed-off-by: Jamil <jamilbk@users.noreply.github.com>
Co-authored-by: Thomas Eizinger <thomas@eizinger.io>
2024-11-13 00:19:15 +00:00
Andrew Dryga
f89cc67fda fix(portal): Fix copy-paste buttons (#7033)
- Added semi-transparent shadow to the button so that it's more visible
when text is overlapping it. Padding did not look well because it
required scrollbar to be moved inside the parent container and it looked
very ugly
- Replaced custom phx hook with a new native Tailwind component

Closes #5973
2024-10-14 14:05:14 -06:00
Andrew Dryga
0d6c15c787 fix(portal): Do not break Flowbite popovers on DOM patching (#6787)
Closes [#6682](https://github.com/firezone/firezone/issues/6682)
2024-09-19 16:09:38 -06:00
Andrew Dryga
835fc4c8eb chore(portal): Bump all deps related to portal (#6445) 2024-08-28 10:40:02 -06:00
Andrew Dryga
40748306ca fix(portal): Use modal for confirmation dialogs (#5833)
Still need to replace a few more `data-confirm` actions (have an issue
with HTML <dialog> positioning when it's defined inside Tailwind
tables.)

Closes https://github.com/firezone/firezone/issues/5794
Closes #5766
Closes #5887

---------

Signed-off-by: Andrew Dryga <andrew@dryga.com>
Co-authored-by: Jamil <jamilbk@users.noreply.github.com>
Co-authored-by: Reactor Scram <ReactorScram@users.noreply.github.com>
2024-07-24 16:29:53 -06:00
Jamil
cf7ee18fb7 fix(portal): fix removeEventListener function call (#5942)
<img width="809" alt="Screenshot 2024-07-21 at 10 39 37 PM"
src="https://github.com/user-attachments/assets/43238940-22a6-459c-8bb6-a173352af31e">
2024-07-23 14:13:21 +00:00
Jamil
f0b4ce45a2 fix(portal): Disable submit button for synchronous forms upon submit (#5882)
https://github.com/user-attachments/assets/3b7153c5-4c08-470b-9258-fadc08a12be8


The `cursor-wait` graphic is corrupted due to a Quicktime recording bug,
but it's working live.

Fixes #5881
2024-07-18 18:19:20 +00:00
Andrew Dryga
a7e54686b0 feat(portal): Track page views and sign ups using Mixpanel and HubSpot on public pages (#5050)
Fixes firezone/gtm#253
Fixes firezone/gtm#278
2024-05-21 10:34:56 -06:00
Brian Manifold
c02e7ed332 fix(portal): Update portal font to source sans 3 (#3106)
Why:

* The previous font being used in the portal (Source Sans Pro) did not
have multiple weights available, which meant that the `font-*` classes
      on all html tags were not being used.  Switching to Source Sans 3
allows all but 1 (`font-thin` or `100` is not present) of the Tailwind
      font sizes to be used.

Closes #2893
2024-01-08 17:56:43 +00:00
Andrew Dryga
ded5feee9e Fix user-reported errors (#2954) 2023-12-18 16:15:49 -06:00
Jamil
ba44b2cbad Usability iteration 1 (#2869)
* Fix numerous typos and grammar
* Align all next/continue action buttons to the right side of the form
* Rework the Gateway deploy page to be more readable and use consistent
colors
* Link to `Troubleshooting` guide for gateway deployments
* Add spacing between `:sections` so they stand out more
* Move help paragraphs into `:help`s
* Make links consistent to `text-accent-500` to match website/docs
(buttons unchanged)
* Add `warning` style button

More to come in further PRs

---------

Co-authored-by: Brian Manifold <bmanifold@gmail.com>
2023-12-11 21:12:53 +00:00
Andrew Dryga
4fb101ed9f UX cleanup pt 3 (#2789)
Closes https://github.com/firezone/firezone/issues/2601
Also addresses a lot of TODOs from
https://github.com/firezone/firezone/issues/2788
<img width="1728" alt="Screenshot 2023-12-01 at 18 25 11"
src="https://github.com/firezone/firezone/assets/1877644/95137fca-15ab-4b8c-9598-16d92a7951c7">
<img width="1728" alt="Screenshot 2023-12-01 at 18 25 16"
src="https://github.com/firezone/firezone/assets/1877644/9315b754-c3de-4336-8b59-c1d87ac83f69">
<img width="1728" alt="Screenshot 2023-12-01 at 18 25 33"
src="https://github.com/firezone/firezone/assets/1877644/65245194-c922-401e-bbc4-ff4a378520d2">
<img width="1728" alt="Screenshot 2023-12-01 at 18 25 39"
src="https://github.com/firezone/firezone/assets/1877644/3ac8c2c8-c0a8-4074-9cb1-123bc2c21e71">
<img width="1728" alt="Screenshot 2023-12-01 at 18 25 59"
src="https://github.com/firezone/firezone/assets/1877644/7a96cf74-3a9a-4215-9b22-871dee335b30">
2023-12-04 13:56:31 -05:00
Andrew Dryga
1ab3fdd3b5 Ephemeral gateways (#2656)
- [x] Fixed docker run command to mount a volume at `/etc/firezone`
- [x] Fixed systemd unit file to prope setcap, create writeable
`/etc/firezone` directory, use non-root user, etc
- [x] Removed `FIREZONE_ID` from our terraform scripts

Now on Sites index we only show online gateways:
<img width="1728" alt="Screenshot 2023-11-15 at 18 04 12"
src="https://github.com/firezone/firezone/assets/1877644/b532f200-0420-4427-acff-a3b8623560c5">

On the Site view we also show only online ones with a link to see all:
<img width="1728" alt="Screenshot 2023-11-15 at 18 02 33"
src="https://github.com/firezone/firezone/assets/1877644/9774dfac-4340-41d4-8404-586e081505f5">

All can be seen on a separate page:
<img width="1728" alt="Screenshot 2023-11-15 at 18 02 27"
src="https://github.com/firezone/firezone/assets/1877644/5d135f60-c7af-4e48-9ebb-626ff7461316">

Some of the functions I've added are pretty dirty hacks, we really need
to implement filters from #2029 to properly implement those and remove
code duplicates.
2023-11-16 11:17:22 -06:00
Andrew Dryga
33ab23b636 Cleanup UX and fix a bunch of TODOs (#2641)
This PR cleans up a lot of TODO and some issues I've discovered while
fixing them, there are _a few_ UI changes.

We show `(you)` next to your name on the actor view page, where
`Profile` link goes from the dropdown menu:
<img width="1728" alt="Screenshot 2023-11-13 at 19 05 35"
src="https://github.com/firezone/firezone/assets/1877644/f52b2531-e3be-4d3a-a587-4f9f54ca2c49">

Relays were way behind Gateways in terms of view code, so I changed them
to be exactly the same:
<img width="1728" alt="Screenshot 2023-11-13 at 18 54 39"
src="https://github.com/firezone/firezone/assets/1877644/a9f0905d-80d2-4e91-a744-c4baf7ad4a7c">

We also show authorizations on the Actor page because previously to find
"what this user did" you had to go through all user clients
individually:
<img width="1728" alt="Screenshot 2023-11-13 at 18 54 27"
src="https://github.com/firezone/firezone/assets/1877644/02ada445-e175-427e-99de-f9fa5bdd5aab">

I've noticed there is some confusion around sign-in slugs so I added a
home page where you can use ID or slug to get the in link (not all the
clients will know you need to put that in the URL) and recently used
accounts:
<img width="1728" alt="Screenshot 2023-11-13 at 18 54 06"
src="https://github.com/firezone/firezone/assets/1877644/ccfb9198-ed1f-4b3e-a26f-b76bab24243c">

Buttons to copy the code are more visible now, I've used our accent
color but am open to better ideas:
<img width="1728" alt="Screenshot 2023-11-13 at 19 10 29"
src="https://github.com/firezone/firezone/assets/1877644/a2c0658e-1003-409b-b5ad-d5d3ade60a10">

When code is copied it's also more visible:
<img width="699" alt="Screenshot 2023-11-13 at 19 11 41"
src="https://github.com/firezone/firezone/assets/1877644/62e793d2-d760-4aa7-9a42-92a6bbfcbf52">

We also do not redirect from that page automatically, but the large
button becomes green with the text changed:
<img width="660" alt="Screenshot 2023-11-13 at 19 12 11"
src="https://github.com/firezone/firezone/assets/1877644/780dcde3-8018-4405-91e5-984288431ec1">
2023-11-14 13:02:21 -06:00
Andrew Dryga
a7701c07de Override default API url in local/staging envs (#2611) 2023-11-09 11:41:38 -06:00
Andrew Dryga
2f78be155f Flows activity/metrics (#2176)
Charts library could be better, I did not find a way to configure
time-series min/max value or step, formatting Y axis is not trivial too,
but for an early feature this should do the job:

<img width="1728" alt="Screenshot 2023-09-27 at 20 00 10"
src="https://github.com/firezone/firezone/assets/1877644/8e4bef6b-2937-4dc2-ac31-3c61e31bffc6">
2023-09-30 16:04:33 +00:00
Andrew Dryga
fe06d2e42d Actor groups and group sync helpers (#1727) 2023-07-31 16:22:40 -06:00
Jamil
3f5b614ce7 portal: Stub out Settings views (#1702)
Adds Setting UI views based on the Balsamiq Wireframes. This should be
merged **after** #1679
<img width="1469" alt="Screenshot 2023-06-26 at 4 48 55 PM"
src="https://github.com/firezone/firezone/assets/167144/0994b12b-5d8d-48a6-bc8d-c9ba07d2403c">

<img width="1469" alt="Screenshot 2023-06-26 at 4 49 01 PM"
src="https://github.com/firezone/firezone/assets/167144/1d69a54d-2740-4ab0-819b-75a50a976285">
<img width="1616" alt="Screenshot 2023-06-29 at 12 29 26 AM"
src="https://github.com/firezone/firezone/assets/167144/94a8913f-93be-4502-b30e-c70f147dbe62">

<img width="1616" alt="Screenshot 2023-06-29 at 12 29 14 AM"
src="https://github.com/firezone/firezone/assets/167144/16dfc709-65b9-44fd-adad-c412dc1d44e6">

<img width="1616" alt="Screenshot 2023-06-29 at 2 36 43 PM"
src="https://github.com/firezone/firezone/assets/167144/3cddc4b3-7494-4710-953e-4d60108b9aa8">
<img width="1616" alt="Screenshot 2023-06-29 at 2 36 56 PM"
src="https://github.com/firezone/firezone/assets/167144/1f433239-1023-471d-916c-76c43f47835e">
<img width="1616" alt="Screenshot 2023-06-29 at 2 37 05 PM"
src="https://github.com/firezone/firezone/assets/167144/9cd4be23-02eb-4adf-902b-00c02cecd744">
2023-07-06 22:20:41 +00:00
bmanifold
d5d39b9c35 CONTRIBUTING.md updates (#1704)
**Update CONTRIBUTING.md**

Why:

* The CONTRIBUTING.md doc seems to have fallen slightly out of date with
      how Firezone now works.  This commit updates the doc to provide a
quick start guide for getting all of the various Firezone components
up and running as quick as possible. The doc then links to the more
      specific `Elixir` and `Rust` README.md files in the respective
      directories to help developers who would like to contribute.
      
**Update docker-compose vault health check**

 Why:

* The current Vault health check listed in the docker-compose file does
not seem to be working when using `localhost` in the `wget` command.
      Updating the URL to use `127.0.0.1` seems to have fixed it.

---------

Signed-off-by: bmanifold <bmanifold@users.noreply.github.com>
Co-authored-by: Jamil <jamilbk@users.noreply.github.com>
2023-06-27 19:10:12 -07:00
Jamil
b50f6559d3 portal: Status indicator badge (#1703)
Did some research on status page providers to manage incidents.
statuspage.io seems to be easy to use and cost-effective, fairly popular
and provides a good amount of flexibility to customize emails,
notifications, etc.

Super easy to set up and use but am not married to it if anyone feels
strongly about using another incident management service.

https://firezone.statuspage.io

## Demo:

<img width="235" alt="Screenshot 2023-06-27 at 8 07 29 AM"
src="https://github.com/firezone/firezone/assets/167144/8ad12b9b-7345-4a5d-bf43-c8af798d85f9">
2023-06-27 14:19:31 -07:00
Andrew Dryga
89b7e3b474 Fix assets pipeline, add Elixir deps audit, add Android applink manifest (#1659) 2023-06-14 17:15:38 -06:00
Andrew Dryga
d9eb2d18df Deployment for the cloud version (#1638)
TODO:
- [x] Cluster formation for all API and web nodes
- [x] Injest Docker logs to Stackdriver
- [x] Fix assets building for prod

To finish later:
- [ ] Structured logging:
https://issuetracker.google.com/issues/285950891
- [ ] Better networking policy (eg. use public postmark ranges and deny
all unwanted egress)
- [ ] OpenTelemetry collector for Google Stackdriver
- [ ] LoggerJSON.Plug integration

---------

Signed-off-by: Andrew Dryga <andrew@dryga.com>
Co-authored-by: Jamil <jamilbk@users.noreply.github.com>
2023-06-06 15:03:26 -06:00
Andrew Dryga
37a2d7b7f5 Move elixir code to a subfolder (#1631) 2023-05-24 15:46:51 -06:00