Merge pull request #3945 from Shopify/eric/webauthn-banner

Add webauthn Banner, Move webauthn above TOTP
rubygems · Aug 3, 2023 · 34907a6 · 34907a6
2 parents b79ae8c + 302c658
commit 34907a6
Show file tree

Hide file tree

Showing 19 changed files with 134 additions and 39 deletions.
diff --git a/app/assets/stylesheets/modules/home.css b/app/assets/stylesheets/modules/home.css
@@ -152,3 +152,24 @@
     font-size: 16px; }
   .home__link:focus {
     outline: none; }
+
+/* Banner */
+
+.banner {
+  background-color: #141c22;
+  text-align: center;
+  padding: 15px;
+  color: white;
+}
+
+@media (max-width: 899px) {
+  .banner {
+    font-size: 12px;
+  }
+}
+
+.banner a {
+  color: #e9573f;
+  text-decoration: underline;
+  font-weight: bold;
+}
diff --git a/app/assets/stylesheets/modules/org.css b/app/assets/stylesheets/modules/org.css
@@ -1,18 +1,19 @@
 /* Flash Intercoms */
 
 .flash {
-  border-bottom: 1px solid #e9573f;
-  background-color: white; }
+  border-bottom: 1px solid #dcd3b1;
+  background-color: white;
+}
 
 .flash-wrap {
-  padding-top: 5px;
-  padding-bottom: 5px;
-  background-image: linear-gradient(to right, rgba(233, 87, 63, 0.3), #e9573f); }
+  padding: 10px 0;
+  background-color: #fff6d2;
+}
 
 .flash-wrap span {
   font-size: 13px;
-  font-style: italic;
-  color: #141c22; }
+  color: #141c22;
+}
 
 .flash a {
   color: #141c22;
@@ -265,3 +266,20 @@
     float: right; }
   .about__assets__download:focus:before, .about__assets__download:hover:before {
     animation: arrow .75s infinite; }
+
+/* Banner */
+
+#banner {
+  background-color: #141c22;
+  text-align: center;
+  padding: 12px 0;
+  font-weight: 500;
+  font-size: 16px;
+  color: white;
+}
+
+#banner a {
+  color: #e9573f;
+  text-decoration: underline;
+  font-weight: bold;
+}
diff --git a/app/controllers/sessions_controller.rb b/app/controllers/sessions_controller.rb
@@ -80,6 +80,7 @@ def do_login
     sign_in(@user) do |status|
       if status.success?
         StatsD.increment "login.success"
+        set_login_flash
         redirect_back_or(url_after_create)
       else
         login_failure(status.failure_message)
@@ -107,12 +108,20 @@ def who
     session_params[:who].is_a?(String) && session_params.fetch(:who)
   end
 
-  def url_after_create
+  def set_login_flash
     if current_user.mfa_recommended_not_yet_enabled?
       flash[:notice] = t("multifactor_auths.setup_recommended")
-      new_multifactor_auth_path
     elsif current_user.mfa_recommended_weak_level_enabled?
       flash[:notice] = t("multifactor_auths.strong_mfa_level_recommended")
+    elsif !current_user.webauthn_enabled?
+      flash[:notice_html] = t("multifactor_auths.setup_webauthn_html")
+    end
+  end
+
+  def url_after_create
+    if current_user.mfa_recommended_not_yet_enabled?
+      new_multifactor_auth_path
+    elsif current_user.mfa_recommended_weak_level_enabled?
       edit_settings_path
     else
       dashboard_path

diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb
@@ -1,3 +1,7 @@
+<% content_for :banner do %>
+  <%= t('multifactor_auths.setup_webauthn_html') %>
+<% end %>
+
 <div class="home__image-wrap">
   <div class="home__image"></div>
 </div>

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -23,6 +23,11 @@
   </head>
 
   <body class="<%= 'body--index' if request.path_info == '/' %>">
+    <% if content_for?(:banner) %>
+      <div class="banner">
+        <%= yield :banner %>
+      </div>
+    <% end %>
     <header class="header <%= 'header--interior' if request.path_info != '/' %>">
       <div class="l-wrap--header">
         <%= link_to(root_path, title: 'RubyGems', class: 'header__logo-wrap') do %>
@@ -90,7 +95,7 @@
     <% flash.each do |name, msg| %>
       <div id="flash-border" class="flash">
         <div class="flash-wrap">
-          <div id="flash_<%= name %>" class="l-wrap--b"><span><b><%= flash_message(name, msg) %></b></span></div>
+          <div id="flash_<%= name %>" class="l-wrap--b"><span><%= flash_message(name, msg) %></span></div>
         </div>
       </div>
     <% end %>

diff --git a/app/views/settings/edit.html.erb b/app/views/settings/edit.html.erb
@@ -15,6 +15,20 @@
     <% end %>
   <% end %>
 
