From afc753f5dfd3e5aa2ebd6fb1e24d4cc82adbc05b Mon Sep 17 00:00:00 2001 From: Jamil Date: Wed, 21 Feb 2024 16:45:45 -0800 Subject: [PATCH] refactor(portal): Add website_link component (#3715) https://github.com/firezone/firezone/pull/3579#discussion_r1496082754 --------- Co-authored-by: Gabi Co-authored-by: Reactor Scram --- .../web/lib/web/components/core_components.ex | 9 +++++++ .../web/components/navigation_components.ex | 26 +++++++++++++++++++ .../web/lib/web/components/page_components.ex | 7 ----- .../lib/web/live/relay_groups/new_token.ex | 8 +++--- elixir/apps/web/lib/web/live/settings/dns.ex | 8 ++---- .../live/settings/identity_providers/index.ex | 11 +++----- elixir/apps/web/lib/web/live/sign_in.ex | 4 +-- .../apps/web/lib/web/live/sites/new_token.ex | 24 ++++++++--------- .../web/mailer/auth_email/new_user.html.heex | 16 ++++++------ .../mailer/auth_email/sign_in_link.html.heex | 8 +++--- .../mailer/auth_email/sign_up_link.html.heex | 8 +++--- 11 files changed, 74 insertions(+), 55 deletions(-) diff --git a/elixir/apps/web/lib/web/components/core_components.ex b/elixir/apps/web/lib/web/components/core_components.ex index ff9c95bdf..f021b28f6 100644 --- a/elixir/apps/web/lib/web/components/core_components.ex +++ b/elixir/apps/web/lib/web/components/core_components.ex @@ -1214,10 +1214,19 @@ defmodule Web.CoreComponents do --- Please do not remove this part of the email. + Account Name: #{account.name} + Account Slug: #{account.slug} Account ID: #{account.id} Actor ID: #{subject.actor.id} """ "mailto:support@firezone.dev?subject=#{URI.encode_www_form(email_subject)}&body=#{URI.encode_www_form(body)}" end + + def link_style do + [ + "text-accent-500", + "hover:underline" + ] + end end diff --git a/elixir/apps/web/lib/web/components/navigation_components.ex b/elixir/apps/web/lib/web/components/navigation_components.ex index 2420f646b..18d2dbff5 100644 --- a/elixir/apps/web/lib/web/components/navigation_components.ex +++ b/elixir/apps/web/lib/web/components/navigation_components.ex @@ -308,4 +308,30 @@ defmodule Web.NavigationComponents do """ end + + @doc """ + Renders links based off our website path. + + ## Examples + + <.website_link href="/pricing>Pricing + <.website_link href="/kb/deploy/gateways" class="text-neutral-900">Deploy Gateway(s) + <.website_link href={~p"/contact/sales"}>Contact Sales + """ + attr :href, :string, required: true + slot :inner_block, required: true + attr :rest, :global + + def website_link(assigns) do + ~H""" + <.link + navigate={"https://www.firezone.dev#{@href}?utm_source=product"} + class={link_style()} + target="_blank" + {@rest} + > + <%= render_slot(@inner_block) %> + + """ + end end diff --git a/elixir/apps/web/lib/web/components/page_components.ex b/elixir/apps/web/lib/web/components/page_components.ex index 40feefcba..3c1d52658 100644 --- a/elixir/apps/web/lib/web/components/page_components.ex +++ b/elixir/apps/web/lib/web/components/page_components.ex @@ -63,11 +63,4 @@ defmodule Web.PageComponents do """ end - - def link_style do - [ - "text-accent-500", - "hover:underline" - ] - end end diff --git a/elixir/apps/web/lib/web/live/relay_groups/new_token.ex b/elixir/apps/web/lib/web/live/relay_groups/new_token.ex index 0398298f0..14ac3e08f 100644 --- a/elixir/apps/web/lib/web/live/relay_groups/new_token.ex +++ b/elixir/apps/web/lib/web/live/relay_groups/new_token.ex @@ -197,10 +197,10 @@ defmodule Web.RelayGroups.NewToken do

- Relay not connecting? See our <.link - class="text-accent-500 hover:underline" - href="https://www.firezone.dev/kb/administer/troubleshooting#relay-not-connecting" - >relay troubleshooting guide. + Relay not connecting? See our + <.website_link href="/kb/administer/troubleshooting"> + relay troubleshooting guide + .

<.initial_connection_status :if={@env} diff --git a/elixir/apps/web/lib/web/live/settings/dns.ex b/elixir/apps/web/lib/web/live/settings/dns.ex index 9794cf66c..b74ed763b 100644 --- a/elixir/apps/web/lib/web/live/settings/dns.ex +++ b/elixir/apps/web/lib/web/live/settings/dns.ex @@ -39,13 +39,9 @@ defmodule Web.Settings.DNS do resolver will be used.

- <.link - class={link_style()} - href="https://www.firezone.dev/kb/administer/dns?utm_source=product" - target="_blank" - > + <.website_link href="/kb/administer/dns"> Read more about configuring DNS in Firezone. - +

<.flash kind={:success} flash={@flash} phx-click="lv:clear-flash" /> diff --git a/elixir/apps/web/lib/web/live/settings/identity_providers/index.ex b/elixir/apps/web/lib/web/live/settings/identity_providers/index.ex index 812cfb2e5..a3796cae0 100644 --- a/elixir/apps/web/lib/web/live/settings/identity_providers/index.ex +++ b/elixir/apps/web/lib/web/live/settings/identity_providers/index.ex @@ -42,13 +42,10 @@ defmodule Web.Settings.IdentityProviders.Index do <:help> - <.link - class={link_style()} - href="https://www.firezone.dev/kb/authenticate?utm_source=product" - target="_blank" - > - Read more about how authentication works in Firezone. - + <.website_link href="/kb/authenticate"> + Read more + + about how authentication works in Firezone. <:content> <.flash_group flash={@flash} /> diff --git a/elixir/apps/web/lib/web/live/sign_in.ex b/elixir/apps/web/lib/web/live/sign_in.ex index 2c08f910c..76c61c7fa 100644 --- a/elixir/apps/web/lib/web/live/sign_in.ex +++ b/elixir/apps/web/lib/web/live/sign_in.ex @@ -109,9 +109,9 @@ defmodule Web.SignIn do

Meant to sign in from a client instead? - + <.website_link href="/kb/user-guides"> Read the docs. - +

diff --git a/elixir/apps/web/lib/web/live/sites/new_token.ex b/elixir/apps/web/lib/web/live/sites/new_token.ex index 3e8a6038c..f6befea43 100644 --- a/elixir/apps/web/lib/web/live/sites/new_token.ex +++ b/elixir/apps/web/lib/web/live/sites/new_token.ex @@ -44,19 +44,17 @@ defmodule Web.Sites.NewToken do Gateways require egress connectivity to the control plane API and relay servers. No ingress firewall rules are required or recommended. See our - <.link - href="https://www.firezone.dev/kb/deploy/gateways#firewall-considerations?utm_source=product" - class={link_style()} - > + <.website_link href="/kb/deploy/gateways#firewall-considerations"> deploy guide - + for more information. <:help> - <.link - href="http://www.firezone.dev/kb/deploy/gateways?utm_source=product" - class="text-accent-500 hover:underline" - >Read the gateway deployment guide for more detailed instructions. + Read the + <.website_link href="/kb/deploy/gateways"> + gateway deployment guide + + for more detailed instructions. <:content>
@@ -111,10 +109,10 @@ defmodule Web.Sites.NewToken do

- Gateway not connecting? See our <.link - class="text-accent-500 hover:underline" - href="https://www.firezone.dev/kb/administer/troubleshooting#gateway-not-connecting" - >gateway troubleshooting guide. + Gateway not connecting? See our + <.website_link href="/kb/administer/troubleshooting#gateway-not-connecting"> + gateway troubleshooting guide + .

<.initial_connection_status :if={@env} diff --git a/elixir/apps/web/lib/web/mailer/auth_email/new_user.html.heex b/elixir/apps/web/lib/web/mailer/auth_email/new_user.html.heex index 5e3b09a67..1c9eb63af 100644 --- a/elixir/apps/web/lib/web/mailer/auth_email/new_user.html.heex +++ b/elixir/apps/web/lib/web/mailer/auth_email/new_user.html.heex @@ -56,7 +56,7 @@ class="sm-my-8" style="margin-top: 48px; margin-bottom: 48px; text-align: center" > - +
  • - + Apple Client (macOS/iOS)
  • - + Windows Client
  • - + Android / ChromeOS Client
  • - + Linux Client
    • @@ -137,7 +137,7 @@

    @@ -145,7 +145,7 @@ • @@ -153,7 +153,7 @@ • diff --git a/elixir/apps/web/lib/web/mailer/auth_email/sign_in_link.html.heex b/elixir/apps/web/lib/web/mailer/auth_email/sign_in_link.html.heex index f614f427b..baf6ad433 100644 --- a/elixir/apps/web/lib/web/mailer/auth_email/sign_in_link.html.heex +++ b/elixir/apps/web/lib/web/mailer/auth_email/sign_in_link.html.heex @@ -64,7 +64,7 @@ class="sm-my-8" style="margin-top: 48px; margin-bottom: 48px; text-align: center" > - +