Add enabled/disabled badge for OTP & Webauthn

app/assets/stylesheets/modules/badge.css

@@ -0,0 +1,20 @@
+.badge {
+  display: inline;
+  background-color: #e1e1e1;
+  color: black;
+  border: 1px solid #c0c0c0;
+  border-radius: 5px;
+  padding: 5px 10px;
+  text-transform: uppercase;
+  font-size: 12px;
+}
+
+.badge--success {
+  background-color: #c4f2c7;
+  border-color: #9ecea1;
+}
+
+.badge--warning {
+  background-color: #fff6d2;
+  border-color: #dcd3b1;
+}

app/assets/stylesheets/modules/mfa.css

@@ -7,6 +7,16 @@
   flex: 1;
 }
 
+.mfa__header-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.mfa__header.mfa__header--compact {
+  padding: 0;
+}
+
 @media (min-width: 780px) {
   .mfa__container {
     flex-direction: row;

app/views/settings/edit.html.erb

@@ -3,7 +3,9 @@
 <div class="t-body">
   <h2 class="page__subheading"><%= t ".mfa.multifactor_auth" %></h2>
   <% if @user.mfa_enabled? %>
-    <h2><%= t(".mfa.level.title")%></h2>
+    <div class="mfa__header-wrapper">
+      <h2 class="mfa__header mfa__header--compact"><%= t(".mfa.level.title")%></h2>
+    </div>
     <p><%= t(".mfa.level_html") %></p>
 
     <%= form_tag multifactor_auth_path, method: :put, id: "mfa-edit" do %>
@@ -13,9 +15,12 @@
     <% end %>
   <% end %>
 
-  <h2><%= t(".mfa.otp")%></h2>
   <% if @user.totp_enabled? %>
-    <p><%= t(".mfa.enabled") %></p>
+    <div class="mfa__header-wrapper">
+      <h2 class="mfa__header mfa__header--compact"><%= t(".mfa.otp") %></h2>
+      <span class="badge badge--success"><%= t(".mfa.enabled") %></span>
+    </div>
+    <p><%= t(".mfa.enabled_note") %></p>
     <%= form_tag multifactor_auth_path, method: :delete, id: "mfa-delete" do %>
       <div class="text_field">
         <%= label_tag :otp, t(".otp_code"), class: "form__label" %>
@@ -24,16 +29,24 @@
       <%= submit_tag t(".mfa.disable"), class: "form__submit" %>
     <% end %>
   <% else %>
-    <div class="t-body">
-      <p>
+    <div class="mfa__header-wrapper">
+      <h2 class="mfa__header mfa__header--compact"><%= t(".mfa.otp") %></h2>
+      <span class="badge badge--warning"><%= t(".mfa.disabled") %></span>
+    </div>
+    <p>
       <%= t(".mfa.disabled_html") %>
       <%= button_to t(".mfa.go_settings"), new_multifactor_auth_path, method: "get", class: "form__submit" %>
-      </p>
-    </div>
+    </p>
   <% end %>
 
-  <h2><%= t(".webauthn_credentials") %></h2>
-
+  <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? %>

config/locales/de.yml

@@ -458,9 +458,11 @@ de:
         disabled_html:
         go_settings:
         level_html:
-        enabled:
+        enabled_note:
         update:
         disable:
+        enabled:
+        disabled:
         level:
           title:
           disabled:

config/locales/en.yml

@@ -437,7 +437,7 @@ en:
       title: Edit settings
       webauthn_credentials: Security device
       no_webauthn_credentials: You don't have any security devices
-      webauthn_credential_note: A security device can be can be any device that complies with the FIDO2 standard such as security and biometric keys.
+      webauthn_credential_note: A security device can be any device that complies with the FIDO2 standard such as security and biometric keys.
       otp_code: OTP code or recovery code
       api_access:
         confirm_reset: Are you sure? This cannot be undone.
@@ -455,10 +455,12 @@ en:
         disabled_html: You have not yet enabled OTP based multi-factor authentication. Please refer to <a target="_blank" href="https://guides.rubygems.org/setting-up-multifactor-authentication">RubyGems MFA guide</a> for more information on MFA levels.
         go_settings: Register a new device
         level_html: You have enabled multi-factor authentication. Please click 'Update' to change your MFA level. Please refer to <a target="_blank" href="https://guides.rubygems.org/setting-up-multifactor-authentication">RubyGems MFA guide</a> for more information on MFA levels.
-        enabled: You have enabled multi-factor authentication. Please input your OTP from your authenticator or one of your active
+        enabled_note: You have enabled multi-factor authentication. Please input your OTP from your authenticator or one of your active
           recovery codes to disable it.
         update: Update
         disable: Disable
+        enabled: Enabled
+        disabled: Disabled
         level:
           title: MFA Level
           disabled: Disabled

config/locales/es.yml

@@ -479,9 +479,11 @@ es:
         disabled_html:
         go_settings: Registrar un nuevo dispositivo
         level_html:
-        enabled:
+        enabled_note:
         update: Actualizar
         disable:
+        enabled:
+        disabled:
         level:
           title: Nivel de Autenticación de Múltiples Factores
           disabled: Desactivada

config/locales/fr.yml

@@ -481,9 +481,11 @@ fr:
         disabled_html:
         go_settings: Enregistrer un nouvel appareil
         level_html:
-        enabled:
+        enabled_note:
         update:
         disable:
+        enabled:
+        disabled:
         level:
           title:
           disabled:

config/locales/ja.yml

@@ -443,9 +443,11 @@ ja:
         disabled_html:
         go_settings:
         level_html:
-        enabled:
+        enabled_note:
         update:
         disable:
+        enabled:
+        disabled:
         level:
           title:
           disabled:

config/locales/nl.yml

@@ -462,9 +462,11 @@ nl:
         disabled_html:
         go_settings:
         level_html:
-        enabled:
+        enabled_note:
         update:
         disable:
+        enabled:
+        disabled:
         level:
           title:
           disabled:

config/locales/pt-BR.yml

@@ -473,9 +473,11 @@ pt-BR:
         disabled_html:
         go_settings:
         level_html:
-        enabled:
+        enabled_note:
         update:
         disable:
+        enabled:
+        disabled:
         level:
           title:
           disabled:

config/locales/zh-CN.yml

@@ -444,9 +444,11 @@ zh-CN:
         disabled_html:
         go_settings: 注册新装置
         level_html:
-        enabled:
+        enabled_note:
         update: 更新
         disable:
+        enabled:
+        disabled:
         level:
           title: 多重验证等级
           disabled: 停用

config/locales/zh-TW.yml

@@ -445,9 +445,11 @@ zh-TW:
         disabled_html:
         go_settings: 註冊新裝置
         level_html:
-        enabled:
+        enabled_note:
         update: 更新
         disable:
+        enabled:
+        disabled:
         level:
           title: 多重驗證等級
           disabled: 停用