scinote-web/app/views/users/registrations/_2fa_modal_apps_tab.html.erb

<div role="tabpanel" class="tab-pane active" id="2fa-step-1">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
    <h2 class="modal-title"><%= t("users.registrations.edit.2fa_modal.step_1.title") %></h2>
  </div>
  <div class="modal-body">
    <p class="fa-tab-header"><%= t("users.registrations.edit.2fa_modal.step_1.description") %></p>
    <div class="two-factor-apps">
      <div class="apps-list">
        <div class="app">
          <div class="app-logo">
            <%= image_tag('2fa/google_authenticator.png', class: 'logo-image') %>
          </div>
          <div class="app-information">
            <p class="app-name"><%= t("users.registrations.edit.2fa_modal.step_1.google_auth") %></p>
            <div class="app-store">
              <a href="<%= Constants::TWO_FACTOR_URL[:google][:android] %>" class="store" target="_blank">
                <i class="fab fa-android"></i>
                <%= t("users.registrations.edit.2fa_modal.step_1.android") %>
              </a>
              <a href="<%= Constants::TWO_FACTOR_URL[:google][:ios] %>" class="store" target="_blank">
                <i class="fab fa-apple"></i>
                <%= t("users.registrations.edit.2fa_modal.step_1.ios") %>
              </a>
            </div>
          </div>
        </div>
        <div class="app">
          <div class="app-logo">
            <%= image_tag('2fa/ms_authenticator.png', class: 'logo-image') %>
          </div>
          <div class="app-information">
            <p class="app-name"><%= t("users.registrations.edit.2fa_modal.step_1.microsoft_auth") %></p>
            <div class="app-store">
              <a href="<%= Constants::TWO_FACTOR_URL[:microsoft][:android] %>" class="store" target="_blank">
                <i class="fab fa-android"></i>
                <%= t("users.registrations.edit.2fa_modal.step_1.android") %>
              </a>
              <a href="<%= Constants::TWO_FACTOR_URL[:microsoft][:ios] %>" class="store" target="_blank">
                <i class="fab fa-apple"></i>
                <%= t("users.registrations.edit.2fa_modal.step_1.ios") %>
              </a>
            </div>
          </div>
        </div>
        <div class="app">
          <div class="app-logo">
            <%= image_tag('2fa/2fa_authenticator.png', class: 'logo-image') %>
          </div>
          <div class="app-information">
            <p class="app-name"><%= t("users.registrations.edit.2fa_modal.step_1.2fa_auth") %></p>
            <div class="app-store">
              <a href="<%= Constants::TWO_FACTOR_URL[:two_fa][:android] %>" class="store" target="_blank">
                <i class="fab fa-android"></i>
                <%= t("users.registrations.edit.2fa_modal.step_1.android") %>
              </a>
              <a href="<%= Constants::TWO_FACTOR_URL[:two_fa][:ios] %>" class="store" target="_blank">
                <i class="fab fa-apple"></i>
                <%= t("users.registrations.edit.2fa_modal.step_1.ios") %>
              </a>
            </div>
          </div>
        </div>
      </div>
      <%= image_tag('2fa/install_mobile.png', class: 'install-mobile') %>
    </div>
  </div>
  <div class="modal-footer">
    <button class="btn btn-primary btn-next-step" data-step="#2fa-step-2"><%= t("users.registrations.edit.2fa_modal.step_1.start") %></button>
  </div>
</div>