FEATURE: shows remaining backup codes in user preferences

app/assets/javascripts/discourse/controllers/preferences/second-factor-backup.js.es6

@@ -7,6 +7,7 @@ export default Ember.Controller.extend({
   errorMessage: null,
   successMessage: null,
   backupEnabled: Ember.computed.alias("model.second_factor_backup_enabled"),
+  remainingCodes: Ember.computed.alias("model.second_factor_remaining_backup_codes"),
   backupCodes: null,
 
   @computed("secondFactorToken")
@@ -74,7 +75,6 @@ export default Ember.Controller.extend({
 
     generateSecondFactorCodes() {
       if (!this.get("secondFactorToken")) return;
-      const model = this.get("model");
       this.set("loading", true);
       this.get("content")
         .generateSecondFactorCodes(this.get("secondFactorToken"))
@@ -86,9 +86,10 @@ export default Ember.Controller.extend({
 
           this.setProperties({
             errorMessage: null,
-            backupCodes: response.backup_codes
+            backupCodes: response.backup_codes,
+            backupEnabled: true,
+            remainingCodes: response.backup_codes.length
           });
-          model.set("second_factor_backup_enabled", true);
         })
         .catch(popupAjaxError)
         .finally(() => {

app/assets/javascripts/discourse/templates/preferences-second-factor-backup.hbs

@@ -1,9 +1,11 @@
 <section class="user-preferences second-factor-backup-preferences">
   <form class="form-horizontal">
-
     <div class="control-group">
       <div class="controls">
         <h3>{{i18n "user.second_factor_backup.title"}}</h3>
+        {{#if backupEnabled}}
+          <p>{{{i18n "user.second_factor_backup.remaining_codes" count=remainingCodes}}}</p>
+        {{/if}}
       </div>
       <div class="controls">
         {{#if successMessage}}

app/models/concerns/second_factor_manager.rb

@@ -45,6 +45,10 @@ module SecondFactorManager
       SiteSetting.enable_local_logins
   end
 
+  def remaining_backup_codes
+    self&.user_second_factors&.backup_codes&.count
+  end
+
   def authenticate_second_factor(token, second_factor_method)
     if second_factor_method == UserSecondFactor.methods[:totp]
       authenticate_totp(token)

app/serializers/user_serializer.rb

@@ -74,7 +74,8 @@ class UserSerializer < BasicUserSerializer
              :primary_group_flair_color,
              :staged,
              :second_factor_enabled,
-             :second_factor_backup_enabled
+             :second_factor_backup_enabled,
+             :second_factor_remaining_backup_codes
 
   has_one :invited_by, embed: :object, serializer: BasicUserSerializer
   has_many :groups, embed: :object, serializer: BasicGroupSerializer
@@ -160,6 +161,14 @@ class UserSerializer < BasicUserSerializer
     object.backup_codes_enabled?
   end
 
+  def include_second_factor_remaining_backup_codes?
+    (object&.id == scope.user&.id) && object.backup_codes_enabled?
+  end
+
+  def second_factor_remaining_backup_codes
+    object.remaining_backup_codes
+  end
+
   def can_change_bio
     !(SiteSetting.enable_sso && SiteSetting.sso_overrides_bio)
   end

config/locales/client.en.yml

@@ -747,6 +747,7 @@ en:
         manage: "Manage backup codes"
         copied_to_clipboard: "Copied to Clipboard"
         copy_to_clipboard_error: "Error copying data to Clipboard"
+        remaining_codes: "You have <strong>{{count}}</strong> backup codes remaining."
         codes:
           title: "Backup codes"
           description: "Each line is a different backup code which can only be used once. It's recommended to save this file in a safe place."