Device connect live updated

apps/fg_http/assets/js/hooks/hooks.js

@@ -3,9 +3,6 @@ import { qrEncode } from "./qr_code.js"
 let Hooks = {}
 
 Hooks.QrEncode = {
-  mounted() {
-    qrEncode()
-  },
   updated() {
     qrEncode()
   }

apps/fg_http/lib/fg_http_web/live/new_device_live.ex

@@ -4,7 +4,20 @@ defmodule FgHttpWeb.NewDeviceLive do
   alias FgHttp.Devices.Device
 
   def mount(_params, %{"current_user_id" => user_id}, socket) do
+    if connected?(socket), do: wait_for_device(socket)
+
     device = %Device{user_id: user_id}
     {:ok, assign(socket, :device, device)}
   end
+
+  defp wait_for_device(socket) do
+    # TODO: pass socket to fg_vpn somehow
+    IO.inspect(socket)
+    :timer.send_after(10000, self(), :update)
+  end
+
+  def handle_info(:update, socket) do
+    new_device = Map.merge(socket.assigns.device, %{public_key: "foobar"})
+    {:noreply, assign(socket, :device, new_device)}
+  end
 end

apps/fg_http/lib/fg_http_web/live/new_device_live.html.leex

@@ -5,7 +5,7 @@
 <div class="cf">
   <div class="fl w-50">
 <pre class="bg-near-white pl4">
-<code id="wg-conf" phx-hook="QrEncode">
+<code id="wg-conf">
 [Peer]
 PublicKey = <%= Application.fetch_env!(:fg_vpn, :pubkey) %>
 AllowedIPs = 0.0.0.0/0, ::/0
@@ -24,4 +24,10 @@ Endpoint = <%= Application.fetch_env!(:fg_http, :vpn_endpoint) %>
 
 <p>
   Waiting for device connection...
+  <span phx-hook="QrEncode">
+    <%= if @device.public_key do %>
+      Connected! Device Public Key: <%= @device.public_key %>
+      <a href="#">Configure your device -></a>
+    <% end %>
+  </span>
 </p>