Multi-factor authentication (#1817)

* Initial pass

* Tests for MFA and locale cleanup

* Brakeman

* Update two-factor authentication status styling

* Update app/models/user.rb

Co-authored-by: Zach Gollwitzer <zach@maybe.co>
Signed-off-by: Josh Pigford <josh@joshpigford.com>

* Refactor MFA verification and session handling in tests

---------

Signed-off-by: Josh Pigford <josh@joshpigford.com>
Co-authored-by: Zach Gollwitzer <zach@maybe.co>

app/views/mfa/backup_codes.html.erb

@@ -0,0 +1,29 @@
+<%
+  header_title t(".title")
+  header_description t(".description")
+%>
+
+<% content_for :sidebar do %>
+  <%= render "settings/nav" %>
+<% end %>
+
+<div class="space-y-4">
+  <h1 class="text-gray-900 text-xl font-medium mb-4"><%= t(".page_title") %></h1>
+  <%= settings_section title: t(".backup_codes_title"), subtitle: t(".backup_codes_description") do %>
+    <div class="space-y-6">
+      <div class="grid grid-cols-2 gap-4">
+        <% @backup_codes.each do |code| %>
+          <div class="p-3 bg-gray-100 rounded-lg font-mono text-lg">
+            <%= code %>
+          </div>
+        <% end %>
+      </div>
+
+      <div class="mt-6">
+        <%= link_to t(".continue"), settings_security_path, class: "w-full btn btn--primary" %>
+      </div>
+    </div>
+  <% end %>
+
+  <%= settings_nav_footer %>
+</div> 

app/views/mfa/new.html.erb

@@ -0,0 +1,45 @@
+<%
+  header_title t(".title")
+  header_description t(".description")
+%>
+
+<% content_for :sidebar do %>
+  <%= render "settings/nav" %>
+<% end %>
+
+<div class="space-y-4">
+  <h1 class="text-gray-900 text-xl font-medium mb-4"><%= t(".page_title") %></h1>
+  <%= settings_section title: t(".scan_title"), subtitle: t(".scan_description") do %>
+    <div class="space-y-6">
+      <div>
+        <%= generate_mfa_qr_code(Current.user.provisioning_uri) %>
+      </div>
+
+      <div>
+        <h3 class="text-lg font-medium leading-6 text-gray-900"><%= t(".verify_title") %></h3>
+        <div class="mt-2 text-sm text-gray-500">
+          <p><%= t(".verify_description") %></p>
+        </div>
+      </div>
+
+      <%= styled_form_with url: mfa_path, method: :post, class: "mt-5", data: { turbo: false } do |f| %>
+        <div>
+          <%= f.text_field :code,
+            required: true,
+            autofocus: true,
+            autocomplete: "one-time-code",
+            inputmode: "numeric",
+            pattern: "[0-9]*",
+            label: t(".code_label"),
+            placeholder: t(".code_placeholder") %>
+
+          <div class="flex justify-end mt-4">
+            <%= f.submit t(".verify_button"), class: "bg-gray-900 hover:bg-gray-700 cursor-pointer text-white rounded-lg px-3 py-2" %>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+
+  <%= settings_nav_footer %>
+</div>

app/views/mfa/verify.html.erb

@@ -0,0 +1,14 @@
+<%
+  header_title t(".title")
+  header_description t(".description")
+%>
+
+<%= styled_form_with url: verify_mfa_path, method: :post, class: "space-y-4" do |form| %>
+  <%= form.text_field :code,
+    required: true,
+    autofocus: true,
+    autocomplete: "one-time-code",
+    label: t(".page_title") %>
+
+  <%= form.submit t(".verify_button") %>
+<% end %>