app: new button component
This commit is contained in:
parent
4a37cc402a
commit
c7b9be3ee4
20 changed files with 308 additions and 186 deletions
|
@ -90,6 +90,8 @@ defmodule PrymnWeb do
|
|||
# Shortcut for generating JS commands
|
||||
alias Phoenix.LiveView.JS
|
||||
|
||||
alias PrymnWeb.Button
|
||||
|
||||
# Routes generation with the ~p sigil
|
||||
unquote(verified_routes())
|
||||
end
|
||||
|
|
81
app/lib/prymn_web/components/button.ex
Normal file
81
app/lib/prymn_web/components/button.ex
Normal file
|
@ -0,0 +1,81 @@
|
|||
defmodule PrymnWeb.Button do
|
||||
use Phoenix.Component
|
||||
|
||||
@doc """
|
||||
Render a primary variant button.
|
||||
|
||||
## Examples
|
||||
|
||||
<.primary>Click me</.primary>
|
||||
<.primary href="/a/path" size="sm">Link button</.primary>
|
||||
"""
|
||||
attr :size, :string, default: "md", values: ~w(sm md lg)
|
||||
attr :class, :string, default: nil
|
||||
attr :rest, :global, include: ~w(href navigate patch)
|
||||
slot :inner_block, required: true
|
||||
|
||||
def primary(assigns), do: button(assign(assigns, :variant, "primary"))
|
||||
|
||||
@doc """
|
||||
Render a secondary variant button.
|
||||
|
||||
## Examples
|
||||
|
||||
<.secondary>Click me</.secondary>
|
||||
<.secondary href="/a/path" size="sm">Link button</.secondary>
|
||||
"""
|
||||
attr :size, :string, default: "md", values: ~w(sm md lg)
|
||||
attr :class, :string, default: nil
|
||||
attr :rest, :global, include: ~w(href navigate patch)
|
||||
slot :inner_block, required: true
|
||||
|
||||
def secondary(assigns), do: button(assign(assigns, :variant, "secondary"))
|
||||
|
||||
defp button_assigns(assigns) do
|
||||
assign(
|
||||
assigns,
|
||||
:style,
|
||||
[
|
||||
"inline-flex justify-center items-end rounded-2xl shadow transition-colors active:shadow-sm",
|
||||
by_variant(assigns.variant),
|
||||
by_size(assigns.size),
|
||||
assigns[:class]
|
||||
]
|
||||
)
|
||||
end
|
||||
|
||||
defp button(%{rest: %{href: _}} = assigns), do: link_button(assigns)
|
||||
defp button(%{rest: %{navigate: _}} = assigns), do: link_button(assigns)
|
||||
defp button(%{rest: %{patch: _}} = assigns), do: link_button(assigns)
|
||||
|
||||
defp button(assigns) do
|
||||
assigns = button_assigns(assigns)
|
||||
|
||||
~H"""
|
||||
<button class={@style} {@rest}>
|
||||
<%= render_slot(@inner_block) %>
|
||||
</button>
|
||||
"""
|
||||
end
|
||||
|
||||
defp link_button(assigns) do
|
||||
assigns = button_assigns(assigns)
|
||||
|
||||
~H"""
|
||||
<Phoenix.Component.link class={@style} {@rest}>
|
||||
<%= render_slot(@inner_block) %>
|
||||
</Phoenix.Component.link>
|
||||
"""
|
||||
end
|
||||
|
||||
defp by_size("sm"), do: "text-sm px-3 py-1"
|
||||
defp by_size("md"), do: "text-base px-5 py-2"
|
||||
defp by_size("lg"), do: "text-lg px-7 py-3"
|
||||
|
||||
defp by_variant("primary"),
|
||||
do: "font-medium bg-black text-white hover:bg-slate-800 active:text-white/80"
|
||||
|
||||
defp by_variant("secondary"),
|
||||
do:
|
||||
"font-medium bg-transparent border border-slate-800 text-slate-800 hover:bg-slate-800 hover:text-white active:text-white/80"
|
||||
end
|
|
@ -172,7 +172,7 @@ defmodule PrymnWeb.CoreComponents do
|
|||
<.input field={@form[:email]} label="Email"/>
|
||||
<.input field={@form[:username]} label="Username" />
|
||||
<:actions>
|
||||
<.button>Save</.button>
|
||||
<Button.primary>Save</Button.primary>
|
||||
</:actions>
|
||||
</.simple_form>
|
||||
"""
|
||||
|
@ -199,48 +199,6 @@ defmodule PrymnWeb.CoreComponents do
|
|||
"""
|
||||
end
|
||||
|
||||
@doc """
|
||||
Renders a button.
|
||||
|
||||
## Examples
|
||||
|
||||
<.button>Send!</.button>
|
||||
<.button type="link" href="/foo/bar">Navigate</.button>
|
||||
<.button phx-click="go" class="ml-2">Send!</.button>
|
||||
"""
|
||||
attr :type, :string, default: nil
|
||||
attr :class, :string, default: nil
|
||||
attr :rest, :global, include: ~w(disabled form name value patch navigate)
|
||||
|
||||
slot :inner_block, required: true
|
||||
|
||||
def button(assigns) do
|
||||
assigns =
|
||||
assign(assigns, :style, [
|
||||
"inline-flex items-center rounded-lg bg-zinc-900 hover:bg-zinc-700 py-2 px-3",
|
||||
"font-semibold leading-6 text-sm text-white active:text-white/80",
|
||||
"phx-submit-loading:opacity-75 phx-click-loading:opacity-75 disabled:cursor-not-allowed",
|
||||
assigns.class
|
||||
])
|
||||
|
||||
case assigns.type do
|
||||
"link" ->
|
||||
~H"""
|
||||
<.link class={@style} {@rest}>
|
||||
<%= render_slot(@inner_block) %>
|
||||
</.link>
|
||||
"""
|
||||
|
||||
_ ->
|
||||
~H"""
|
||||
<button type={@type} class={@style} {@rest}>
|
||||
<span><%= render_slot(@inner_block) %></span>
|
||||
<.spinner class="ml-2 hidden w-6 text-white phx-click-loading:inline-block phx-submit-loading:inline-block" />
|
||||
</button>
|
||||
"""
|
||||
end
|
||||
end
|
||||
|
||||
@doc """
|
||||
Renders an input with label and error messages.
|
||||
|
||||
|
@ -601,11 +559,19 @@ defmodule PrymnWeb.CoreComponents do
|
|||
Renders a spinner.
|
||||
"""
|
||||
attr :class, :string, default: nil
|
||||
attr :size, :string, default: "sm", values: ~w(sm md lg)
|
||||
attr :rest, :global
|
||||
|
||||
def spinner(assigns) do
|
||||
assigns =
|
||||
case assigns.size do
|
||||
"sm" -> assign(assigns, :width, "w-6")
|
||||
"md" -> assign(assigns, :width, "w-8")
|
||||
"lg" -> assign(assigns, :width, "w-10")
|
||||
end
|
||||
|
||||
~H"""
|
||||
<div class={["animate-spin", assigns.class]} {@rest}>
|
||||
<div class={["animate-spin h-auto", assigns.width, assigns.class]} {@rest}>
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="currentColor"
|
||||
|
|
|
@ -71,7 +71,7 @@ defmodule PrymnWeb.CreateApp do
|
|||
<.input type="email" name="admin_email" value={nil} label="Admin Email" />
|
||||
<.input type="password" name="admin_password" value={nil} label="Admin Password" />
|
||||
|
||||
<.button type="submit">Create</.button>
|
||||
<Button.primary type="submit">Create</Button.primary>
|
||||
</.simple_form>
|
||||
"""
|
||||
end
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<main class="grid h-screen items-center">
|
||||
<.flash_group flash={@flash} />
|
||||
<div class="mb-32">
|
||||
<div class="m-5 pb-64">
|
||||
<%= @inner_content %>
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
@ -23,7 +23,7 @@ defmodule PrymnWeb.SystemInfo do
|
|||
<.async_result :let={sys_info} assign={@sys_info}>
|
||||
<:loading>
|
||||
<div>
|
||||
<.spinner class="h-5 w-5" />
|
||||
<.spinner size="sm" />
|
||||
<p class="text-xl">Loading system statistics...</p>
|
||||
</div>
|
||||
</:loading>
|
||||
|
|
|
@ -1,8 +1,10 @@
|
|||
defmodule PrymnWeb.PageController do
|
||||
use PrymnWeb, :controller
|
||||
|
||||
def home(conn, _params) do
|
||||
render(conn, :home)
|
||||
def ui(conn, _params) do
|
||||
conn
|
||||
|> put_layout(html: :root)
|
||||
|> render(:ui_dev)
|
||||
end
|
||||
|
||||
def install(conn, _params) do
|
||||
|
|
|
@ -1,5 +1,25 @@
|
|||
defmodule PrymnWeb.PageHTML do
|
||||
use PrymnWeb, :html
|
||||
|
||||
embed_templates "page_html/*"
|
||||
def ui_dev(assigns) do
|
||||
~H"""
|
||||
<div class="m-5">
|
||||
<!-- Buttons -->
|
||||
<div class="flex items-center gap-2">
|
||||
<Button.primary type="button" size="sm">Click me</Button.primary>
|
||||
<Button.primary type="button" size="md">Click me</Button.primary>
|
||||
<Button.primary type="button" size="lg">Click me</Button.primary>
|
||||
<Button.secondary size="sm">Click me</Button.secondary>
|
||||
<Button.secondary size="md">Click me</Button.secondary>
|
||||
<Button.secondary size="lg">Click me</Button.secondary>
|
||||
<Button.primary href="#" size="sm">Link me</Button.primary>
|
||||
<Button.primary href="#" size="md">Link me</Button.primary>
|
||||
<Button.primary href="#" size="lg">Link me</Button.primary>
|
||||
<Button.secondary href="#" size="sm">Link me</Button.secondary>
|
||||
<Button.secondary href="#" size="md">Link me</Button.secondary>
|
||||
<Button.secondary href="#" size="lg">Link me</Button.secondary>
|
||||
</div>
|
||||
</div>
|
||||
"""
|
||||
end
|
||||
end
|
||||
|
|
|
@ -53,10 +53,11 @@ defmodule PrymnWeb.AppIndexLive do
|
|||
defp onboarding(assigns) do
|
||||
~H"""
|
||||
<div class="mx-auto max-w-2xl text-center">
|
||||
<h1 class="mb-5 text-3xl font-medium">You have no Apps.</h1>
|
||||
<.button type="link" patch={~p"/apps/new"}>
|
||||
<.icon class="mr-2 h-6 w-6" name="hero-plus" /> Create your first App!
|
||||
</.button>
|
||||
<h1 class="text-3xl font-medium">You have no Apps.</h1>
|
||||
<h2 class="text-xl">Create your first App here!</h2>
|
||||
<Button.primary class="mt-10" size="lg" patch={~p"/apps/new"}>
|
||||
Create a new App
|
||||
</Button.primary>
|
||||
</div>
|
||||
"""
|
||||
end
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
<%= "#{Enum.count(@servers)} servers" %>
|
||||
</small>
|
||||
<:actions>
|
||||
<.button type="link" patch={~p"/servers/new"}>Connect a Server</.button>
|
||||
<Button.primary patch={~p"/servers/new"}>Connect a Server</Button.primary>
|
||||
</:actions>
|
||||
</.header>
|
||||
|
||||
|
|
|
@ -32,7 +32,7 @@ defmodule PrymnWeb.ServerLive.NewServer do
|
|||
/>
|
||||
<.provider id="provider" provider={@form[:provider]} />
|
||||
<:actions>
|
||||
<.button>Connect</.button>
|
||||
<Button.primary>Connect</Button.primary>
|
||||
</:actions>
|
||||
</.simple_form>
|
||||
</div>
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
defmodule PrymnWeb.ServerLive.Show do
|
||||
alias DBConnection.App
|
||||
use PrymnWeb, :live_view
|
||||
|
||||
require Logger
|
||||
|
@ -9,6 +10,144 @@ defmodule PrymnWeb.ServerLive.Show do
|
|||
{:ok, socket}
|
||||
end
|
||||
|
||||
@impl true
|
||||
def render(assigns) do
|
||||
~H"""
|
||||
<div class="mx-auto max-w-2xl">
|
||||
<.header>
|
||||
<span id="server-name" class="relative flex items-center">
|
||||
<button title="Select a different server">
|
||||
Server <%= @server.name %>
|
||||
<.icon name="hero-chevron-down" />
|
||||
</button>
|
||||
<button class="ml-4" title="Edit server name" phx-click={show_edit_server_name()}>
|
||||
<.icon class="h-3 w-3" name="hero-pencil" />
|
||||
</button>
|
||||
<span
|
||||
role="tooltip"
|
||||
class={[
|
||||
"absolute -left-6 inline-flex h-3 w-3 before:-translate-x-1/2 before:-translate-y-full",
|
||||
"before:-top-2 before:left-1/2 before:absolute before:text-sm before:text-white",
|
||||
"before:font-normal before:content-[attr(data-tip)] before:opacity-0",
|
||||
"hover:before:opacity-100 before:py-1 before:px-2 before:bg-black",
|
||||
"before:rounded before:pointer-events-none before:transition-opacity"
|
||||
]}
|
||||
data-tip={@health.message}
|
||||
>
|
||||
<%= case @health.message do %>
|
||||
<% "Connected" -> %>
|
||||
<span class="absolute top-0 left-0 h-full w-full animate-ping rounded-full bg-green-400 opacity-75" />
|
||||
<span class="h-3 w-3 rounded-full bg-green-500" />
|
||||
<% "Disconnected" -> %>
|
||||
<span class="h-3 w-3 rounded-full bg-red-500" />
|
||||
<% _ -> %>
|
||||
<span class="h-3 w-3 rounded-full bg-yellow-500" />
|
||||
<% end %>
|
||||
</span>
|
||||
</span>
|
||||
<form class="hidden" id="server-name-edit" phx-submit={submit_edit_server_name()}>
|
||||
<input
|
||||
class="border-0 border-b border-gray-500"
|
||||
type="text"
|
||||
name="name"
|
||||
value={@server.name}
|
||||
required
|
||||
/>
|
||||
<button type="submit" title="Confirm" class="ml-4">
|
||||
<.icon class="h-4 w-4" name="hero-check" />
|
||||
</button>
|
||||
</form>
|
||||
<:subtitle>
|
||||
<%= @server.public_ip %>
|
||||
</:subtitle>
|
||||
<:actions>
|
||||
<Button.primary size="sm">New App</Button.primary>
|
||||
<Button.secondary size="sm">
|
||||
Quick actions <.icon name="hero-chevron-down" class="ml-1" />
|
||||
</Button.secondary>
|
||||
</:actions>
|
||||
</.header>
|
||||
<div class="my-3 text-sm text-slate-700">
|
||||
<%= for {name, task} <- @health.tasks do %>
|
||||
Background task in progress: <%= name %>
|
||||
<p><%= task.progress %> complete</p>
|
||||
<% end %>
|
||||
</div>
|
||||
<div :if={@server.status == :unregistered} class="my-10">
|
||||
<p class="mb-9">
|
||||
Connect to your server using root credentials and execute the following command:
|
||||
</p>
|
||||
<div class="group inline-flex items-center rounded-lg bg-gray-800 p-4 pl-6 text-white">
|
||||
<code class="flex gap-4">
|
||||
<span class="select-none text-gray-500">#</span>
|
||||
<span class="flex-1">
|
||||
<%= @registration_command %>
|
||||
</span>
|
||||
</code>
|
||||
<button type="button" tabindex="-1">
|
||||
<.icon
|
||||
name="hero-document-duplicate-solid"
|
||||
class="invisible ml-4 animate-bounce text-gray-500 group-hover:visible"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div :if={@server.status == :registered} class="my-10">
|
||||
<.live_component
|
||||
id={"system_info-#{@server.name}"}
|
||||
module={PrymnWeb.SystemInfo}
|
||||
ip={@server.public_ip}
|
||||
/>
|
||||
<section class="mt-4">
|
||||
<form phx-change="change_dry_run">
|
||||
<.input type="checkbox" name="dry_run" value={@dry_run} label="Enable dry-run operations" />
|
||||
</form>
|
||||
</section>
|
||||
<section class="mt-4">
|
||||
<h2 class="border-b border-solid border-gray-500 pb-1 text-2xl font-medium">System</h2>
|
||||
<p class="mt-4">
|
||||
Updates: <%= 0 %> pending updates.
|
||||
<Button.primary type="button" class="ml-4" phx-click="system_update">
|
||||
Update now
|
||||
</Button.primary>
|
||||
<p :for={output <- assigns.update_output}>
|
||||
<%= output %>
|
||||
</p>
|
||||
</p>
|
||||
</section>
|
||||
<section class="mt-4">
|
||||
<h2 class="border-b border-solid border-gray-500 pb-1 text-2xl font-medium">
|
||||
Backups
|
||||
</h2>
|
||||
<.table id="backups" rows={[%{date: "2023-10-11"}, %{date: "2023-10-10"}]}>
|
||||
<:col :let={backup} label="Date"><%= backup.date %></:col>
|
||||
<:action>
|
||||
<Button.primary>Restore</Button.primary>
|
||||
</:action>
|
||||
</.table>
|
||||
</section>
|
||||
<section class="mt-4">
|
||||
<h2 class="border-b border-solid border-gray-500 pb-1 text-2xl font-medium">
|
||||
Manage Services
|
||||
</h2>
|
||||
<.table
|
||||
id="services"
|
||||
rows={[%{name: "mariadb", status: "Active"}, %{name: "php8.0", status: "Disabled"}]}
|
||||
>
|
||||
<:col :let={service} label="Service"><%= service.name %></:col>
|
||||
<:col :let={service} label="Status"><%= service.status %></:col>
|
||||
<:action>
|
||||
<Button.primary>Activate</Button.primary>
|
||||
<Button.secondary>Deactivate</Button.secondary>
|
||||
</:action>
|
||||
</.table>
|
||||
</section>
|
||||
</div>
|
||||
<.back navigate={~p"/servers"}>Back to servers</.back>
|
||||
</div>
|
||||
"""
|
||||
end
|
||||
|
||||
@impl true
|
||||
def handle_params(%{"id" => id}, _, socket) do
|
||||
server = Servers.get_server!(id)
|
||||
|
@ -62,8 +201,32 @@ defmodule PrymnWeb.ServerLive.Show do
|
|||
{:noreply, socket}
|
||||
end
|
||||
|
||||
def handle_event("edit_server_name", %{"name" => name}, socket) do
|
||||
server =
|
||||
socket.assigns.server
|
||||
|> Servers.update_server(%{"name" => name})
|
||||
|> case do
|
||||
{:ok, server} -> server
|
||||
{:error, _} -> raise "Oops"
|
||||
end
|
||||
|
||||
{:noreply, assign(socket, :server, server)}
|
||||
end
|
||||
|
||||
def handle_event("change_dry_run", %{"dry_run" => enabled}, socket) do
|
||||
enabled = (enabled == "true" && true) || false
|
||||
{:noreply, assign(socket, :dry_run, enabled)}
|
||||
end
|
||||
|
||||
defp show_edit_server_name() do
|
||||
JS.hide(to: "#server-name")
|
||||
|> JS.show(to: "#server-name-edit")
|
||||
|> JS.focus_first(to: "#server-name-edit")
|
||||
end
|
||||
|
||||
defp submit_edit_server_name() do
|
||||
JS.push("edit_server_name")
|
||||
|> JS.hide()
|
||||
|> JS.show(to: "#server-name", display: "flex")
|
||||
end
|
||||
end
|
||||
|
|
|
@ -1,120 +0,0 @@
|
|||
<div class="mx-auto max-w-2xl">
|
||||
<.header>
|
||||
<span class="relative flex items-center">
|
||||
<button>
|
||||
Server <%= @server.name %>
|
||||
<.icon name="hero-chevron-down" />
|
||||
</button>
|
||||
<button class="ml-4">
|
||||
<.icon class="h-3 w-3" name="hero-pencil" />
|
||||
</button>
|
||||
<span
|
||||
role="tooltip"
|
||||
class={[
|
||||
"absolute -left-6 inline-flex h-3 w-3 before:-translate-x-1/2 before:-translate-y-full",
|
||||
"before:-top-2 before:left-1/2 before:absolute before:text-sm before:text-white",
|
||||
"before:font-normal before:content-[attr(data-tip)] before:opacity-0",
|
||||
"hover:before:opacity-100 before:py-1 before:px-2 before:bg-black",
|
||||
"before:rounded before:pointer-events-none before:transition-opacity"
|
||||
]}
|
||||
data-tip={@health.message}
|
||||
>
|
||||
<%= case @health.message do %>
|
||||
<% "Connected" -> %>
|
||||
<span class="absolute top-0 left-0 h-full w-full animate-ping rounded-full bg-green-400 opacity-75" />
|
||||
<span class="h-3 w-3 rounded-full bg-green-500" />
|
||||
<% "Disconnected" -> %>
|
||||
<span class="h-3 w-3 rounded-full bg-red-500" />
|
||||
<% _ -> %>
|
||||
<span class="h-3 w-3 rounded-full bg-yellow-500" />
|
||||
<% end %>
|
||||
</span>
|
||||
</span>
|
||||
<:subtitle>
|
||||
<%= @server.public_ip %>
|
||||
</:subtitle>
|
||||
<:actions>
|
||||
<.button>+ New App</.button>
|
||||
<.button class="border border-black bg-transparent text-black hover:text-white">
|
||||
Quick actions <.icon name="hero-chevron-down" />
|
||||
</.button>
|
||||
</:actions>
|
||||
</.header>
|
||||
<div class="my-3 text-sm text-slate-700">
|
||||
<%= for {name, task} <- @health.tasks do %>
|
||||
Background task in progress: <%= name %>
|
||||
<p><%= task.progress %> complete</p>
|
||||
<% end %>
|
||||
</div>
|
||||
<div :if={@server.status == :unregistered} class="my-10">
|
||||
<p class="mb-9">
|
||||
Connect to your server using root credentials and execute the following command:
|
||||
</p>
|
||||
<div class="group inline-flex items-center rounded-lg bg-gray-800 p-4 pl-6 text-white">
|
||||
<code class="flex gap-4">
|
||||
<span class="select-none text-gray-500">#</span>
|
||||
<span class="flex-1">
|
||||
<%= @registration_command %>
|
||||
</span>
|
||||
</code>
|
||||
<button type="button" tabindex="-1">
|
||||
<.icon
|
||||
name="hero-document-duplicate-solid"
|
||||
class="invisible ml-4 animate-bounce text-gray-500 group-hover:visible"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div :if={@server.status == :registered} class="my-10">
|
||||
<.live_component
|
||||
id={"system_info-#{@server.name}"}
|
||||
module={PrymnWeb.SystemInfo}
|
||||
ip={@server.public_ip}
|
||||
/>
|
||||
<section class="mt-4">
|
||||
<form phx-change="change_dry_run">
|
||||
<.input type="checkbox" name="dry_run" value={@dry_run} label="Enable dry-run operations" />
|
||||
</form>
|
||||
</section>
|
||||
<section class="mt-4">
|
||||
<h2 class="border-b border-solid border-gray-500 pb-1 text-2xl font-medium">System</h2>
|
||||
<p class="mt-4">
|
||||
Updates: <%= 0 %> pending updates.
|
||||
<.button type="button" class="ml-4" phx-click="system_update">
|
||||
Update now
|
||||
</.button>
|
||||
<p :for={output <- assigns.update_output}>
|
||||
<%= output %>
|
||||
</p>
|
||||
</p>
|
||||
</section>
|
||||
<section class="mt-4">
|
||||
<h2 class="border-b border-solid border-gray-500 pb-1 text-2xl font-medium">
|
||||
Backups
|
||||
</h2>
|
||||
<.table id="backups" rows={[%{date: "2023-10-11"}, %{date: "2023-10-10"}]}>
|
||||
<:col :let={backup} label="Date"><%= backup.date %></:col>
|
||||
<:action>
|
||||
<.button>Restore</.button>
|
||||
</:action>
|
||||
</.table>
|
||||
</section>
|
||||
<section class="mt-4">
|
||||
<h2 class="border-b border-solid border-gray-500 pb-1 text-2xl font-medium">
|
||||
Manage Services
|
||||
</h2>
|
||||
<.table
|
||||
id="services"
|
||||
rows={[%{name: "mariadb", status: "Active"}, %{name: "php8.0", status: "Disabled"}]}
|
||||
>
|
||||
<:col :let={service} label="Service"><%= service.name %></:col>
|
||||
<:col :let={service} label="Status"><%= service.status %></:col>
|
||||
<:action>
|
||||
<.button>Activate</.button>
|
||||
<.button>Deactivate</.button>
|
||||
</:action>
|
||||
</.table>
|
||||
</section>
|
||||
</div>
|
||||
<.back navigate={~p"/servers"}>Back to servers</.back>
|
||||
</div>
|
|
@ -12,7 +12,9 @@ defmodule PrymnWeb.UserConfirmationLive do
|
|||
<.simple_form for={@form} id="confirmation_form" phx-submit="confirm_account">
|
||||
<.input field={@form[:token]} type="hidden" />
|
||||
<:actions>
|
||||
<.button phx-disable-with="Confirming..." class="w-full">Confirm my email</.button>
|
||||
<Button.primary phx-disable-with="Confirming..." class="w-full">
|
||||
Confirm my email
|
||||
</Button.primary>
|
||||
</:actions>
|
||||
</.simple_form>
|
||||
</div>
|
||||
|
@ -31,9 +33,9 @@ defmodule PrymnWeb.UserConfirmationLive do
|
|||
<.simple_form for={@form} id="confirmation_form" phx-submit="send_instructions">
|
||||
<.input field={@form[:email]} type="email" placeholder="Email" required />
|
||||
<:actions>
|
||||
<.button phx-disable-with="Sending..." class="w-full">
|
||||
<Button.primary phx-disable-with="Sending..." class="w-full">
|
||||
Resend confirmation instructions
|
||||
</.button>
|
||||
</Button.primary>
|
||||
</:actions>
|
||||
</.simple_form>
|
||||
|
||||
|
|
|
@ -18,9 +18,9 @@ defmodule PrymnWeb.UserForgotPasswordLive do
|
|||
<.simple_form for={@form} id="reset_password_form" phx-submit="send_email">
|
||||
<.input field={@form[:email]} type="email" placeholder="Email" required />
|
||||
<:actions>
|
||||
<.button phx-disable-with="Sending..." class="w-full">
|
||||
<Button.primary phx-disable-with="Sending..." class="w-full">
|
||||
Send password reset instructions
|
||||
</.button>
|
||||
</Button.primary>
|
||||
</:actions>
|
||||
</.simple_form>
|
||||
|
||||
|
|
|
@ -37,7 +37,7 @@ defmodule PrymnWeb.UserLoginLive do
|
|||
</.link>
|
||||
</:actions>
|
||||
<:actions>
|
||||
<.button phx-disable-with="Signing in..." class="w-full">Sign in</.button>
|
||||
<Button.primary phx-disable-with="Signing in..." class="w-full">Sign in</Button.primary>
|
||||
</:actions>
|
||||
</.simple_form>
|
||||
</div>
|
||||
|
|
|
@ -36,7 +36,9 @@ defmodule PrymnWeb.UserRegistrationLive do
|
|||
<.input field={@form[:password]} type="password" label="Password" phx-debounce required />
|
||||
|
||||
<:actions>
|
||||
<.button phx-disable-with="Creating account..." class="w-full">Create an account</.button>
|
||||
<Button.primary phx-disable-with="Creating account..." class="w-full">
|
||||
Create an account
|
||||
</Button.primary>
|
||||
</:actions>
|
||||
</.simple_form>
|
||||
</div>
|
||||
|
|
|
@ -28,7 +28,9 @@ defmodule PrymnWeb.UserResetPasswordLive do
|
|||
required
|
||||
/>
|
||||
<:actions>
|
||||
<.button phx-disable-with="Resetting..." class="w-full">Reset Password</.button>
|
||||
<Button.primary phx-disable-with="Resetting..." class="w-full">
|
||||
Reset Password
|
||||
</Button.primary>
|
||||
</:actions>
|
||||
</.simple_form>
|
||||
|
||||
|
|
|
@ -30,7 +30,7 @@ defmodule PrymnWeb.UserSettingsLive do
|
|||
required
|
||||
/>
|
||||
<:actions>
|
||||
<.button phx-disable-with="Changing...">Change Email</.button>
|
||||
<Button.primary phx-disable-with="Changing...">Change Email</Button.primary>
|
||||
</:actions>
|
||||
</.simple_form>
|
||||
</div>
|
||||
|
@ -66,7 +66,7 @@ defmodule PrymnWeb.UserSettingsLive do
|
|||
required
|
||||
/>
|
||||
<:actions>
|
||||
<.button phx-disable-with="Changing...">Change Password</.button>
|
||||
<Button.primary phx-disable-with="Changing...">Change Password</Button.primary>
|
||||
</:actions>
|
||||
</.simple_form>
|
||||
</div>
|
||||
|
|
|
@ -86,6 +86,7 @@ defmodule PrymnWeb.Router do
|
|||
scope "/dev" do
|
||||
pipe_through [:browser, :dev]
|
||||
|
||||
get "/ui", PrymnWeb.PageController, :ui
|
||||
live_dashboard "/dashboard", metrics: PrymnWeb.Telemetry
|
||||
forward "/mailbox", Plug.Swoosh.MailboxPreview
|
||||
end
|
||||
|
|
Loading…
Reference in a new issue