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

<div class="h-screen w-full flex flex-col sm:flex-row">
  <div class="w-full h-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>

  <div
    :if={@any_public_app? or @empty_apps_path?}
    class="w-full h-full px-4 py-8 flex justify-center items-center"
  >
    <div class="w-full flex flex-col items-center">
      <div class="text-gray-700 text-xl font-medium">
        Public apps
      </div>
      <div :if={@any_public_app?} class="w-full mt-5 mx-auto max-w-[400px]">
        <%= live_render(@conn, LivebookWeb.AuthAppListLive) %>
      </div>
      <div :if={@empty_apps_path?} class="mt-5 text-gray-600">
        <div>
          No app notebooks found. <br />Follow these steps to list your apps here:
        </div>
        <ol class="mt-4 pl-4 flex flex-col space-y-1 list-decimal list-inside">
          <li>
            Open a notebook
          </li>
          <li>
            Click <.remix_icon icon="rocket-line" class="align-sub text-lg" />
            in the sidebar and configure the app as public
          </li>
          <li>
            Save the notebook to the
            <span class="font-medium"><%= Livebook.Config.apps_path() %></span>
            folder
          </li>
          <li>
            Relaunch your Livebook app
          </li>
        </ol>
      </div>
    </div>
  </div>
</div>