Add team management notices on /settings/people

plausible · Jan 20, 2025 · 0e6d43e · 0e6d43e
1 parent 3f65140
commit 0e6d43e
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 2 deletions.
diff --git a/lib/plausible_web/components/team/notice.ex b/lib/plausible_web/components/team/notice.ex
@@ -1,6 +1,33 @@
 defmodule PlausibleWeb.Team.Notice do
   use PlausibleWeb, :component
 
+  def inviting_banner(assigns) do
+    ~H"""
+    <aside class="mt-4 mb-4">
+      <.notice title="Inviting people to your team" class="shadow-md dark:shadow-none mt-4">
+        <p>
+          You can also invite people to your team and give them different roles like admin, editor, viewer or billing. Team members can have full access to all sites.
+        </p>
+      </.notice>
+    </aside>
+    """
+  end
+
+  def team_members_notice(assigns) do
+    ~H"""
+    <aside class="mt-4 mb-4">
+      <.notice theme={:gray} class="rounded border border-gray-300 text-sm mt-4">
+        <p>
+          Team members automatically have access to this site.
+          <.styled_link href={Routes.settings_path(PlausibleWeb.Endpoint, :team_general)}>
+            View team members
+          </.styled_link>
+        </p>
+      </.notice>
+    </aside>
+    """
+  end
+
   def team_invitations(assigns) do
     ~H"""
     <aside class="mt-4 mb-4">
@@ -11,12 +38,16 @@ defmodule PlausibleWeb.Team.Notice do
         class="shadow-md dark:shadow-none mt-4"
       >
         {i.inviter.name} has invited you to join the "{i.team.name}" as {i.role} member.
-        <.link method="post" href={Routes.invitation_path(PlausibleWeb.Endpoint, :accept_invitation, i.invitation_id)} class="whitespace-nowrap font-semibold">
+        <.link
+          method="post"
+          href={Routes.invitation_path(PlausibleWeb.Endpoint, :accept_invitation, i.invitation_id)}
+          class="whitespace-nowrap font-semibold"
+        >
           Accept
         </.link>
         or
         <.link
-    method="post"
+          method="post"
           href={Routes.invitation_path(PlausibleWeb.Endpoint, :reject_invitation, i.invitation_id)}
           phx-value-invitation-id={i.invitation_id}
           class="whitespace-nowrap font-semibold"

diff --git a/lib/plausible_web/templates/site/settings_people.html.heex b/lib/plausible_web/templates/site/settings_people.html.heex
@@ -1,4 +1,8 @@
 <.settings_tiles>
+  <PlausibleWeb.Team.Notice.inviting_banner :if={
+    @site_role in [:owner, :admin] and @my_team.setup_complete
+  } />
+
   <.tile docs="users-roles">
     <:title>People</:title>
     <:subtitle>Invite your friends or coworkers</:subtitle>
@@ -12,6 +16,10 @@
       </.button_link>
     </.filter_bar>
 
+    <PlausibleWeb.Team.Notice.team_members_notice :if={
+      @site_role in [:owner, :admin] and @my_team.setup_complete
+    } />
+
     <div class="flow-root">
       <ul class="divide-y divide-gray-200 dark:divide-gray-400">
         <%= for membership <- @memberships do %>