diff --git a/app/lib/prymn_web.ex b/app/lib/prymn_web.ex index 583d4ed..2a5ba60 100644 --- a/app/lib/prymn_web.ex +++ b/app/lib/prymn_web.ex @@ -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 diff --git a/app/lib/prymn_web/components/button.ex b/app/lib/prymn_web/components/button.ex new file mode 100644 index 0000000..a9e9c18 --- /dev/null +++ b/app/lib/prymn_web/components/button.ex @@ -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 diff --git a/app/lib/prymn_web/components/core_components.ex b/app/lib/prymn_web/components/core_components.ex index 51faa0d..adf7fc3 100644 --- a/app/lib/prymn_web/components/core_components.ex +++ b/app/lib/prymn_web/components/core_components.ex @@ -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" diff --git a/app/lib/prymn_web/components/create_app.ex b/app/lib/prymn_web/components/create_app.ex index cfeb448..2b84949 100644 --- a/app/lib/prymn_web/components/create_app.ex +++ b/app/lib/prymn_web/components/create_app.ex @@ -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 diff --git a/app/lib/prymn_web/components/layouts/auth.html.heex b/app/lib/prymn_web/components/layouts/auth.html.heex index 01bee1f..c3830f0 100644 --- a/app/lib/prymn_web/components/layouts/auth.html.heex +++ b/app/lib/prymn_web/components/layouts/auth.html.heex @@ -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> diff --git a/app/lib/prymn_web/components/system_info.ex b/app/lib/prymn_web/components/system_info.ex index 92d7226..87a11a1 100644 --- a/app/lib/prymn_web/components/system_info.ex +++ b/app/lib/prymn_web/components/system_info.ex @@ -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> diff --git a/app/lib/prymn_web/controllers/page_controller.ex b/app/lib/prymn_web/controllers/page_controller.ex index 49200bd..5de66bd 100644 --- a/app/lib/prymn_web/controllers/page_controller.ex +++ b/app/lib/prymn_web/controllers/page_controller.ex @@ -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 diff --git a/app/lib/prymn_web/controllers/page_html.ex b/app/lib/prymn_web/controllers/page_html.ex index 5d553b4..27e02e5 100644 --- a/app/lib/prymn_web/controllers/page_html.ex +++ b/app/lib/prymn_web/controllers/page_html.ex @@ -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 diff --git a/app/lib/prymn_web/live/app_index_live.ex b/app/lib/prymn_web/live/app_index_live.ex index 76ad2d7..8c05669 100644 --- a/app/lib/prymn_web/live/app_index_live.ex +++ b/app/lib/prymn_web/live/app_index_live.ex @@ -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 diff --git a/app/lib/prymn_web/live/server_live/index.html.heex b/app/lib/prymn_web/live/server_live/index.html.heex index afee90f..9ff329d 100644 --- a/app/lib/prymn_web/live/server_live/index.html.heex +++ b/app/lib/prymn_web/live/server_live/index.html.heex @@ -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> diff --git a/app/lib/prymn_web/live/server_live/new_server.ex b/app/lib/prymn_web/live/server_live/new_server.ex index 3cf9d7b..96761c6 100644 --- a/app/lib/prymn_web/live/server_live/new_server.ex +++ b/app/lib/prymn_web/live/server_live/new_server.ex @@ -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> diff --git a/app/lib/prymn_web/live/server_live/show.ex b/app/lib/prymn_web/live/server_live/show.ex index bcb9f80..378eaf1 100644 --- a/app/lib/prymn_web/live/server_live/show.ex +++ b/app/lib/prymn_web/live/server_live/show.ex @@ -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 diff --git a/app/lib/prymn_web/live/server_live/show.html.heex b/app/lib/prymn_web/live/server_live/show.html.heex deleted file mode 100644 index c97cb76..0000000 --- a/app/lib/prymn_web/live/server_live/show.html.heex +++ /dev/null @@ -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> diff --git a/app/lib/prymn_web/live/user_confirmation_live.ex b/app/lib/prymn_web/live/user_confirmation_live.ex index 88a580e..2b449c7 100644 --- a/app/lib/prymn_web/live/user_confirmation_live.ex +++ b/app/lib/prymn_web/live/user_confirmation_live.ex @@ -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> diff --git a/app/lib/prymn_web/live/user_forgot_password_live.ex b/app/lib/prymn_web/live/user_forgot_password_live.ex index 9d0d575..c19349c 100644 --- a/app/lib/prymn_web/live/user_forgot_password_live.ex +++ b/app/lib/prymn_web/live/user_forgot_password_live.ex @@ -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> diff --git a/app/lib/prymn_web/live/user_login_live.ex b/app/lib/prymn_web/live/user_login_live.ex index 26a3d93..0693279 100644 --- a/app/lib/prymn_web/live/user_login_live.ex +++ b/app/lib/prymn_web/live/user_login_live.ex @@ -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> diff --git a/app/lib/prymn_web/live/user_registration_live.ex b/app/lib/prymn_web/live/user_registration_live.ex index f7c569e..2a202b0 100644 --- a/app/lib/prymn_web/live/user_registration_live.ex +++ b/app/lib/prymn_web/live/user_registration_live.ex @@ -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> diff --git a/app/lib/prymn_web/live/user_reset_password_live.ex b/app/lib/prymn_web/live/user_reset_password_live.ex index efb971e..5133511 100644 --- a/app/lib/prymn_web/live/user_reset_password_live.ex +++ b/app/lib/prymn_web/live/user_reset_password_live.ex @@ -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> diff --git a/app/lib/prymn_web/live/user_settings_live.ex b/app/lib/prymn_web/live/user_settings_live.ex index 1906e89..f9a4a4d 100644 --- a/app/lib/prymn_web/live/user_settings_live.ex +++ b/app/lib/prymn_web/live/user_settings_live.ex @@ -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> diff --git a/app/lib/prymn_web/router.ex b/app/lib/prymn_web/router.ex index ef30200..f0c1a52 100644 --- a/app/lib/prymn_web/router.ex +++ b/app/lib/prymn_web/router.ex @@ -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