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

Update Account Settings page (#2092)

Browse Source 
Why:

* The current account settings page shows the user profile info and
billing information. The billing system is not currently implemented and
can be hidden for the time being. As for the user profile information,
it was decided that it would probably be better to send the user to the
'Actors' show page for the currently logged in user.

<img width="1148" alt="new-account-settings-page"
src="https://github.com/firezone/firezone/assets/2646332/6aaabad0-038e-4b4c-8cfb-e2d669b54b53">
This commit is contained in:
bmanifold
2023-09-20 12:22:39 -04:00
committed by GitHub
parent 7608151f75
commit 3e60079bf8
3 changed files with 83 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -64,12 +64,12 @@ defmodule Web.NavigationComponents do
</div>
<ul class="py-1 text-gray-700 dark:text-gray-300" aria-labelledby="user-menu-dropdown">
<li>
<a
href="#"
class="block py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-400 dark:hover:text-white"
>
Account settings
</a>
<.link navigate={~p"/#{@subject.account}/actors/#{@subject.actor}"} class={~w[
block py-2 px-4 text-sm hover:bg-gray-100
dark:hover:bg-gray-600 dark:text-gray-400
dark:hover:text-white]}>
Profile
</.link>
</li>
</ul>
<ul class="py-1 text-gray-700 dark:text-gray-300" aria-labelledby="user-menu-dropdown">

172
elixir/apps/web/lib/web/live/settings/account.ex
View File

@@ -6,167 +6,27 @@ defmodule Web.Settings.Account do
<.breadcrumbs home_path={~p"/#{@account}/dashboard"}>
<.breadcrumb path={~p"/#{@account}/settings/account"}>Account Settings</.breadcrumb>
</.breadcrumbs>
<!-- Account Settings -->
<.header>
<:title>
User profile
Account Settings
</:title>
</.header>
<!-- Account details -->
<div class="bg-white dark:bg-gray-800 overflow-hidden">
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<tbody>
<tr class="border-b border-gray-200 dark:border-gray-700">
<th
scope="row"
class="text-right px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
>
First name
</th>
<td class="px-6 py-4">
Jamil
</td>
</tr>
<tr class="border-b border-gray-200 dark:border-gray-700">
<th
scope="row"
class="text-right px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
>
Last name
</th>
<td class="px-6 py-4">
Bou Kheir
</td>
</tr>
<tr class="border-b border-gray-200 dark:border-gray-700">
<th
scope="row"
class="text-right px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
>
Authentication method
</th>
<td class="px-6 py-4">
Magic link
<p class="text-xs">
<.link class="text-xs text-blue-600 dark:text-blue-500 hover:underline" href="#">
<!-- TODO: Open modal with list of IdPs to allow administrator to choose which one to use for sign in, warning him/her that this is irreversible. -->
Migrate your account
</.link>
to authenticate with a connected Identity Provider instead.
</p>
</td>
</tr>
<tr class="border-b border-gray-200 dark:border-gray-700">
<th
scope="row"
class="text-right px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
>
Sign in email
</th>
<td class="px-6 py-4">
jamil@firezone.dev
<p class="text-xs">
<a
class="text-blue-600 dark:text-gray-500 hover:underline"
href="mailto:support@firezone.dev"
>
Contact support
</a>
to change your sign-in email.
</p>
</td>
</tr>
</tbody>
</table>
</div>
<!-- License details -->
<.header>
<:title>
License
</:title>
</.header>
<p class="ml-4 mb-4 font-medium bg-gray-50 dark:bg-gray-800 text-gray-600 dark:text-gray-500">
<.icon name="hero-exclamation-triangle" class="inline-block w-5 h-5 mr-1 text-yellow-500" />
You have <strong>17 days</strong>
remaining in your trial, after which you'll be downgraded to the <strong>Free</strong>
plan.
<.link class="text-blue-600 dark:text-blue-500 hover:underline" href="#">
Add a credit card
</.link>
to avoid service interruption.
</p>
<div class="bg-white dark:bg-gray-800 overflow-hidden">
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<tbody>
<tr class="border-b border-gray-200 dark:border-gray-700">
<th
scope="row"
class="text-right px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
>
Plan
</th>
<td class="px-6 py-4">
Team
<p>
<.link class="text-xs text-blue-600 dark:text-blue-500 hover:underline" href="#">
Change plan
</.link>
</p>
</td>
</tr>
<tr class="border-b border-gray-200 dark:border-gray-700">
<th
scope="row"
class="text-right px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
>
Seats
</th>
<td class="px-6 py-4">
5
<p>
<.link class="text-xs text-blue-600 dark:text-blue-500 hover:underline" href="#">
Add or remove seats
</.link>
</p>
</td>
</tr>
<tr class="border-b border-gray-200 dark:border-gray-700">
<th
scope="row"
class="text-right px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
>
Renews on
</th>
<td class="px-6 py-4">
October 1, 2021
<p>
<.link class="text-xs text-blue-600 dark:text-blue-500 hover:underline" href="#">
Cancel renewal
</.link>
</p>
</td>
</tr>
<tr class="border-b border-gray-200 dark:border-gray-700">
<th
scope="row"
class="text-right px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
>
Billed amount
</th>
<td class="px-6 py-4">
<strong>$500/year</strong>
for <strong>5 seats</strong>
<span class="bg-green-100 text-green-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300">
10% discount applied
</span>
<p>
<.link class="text-xs text-blue-600 dark:text-blue-500 hover:underline" href="#">
Switch to monthly billing
</.link>
</p>
</td>
</tr>
</tbody>
</table>
<.vertical_table id="account">
<.vertical_table_row>
<:label>Account Name</:label>
<:value><%= @account.name %></:value>
</.vertical_table_row>
<.vertical_table_row>
<:label>Account ID</:label>
<:value><%= @account.id %></:value>
</.vertical_table_row>
<.vertical_table_row>
<:label>Account Slug</:label>
<:value><%= @account.slug %></:value>
</.vertical_table_row>
</.vertical_table>
</div>
<!-- Danger zone -->
<.header>

61
elixir/apps/web/test/web/live/settings/account/index_test.exs Normal file
View File

@@ -0,0 +1,61 @@
defmodule Web.Live.Settings.Account.IndexTest do
use Web.ConnCase, async: true
setup do
Domain.Config.put_system_env_override(:outbound_email_adapter, Swoosh.Adapters.Postmark)
account = Fixtures.Accounts.create_account()
identity = Fixtures.Auth.create_identity(account: account, actor: [type: :account_admin_user])
%{
account: account,
identity: identity
}
end
test "redirects to sign in page for unauthorized user", %{account: account, conn: conn} do
assert live(conn, ~p"/#{account}/settings/account") ==
{:error,
{:redirect,
%{
to: ~p"/#{account}/sign_in",
flash: %{"error" => "You must log in to access this page."}
}}}
end
test "renders breadcrumbs item", %{
account: account,
identity: identity,
conn: conn
} do
{:ok, _lv, html} =
conn
|> authorize_conn(identity)
|> live(~p"/#{account}/settings/account")
assert item = Floki.find(html, "[aria-label='Breadcrumb']")
breadcrumbs = String.trim(Floki.text(item))
assert breadcrumbs =~ "Account Settings"
end
test "renders table with account information", %{
account: account,
identity: identity,
conn: conn
} do
{:ok, lv, _html} =
conn
|> authorize_conn(identity)
|> live(~p"/#{account}/settings/account")
rows =
lv
|> element("#account")
|> render()
|> vertical_table_to_map()
assert rows["account name"] == account.name
assert rows["account id"] == account.id
assert rows["account slug"] == account.slug
end
end