add 2FA

app/views/devise/sessions/otp.html.erb

@@ -0,0 +1,19 @@
+<div class="max-w-xl mx-auto px-2">
+  <h1 class="text-4xl font-bold text-center my-8">Log In</h1>
+  <%= form_for(resource, as: resource_name, html: { class: 'space-y-6' }, data: { turbo: params[:redir].blank? }, url: session_path(resource_name)) do |f| %>
+    <%= f.hidden_field :email %>
+    <%= f.hidden_field :password %>
+    <% if params[:redir].present? %>
+      <%= hidden_field_tag :redir, params[:redir] %>
+    <% end %>
+    <div class="space-y-2">
+      <div class="form-control">
+        <%= f.label :otp_attempt, 'Two-Factor Code', class: 'label' %>
+        <%= f.text_field :otp_attempt, autofocus: true, placeholder: 'XXX-XXX', required: true, class: 'base-input' %>
+      </div>
+    </div>
+    <div class="form-control">
+      <%= f.button button_title(title: 'Log In', disabled_with: 'Logging In'), class: 'base-button' %>
+    </div>
+  <% end %>
+</div>

app/views/mfa_setup/edit.html.erb

@@ -0,0 +1,13 @@
+<%= render 'shared/turbo_modal', title: 'Remove 2FA' do %>
+  <%= form_for '', url: mfa_setup_path, method: :delete, data: { turbo_frame: :_top } do |f| %>
+    <div class="form-control my-6 space-y-2">
+      <%= f.text_field :otp_attempt, required: true, placeholder: 'XXX-XXX', class: 'base-input text-center' %>
+      <span>
+        <%= @error_message %>
+      </span>
+    </div>
+    <div class="form-control mt-4">
+      <%= f.button button_title(title: 'Remove 2FA'), class: 'base-button' %>
+    </div>
+  <% end %>
+<% end %>

app/views/mfa_setup/new.html.erb

@@ -0,0 +1,19 @@
+<%= render 'shared/turbo_modal', title: 'Setup 2FA' do %>
+  <%= form_for '', url: mfa_setup_path, data: { turbo_frame: :_top } do |f| %>
+    <p class="text-center">
+      Use an authenticator mobile app like Google Authenticator or 1Password to scan the QR code below.
+    </p>
+    <div>
+      <%== RQRCode::QRCode.new(@provision_url).as_svg(viewbox: true, svg_attributes: { class: 'w-80 h-80 my-4 mx-auto' }) %>
+    </div>
+    <div class="form-control my-6 space-y-2">
+      <%= f.text_field :otp_attempt, required: true, placeholder: 'XXX-XXX', class: 'base-input text-center' %>
+      <span>
+        <%= @error_message %>
+      </span>
+    </div>
+    <div class="form-control mt-4">
+      <%= f.button button_title(title: 'Save'), class: 'base-button' %>
+    </div>
+  <% end %>
+<% end %>

app/views/profile/index.html.erb

@@ -35,6 +35,26 @@
         <%= f.button button_title(title: 'Update', disabled_with: 'Updating'), class: 'base-button' %>
       </div>
     <% end %>
+    <p class="text-2xl font-bold mt-8 mb-4">Two-Factor Authentication</p>
+    <div class="space-y-4">
+      <% if current_user.otp_required_for_login %>
+        <p class="flex items-center space-x-1">
+          <%= svg_icon('circle_check', class: 'stroke-success inline flex-none w-5 h-5') %>
+          <span>
+            2FA has been configured.
+          </span>
+        </p>
+        <a href="<%= edit_mfa_setup_path %>" data-turbo-frame="modal" class="white-button w-full !px-8">🔓 Remove 2FA</a>
+      <% else %>
+        <p class="flex items-center space-x-1">
+          <%= svg_icon('info_circle', class: 'stroke-warning inline flex-none w-5 h-5') %>
+          <span>
+            2FA is not configured.
+          </span>
+        </p>
+        <a href="<%= new_mfa_setup_path %>" data-turbo-frame="modal" class="base-button w-full !px-8">🔒 Set up 2FA</a>
+      <% end %>
+    </div>
   </div>
   <div class="w-0 md:w-52"></div>
 </div>