mirror of
https://github.com/livebook-dev/livebook.git
synced 2024-09-20 10:05:57 +08:00
Second step of the onboarding (#1935)
This commit is contained in:
parent
740cbdbd83
commit
b0fd445291
|
@ -100,6 +100,7 @@ module.exports = {
|
||||||
800: "#854D0E",
|
800: "#854D0E",
|
||||||
900: "#713F12",
|
900: "#713F12",
|
||||||
},
|
},
|
||||||
|
"brand-pink": "#e44c75",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
@ -86,7 +86,7 @@ defmodule LivebookWeb.Hub.NewLive do
|
||||||
def render(assigns) do
|
def render(assigns) do
|
||||||
~H"""
|
~H"""
|
||||||
<LayoutHelpers.layout current_page="/hub" current_user={@current_user} saved_hubs={@saved_hubs}>
|
<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>
|
<div>
|
||||||
<LayoutHelpers.title text="Add Hub" />
|
<LayoutHelpers.title text="Add Hub" />
|
||||||
<p class="mt-4 text-gray-700">
|
<p class="mt-4 text-gray-700">
|
||||||
|
@ -137,23 +137,32 @@ defmodule LivebookWeb.Hub.NewLive do
|
||||||
label="Livebook Teams Key"
|
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
|
<button
|
||||||
:if={!@requested_code}
|
:if={!@requested_code}
|
||||||
class="button-base button-blue self-start"
|
class="button-base button-blue self-start"
|
||||||
phx-disable-with="Creating..."
|
phx-disable-with="Loading..."
|
||||||
>
|
>
|
||||||
<%= @button_label %>
|
<%= @button_label %>
|
||||||
</button>
|
</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>
|
</.form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -161,6 +170,34 @@ defmodule LivebookWeb.Hub.NewLive do
|
||||||
"""
|
"""
|
||||||
end
|
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
|
defp tab_button(assigns) do
|
||||||
~H"""
|
~H"""
|
||||||
<li class="group/toggle w-full">
|
<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",
|
"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)
|
selected_tab_button(@id, @selected)
|
||||||
]}>
|
]}>
|
||||||
<span>
|
<.remix_icon
|
||||||
<.remix_icon
|
icon={@icon}
|
||||||
icon={@icon}
|
class={[
|
||||||
class={[
|
"group-hover:text-blue-600 text-lg",
|
||||||
"group-hover:text-blue-500 text-lg",
|
if @selected == @id do
|
||||||
if @selected == @id do
|
"text-blue-600"
|
||||||
"text-blue-500"
|
else
|
||||||
else
|
"text-gray-500"
|
||||||
"text-gray-500"
|
end
|
||||||
end
|
]}
|
||||||
]}
|
/>
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
<span class="truncate text-sm font-medium">
|
<span class="truncate text-sm font-medium">
|
||||||
<%= @title %>
|
<%= @title %>
|
||||||
</span>
|
</span>
|
||||||
|
@ -313,8 +348,7 @@ defmodule LivebookWeb.Hub.NewLive do
|
||||||
|> assign(
|
|> assign(
|
||||||
org: org,
|
org: org,
|
||||||
button_label: "Join",
|
button_label: "Join",
|
||||||
request_code_info:
|
request_code_info: "Authenticate with your organization"
|
||||||
"Access the following URL and input the User Code below to confirm the Organization creation."
|
|
||||||
)
|
)
|
||||||
|> assign_form(changeset)
|
|> assign_form(changeset)
|
||||||
end
|
end
|
||||||
|
@ -327,8 +361,7 @@ defmodule LivebookWeb.Hub.NewLive do
|
||||||
|> assign(
|
|> assign(
|
||||||
org: org,
|
org: org,
|
||||||
button_label: "Create",
|
button_label: "Create",
|
||||||
request_code_info:
|
request_code_info: "Verify your new organization"
|
||||||
"Access the following URL and input the User Code below to confirm to join an Organization."
|
|
||||||
)
|
)
|
||||||
|> assign_form(changeset)
|
|> assign_form(changeset)
|
||||||
end
|
end
|
||||||
|
|
Loading…
Reference in a new issue