main
 1<% content_for :page_title, t(".title") %>
 2<div class="container">
 3  <div class="columns is-centered">
 4    <div class="column is-half">
 5      <h1 class="title"><%= t('.title') %></h1>
 6      <p class="content"><%= t('.blurb') %></p>
 7      <div class="box content">
 8        <h2><%= t('.step_1') %></h2>
 9        <p><%= t('.step_1_blurb_html') %></p>
10        <a href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2"><span class="icon is-large"><i class="fab fa-android fa-3x" aria-hidden="true"></i></span></a>
11        <a href="https://itunes.apple.com/us/app/google-authenticator/id388497605?mt=8"><span class="icon is-large"><i class="fab fa-apple fa-3x" aria-hidden="true"></i></span></a>
12      </div>
13      <div class="box content">
14        <h2><%= t('.step_2') %></h2>
15        <div data-controller="mfa--setup">
16          <canvas id="canvas" data-target="mfa--setup.canvas"></canvas>
17          <%= form_with model: current_user, url: '#' do |form| %>
18            <div class="field" data-controller="clipboard">
19              <%= form.label :mfa_secret %>
20              <div class="control">
21                <%= form.text_field :mfa_secret, class: 'input', readonly: :readonly, data: { target: 'mfa--setup.secret clipboard.source' } %>
22              </div>
23              <div class="control">
24                <button type="button" data-action="clipboard#copy" class="button clipboard-button"><%= t('.copy') %></button>
25              </div>
26            </div>
27            <div class="field" data-controller="clipboard">
28              <%= form.label :provisioning_uri %>
29              <div class="control">
30                <%= form.text_field :provisioning_uri, value: current_user.mfa.provisioning_uri, class: 'input', readonly: :readonly, data: { target: 'clipboard.source' } %>
31              </div>
32              <div class="control">
33                <button type="button" data-action="clipboard#copy" class="button clipboard-button"><%= t('.copy') %></button>
34              </div>
35            </div>
36          <% end %>
37        </div>
38      </div>
39      <div class="box content" data-controller="mfa--test">
40        <h2><%= t('.step_3') %></h2>
41        <span data-target="mfa--test.output"></span>
42        <ol type="1">
43          <li><%= t('.step_3_1') %></li>
44          <li><%= t('.step_3_2') %></li>
45        </ol>
46        <%= form_with model: current_user, url: test_my_mfa_path, method: :post, data: { action: 'ajax:success->mfa--test#onSuccess' } do |form| %>
47          <div class="field has-addons">
48            <div class="control">
49              <%= form.number_field :code, value: '', placeholder: 'code', class: 'input', required: :required, data: { controller: 'input' } %>
50            </div>
51            <div class="control">
52              <%= form.hidden_field :mfa_secret %>
53              <%= form.submit t(".test"), class: 'button is-primary', data: { disable_with: t('loading') } %>
54            </div>
55          </div>
56        <% end %>
57      </div>
58      <%#<div class="box content">%>
59        <%#<h2>Save Backup Codes</h2>%>
60        <%#<h3>Backup Codes</h3>%>
61        <%#<ul>%>
62          <%#<li>code1</li>%>
63          <%#<li>code2</li>%>
64          <%#<li>code3</li>%>
65          <%#</ul>%>
66        <%#</div>%>
67      <%= form_for current_user, url: my_mfa_path, method: :post do |form| %>
68        <%= form.hidden_field :mfa_secret, data: { target: 'mfa--setup.secret' } %>
69        <div class="field is-grouped is-grouped-right">
70          <div class="control">
71            <%= form.submit t(".enable"), class: 'button is-primary', data: { disable_with: t('saving') } %>
72          </div>
73          <div class="control">
74            <%= link_to t("cancel"), my_dashboard_path, class: 'button' %>
75          </div>
76        </div>
77      <% end %>
78    </div>
79  </div>
80</div>