136 lines
4.0 KiB
Elixir
136 lines
4.0 KiB
Elixir
defmodule DexiWeb.LoginLive do
|
|
use DexiWeb, :live_view
|
|
|
|
alias Dexi.GridsLoginHandler
|
|
|
|
@impl true
|
|
def mount(_params, %{"session_id" => session_id}, socket) do
|
|
if connected?(socket), do: Phoenix.PubSub.subscribe(Dexi.PubSub, session_id)
|
|
|
|
grids_url = GridsLoginHandler.get_signature_url(session_id)
|
|
|
|
socket =
|
|
socket
|
|
|> assign(:page_title, "Log in")
|
|
|> assign(:session_id, session_id)
|
|
|> assign_grids_url(grids_url)
|
|
|> schedule_refresh()
|
|
|
|
{:ok, socket}
|
|
end
|
|
|
|
@impl true
|
|
def handle_info({:pubkey_added, message_id}, socket) do
|
|
{:noreply, redirect(socket, to: ~p"/session/#{message_id}")}
|
|
end
|
|
|
|
def handle_info(:refresh_grids_url, socket) do
|
|
grids_url = GridsLoginHandler.get_signature_url(socket.assigns.session_id)
|
|
|
|
{:noreply,
|
|
socket
|
|
|> assign_grids_url(grids_url)
|
|
|> schedule_refresh()}
|
|
end
|
|
|
|
@impl true
|
|
def render(assigns) do
|
|
~H"""
|
|
<Layouts.app flash={@flash} current_scope={@current_scope}>
|
|
<section class={["mx-auto flex max-w-3xl flex-col items-center px-5 py-16 text-center sm:py-24"]}>
|
|
<p class={[
|
|
"text-xs font-black uppercase tracking-[0.28em] text-blue-grey"
|
|
]}>
|
|
Wallet authentication
|
|
</p>
|
|
<h1 class={["mt-4 text-4xl font-black tracking-[-0.05em] sm:text-6xl"]}>
|
|
Log in to Dexi
|
|
</h1>
|
|
<p class={["mt-5 max-w-xl text-base leading-7 text-blue-grey"]}>
|
|
Sign this one-time message with the account key you want to use. A new key creates a new user account.
|
|
</p>
|
|
|
|
<div
|
|
id="grids-login"
|
|
class={[
|
|
"mt-10 w-full rounded-3xl border border-muted-steel bg-slate-blue p-5 shadow-cyan-glow backdrop-blur sm:p-8"
|
|
]}
|
|
>
|
|
<div
|
|
id="grids-qr-code"
|
|
class={["mx-auto mb-7 w-fit rounded-2xl bg-cool-white p-4 shadow-sm"]}
|
|
>
|
|
{raw(@qr_code)}
|
|
</div>
|
|
<label
|
|
for="grids-url"
|
|
class={["block text-left text-xs font-black uppercase tracking-[0.18em]"]}
|
|
>
|
|
GRIDS URL
|
|
</label>
|
|
<input
|
|
id="grids-url"
|
|
name="grids-url"
|
|
type="text"
|
|
readonly
|
|
value={@grids_url}
|
|
class={[
|
|
"mt-3 w-full rounded-xl border border-muted-steel bg-deep-slate px-4 py-3 font-mono text-xs text-cool-white outline-none selection:bg-soft-violet"
|
|
]}
|
|
/>
|
|
<button
|
|
id="copy-grids-url"
|
|
type="button"
|
|
phx-hook="CopyToClipboard"
|
|
phx-update="ignore"
|
|
data-copy-target="#grids-url"
|
|
class={[
|
|
"mt-4 inline-flex w-full items-center justify-center rounded-xl bg-electric-cyan px-5 py-3 font-bold text-midnight transition hover:-translate-y-0.5 hover:bg-bright-cyan"
|
|
]}
|
|
>
|
|
Copy GRIDS URL
|
|
</button>
|
|
</div>
|
|
|
|
<ol class={[
|
|
"mt-9 grid w-full gap-3 text-left text-sm leading-6 text-blue-grey sm:grid-cols-3"
|
|
]}>
|
|
<li class={["rounded-2xl border border-muted-steel p-4"]}>
|
|
1. Open your wallet and select an account.
|
|
</li>
|
|
<li class={["rounded-2xl border border-muted-steel p-4"]}>
|
|
2. Open GRIDS URL and paste the code if needed.
|
|
</li>
|
|
<li class={["rounded-2xl border border-muted-steel p-4"]}>
|
|
3. Approve the message signature.
|
|
</li>
|
|
</ol>
|
|
</section>
|
|
</Layouts.app>
|
|
"""
|
|
end
|
|
|
|
defp schedule_refresh(socket) do
|
|
if connected?(socket) do
|
|
Process.send_after(
|
|
self(),
|
|
:refresh_grids_url,
|
|
Application.fetch_env!(:dexi, :login_url_refresh_interval_in_milliseconds)
|
|
)
|
|
end
|
|
|
|
socket
|
|
end
|
|
|
|
defp assign_grids_url(socket, grids_url) do
|
|
qr_code =
|
|
grids_url
|
|
|> EQRCode.encode()
|
|
|> EQRCode.svg(%{color: "var(--color-electric-cyan)", width: 256})
|
|
|
|
socket
|
|
|> assign(:grids_url, grids_url)
|
|
|> assign(:qr_code, qr_code)
|
|
end
|
|
end
|