github-personal/firezone
1
0
Fork 0
mirror of https://github.com/outbackdingo/firezone.git synced 2026-01-27 10:18:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update button colors, rounded corners, and code block formatting (#2515)

Browse Source 
Purely visual changes in this PR. No functionality is changed, aside
from the code blocks no longer containing html tags when copied using
the "copy to clipboard" icon.

* Button primary color has been updated
* Corner radius on buttons, input fields, etc... has been reduced
* Code blocks have been updated
This commit is contained in:
bmanifold
2023-10-28 23:18:52 -04:00
committed by GitHub
parent 98383e8622
commit 4f3ae5f8fd
20 changed files with 252 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
elixir/apps/web/lib/web/components/core_components.ex
View File

@@ -65,9 +65,11 @@ defmodule Web.CoreComponents do
bg-gray-800
relative
], @class]}>
<code class="block w-full no-scrollbar whitespace-nowrap overflow-x-auto rounded-b-lg" data-copy>
<%= render_slot(@inner_block) %>
</code>
<code
class="block w-full no-scrollbar whitespace-pre overflow-x-auto rounded-b"
data-copy
phx-no-format
><%= render_slot(@inner_block) %></code>
<.icon name="hero-clipboard-document" data-icon class={~w[
absolute bottom-1 right-1
h-5 w-5
@@ -103,7 +105,7 @@ defmodule Web.CoreComponents do
def tabs(assigns) do
~H"""
<div class="mb-4">
<div class="border-gray-200 dark:border-gray-700 bg-slate-50 rounded-t-lg">
<div class="border-gray-200 dark:border-gray-700 bg-slate-50 rounded-t">
<ul
class="flex flex-wrap text-sm font-medium text-center"
id={"#{@id}-ul"}
@@ -114,7 +116,7 @@ defmodule Web.CoreComponents do
<li class="mr-2" role="presentation">
<button
class={~w[
inline-block p-4 border-b-2 border-transparent rounded-t-lg
inline-block p-4 border-b-2 border-transparent rounded-t
hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300
]}
id={"#{tab.id}-tab"}
@@ -133,7 +135,7 @@ defmodule Web.CoreComponents do
<div id={@id}>
<%= for tab <- @tab do %>
<div
class="hidden rounded-b-lg bg-gray-50 dark:bg-gray-800"
class="hidden rounded-b bg-gray-50 dark:bg-gray-800"
id={tab.id}
role="tabpanel"
aria-labelledby={"#{tab.id}-tab"}
@@ -212,7 +214,7 @@ defmodule Web.CoreComponents do
<ul class="inline-flex items-stretch -space-x-px">
<li>
<a href="#" class={~w[
flex items-center justify-center h-full py-1.5 px-3 ml-0 text-gray-500 bg-white rounded-l-lg
flex items-center justify-center h-full py-1.5 px-3 ml-0 text-gray-500 bg-white rounded-l
border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700
dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white
]}>
@@ -267,7 +269,7 @@ defmodule Web.CoreComponents do
</li>
<li>
<a href="#" class={~w[
flex items-center justify-center h-full py-1.5 px-3 leading-tight text-gray-500 bg-white rounded-r-lg
flex items-center justify-center h-full py-1.5 px-3 leading-tight text-gray-500 bg-white rounded-r
border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700
dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white
]}>
@@ -307,7 +309,7 @@ defmodule Web.CoreComponents do
@kind == :success && "text-green-800 bg-green-50 dark:bg-gray-800 dark:text-green-400",
@kind == :info && "text-yellow-800 bg-yellow-50 dark:bg-gray-800 dark:text-yellow-300",
@kind == :error && "text-red-800 bg-red-50 dark:bg-gray-800 dark:text-red-400",
@style != "wide" && "mb-4 rounded-lg"
@style != "wide" && "mb-4 rounded"
]}
role="alert"
{@rest}

27
elixir/apps/web/lib/web/components/form_components.ex
View File

@@ -100,7 +100,10 @@ defmodule Web.FormComponents do
name={@name}
value="true"
checked={@checked}
class="rounded border-zinc-300 text-zinc-900 focus:ring-0"
class={[
"rounded border-zinc-300 text-zinc-900 focus:ring-0",
"checked:bg-accent-500 checked:focus:bg-accent-500 checked:hover:bg-accent-500"
]}
{@rest}
/>
<%= @label %>
@@ -115,7 +118,7 @@ defmodule Web.FormComponents do
<div phx-feedback-for={@name}>
<.label for={@id}><%= @label %></.label>
<select id={@id} name={@name} class={~w[
bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500
bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded focus:ring-blue-500
focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500
]} multiple={@multiple} {@rest}>
@@ -135,7 +138,7 @@ defmodule Web.FormComponents do
id={@id}
name={@name}
class={[
"mt-2 block w-full rounded-lg text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6",
"mt-2 block w-full rounded text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6",
"phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400",
"min-h-[6rem] border-zinc-300 focus:border-zinc-400",
@errors != [] && "border-rose-400 focus:border-rose-400"
@@ -166,7 +169,7 @@ defmodule Web.FormComponents do
id={@id}
value={value}
class={[
"bg-gray-50 p-2.5 block w-full rounded-lg border text-gray-900 focus:ring-primary-600 text-sm",
"bg-gray-50 p-2.5 block w-full rounded border text-gray-900 focus:ring-primary-600 text-sm",
"phx-no-feedback:border-gray-300 phx-no-feedback:focus:border-primary-600",
"disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none",
"border-gray-300 focus:border-primary-600",
@@ -216,7 +219,7 @@ defmodule Web.FormComponents do
id={@id}
value={Phoenix.HTML.Form.normalize_value(@type, @value)}
class={[
"bg-gray-50 p-2.5 block w-full rounded-lg border text-gray-900 focus:ring-primary-600 text-sm",
"bg-gray-50 p-2.5 block w-full rounded border text-gray-900 focus:ring-primary-600 text-sm",
"phx-no-feedback:border-gray-300 phx-no-feedback:focus:border-primary-600",
"disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none",
"border-gray-300 focus:border-primary-600",
@@ -243,7 +246,7 @@ defmodule Web.FormComponents do
<div class="inline-flex rounded-md shadow-sm" role="group">
<button type="button" class={~w[
px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200
rounded-l-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2
rounded-l hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2
focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600
dark:text-white dark:hover:text-white dark:hover:bg-gray-600
dark:focus:ring-blue-500 dark:focus:text-white
@@ -263,7 +266,7 @@ defmodule Web.FormComponents do
<% end %>
<button type="button" class={~w[
px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200
rounded-r-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2
rounded-r hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2
focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600
dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500
dark:focus:text-white
@@ -410,7 +413,7 @@ defmodule Web.FormComponents do
defp button_style do
[
"flex items-center justify-center",
"px-4 py-2 rounded-lg",
"px-4 py-2 rounded",
"font-medium text-sm",
"focus:ring-4 focus:outline-none",
"phx-submit-loading:opacity-75"
@@ -431,10 +434,10 @@ defmodule Web.FormComponents do
button_style() ++
[
"text-white",
"bg-primary-500",
"hover:bg-primary-600",
"focus:ring-primary-300",
"dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
"bg-accent-500",
"hover:bg-accent-600",
"focus:ring-accent-300",
"dark:bg-accent-600 dark:hover:bg-accent-700 dark:focus:ring-accent-800"
]
end

8
elixir/apps/web/lib/web/components/navigation_components.ex
View File

@@ -15,7 +15,7 @@ defmodule Web.NavigationComponents do
data-drawer-toggle="drawer-navigation"
aria-controls="drawer-navigation"
class={[
"p-2 mr-2 text-gray-600 rounded-lg cursor-pointer md:hidden",
"p-2 mr-2 text-gray-600 rounded cursor-pointer md:hidden",
"hover:text-gray-900 hover:bg-gray-100",
"focus:bg-gray-100 dark:focus:bg-gray-700 focus:ring-2 focus:ring-gray-100",
"dark:focus:ring-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
@@ -155,7 +155,7 @@ defmodule Web.NavigationComponents do
<.link navigate={@navigate} class={~w[
flex items-center p-2
text-base font-medium text-gray-900
rounded-lg
rounded
#{String.starts_with?(@current_path, @navigate) && @active_class}
hover:bg-gray-100
dark:text-white dark:hover:bg-gray-700 group]}>
@@ -195,7 +195,7 @@ defmodule Web.NavigationComponents do
<button
type="button"
class={~w[
flex items-center p-2 w-full group rounded-lg
flex items-center p-2 w-full group rounded
text-base font-medium text-gray-900
transition duration-75
hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700]}
@@ -218,7 +218,7 @@ defmodule Web.NavigationComponents do
<ul id={"dropdown-#{@id}"} class={if @dropdown_hidden, do: "hidden", else: ""}>
<li :for={item <- @item}>
<.link navigate={item.navigate} class={~w[
flex items-center p-2 pl-11 w-full group rounded-lg
flex items-center p-2 pl-11 w-full group rounded
text-base font-medium text-gray-900
#{String.starts_with?(@current_path, item.navigate) && @active_class}
transition duration-75

2
elixir/apps/web/lib/web/components/table_components.ex
View File

@@ -67,7 +67,7 @@ defmodule Web.TableComponents do
data-dropdown-toggle={"#{@id}-dropdown"}
class={[
"inline-flex items-center p-0.5 text-sm font-medium text-center",
"text-gray-500 hover:text-gray-800 rounded-lg focus:outline-none",
"text-gray-500 hover:text-gray-800 rounded focus:outline-none",
"dark:text-gray-400 dark:hover:text-gray-100"
]}
type="button"

4
elixir/apps/web/lib/web/live/actors/service_accounts/new_identity.ex
View File

@@ -71,9 +71,7 @@ defmodule Web.Actors.ServiceAccounts.NewIdentity do
Your API token (will be shown only once):
</div>
<.code_block id="code-sample-docker" class="w-full mw-1/2 rounded-lg" phx-no-format>
<%= @identity.provider_virtual_state.changes.secret %>
</.code_block>
<.code_block id="code-sample-docker" class="w-full mw-1/2 rounded" phx-no-format><%= @identity.provider_virtual_state.changes.secret %></.code_block>
<.button icon="hero-arrow-uturn-left" navigate={~p"/#{@account}/actors/#{@actor}"}>
Back to Actor

8
elixir/apps/web/lib/web/live/auth/email.ex
View File

@@ -35,7 +35,7 @@ defmodule Web.Auth.Email do
<div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
<.logo />
<div class="w-full col-span-6 mx-auto bg-white rounded-lg shadow dark:bg-gray-800 md:mt-0 sm:max-w-lg xl:p-0">
<div class="w-full col-span-6 mx-auto bg-white rounded shadow dark:bg-gray-800 md:mt-0 sm:max-w-lg xl:p-0">
<div class="p-6 space-y-4 lg:space-y-6 sm:p-8">
<h1 class="text-xl font-bold leading-tight tracking-tight text-gray-900 sm:text-2xl dark:text-white">
Please check your email
@@ -84,7 +84,7 @@ defmodule Web.Auth.Email do
class={[
"block p-2.5 w-full text-sm",
"bg-gray-50 text-gray-900",
"rounded-l-lg border-gray-300 focus:border-primary-600 focus:ring-primary-600"
"rounded-l border-gray-300 focus:border-primary-600 focus:ring-primary-600"
]}
required
placeholder="Enter token from email"
@@ -96,7 +96,7 @@ defmodule Web.Auth.Email do
"block p-2.5",
"text-sm text-white font-medium",
"items-center text-center",
"bg-primary-700 rounded-r-lg",
"bg-primary-700 rounded-r",
"focus:ring-4 focus:ring-primary-200 hover:bg-primary-800"
]}
>
@@ -184,7 +184,7 @@ defmodule Web.Auth.Email do
class={[
"w-1/2 m-2 inline-flex items-center justify-center py-2.5 px-5",
"text-sm font-medium text-gray-900 bg-white ",
"rounded-lg border border-gray-200",
"rounded border border-gray-200",
"focus:outline-none focus:z-10 focus:ring-4 focus:ring-gray-200",
"hover:text-gray-900 hover:bg-gray-100"
]}

4
elixir/apps/web/lib/web/live/auth/sign_in.ex
View File

@@ -40,7 +40,7 @@ defmodule Web.Auth.SignIn do
<div class="flex flex-col items-center justify-center px-6 py-8 mx-auto lg:py-0">
<.logo />
<div class="w-full col-span-6 mx-auto bg-white rounded-lg shadow dark:bg-gray-800 md:mt-0 sm:max-w-lg xl:p-0">
<div class="w-full col-span-6 mx-auto bg-white rounded shadow dark:bg-gray-800 md:mt-0 sm:max-w-lg xl:p-0">
<div class="p-6 space-y-4 lg:space-y-6 sm:p-8">
<h1 class="text-xl text-center font-bold leading-tight tracking-tight text-gray-900 sm:text-2xl dark:text-white">
<%= @account.name %> Admin Portal
@@ -211,7 +211,7 @@ defmodule Web.Auth.SignIn do
~H"""
<a href={~p"/#{@account}/sign_in/providers/#{@provider}/redirect?#{@params}"} class={~w[
w-full inline-flex items-center justify-center py-2.5 px-5
bg-white rounded-lg
bg-white rounded
text-sm font-medium text-gray-900
focus:outline-none
border border-gray-200

2
elixir/apps/web/lib/web/live/groups/edit.ex
View File

@@ -26,7 +26,7 @@ defmodule Web.Groups.Edit do
</.breadcrumbs>
<.section>
<:title>
Edit Group: <code>Engineering</code>
Edit Group: <code><%= @group.name %></code>
</:title>
<:content>
<div class="max-w-2xl px-4 py-8 mx-auto lg:py-16">

12
elixir/apps/web/lib/web/live/groups/edit_actors.ex
View File

@@ -38,7 +38,7 @@ defmodule Web.Groups.EditActors do
<.section>
<:title>
Edit Actors in Group: <code>Engineering</code>
Edit Actors in Group: <code><%= @group.name %></code>
</:title>
<:content>
<div class="relative overflow-x-auto">
@@ -79,11 +79,6 @@ defmodule Web.Groups.EditActors do
:if={member?(@current_member_ids, actor, @added_ids, @removed_ids)}
phx-click={:remove_actor}
phx-value-id={actor.id}
class={~w[
flex items-center justify-center text-white bg-primary-500 hover:bg-primary-600
focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-4 py-2
dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800
]}
>
<.icon name="hero-minus" class="h-3.5 w-3.5 mr-2" /> Remove
</.button>
@@ -91,11 +86,6 @@ defmodule Web.Groups.EditActors do
:if={not member?(@current_member_ids, actor, @added_ids, @removed_ids)}
phx-click={:add_actor}
phx-value-id={actor.id}
class={~w[
flex items-center justify-center text-white bg-primary-500 hover:bg-primary-600
focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-4 py-2
dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800
]}
>
<.icon name="hero-plus" class="h-3.5 w-3.5 mr-2" /> Add
</.button>

2
elixir/apps/web/lib/web/live/relay_groups/index.ex
View File

@@ -113,7 +113,7 @@ defmodule Web.RelayGroups.Index do
type="text"
id="simple-search"
class={[
"bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500",
"bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded focus:ring-primary-500",
"focus:border-primary-500 block w-full pl-10 p-2 dark:bg-gray-700 dark:border-gray-600",
"dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
]}

54
elixir/apps/web/lib/web/live/relay_groups/new.ex
View File

@@ -45,29 +45,10 @@ defmodule Web.RelayGroups.New do
</div>
<.tabs id="deployment-instructions">
<:tab id="docker-instructions" label="Docker">
<.code_block id="code-sample-docker" class="w-full rounded-b-lg" phx-no-format>
docker run -d \<br />
&nbsp; --name=firezone-relay-0 \<br />
&nbsp; --restart=always \<br />
&nbsp; -v /dev/net/tun:/dev/net/tun \<br />
&nbsp; -e PORTAL_TOKEN=<%= Relays.encode_token!(hd(@group.tokens)) %> \<br />
&nbsp; us-east1-docker.pkg.dev/firezone/firezone/relay:stable
</.code_block>
<.code_block id="code-sample-docker" class="w-full rounded-b" phx-no-format><%= docker_command(encode_group_token(@group)) %></.code_block>
</:tab>
<:tab id="systemd-instructions" label="Systemd">
<.code_block id="code-sample-systemd" class="w-full rounded-b-lg" phx-no-format>
[Unit]<br />
Description=zigbee2mqtt<br />
After=network.target<br />
<br />
[Service]<br />
ExecStart=/usr/bin/npm start<br />
WorkingDirectory=/opt/zigbee2mqtt<br />
StandardOutput=inherit<br />
StandardError=inherit<br />
Restart=always<br />
User=pi
</.code_block>
<.code_block id="code-sample-systemd" class="w-full rounded-b" phx-no-format><%= systemd_command(encode_group_token(@group)) %></.code_block>
</:tab>
</.tabs>
@@ -110,4 +91,35 @@ defmodule Web.RelayGroups.New do
{:noreply, socket}
end
defp docker_command(secret) do
"""
docker run -d \\
--name=firezone-relay-0 \\
--restart=always \\
-v /dev/net/tun:/dev/net/tun \\
-e PORTAL_TOKEN=#{secret} \\
us-east1-docker.pkg.dev/firezone/firezone/relay:stable
"""
end
defp systemd_command(_secret) do
"""
[Unit]
Description=zigbee2mqtt
After=network.target
[Service]
ExecStart=/usr/bin/npm start
WorkingDirectory=/opt/zigbee2mqtt
StandardOutput=inherit
StandardError=inherit
Restart=always
User=pi
"""
end
defp encode_group_token(group) do
Relays.encode_token!(hd(group.tokens))
end
end

2
elixir/apps/web/lib/web/live/settings/identity_providers/components.ex
View File

@@ -57,7 +57,7 @@ defmodule Web.Settings.IdentityProviders.Components do
~p"/#{@provider.account_id}/settings/identity_providers/google_workspace/#{@provider}/redirect"
}>
<button class={~w[
text-white bg-primary-600 rounded-lg
text-white bg-primary-600 rounded
font-medium text-sm
px-2 py-1 text-center
hover:bg-primary-700

33
elixir/apps/web/lib/web/live/settings/identity_providers/google_workspace/components.ex
View File

@@ -10,7 +10,11 @@ defmodule Web.Settings.IdentityProviders.GoogleWorkspace.Components do
Step 1. Enable Admin SDK API
</h2>
Please visit following link and enable Admin SDK API for your Google Workspace account:
<a href="https://console.cloud.google.com/apis/library/admin.googleapis.com" target="_blank">
<a
href="https://console.cloud.google.com/apis/library/admin.googleapis.com"
class={link_style()}
target="_blank"
>
https://console.cloud.google.com/apis/library/admin.googleapis.com
</a>
</div>
@@ -19,8 +23,7 @@ defmodule Web.Settings.IdentityProviders.GoogleWorkspace.Components do
<h2 class="mb-4 text-xl font-bold text-gray-900 dark:text-white">
Step 2. Configure OAuth consent screen
</h2>
Please make sure that following scopes are added to the OAuth application permissions:
<.code_block
Please make sure that following scopes are added to the OAuth application permissions: <.code_block
:for={
{name, scope} <- [
openid: "openid",
@@ -32,18 +35,16 @@ defmodule Web.Settings.IdentityProviders.GoogleWorkspace.Components do
]
}
id={"scope-#{name}"}
class="w-full mb-4 whitespace-nowrap rounded-lg"
>
<%= scope %>
</.code_block>
class="w-full mb-4 whitespace-nowrap rounded"
phx-no-format
><%= scope %></.code_block>
</div>
<div class="mb-4">
<h2 class="mb-4 text-xl font-bold text-gray-900 dark:text-white">
Step 3: Create OAuth client
</h2>
Please make sure that OAuth client has following redirect URL's whitelisted:
<.code_block
Please make sure that OAuth client has following redirect URL's whitelisted: <.code_block
:for={
{type, redirect_url} <- [
sign_in: url(~p"/#{@account}/sign_in/providers/#{@id}/handle_callback"),
@@ -54,10 +55,9 @@ defmodule Web.Settings.IdentityProviders.GoogleWorkspace.Components do
]
}
id={"redirect_url-#{type}"}
class="w-full mb-4 whitespace-nowrap rounded-lg"
>
<%= redirect_url %>
</.code_block>
class="w-full mb-4 whitespace-nowrap rounded"
phx-no-format
><%= redirect_url %></.code_block>
</div>
<div class="mb-4">
@@ -103,12 +103,9 @@ defmodule Web.Settings.IdentityProviders.GoogleWorkspace.Components do
</div>
<div class="flex items-center space-x-4">
<button
type="submit"
class="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
>
<.submit_button>
Connect Identity Provider
</button>
</.submit_button>
</div>
</div>
</.form>

11
elixir/apps/web/lib/web/live/settings/identity_providers/new.ex
View File

@@ -45,16 +45,9 @@ defmodule Web.Settings.IdentityProviders.New do
</fieldset>
</div>
<div class="flex justify-end items-center space-x-4">
<button
type="submit"
class={[
"text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300",
"font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700",
"dark:focus:ring-primary-800"
]}
>
<.submit_button>
Next: Configure
</button>
</.submit_button>
</div>
</.form>
</div>

26
elixir/apps/web/lib/web/live/settings/identity_providers/openid_connect/components.ex
View File

@@ -9,16 +9,12 @@ defmodule Web.Settings.IdentityProviders.OpenIDConnect.Components do
<h2 class="mb-4 text-xl font-bold text-gray-900 dark:text-white">
Step 1. Create OAuth app
</h2>
Please make sure that following scopes are added to the OAuth application has following access scopes:
<.code_block
Please make sure that following scopes are added to the OAuth application has following access scopes: <.code_block
:for={scope <- [:openid, :email, :profile]}
id={"scope-#{scope}"}
class="w-full mb-4 whitespace-nowrap rounded-lg"
>
<%= scope %>
</.code_block>
Please make sure that OAuth client has following redirect URL's whitelisted:
<.code_block
class="w-full mb-4 whitespace-nowrap rounded"
phx-no-format
><%= scope %></.code_block> Please make sure that OAuth client has following redirect URL's whitelisted: <.code_block
:for={
{type, redirect_url} <- [
sign_in: url(~p"/#{@account}/sign_in/providers/#{@id}/handle_callback"),
@@ -29,10 +25,9 @@ defmodule Web.Settings.IdentityProviders.OpenIDConnect.Components do
]
}
id={"redirect_url-#{type}"}
class="w-full mb-4 whitespace-nowrap rounded-lg"
>
<%= redirect_url %>
</.code_block>
class="w-full mb-4 whitespace-nowrap rounded"
phx-no-format
><%= redirect_url %></.code_block>
</div>
<div class="mb-4">
@@ -115,12 +110,9 @@ defmodule Web.Settings.IdentityProviders.OpenIDConnect.Components do
</div>
<div class="flex items-center space-x-4">
<button
type="submit"
class="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
>
<.submit_button>
Connect Identity Provider
</button>
</.submit_button>
</div>
</div>
</.form>

2
elixir/apps/web/lib/web/live/settings/identity_providers/saml/components.ex
View File

@@ -27,7 +27,7 @@ defmodule Web.Settings.IdentityProviders.SAML.Components do
def provisioning_strategy_form(assigns) do
~H"""
<h2 class="mb-4 text-xl font-bold text-gray-900 dark:text-white">Provisioning strategy</h2>
<ul class="mb-4 w-full sm:flex border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
<ul class="mb-4 w-full sm:flex border border-gray-200 rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white">
<li class="w-full border-b border-gray-200 sm:border-b-0 sm:border-r dark:border-gray-600">
<div class="text-lg font-medium p-3">
<.input

13
elixir/apps/web/lib/web/live/settings/identity_providers/saml/saml.ex
View File

@@ -43,7 +43,7 @@ defmodule Web.Settings.IdentityProviders.SAML.New do
autocomplete="off"
field={@form[:name]}
class={[
"bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600",
"bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded focus:ring-primary-600",
"focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600",
"dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
]}
@@ -88,16 +88,9 @@ defmodule Web.Settings.IdentityProviders.SAML.New do
<.provisioning_strategy_form form={@form} />
<div class="flex justify-end items-center space-x-4">
<button
type="submit"
class={[
"text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none",
"focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center",
"dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
]}
>
<.submit_button>
Create Identity Provider
</button>
</.submit_button>
</div>
</.form>
</div>

2
elixir/apps/web/lib/web/live/sign_up.ex
View File

@@ -46,7 +46,7 @@ defmodule Web.SignUp do
<div class="flex flex-col items-center justify-center px-6 py-8 mx-auto lg:py-0">
<.logo />
<div class="w-full col-span-6 mx-auto bg-white rounded-lg shadow dark:bg-gray-800 md:mt-0 sm:max-w-lg xl:p-0">
<div class="w-full col-span-6 mx-auto bg-white rounded shadow dark:bg-gray-800 md:mt-0 sm:max-w-lg xl:p-0">
<div class="p-6 space-y-4 lg:space-y-6 sm:p-8">
<h1 class="text-center text-xl font-bold leading-tight tracking-tight text-gray-900 sm:text-2xl dark:text-white">
Welcome to Firezone

134
elixir/apps/web/lib/web/live/sites/new.ex
View File

@@ -46,69 +46,10 @@ defmodule Web.Sites.New do
</div>
<.tabs id="deployment-instructions">
<:tab id="docker-instructions" label="Docker">
<.code_block id="code-sample-docker" class="w-full rounded-b-lg" phx-no-format>
docker run -d \<br />
&nbsp; --restart=unless-stopped \<br />
&nbsp; --pull=always \<br />
&nbsp; --health-cmd="ip link | grep tun-firezone" \<br />
&nbsp; --name=firezone-gateway \<br />
&nbsp; --cap-add=NET_ADMIN \<br />
&nbsp; --sysctl net.ipv4.ip_forward=1 \<br />
&nbsp; --sysctl net.ipv4.conf.all.src_valid_mark=1 \<br />
&nbsp; --sysctl net.ipv6.conf.all.disable_ipv6=0 \<br />
&nbsp; --sysctl net.ipv6.conf.all.forwarding=1 \<br />
&nbsp; --sysctl net.ipv6.conf.default.forwarding=1 \<br />
&nbsp; --device="/dev/net/tun:/dev/net/tun" \<br />
&nbsp; --env FIREZONE_ID="<%= Ecto.UUID.generate() %>" \<br />
&nbsp; --env FIREZONE_TOKEN="<%= Gateways.encode_token!(hd(@group.tokens)) %>" \<br />
&nbsp; --env FIREZONE_ENABLE_MASQUERADE=1 \<br />
&nbsp; --env FIREZONE_HOSTNAME="`hostname`" \<br />
&nbsp; --env RUST_LOG="warn" \<br />
&nbsp; ghcr.io/firezone/gateway:${FIREZONE_VERSION:-1}
</.code_block>
<.code_block id="code-sample-docker" class="w-full rounded-b" phx-no-format><%= docker_command(encode_group_token(@group)) %></.code_block>
</:tab>
<:tab id="systemd-instructions" label="Systemd">
<.code_block id="code-sample-systemd" class="w-full rounded-b-lg" phx-no-format>
[Unit]
Description=Firezone Gateway
After=network.target
[Service]
Type=simple
Environment="FIREZONE_TOKEN=<%= Gateways.encode_token!(hd(@group.tokens)) %>"
Environment="FIREZONE_VERSION=1.20231001.0"
Environment="FIREZONE_HOSTNAME=`hostname`"
Environment="FIREZONE_ENABLE_MASQUERADE=1"
ExecStartPre=/bin/sh -c ' \
if [ -e /usr/local/bin/firezone-gateway ]; then \
current_version=$(/usr/local/bin/firezone-gateway --version 2>&1 | awk "{print $NF}"); \
else \
current_version=""; \
fi; \
if [ ! "$$current_version" = "${FIREZONE_VERSION}" ]; then \
arch=$(uname -m); \
case $$arch in \
aarch64) \
bin_url="https://github.com/firezone/firezone/releases/download/${FIREZONE_VERSION}/gateway-aarch64-unknown-linux-musl-${FIREZONE_VERSION}" ;; \
armv7l) \
bin_url="https://github.com/firezone/firezone/releases/download/${FIREZONE_VERSION}/gateway-armv7-unknown-linux-musleabihf-${FIREZONE_VERSION}" ;; \
x86_64) \
bin_url="https://github.com/firezone/firezone/releases/download/${FIREZONE_VERSION}/gateway-x86_64-unknown-linux-musl-${FIREZONE_VERSION}" ;; \
*) \
echo "Unsupported architecture"; \
exit 1 ;; \
esac; \
wget -O /usr/local/bin/firezone-gateway $$bin_url; \
fi \
'
ExecStartPre=/usr/bin/chmod +x /usr/local/bin/firezone-gateway
ExecStart=/usr/local/bin/firezone-gateway
Restart=always
RestartSec=3
[Install]
WantedBy=multi-user.target
</.code_block>
<.code_block id="code-sample-systemd" class="w-full rounded-b" phx-no-format><%= systemd_command(encode_group_token(@group)) %></.code_block>
</:tab>
</.tabs>
@@ -149,4 +90,75 @@ defmodule Web.Sites.New do
{:noreply, socket}
end
defp docker_command(token) do
"""
docker run -d \\
--restart=unless-stopped \\
--pull=always \\
--health-cmd="ip link | grep tun-firezone" \\
--name=firezone-gateway \\
--cap-add=NET_ADMIN \\
--sysctl net.ipv4.ip_forward=1 \\
--sysctl net.ipv4.conf.all.src_valid_mark=1 \\
--sysctl net.ipv6.conf.all.disable_ipv6=0 \\
--sysctl net.ipv6.conf.all.forwarding=1 \\
--sysctl net.ipv6.conf.default.forwarding=1 \\
--device="/dev/net/tun:/dev/net/tun" \\
--env FIREZONE_ID="#{Ecto.UUID.generate()}" \\
--env FIREZONE_TOKEN="#{token}" \\
--env FIREZONE_ENABLE_MASQUERADE=1 \\
--env FIREZONE_HOSTNAME="`hostname`" \\
--env RUST_LOG="warn" \\
ghcr.io/firezone/gateway:${FIREZONE_VERSION:-1}
"""
end
defp systemd_command(token) do
"""
[Unit]
Description=Firezone Gateway
After=network.target
[Service]
Type=simple
Environment="FIREZONE_TOKEN=#{token}"
Environment="FIREZONE_VERSION=1.20231001.0"
Environment="FIREZONE_HOSTNAME=`hostname`"
Environment="FIREZONE_ENABLE_MASQUERADE=1"
ExecStartPre=/bin/sh -c ' \\
if [ -e /usr/local/bin/firezone-gateway ]; then \\
current_version=$(/usr/local/bin/firezone-gateway --version 2>&1 | awk "{print $NF}"); \\
else \\
current_version=""; \\
fi; \\
if [ ! "$$current_version" = "${FIREZONE_VERSION}" ]; then \\
arch=$(uname -m); \\
case $$arch in \\
aarch64) \\
bin_url="https://github.com/firezone/firezone/releases/download/${FIREZONE_VERSION}/gateway-aarch64-unknown-linux-musl-${FIREZONE_VERSION}" ;; \\
armv7l) \\
bin_url="https://github.com/firezone/firezone/releases/download/${FIREZONE_VERSION}/gateway-armv7-unknown-linux-musleabihf-${FIREZONE_VERSION}" ;; \\
x86_64) \\
bin_url="https://github.com/firezone/firezone/releases/download/${FIREZONE_VERSION}/gateway-x86_64-unknown-linux-musl-${FIREZONE_VERSION}" ;; \\
*) \\
echo "Unsupported architecture"; \\
exit 1 ;; \\
esac; \\
wget -O /usr/local/bin/firezone-gateway $$bin_url; \\
fi \\
'
ExecStartPre=/usr/bin/chmod +x /usr/local/bin/firezone-gateway
ExecStart=/usr/local/bin/firezone-gateway
Restart=always
RestartSec=3
[Install]
WantedBy=multi-user.target
"""
end
defp encode_group_token(group) do
Gateways.encode_token!(hd(group.tokens))
end
end

134
elixir/apps/web/lib/web/live/sites/new_token.ex
View File

@@ -37,69 +37,10 @@ defmodule Web.Sites.NewToken do
</div>
<.tabs id="deployment-instructions">
<:tab id="docker-instructions" label="Docker">
<.code_block id="code-sample-docker" class="w-full rounded-b-lg" phx-no-format>
docker run -d \<br />
&nbsp; --restart=unless-stopped \<br />
&nbsp; --pull=always \<br />
&nbsp; --health-cmd="ip link | grep tun-firezone" \<br />
&nbsp; --name=firezone-gateway \<br />
&nbsp; --cap-add=NET_ADMIN \<br />
&nbsp; --sysctl net.ipv4.ip_forward=1 \<br />
&nbsp; --sysctl net.ipv4.conf.all.src_valid_mark=1 \<br />
&nbsp; --sysctl net.ipv6.conf.all.disable_ipv6=0 \<br />
&nbsp; --sysctl net.ipv6.conf.all.forwarding=1 \<br />
&nbsp; --sysctl net.ipv6.conf.default.forwarding=1 \<br />
&nbsp; --device="/dev/net/tun:/dev/net/tun" \<br />
&nbsp; --env FIREZONE_ID="<%= Ecto.UUID.generate() %>" \<br />
&nbsp; --env FIREZONE_TOKEN="<%= Gateways.encode_token!(hd(@group.tokens)) %>" \<br />
&nbsp; --env FIREZONE_ENABLE_MASQUERADE=1 \<br />
&nbsp; --env FIREZONE_HOSTNAME="`hostname`" \<br />
&nbsp; --env RUST_LOG="warn" \<br />
&nbsp; ghcr.io/firezone/gateway:${FIREZONE_VERSION:-1}
</.code_block>
<.code_block id="code-sample-docker" class="w-full rounded-b" phx-no-format><%= docker_command(encode_group_token(@group)) %></.code_block>
</:tab>
<:tab id="systemd-instructions" label="Systemd">
<.code_block id="code-sample-systemd" class="w-full rounded-b-lg" phx-no-format>
[Unit]<br />
Description=Firezone Gateway<br />
After=network.target<br />
<br />
[Service]<br />
Type=simple<br />
Environment="FIREZONE_TOKEN=<%= Gateways.encode_token!(hd(@group.tokens)) %>"<br />
Environment="FIREZONE_VERSION=1.20231001.0"<br />
Environment="FIREZONE_HOSTNAME=`hostname`"<br />
Environment="FIREZONE_ENABLE_MASQUERADE=1"<br />
ExecStartPre=/bin/sh -c ' \<br />
if [ -e /usr/local/bin/firezone-gateway ]; then \<br />
current_version=$(/usr/local/bin/firezone-gateway --version 2>&1 | awk "{print $NF}"); \<br />
else \<br />
current_version=""; \<br />
fi; \<br />
if [ ! "$$current_version" = "${FIREZONE_VERSION}" ]; then \<br />
arch=$(uname -m); \<br />
case $$arch in \<br />
aarch64) \<br />
bin_url="https://github.com/firezone/firezone/releases/download/${FIREZONE_VERSION}/gateway-aarch64-unknown-linux-musl-${FIREZONE_VERSION}" ;; \<br />
armv7l) \<br />
bin_url="https://github.com/firezone/firezone/releases/download/${FIREZONE_VERSION}/gateway-armv7-unknown-linux-musleabihf-${FIREZONE_VERSION}" ;; \<br />
x86_64) \<br />
bin_url="https://github.com/firezone/firezone/releases/download/${FIREZONE_VERSION}/gateway-x86_64-unknown-linux-musl-${FIREZONE_VERSION}" ;; \<br />
*) \<br />
echo "Unsupported architecture"; \<br />
exit 1 ;; \<br />
esac; \<br />
wget -O /usr/local/bin/firezone-gateway $$bin_url; \<br />
fi \<br />
'<br />
ExecStartPre=/usr/bin/chmod +x /usr/local/bin/firezone-gateway<br />
ExecStart=/usr/local/bin/firezone-gateway<br />
Restart=always<br />
RestartSec=3<br />
<br />
[Install]<br />
WantedBy=multi-user.target<br />
</.code_block>
<.code_block id="code-sample-systemd" class="w-full rounded-b" phx-no-format><%= systemd_command(encode_group_token(@group)) %></.code_block>
</:tab>
</.tabs>
@@ -111,4 +52,75 @@ defmodule Web.Sites.NewToken do
</.section>
"""
end
defp docker_command(token) do
"""
docker run -d \\
--restart=unless-stopped \\
--pull=always \\
--health-cmd="ip link | grep tun-firezone" \\
--name=firezone-gateway \\
--cap-add=NET_ADMIN \\
--sysctl net.ipv4.ip_forward=1 \\
--sysctl net.ipv4.conf.all.src_valid_mark=1 \\
--sysctl net.ipv6.conf.all.disable_ipv6=0 \\
--sysctl net.ipv6.conf.all.forwarding=1 \\
--sysctl net.ipv6.conf.default.forwarding=1 \\
--device="/dev/net/tun:/dev/net/tun" \\
--env FIREZONE_ID="#{Ecto.UUID.generate()}" \\
--env FIREZONE_TOKEN="#{token}" \\
--env FIREZONE_ENABLE_MASQUERADE=1 \\
--env FIREZONE_HOSTNAME="`hostname`" \\
--env RUST_LOG="warn" \\
ghcr.io/firezone/gateway:${FIREZONE_VERSION:-1}
"""
end
defp systemd_command(token) do
"""
[Unit]
Description=Firezone Gateway
After=network.target
[Service]
Type=simple
Environment="FIREZONE_TOKEN=#{token}"
Environment="FIREZONE_VERSION=1.20231001.0"
Environment="FIREZONE_HOSTNAME=`hostname`"
Environment="FIREZONE_ENABLE_MASQUERADE=1"
ExecStartPre=/bin/sh -c ' \\
if [ -e /usr/local/bin/firezone-gateway ]; then \\
current_version=$(/usr/local/bin/firezone-gateway --version 2>&1 | awk "{print $NF}"); \\
else \\
current_version=""; \\
fi; \\
if [ ! "$$current_version" = "${FIREZONE_VERSION}" ]; then \\
arch=$(uname -m); \\
case $$arch in \\
aarch64) \\
bin_url="https://github.com/firezone/firezone/releases/download/${FIREZONE_VERSION}/gateway-aarch64-unknown-linux-musl-${FIREZONE_VERSION}" ;; \\
armv7l) \\
bin_url="https://github.com/firezone/firezone/releases/download/${FIREZONE_VERSION}/gateway-armv7-unknown-linux-musleabihf-${FIREZONE_VERSION}" ;; \\
x86_64) \\
bin_url="https://github.com/firezone/firezone/releases/download/${FIREZONE_VERSION}/gateway-x86_64-unknown-linux-musl-${FIREZONE_VERSION}" ;; \\
*) \\
echo "Unsupported architecture"; \\
exit 1 ;; \\
esac; \\
wget -O /usr/local/bin/firezone-gateway $$bin_url; \\
fi \\
'
ExecStartPre=/usr/bin/chmod +x /usr/local/bin/firezone-gateway
ExecStart=/usr/local/bin/firezone-gateway
Restart=always
RestartSec=3
[Install]
WantedBy=multi-user.target
"""
end
defp encode_group_token(group) do
Gateways.encode_token!(hd(group.tokens))
end
end