From 178111ce804365ee7a12c4c3dff9672d7d9408ca Mon Sep 17 00:00:00 2001
From: shibao <shibao@bubbletea.dev>
Date: Thu, 26 Jan 2023 00:46:27 -0500
Subject: [PATCH] add qr code for invite link

---
 changelog.md                            |  1 +
 lib/memex_web/components/invite_card.ex |  5 ++++
 lib/memex_web/views/view_helpers.ex     | 32 +++++++++++++++++++++++++
 mix.exs                                 |  1 +
 mix.lock                                |  1 +
 5 files changed, 40 insertions(+)

diff --git a/changelog.md b/changelog.md
index fe30023..1edef63 100644
--- a/changelog.md
+++ b/changelog.md
@@ -2,6 +2,7 @@
 - Update dependencies
 - Show topbar on form submit/page refresh
 - Make loading/reconnection less intrusive
+- Add QR code for invite link
 
 # v0.1.6
 - fix formatting in note/context/step contents
diff --git a/lib/memex_web/components/invite_card.ex b/lib/memex_web/components/invite_card.ex
index 598851a..c4389bb 100644
--- a/lib/memex_web/components/invite_card.ex
+++ b/lib/memex_web/components/invite_card.ex
@@ -33,6 +33,11 @@ defmodule MemexWeb.Components.InviteCard do
         </h2>
       <% end %>
 
+      <.qr_code
+        content={Routes.user_registration_url(Endpoint, :new, invite: @invite.token)}
+        filename={@invite.name}
+      />
+
       <div class="flex flex-row flex-wrap justify-center items-center">
         <code
           id={"code-#{@invite.id}"}
diff --git a/lib/memex_web/views/view_helpers.ex b/lib/memex_web/views/view_helpers.ex
index 44d8955..efa6877 100644
--- a/lib/memex_web/views/view_helpers.ex
+++ b/lib/memex_web/views/view_helpers.ex
@@ -63,4 +63,36 @@ defmodule MemexWeb.ViewHelpers do
     <% end %>
     """
   end
+
+  @doc """
+  Displays content in a QR code as a base64 encoded PNG
+  """
+  @spec qr_code_image(String.t()) :: String.t()
+  @spec qr_code_image(String.t(), width :: non_neg_integer()) :: String.t()
+  def qr_code_image(content, width \\ 384) do
+    img_data =
+      content
+      |> EQRCode.encode()
+      |> EQRCode.png(width: width, background_color: <<39, 39, 42>>, color: <<255, 255, 255>>)
+      |> Base.encode64()
+
+    "data:image/png;base64," <> img_data
+  end
+
+  @doc """
+  Creates a downloadable QR Code element
+  """
+
+  attr :content, :string, required: true
+  attr :filename, :string, default: "qrcode", doc: "filename without .png extension"
+  attr :image_class, :string, default: "w-64 h-max"
+  attr :width, :integer, default: 384, doc: "width of png to generate"
+
+  def qr_code(assigns) do
+    ~H"""
+    <a href={qr_code_image(@content)} download={@filename <> ".png"}>
+      <img class={@image_class} alt={@filename} src={qr_code_image(@content)} />
+    </a>
+    """
+  end
 end
diff --git a/mix.exs b/mix.exs
index fb9f274..db98b45 100644
--- a/mix.exs
+++ b/mix.exs
@@ -70,6 +70,7 @@ defmodule Memex.MixProject do
       {:jason, "~> 1.2"},
       {:plug_cowboy, "~> 2.5"},
       {:ecto_psql_extras, "~> 0.6"},
+      {:eqrcode, "~> 0.1.10"},
       {:credo, "~> 1.5", only: [:dev, :test], runtime: false},
       {:dialyxir, "~> 1.0", only: [:dev, :test], runtime: false}
     ]
diff --git a/mix.lock b/mix.lock
index 0382bcc..a20a311 100644
--- a/mix.lock
+++ b/mix.lock
@@ -16,6 +16,7 @@
   "ecto_psql_extras": {:hex, :ecto_psql_extras, "0.7.10", "e14d400930f401ca9f541b3349212634e44027d7f919bbb71224d7ac0d0e8acd", [:mix], [{:ecto_sql, "~> 3.4", [hex: :ecto_sql, repo: "hexpm", optional: false]}, {:postgrex, "~> 0.15.7 or ~> 0.16.0", [hex: :postgrex, repo: "hexpm", optional: false]}, {:table_rex, "~> 3.1.1", [hex: :table_rex, repo: "hexpm", optional: false]}], "hexpm", "505e8cd81e4f17c090be0f99e92b1b3f0fd915f98e76965130b8ccfb891e7088"},
   "ecto_sql": {:hex, :ecto_sql, "3.9.2", "34227501abe92dba10d9c3495ab6770e75e79b836d114c41108a4bf2ce200ad5", [:mix], [{:db_connection, "~> 2.4.1 or ~> 2.5", [hex: :db_connection, repo: "hexpm", optional: false]}, {:ecto, "~> 3.9.2", [hex: :ecto, repo: "hexpm", optional: false]}, {:myxql, "~> 0.6.0", [hex: :myxql, repo: "hexpm", optional: true]}, {:postgrex, "~> 0.16.0 or ~> 1.0", [hex: :postgrex, repo: "hexpm", optional: true]}, {:tds, "~> 2.1.1 or ~> 2.2", [hex: :tds, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4.0 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "1eb5eeb4358fdbcd42eac11c1fbd87e3affd7904e639d77903c1358b2abd3f70"},
   "elixir_make": {:hex, :elixir_make, "0.7.3", "c37fdae1b52d2cc51069713a58c2314877c1ad40800a57efb213f77b078a460d", [:mix], [{:castore, "~> 0.1", [hex: :castore, repo: "hexpm", optional: true]}], "hexpm", "24ada3e3996adbed1fa024ca14995ef2ba3d0d17b678b0f3f2b1f66e6ce2b274"},
+  "eqrcode": {:hex, :eqrcode, "0.1.10", "6294fece9d68ad64eef1c3c92cf111cfd6469f4fbf230a2d4cc905a682178f3f", [:mix], [], "hexpm", "da30e373c36a0fd37ab6f58664b16029919896d6c45a68a95cc4d713e81076f1"},
   "erlex": {:hex, :erlex, "0.2.6", "c7987d15e899c7a2f34f5420d2a2ea0d659682c06ac607572df55a43753aa12e", [:mix], [], "hexpm", "2ed2e25711feb44d52b17d2780eabf998452f6efda104877a3881c2f8c0c0c75"},
   "ex_doc": {:hex, :ex_doc, "0.29.1", "b1c652fa5f92ee9cf15c75271168027f92039b3877094290a75abcaac82a9f77", [:mix], [{:earmark_parser, "~> 1.4.19", [hex: :earmark_parser, repo: "hexpm", optional: false]}, {:makeup_elixir, "~> 0.14", [hex: :makeup_elixir, repo: "hexpm", optional: false]}, {:makeup_erlang, "~> 0.1", [hex: :makeup_erlang, repo: "hexpm", optional: false]}], "hexpm", "b7745fa6374a36daf484e2a2012274950e084815b936b1319aeebcf7809574f6"},
   "expo": {:hex, :expo, "0.3.0", "13127c1d5f653b2927f2616a4c9ace5ae372efd67c7c2693b87fd0fdc30c6feb", [:mix], [], "hexpm", "fb3cd4bf012a77bc1608915497dae2ff684a06f0fa633c7afa90c4d72b881823"},