From 3e60079bf83832e7e8aedd40f745e5eac5663e17 Mon Sep 17 00:00:00 2001
From: bmanifold <bmanifold@users.noreply.github.com>
Date: Wed, 20 Sep 2023 12:22:39 -0400
Subject: [PATCH] Update Account Settings page (#2092)

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">
---
 .../web/components/navigation_components.ex   |  12 +-
 .../apps/web/lib/web/live/settings/account.ex | 172 ++----------------
 .../web/live/settings/account/index_test.exs  |  61 +++++++
 3 files changed, 83 insertions(+), 162 deletions(-)
 create mode 100644 elixir/apps/web/test/web/live/settings/account/index_test.exs

diff --git a/elixir/apps/web/lib/web/components/navigation_components.ex b/elixir/apps/web/lib/web/components/navigation_components.ex
index 077039d6d..e1bde99d6 100644
--- a/elixir/apps/web/lib/web/components/navigation_components.ex
+++ b/elixir/apps/web/lib/web/components/navigation_components.ex
@@ -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">
diff --git a/elixir/apps/web/lib/web/live/settings/account.ex b/elixir/apps/web/lib/web/live/settings/account.ex
index 5a4791331..898d3b727 100644
--- a/elixir/apps/web/lib/web/live/settings/account.ex
+++ b/elixir/apps/web/lib/web/live/settings/account.ex
@@ -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>
diff --git a/elixir/apps/web/test/web/live/settings/account/index_test.exs b/elixir/apps/web/test/web/live/settings/account/index_test.exs
new file mode 100644
index 000000000..5ac076aea
--- /dev/null
+++ b/elixir/apps/web/test/web/live/settings/account/index_test.exs
@@ -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