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 %>

app/views/settings/_nav.html.erb

@@ -21,6 +21,9 @@
         <li>
           <%= sidebar_link_to t(".preferences_label"), settings_preferences_path, icon: "bolt" %>
         </li>
+        <li>
+          <%= sidebar_link_to t(".security_label"), settings_security_path, icon: "shield-check" %>
+        </li>
         <% if self_hosted? %>
           <li>
             <%= sidebar_link_to t(".self_hosting_label"), settings_hosting_path, icon: "database" %>

app/views/settings/securities/show.html.erb

@@ -0,0 +1,45 @@
+<% 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(".mfa_title"), subtitle: t(".mfa_description") do %>
+    <div class="space-y-4">
+      <div class="p-3 shadow-xs bg-white border border-alpha-black-200 rounded-lg flex justify-between items-center">
+        <div class="flex items-center gap-3">
+          <div class="w-9 h-9 rounded-full bg-gray-25 flex justify-center items-center">
+            <%= lucide_icon "shield-check", class: "w-5 h-5 text-gray-500" %>
+          </div>
+
+          <div class="text-sm space-y-1">
+            <% if Current.user.otp_required? %>
+              <p class="text-gray-900">Two-factor authentication is <span class="font-medium text-green-600">enabled</span></p>
+              <p class="text-gray-500">Your account is protected with an additional layer of security.</p>
+            <% else %>
+              <p class="text-gray-900">Two-factor authentication is <span class="font-medium text-red-600">disabled</span></p>
+              <p class="text-gray-500">Enable 2FA to add an extra layer of security to your account.</p>
+            <% end %>
+          </div>
+        </div>
+
+        <% if Current.user.otp_required? %>
+          <%= button_to t(".disable_mfa"), disable_mfa_path, 
+            method: :delete,
+            class: "btn btn--secondary flex items-center gap-1",
+            data: { turbo_confirm: {
+              title: t(".disable_mfa_confirm"),
+              body: t(".disable_mfa_confirm"),
+              accept: t(".disable_mfa"),
+              acceptClass: "w-full bg-red-500 text-white rounded-xl text-center p-[10px] border mb-2"
+            } } %>
+        <% else %>
+          <%= link_to t(".enable_mfa"), new_mfa_path,
+            class: "btn btn--primary flex items-center gap-1" %>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+
+  <%= settings_nav_footer %>
+</div>