recovery codes before 2fa setup

lib/recognizer_web/controllers/accounts/user_settings_controller.ex

@@ -89,7 +89,20 @@ defmodule RecognizerWeb.Accounts.UserSettingsController do
 
     Accounts.generate_and_cache_new_two_factor_settings(user, preference)
 
-    redirect(conn, to: Routes.user_settings_path(conn, :two_factor))
+    redirect(conn, to: Routes.user_settings_path(conn, :review))
+  end
+
+  def review(conn, _params) do
+    user = Authentication.fetch_current_user(conn)
+    {:ok, %{recovery_codes: recovery_codes}} = Accounts.get_new_two_factor_settings(user)
+
+    recovery_block =
+      recovery_codes
+      |> Enum.map(& &1.code)
+      |> Enum.map(& &1 <> "\n")
+
+    conn
+    |> render("recovery_codes.html", recovery_block: recovery_block)
   end
 
   defp assign_email_and_password_changesets(conn, _opts) do

lib/recognizer_web/router.ex

@@ -127,5 +127,6 @@ defmodule RecognizerWeb.Router do
     put "/settings", UserSettingsController, :update
     get "/settings/two-factor", UserSettingsController, :two_factor
     post "/settings/two-factor", UserSettingsController, :two_factor_confirm
+    get "/settings/two-factor/review", UserSettingsController, :review
   end
 end

lib/recognizer_web/templates/accounts/user_settings/recovery_codes.html.eex

@@ -0,0 +1,27 @@
+<div class="box">
+    <h2 class="title is-2 mb-5 has-text-centered-mobile">Copy Recovery Codes</h2>
+
+    <div>
+        <p class="py-4">
+            Recovery codes are used to access your account if you have lost access to your device.
+        </p>
+
+        <p class="py-4">
+            <strong>
+                Download, print or copy your recovery codes before continuing
+                two-factor authentication setup.
+            </strong>
+        </p>
+    </div>
+
+    <div>
+        <pre><code><%= @recovery_block %></code></pre>
+    </div>
+
+    <div class="buttons is-right mt-5">
+        <div class="control">
+            <%= link "Continue", to: Routes.user_settings_path(@conn, :two_factor), class: "button is-secondary" %>
+        </div>
+    </div>
+
+</div>