+  <h2 id="security-device"><%= t(".webauthn_credentials") %></h2>
+
+  <p><%= t(".webauthn_credential_note")%></p>
+
+  <% if @user.webauthn_credentials.none? %>
+    <p><i><%= t(".no_webauthn_credentials") %></i></p>
+  <% else %>
+    <div class="l-mb-8">
+      <%= render @user.webauthn_credentials %>
+    </div>
+  <% end %>
+
+  <%= render "webauthn_credentials/form", webauthn_credential: @webauthn_credential %>
+
   <% if @user.totp_enabled? %>
     <div class="mfa__header-wrapper">
       <h2 class="mfa__header mfa__header--compact"><%= t(".mfa.otp") %></h2>
@@ -38,26 +52,6 @@
       <%= button_to t(".mfa.go_settings"), new_multifactor_auth_path, method: "get", class: "form__submit" %>
     </p>
   <% end %>
-
-  <div class="mfa__header-wrapper">
-    <h2 class="mfa__header mfa__header--compact"><%= t(".webauthn_credentials") %></h2>
-    <% if @user.webauthn_enabled? %>
-      <span class="badge badge--success"><%= t(".mfa.enabled") %></span>
-    <% else %>
-      <span class="badge badge--warning"><%= t(".mfa.disabled") %></span>
-    <% end %>
-  </div>
-  <p><%= t(".webauthn_credential_note")%></p>
-
-  <% if @user.webauthn_credentials.none? %>
-    <p><i><%= t(".no_webauthn_credentials") %></i></p>
-  <% else %>
-    <div class="l-mb-8">
-      <%= render @user.webauthn_credentials %>
-    </div>
-  <% end %>
-
-  <%= render "webauthn_credentials/form", webauthn_credential: @webauthn_credential %>
 </div>
 
 <div class="t-body">

diff --git a/config/locales/de.yml b/config/locales/de.yml
@@ -176,6 +176,7 @@ de:
         sign_in: Anmelden
         sign_out: Abmelden
         sign_up: Registrieren
+      mfa_banner_html:
   mailer:
     confirm_your_email:
     confirmation_subject:
@@ -354,6 +355,7 @@ de:
     setup_recommended:
     strong_mfa_level_required_html:
     strong_mfa_level_recommended:
+    setup_webauthn_html:
     new:
       title:
       scan_prompt:

diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -183,6 +183,7 @@ en:
         sign_in: Sign in
         sign_out: Sign out
         sign_up: Sign up
+      mfa_banner_html: 🎉 We now support security devices! Improve your account security by <a href="/settings/edit#security-device">setting up</a> a new device. [Learn more](link to blog post)!
   mailer:
     confirm_your_email: Please confirm your email address with the link sent to your email.
     confirmation_subject: Please confirm your email address with RubyGems.org
@@ -348,8 +349,9 @@ en:
     require_webauthn_enabled: You don't have any security devices enabled. You have to associate a device to your account first.
     setup_required_html: For protection of your account and your gems, you are required to set up multi-factor authentication. Please read our <a href="https://blog.rubygems.org/2022/08/15/requiring-mfa-on-popular-gems.html">blog post</a> for more details.
     setup_recommended: For protection of your account and your gems, we encourage you to set up multi-factor authentication. Your account will be required to have MFA enabled in the future.
-    strong_mfa_level_required_html: For protection of your account and your gems, you are required to change your MFA level to "UI and gem signin" or "UI and API". Please read our <a href="https://blog.rubygems.org/2022/08/15/requiring-mfa-on-popular-gems.html"">blog post</a> for more details.
+    strong_mfa_level_required_html: For protection of your account and your gems, you are required to change your MFA level to "UI and gem signin" or "UI and API". Please read our <a href="https://blog.rubygems.org/2022/08/15/requiring-mfa-on-popular-gems.html">blog post</a> for more details.
     strong_mfa_level_recommended: For protection of your account and your gems, we encourage you to change your MFA level to "UI and gem signin" or "UI and API". Your account will be required to have MFA enabled on one of these levels in the future.
+    setup_webauthn_html: 🎉 We now support security devices! Improve your account security by <a href="/settings/edit#security-device">setting up</a> a new device. <a href="https://blog.rubygems.org/2023/08/03/level-up-using-security-devices.html">Learn more</a>!
     new:
       title: Enabling multi-factor auth
       scan_prompt: Please scan the qr-code with your authenticator app. If you cannot scan the code, add information below into your app manually.

diff --git a/config/locales/es.yml b/config/locales/es.yml
@@ -189,6 +189,7 @@ es:
         sign_in: Ingresar
         sign_out: Salir
         sign_up: Registrarte
+      mfa_banner_html:
   mailer:
     confirm_your_email: Por favor confirma tu dirección de correo con el enlace enviado.
     confirmation_subject: Por favor confirma tu dirección de correo con RubyGems.org
@@ -371,6 +372,7 @@ es:
     setup_recommended:
     strong_mfa_level_required_html:
     strong_mfa_level_recommended:
+    setup_webauthn_html:
     new:
       title: Activando autenticación de múltiples factores
       scan_prompt: Por favor escanea el código QR con tu aplicación de Autenticación.

