diff --git a/lib/livebook_web/components/form_components.ex b/lib/livebook_web/components/form_components.ex index e809eb32f..e85ab7477 100644 --- a/lib/livebook_web/components/form_components.ex +++ b/lib/livebook_web/components/form_components.ex @@ -17,6 +17,7 @@ defmodule LivebookWeb.FormComponents do attr :help, :string, default: nil attr :type, :string, default: "text" attr :class, :string, default: nil + attr :outer_prefix, :string, default: nil attr :rest, :global, include: ~w(autocomplete readonly disabled step min max) @@ -25,30 +26,80 @@ defmodule LivebookWeb.FormComponents do ~H""" <.field_wrapper id={@id} name={@name} label={@label} errors={@errors} help={@help}> - + <%= if @outer_prefix do %> +
+ + {@outer_prefix} + + + +
+ <% else %> + + <% end %> """ end + defp outer_prefixed_input_wrapper_classes(errors) do + [ + "relative flex items-stretch rounded-lg border focus-within:border-blue-600", + if errors == [] do + "border-gray-200" + else + "border-red-600" + end + ] + end + defp input_classes(errors) do [ - "w-full px-3 py-2 text-sm font-normal border rounded-lg placeholder-gray-400 disabled:opacity-70 disabled:cursor-not-allowed focus:border-blue-600 focus-visible:outline-none", - if errors == [] do - "bg-gray-50 border-gray-200 text-gray-600" - else - "bg-red-50 border-red-600 text-red-600" - end, + base_input_classes(), + "border rounded-lg focus:border-blue-600", + error_color_classes(errors), + if(errors != [], do: "border-red-600"), "invalid:bg-red-50 invalid:border-red-600 invalid:text-red-600" ] end + defp outer_prefixed_input_classes(errors) do + [ + base_input_classes(), + "border-0 rounded-none rounded-r-lg focus:ring-0 focus:outline-none", + error_color_classes(errors), + "invalid:text-red-600" + ] + end + + defp base_input_classes do + "w-full px-3 py-2 text-sm font-normal placeholder-gray-400 disabled:opacity-70 disabled:cursor-not-allowed focus-visible:outline-none" + end + + defp error_color_classes(errors) do + if errors == [] do + "bg-gray-50 text-gray-600" + else + "bg-red-50 text-red-600" + end + end + @doc """ Renders a textarea input with label and error messages. """ diff --git a/lib/livebook_web/live/hub/secret_form_component.ex b/lib/livebook_web/live/hub/secret_form_component.ex index ff1280017..f0ed5df1a 100644 --- a/lib/livebook_web/live/hub/secret_form_component.ex +++ b/lib/livebook_web/live/hub/secret_form_component.ex @@ -56,6 +56,7 @@ defmodule LivebookWeb.Hub.SecretFormComponent do <.text_field field={f[:name]} label="Name (alphanumeric and underscore)" + outer_prefix="LB_" autofocus={@secret_name == nil} spellcheck="false" autocomplete="off" diff --git a/lib/livebook_web/live/session_live/secrets_component.ex b/lib/livebook_web/live/session_live/secrets_component.ex index d3a18c1ba..727aebdd5 100644 --- a/lib/livebook_web/live/session_live/secrets_component.ex +++ b/lib/livebook_web/live/session_live/secrets_component.ex @@ -107,6 +107,7 @@ defmodule LivebookWeb.SessionLive.SecretsComponent do <.text_field field={f[:name]} label="Name (alphanumeric and underscore)" + outer_prefix="LB_" autofocus={@prefill_secret_name == nil} spellcheck="false" autocomplete="off"