379 lines
13 KiB
Elixir
379 lines
13 KiB
Elixir
defmodule DexiWeb.Admin.UsersLive do
|
|
use DexiWeb, :live_view
|
|
|
|
alias Dexi.Accounts
|
|
alias DexiWeb.Admin.UserListParams
|
|
|
|
@impl true
|
|
def mount(_params, _session, socket) do
|
|
{:ok,
|
|
socket
|
|
|> assign(:page_title, "Users")
|
|
|> assign(:search_term, "")
|
|
|> assign(:role_filter, :all)
|
|
|> assign(:current_page, 1)
|
|
|> assign(:total_pages, 1)
|
|
|> assign(:total_entries, 0)
|
|
|> assign(:visible_pages, [1])
|
|
|> assign(:editing_user, nil)
|
|
|> assign(:edit_form, nil)
|
|
|> assign_search_form()
|
|
|> stream_configure(:users, dom_id: &"user-#{&1.pubkey}")
|
|
|> stream(:users, [])}
|
|
end
|
|
|
|
@impl true
|
|
def handle_params(params, _uri, socket) do
|
|
filter = UserListParams.from_query(params)
|
|
page = Accounts.search_page(filter.search, filter.role, page: filter.page)
|
|
|
|
socket =
|
|
socket
|
|
|> assign(:search_term, filter.search)
|
|
|> assign(:role_filter, filter.role)
|
|
|> assign_search_form()
|
|
|> assign_page(page)
|
|
|
|
socket =
|
|
if filter.page == page.page do
|
|
socket
|
|
else
|
|
push_patch(socket,
|
|
to: users_path(filter.search, filter.role, page.page),
|
|
replace: true
|
|
)
|
|
end
|
|
|
|
{:noreply, socket}
|
|
end
|
|
|
|
@impl true
|
|
def handle_event("search", %{"search" => params}, socket) do
|
|
filter = UserListParams.from_form(params)
|
|
|
|
{:noreply,
|
|
push_patch(socket,
|
|
to: users_path(filter.search, filter.role, filter.page),
|
|
replace: true
|
|
)}
|
|
end
|
|
|
|
def handle_event("edit-user", %{"pubkey" => pubkey}, socket) do
|
|
case Accounts.get_user_by_pubkey(pubkey) do
|
|
nil -> {:noreply, put_flash(socket, :error, "User no longer exists.")}
|
|
user -> {:noreply, open_editor(socket, user)}
|
|
end
|
|
end
|
|
|
|
def handle_event("cancel-edit", _params, socket) do
|
|
{:noreply, close_editor(socket)}
|
|
end
|
|
|
|
def handle_event("save-user", %{"user" => params}, socket) do
|
|
actor = socket.assigns.current_scope.user
|
|
|
|
case Accounts.update_user_details(actor, socket.assigns.editing_user, params) do
|
|
{:ok, _user} ->
|
|
{:noreply,
|
|
socket
|
|
|> close_editor()
|
|
|> reload_users()
|
|
|> put_flash(:info, "User updated.")}
|
|
|
|
{:error, %Ecto.Changeset{} = changeset} ->
|
|
{:noreply, assign(socket, :edit_form, to_form(changeset))}
|
|
|
|
{:error, :unauthorized} ->
|
|
{:noreply,
|
|
socket
|
|
|> close_editor()
|
|
|> put_flash(:error, "Your admin access has changed. Reload and sign in again.")}
|
|
|
|
{:error, _reason} ->
|
|
{:noreply, put_flash(socket, :error, "The user could not be updated.")}
|
|
end
|
|
end
|
|
|
|
def handle_event("set-role", %{"pubkey" => pubkey, "role" => role}, socket) do
|
|
actor = socket.assigns.current_scope.user
|
|
|
|
with target when not is_nil(target) <- Accounts.get_user_by_pubkey(pubkey),
|
|
{:ok, _user} <- Accounts.set_role(actor, target, parse_role(role)) do
|
|
{:noreply, reload_users(socket)}
|
|
else
|
|
{:error, :self_demotion} ->
|
|
{:noreply, put_flash(socket, :error, "You cannot remove your own admin access here.")}
|
|
|
|
{:error, :unauthorized} ->
|
|
{:noreply, put_flash(socket, :error, "Your admin access has changed.")}
|
|
|
|
_error ->
|
|
{:noreply, put_flash(socket, :error, "The user role could not be changed.")}
|
|
end
|
|
end
|
|
|
|
defp parse_role("admin"), do: :admin
|
|
defp parse_role(_role), do: :user
|
|
|
|
defp open_editor(socket, user) do
|
|
socket
|
|
|> assign(:editing_user, user)
|
|
|> assign(:edit_form, to_form(Accounts.change_profile(user)))
|
|
end
|
|
|
|
defp close_editor(socket) do
|
|
socket
|
|
|> assign(:editing_user, nil)
|
|
|> assign(:edit_form, nil)
|
|
end
|
|
|
|
defp reload_users(socket) do
|
|
page =
|
|
Accounts.search_page(socket.assigns.search_term, socket.assigns.role_filter,
|
|
page: socket.assigns.current_page
|
|
)
|
|
|
|
assign_page(socket, page)
|
|
end
|
|
|
|
defp assign_page(socket, page) do
|
|
socket
|
|
|> assign(:current_page, page.page)
|
|
|> assign(:total_pages, page.total_pages)
|
|
|> assign(:total_entries, page.total_entries)
|
|
|> assign(:visible_pages, visible_pages(page.page, page.total_pages))
|
|
|> stream(:users, page.entries, reset: true)
|
|
end
|
|
|
|
defp visible_pages(current_page, total_pages) do
|
|
first = max(current_page - 2, 1)
|
|
last = min(current_page + 2, total_pages)
|
|
Enum.to_list(first..last)
|
|
end
|
|
|
|
defp assign_search_form(socket) do
|
|
params = %{
|
|
"query" => socket.assigns.search_term,
|
|
"role" => Atom.to_string(socket.assigns.role_filter)
|
|
}
|
|
|
|
assign(socket, :search_form, to_form(params, as: :search))
|
|
end
|
|
|
|
defp users_path(term, role, page) do
|
|
filter = %UserListParams{search: term, role: role, page: page}
|
|
~p"/admin/users?#{UserListParams.query(filter)}"
|
|
end
|
|
|
|
@impl true
|
|
def render(assigns) do
|
|
~H"""
|
|
<Layouts.app flash={@flash} current_scope={@current_scope}>
|
|
<main id="admin-users-page" class="mx-auto w-full max-w-6xl px-4 py-10 sm:px-6 lg:px-8">
|
|
<header class="mb-8">
|
|
<p class="text-xs font-semibold uppercase tracking-[0.24em] text-electric-cyan">
|
|
Administration
|
|
</p>
|
|
<h1 class="mt-2 text-3xl font-semibold tracking-tight text-cool-white">Users</h1>
|
|
<p class="mt-2 max-w-2xl text-sm leading-6 text-blue-grey">
|
|
Search users, update profile details, and manage administrative access.
|
|
</p>
|
|
</header>
|
|
|
|
<.form
|
|
for={@search_form}
|
|
id="user-search-form"
|
|
phx-change="search"
|
|
class="mb-6 flex max-w-3xl items-end gap-3"
|
|
>
|
|
<div class="min-w-0 flex-1">
|
|
<.input
|
|
field={@search_form[:query]}
|
|
type="search"
|
|
label="Search users"
|
|
placeholder="Public key, name, or email"
|
|
phx-debounce="250"
|
|
/>
|
|
</div>
|
|
<div class="w-36 shrink-0">
|
|
<.input
|
|
field={@search_form[:role]}
|
|
type="select"
|
|
label="Role"
|
|
options={[{"All", "all"}, {"Users", "user"}, {"Admins", "admin"}]}
|
|
/>
|
|
</div>
|
|
</.form>
|
|
|
|
<div class="mb-4 text-sm text-blue-grey">
|
|
{@total_entries} {if(@total_entries == 1, do: "user", else: "users")}
|
|
</div>
|
|
|
|
<section id="users" phx-update="stream" class="grid gap-4 md:grid-cols-2">
|
|
<div
|
|
id="users-empty"
|
|
class="hidden only:block rounded-2xl border border-dashed border-muted-steel bg-deep-slate p-10 text-center text-sm text-blue-grey md:col-span-2"
|
|
>
|
|
No users match this search.
|
|
</div>
|
|
|
|
<article
|
|
:for={{dom_id, user} <- @streams.users}
|
|
id={dom_id}
|
|
class="overflow-hidden rounded-2xl border border-muted-steel bg-slate-blue shadow-sm transition hover:-translate-y-0.5 hover:border-electric-cyan/60"
|
|
>
|
|
<button
|
|
id={"edit-user-#{user.pubkey}"}
|
|
type="button"
|
|
phx-click="edit-user"
|
|
phx-value-pubkey={user.pubkey}
|
|
class="block w-full p-5 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-electric-cyan"
|
|
>
|
|
<div class="flex items-start justify-between gap-4">
|
|
<div class="min-w-0">
|
|
<p class="truncate font-semibold text-cool-white">{user.name || "Unnamed user"}</p>
|
|
<p class="mt-1 truncate text-sm text-blue-grey">{user.email || "No email"}</p>
|
|
</div>
|
|
<span class="rounded-full border border-muted-steel px-2.5 py-1 text-xs font-semibold uppercase tracking-wide text-electric-cyan">
|
|
{user.role}
|
|
</span>
|
|
</div>
|
|
<p class="mt-4 truncate font-mono text-xs text-blue-grey">{user.pubkey}</p>
|
|
</button>
|
|
|
|
<div class="flex gap-2 border-t border-muted-steel px-5 py-3">
|
|
<button
|
|
id={"make-user-#{user.pubkey}"}
|
|
type="button"
|
|
phx-click="set-role"
|
|
phx-value-pubkey={user.pubkey}
|
|
phx-value-role="user"
|
|
disabled={user.role == :user || user.pubkey == @current_scope.user.pubkey}
|
|
class="rounded-full border border-muted-steel px-3 py-1.5 text-xs font-semibold text-blue-grey transition hover:border-bright-cyan hover:text-cool-white disabled:cursor-not-allowed disabled:opacity-40"
|
|
>
|
|
Make user
|
|
</button>
|
|
<button
|
|
id={"make-admin-#{user.pubkey}"}
|
|
type="button"
|
|
phx-click="set-role"
|
|
phx-value-pubkey={user.pubkey}
|
|
phx-value-role="admin"
|
|
disabled={user.role == :admin}
|
|
class="rounded-full bg-electric-cyan px-3 py-1.5 text-xs font-semibold text-midnight-navy transition hover:bg-bright-cyan disabled:cursor-not-allowed disabled:opacity-40"
|
|
>
|
|
Make admin
|
|
</button>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
|
|
<nav
|
|
:if={@total_pages > 1}
|
|
id="users-pagination"
|
|
aria-label="User pages"
|
|
class="mt-8 flex flex-wrap items-center justify-center gap-2"
|
|
>
|
|
<.link
|
|
:if={@current_page > 1}
|
|
id="previous-users-page"
|
|
patch={users_path(@search_term, @role_filter, @current_page - 1)}
|
|
class="rounded-full border border-muted-steel bg-deep-slate px-4 py-2 text-sm font-semibold text-cool-white transition hover:border-electric-cyan hover:text-bright-cyan"
|
|
>
|
|
Previous
|
|
</.link>
|
|
|
|
<.link
|
|
:for={page_number <- @visible_pages}
|
|
id={"users-page-#{page_number}"}
|
|
patch={users_path(@search_term, @role_filter, page_number)}
|
|
aria-current={if(page_number == @current_page, do: "page", else: nil)}
|
|
class={[
|
|
"grid size-10 place-items-center rounded-full border text-sm font-semibold transition",
|
|
if(page_number == @current_page,
|
|
do: "border-electric-cyan bg-electric-cyan text-midnight-navy",
|
|
else:
|
|
"border-muted-steel bg-deep-slate text-cool-white hover:border-electric-cyan hover:text-bright-cyan"
|
|
)
|
|
]}
|
|
>
|
|
{page_number}
|
|
</.link>
|
|
|
|
<.link
|
|
:if={@current_page < @total_pages}
|
|
id="next-users-page"
|
|
patch={users_path(@search_term, @role_filter, @current_page + 1)}
|
|
class="rounded-full border border-muted-steel bg-deep-slate px-4 py-2 text-sm font-semibold text-cool-white transition hover:border-electric-cyan hover:text-bright-cyan"
|
|
>
|
|
Next
|
|
</.link>
|
|
</nav>
|
|
|
|
<div
|
|
:if={@editing_user}
|
|
id="edit-user-modal"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="edit-user-title"
|
|
phx-window-keydown="cancel-edit"
|
|
phx-key="escape"
|
|
class="fixed inset-0 z-50 grid place-items-center bg-midnight-navy/85 p-4 backdrop-blur-sm"
|
|
>
|
|
<.focus_wrap
|
|
id="edit-user-dialog"
|
|
phx-click-away="cancel-edit"
|
|
class="w-full max-w-lg rounded-3xl border border-muted-steel bg-slate-blue p-6 shadow-2xl"
|
|
>
|
|
<div class="flex items-start justify-between gap-4">
|
|
<div>
|
|
<p class="text-xs font-semibold uppercase tracking-[0.2em] text-electric-cyan">
|
|
Edit user
|
|
</p>
|
|
<h2 id="edit-user-title" class="mt-2 text-xl font-semibold text-cool-white">
|
|
{@editing_user.name || "Unnamed user"}
|
|
</h2>
|
|
</div>
|
|
<button
|
|
id="close-user-editor"
|
|
type="button"
|
|
phx-click="cancel-edit"
|
|
aria-label="Close user editor"
|
|
class="rounded-full p-2 text-blue-grey transition hover:bg-deep-slate hover:text-cool-white"
|
|
>
|
|
<.icon name="hero-x-mark" class="size-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<p class="mt-4 break-all font-mono text-xs text-blue-grey">{@editing_user.pubkey}</p>
|
|
|
|
<.form for={@edit_form} id="edit-user-form" phx-submit="save-user" class="mt-6 space-y-4">
|
|
<.input field={@edit_form[:name]} type="text" label="Name" />
|
|
<.input field={@edit_form[:email]} type="email" label="Email" />
|
|
|
|
<div class="flex justify-end gap-3 pt-2">
|
|
<button
|
|
id="cancel-user-edit"
|
|
type="button"
|
|
phx-click="cancel-edit"
|
|
class="rounded-full border border-muted-steel px-4 py-2 text-sm font-semibold text-cool-white transition hover:border-bright-cyan"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
id="save-user"
|
|
type="submit"
|
|
class="rounded-full bg-electric-cyan px-4 py-2 text-sm font-semibold text-midnight-navy transition hover:bg-bright-cyan"
|
|
>
|
|
Save user
|
|
</button>
|
|
</div>
|
|
</.form>
|
|
</.focus_wrap>
|
|
</div>
|
|
</main>
|
|
</Layouts.app>
|
|
"""
|
|
end
|
|
end
|