livebook/lib/livebook_web/controllers/auth_html/index.html.heex

<div class="h-screen w-full px-4 py-8 bg-gray-900 flex justify-center items-center">
  <div class="max-w-[400px] w-full flex flex-col">
    <a href={~p"/"} class="mb-2 -ml-2">
      <img src={~p"/images/logo.png"} height="96" width="96" alt="livebook" />
    </a>
    <div class="mb-2 text-xl text-gray-100 font-medium">
      Authentication required
    </div>

    <div class="mb-8 text-sm text-gray-200 space-y-2">
      <p :if={@auth_mode == :password}>
        Type password to access the Livebook.
      </p>
      <p :if={@auth_mode == :token}>
        Please check out the console for authentication URL or type the token directly
        here.
      </p>
      <p :if={@auth_mode == :token}>
        To use password authentication, set the <code>LIVEBOOK_PASSWORD</code>
        environment variable.
      </p>
    </div>

    <div class="text-gray-50 w-full">
      <form method="post" class="flex flex-col w-full">
        <input type="hidden" value={Phoenix.Controller.get_csrf_token()} name="_csrf_token" />
        <div phx-feedback-for={@auth_mode} class={[@errors != [] && "show-errors"]}>
          <input
            :if={@auth_mode == :password}
            type="password"
            name="password"
            class="px-4 py-2 w-full text-gray-300 placeholder-gray-400 border border-gray-500 rounded-lg bg-transparent phx-form-error:border-red-600 phx-form-error:text-red-600 phx-form-error:placeholder-red-600"
            placeholder="Password"
            autofocus
          />
          <input
            :if={@auth_mode == :token}
            type="text"
            name="token"
            class="px-4 py-2 w-full text-gray-300 placeholder-gray-400 border border-gray-500 rounded-lg bg-transparent phx-form-error:border-red-600 phx-form-error:text-red-600 phx-form-error:placeholder-red-600"
            placeholder="Token"
            autofocus
          />
          <span
            :for={error <- @errors}
            class="mt-1 hidden text-red-600 text-sm phx-form-error:block"
          >
            <%= translate_error(error) %>
          </span>
        </div>
        <button
          type="submit"
          class="mt-4 py-2 w-full rounded-lg text-gray-200 bg-blue-600 hover:bg-blue-700 focus:bg-blue-700"
        >
          <span>Authenticate</span>
          <.remix_icon icon="arrow-right-line" class="ml-1 align-middle" />
        </button>
      </form>
    </div>
  </div>
</div>