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"