diff --git a/config/locales/fr.yml b/config/locales/fr.yml
@@ -189,6 +189,7 @@ fr:
         sign_in: Connexion
         sign_out: Déconnexion
         sign_up: Inscription
+      mfa_banner_html:
   mailer:
     confirm_your_email: Veuillez confirmer votre adresse email avec le lien qui vous
       a été envoyé par email.
@@ -373,6 +374,7 @@ fr:
     setup_recommended:
     strong_mfa_level_required_html:
     strong_mfa_level_recommended:
+    setup_webauthn_html:
     new:
       title: Activer l'authentification multifacteur
       scan_prompt: Veuillez scanner le QR code avec votre app d'authentification.

diff --git a/config/locales/ja.yml b/config/locales/ja.yml
@@ -178,6 +178,7 @@ ja:
         sign_in: ログイン
         sign_out: ログアウト
         sign_up: 新規登録
+      mfa_banner_html:
   mailer:
     confirm_your_email: あなたのメールアドレスに送信されたURLを確認してください。
     confirmation_subject: RubyGems.orgに登録されたあなたのメールアドレスを確認してください
@@ -341,6 +342,7 @@ ja:
     setup_recommended:
     strong_mfa_level_required_html:
     strong_mfa_level_recommended:
+    setup_webauthn_html:
     new:
       title:
       scan_prompt:

diff --git a/config/locales/nl.yml b/config/locales/nl.yml
@@ -181,6 +181,7 @@ nl:
         sign_in: Inloggen
         sign_out: Uitloggen
         sign_up: Registreren
+      mfa_banner_html:
   mailer:
     confirm_your_email:
     confirmation_subject:
@@ -358,6 +359,7 @@ nl:
     setup_recommended:
     strong_mfa_level_required_html:
     strong_mfa_level_recommended:
+    setup_webauthn_html:
     new:
       title:
       scan_prompt:

diff --git a/config/locales/pt-BR.yml b/config/locales/pt-BR.yml
@@ -186,6 +186,7 @@ pt-BR:
         sign_in: Fazer Login
         sign_out: Sair
         sign_up: Cadastrar
+      mfa_banner_html:
   mailer:
     confirm_your_email: Por favor, confirme seu endereço de email através do link
       que enviamos para o seu endereço de email.
@@ -369,6 +370,7 @@ pt-BR:
     setup_recommended:
     strong_mfa_level_required_html:
     strong_mfa_level_recommended:
+    setup_webauthn_html:
     new:
       title:
       scan_prompt:

diff --git a/config/locales/zh-CN.yml b/config/locales/zh-CN.yml
@@ -184,6 +184,7 @@ zh-CN:
         sign_in: 登录
         sign_out: 退出
         sign_up: 注册
+      mfa_banner_html:
   mailer:
     confirm_your_email: 请在发送到您的邮件中点击链接，确认您的邮箱地址。
     confirmation_subject: 请确认您的邮箱地址
@@ -351,6 +352,7 @@ zh-CN:
     setup_recommended: 为了保护您的帐户和您的 Gem，我们鼓励您设置多因素验证。在将来，您的帐户将被要求启用多因素验证。
     strong_mfa_level_required_html: 为了保护您的帐户和您的 Gem，您需要将您的多因素验证级别更改为 "UI and gem signin" 或 "UI and API"。请阅读我们的<a href="https://blog.rubygems.org/2022/08/15/requiring-mfa-on-popular-gems.html"">博客文章</a>了解详情。
     strong_mfa_level_recommended: 为了保护您的帐户和您的 Gem，我们建议您将您的多因素验证级别更改为 "UI and gem signin" 或 "UI and API"。在将来，您的帐户将被要求在其中某一个级别上启用多因素验证。
+    setup_webauthn_html:
     new:
       title: 启用多因素验证
       scan_prompt: 请用您的身份验证程序扫描二维码。如果您没办法扫描，请在您的程序中手动输入下面的内容。

diff --git a/config/locales/zh-TW.yml b/config/locales/zh-TW.yml
@@ -175,6 +175,7 @@ zh-TW:
         sign_in: 登入
         sign_out: 登出
         sign_up: 註冊
+      mfa_banner_html:
   mailer:
     confirm_your_email:
     confirmation_subject:
@@ -342,6 +343,7 @@ zh-TW:
     setup_recommended:
     strong_mfa_level_required_html:
     strong_mfa_level_recommended:
+    setup_webauthn_html:
     new:
       title: 啟用多重要素驗證
       scan_prompt: 請用你的驗證裝置掃描 QR-code。如果你沒辦法掃描，手動輸入下面的資料。

diff --git a/test/functional/home_controller_test.rb b/test/functional/home_controller_test.rb
@@ -12,6 +12,10 @@ class HomeControllerTest < ActionController::TestCase
     should "display counts" do
       assert page.has_content?("11,000,000")
     end
+
+    should "display mfa banner" do
+      assert page.has_content? "We now support security devices!"
+    end
   end
 
   should "on GET to index with non html accept header" do