Improve authentication form feedback for the user (#1543)

lib/livebook_web/controllers/auth_controller.ex

@@ -15,8 +15,8 @@ defmodule LivebookWeb.AuthController do
     end
   end
 
-  def index(conn, _params) do
+  def index(conn, params) do
-    render(conn, "index.html", auth_mode: Livebook.Config.auth_mode())
+    render(conn, "index.html", auth_mode: Livebook.Config.auth_mode(), errors: params["errors"])
   end
 
   def authenticate(conn, %{"password" => password}) do
@@ -25,7 +25,7 @@ defmodule LivebookWeb.AuthController do
     if AuthPlug.authenticated?(conn, :password) do
       redirect_to(conn)
     else
-      index(conn, %{})
+      render_form_error(conn)
     end
   end
 
@@ -35,10 +35,16 @@ defmodule LivebookWeb.AuthController do
     if AuthPlug.authenticated?(conn, :token) do
       redirect_to(conn)
     else
-      index(conn, %{})
+      render_form_error(conn)
     end
   end
 
+  defp render_form_error(conn) do
+    index(conn, %{
+      "errors" => [{"%{auth_mode} is invalid", [auth_mode: Livebook.Config.auth_mode()]}]
+    })
+  end
+
   defp redirect_to(conn) do
     conn
     |> then(fn conn ->

lib/livebook_web/templates/auth/index.html.eex

@@ -19,10 +19,18 @@
       <form method="post" class="flex flex-col space-y-4 items-center">
         <input type="hidden" value="<%= Phoenix.Controller.get_csrf_token() %>" name="_csrf_token"/>
         <%= if @auth_mode == :password do %>
+          <div phx-feedback-for="password" class="<%= if(@errors, do: "show-errors", else: "") %>">
           <input type="password" name="password" class="input" placeholder="Password" autofocus />
         <% else %>
+          <div phx-feedback-for="token" class="<%= if(@errors, do: "show-errors", else: "") %>">
           <input type="text" name="token" class="input" placeholder="Token" autofocus />
         <% end %>
+        <%= for error <- @errors || [] do %>
+          <span class="mt-1 hidden text-red-600 text-sm phx-form-error:block">
+            <%= translate_error(error) %>
+          </span>
+        <% end %>
+        </div>
         <button type="submit" class="button-base button-blue">
           Authenticate
         </button>