Second step of the onboarding (#1935)

assets/tailwind.config.js

@@ -100,6 +100,7 @@ module.exports = {
           800: "#854D0E",
           900: "#713F12",
         },
+        "brand-pink": "#e44c75",
       },
     },
   },

lib/livebook_web/live/hub/new_live.ex

@@ -86,7 +86,7 @@ defmodule LivebookWeb.Hub.NewLive do
   def render(assigns) do
     ~H"""
     <LayoutHelpers.layout current_page="/hub" current_user={@current_user} saved_hubs={@saved_hubs}>
-      <div class="p-4 md:px-12 md:py-7 max-w-screen-md mx-auto space-y-8">
+      <div class="flex flex-col p-4 md:px-12 md:py-7 max-w-screen-md mx-auto space-y-8">
         <div>
           <LayoutHelpers.title text="Add Hub" />
           <p class="mt-4 text-gray-700">
@@ -137,23 +137,32 @@ defmodule LivebookWeb.Hub.NewLive do
               label="Livebook Teams Key"
             />
 
-            <div :if={@requested_code} class="grid grid-cols-1 gap-3">
-              <span><%= @request_code_info %></span>
-
-              <.link navigate={@verification_uri} target="_blank" class="font-bold text-blue-500">
-                <%= @verification_uri %>
-              </.link>
-
-              <span><%= @org.user_code %></span>
-            </div>
-
             <button
               :if={!@requested_code}
               class="button-base button-blue self-start"
-              phx-disable-with="Creating..."
+              phx-disable-with="Loading..."
             >
               <%= @button_label %>
             </button>
+            <div class="invisible"></div>
+            <div :if={@requested_code} class="flex flex-col rounded-xl bg-gray-50 px-10 py-6 mt-10">
+              <div class="flex flex-col items-center rounded-xl bg-gray-50">
+                <span class="text-base font-semibold text-center text-gray-900">
+                  <%= @request_code_info %>
+                </span>
+                <.link>
+                  <div class=" text-center text-sm mb-6 mt-2">
+                    <a href={@verification_uri} target="_blank" class="text-blue-600 ">
+                      Visit Livebook Teams
+                    </a>
+                    <span>
+                      and paste the code below
+                    </span>
+                  </div>
+                </.link>
+                <.copyclip content={@org.user_code} />
+              </div>
+            </div>
           </.form>
         </div>
       </div>
@@ -161,6 +170,34 @@ defmodule LivebookWeb.Hub.NewLive do
     """
   end
 
+  defp copyclip(assigns) do
+    ~H"""
+    <div
+      id="clipboard"
+      class="flex items-center justify-between border rounded-lg px-4 py-2.5 bg-white"
+    >
+      <div class="icon-button invisible">
+        <.remix_icon icon="clipboard-line" class="text-lg" />
+      </div>
+
+      <div
+        class="text-brand-pink font-semibold text-xl leading-none"
+        id="clipboard-code"
+        phx-no-format
+      ><%= @content %></div>
+
+      <button
+        class="icon-button ml-4"
+        data-el-clipcopy
+        phx-click={JS.dispatch("lb:clipcopy", to: "#clipboard-code")}
+        type="button"
+      >
+        <.remix_icon icon="clipboard-line" class="text-lg" />
+      </button>
+    </div>
+    """
+  end
+
   defp tab_button(assigns) do
     ~H"""
     <li class="group/toggle w-full">
@@ -178,19 +215,17 @@ defmodule LivebookWeb.Hub.NewLive do
           "group button flex w-full sm:w-72 items-center justify-center gap-1 md:gap-2 rounded-lg border py-3 md:py-2.5 px-5 transition-opacity duration-100",
           selected_tab_button(@id, @selected)
         ]}>
-          <span>
-            <.remix_icon
-              icon={@icon}
-              class={[
-                "group-hover:text-blue-500 text-lg",
-                if @selected == @id do
-                  "text-blue-500"
-                else
-                  "text-gray-500"
-                end
-              ]}
-            />
-          </span>
+          <.remix_icon
+            icon={@icon}
+            class={[
+              "group-hover:text-blue-600 text-lg",
+              if @selected == @id do
+                "text-blue-600"
+              else
+                "text-gray-500"
+              end
+            ]}
+          />
           <span class="truncate text-sm font-medium">
             <%= @title %>
           </span>
@@ -313,8 +348,7 @@ defmodule LivebookWeb.Hub.NewLive do
     |> assign(
       org: org,
       button_label: "Join",
-      request_code_info:
-        "Access the following URL and input the User Code below to confirm the Organization creation."
+      request_code_info: "Authenticate with your organization"
     )
     |> assign_form(changeset)
   end
@@ -327,8 +361,7 @@ defmodule LivebookWeb.Hub.NewLive do
     |> assign(
       org: org,
       button_label: "Create",
-      request_code_info:
-        "Access the following URL and input the User Code below to confirm to join an Organization."
+      request_code_info: "Verify your new organization"
     )
     |> assign_form(changeset)
   end