UX: Input for name when creating a new authenticator (#8153)

UX: Input for name when creating a new authenticator (#8153)

  • FEATURE: Added input for name when creating a new authenticator in user preferences

  • FEATURE: Added placeholders to authenticator inputs

  • Ran prettier on second-factor-add-totp.js.es6

diff --git a/app/assets/javascripts/discourse/controllers/second-factor-add-totp.js.es6 b/app/assets/javascripts/discourse/controllers/second-factor-add-totp.js.es6
index e826f93..ac105f5 100644
--- a/app/assets/javascripts/discourse/controllers/second-factor-add-totp.js.es6
+++ b/app/assets/javascripts/discourse/controllers/second-factor-add-totp.js.es6
@@ -11,6 +11,7 @@ export default Ember.Controller.extend(ModalFunctionality, {
     this.setProperties({
       errorMessage: null,
       secondFactorKey: null,
+      secondFactorName: null,
       secondFactorToken: null,
       showSecondFactorKey: false,
       secondFactorImage: null,
@@ -47,10 +48,7 @@ export default Ember.Controller.extend(ModalFunctionality, {
       this.set("loading", true);
 
       this.model
-        .enableSecondFactorTotp(
-          this.secondFactorToken,
-          I18n.t("user.second_factor.totp.default_name")
-        )
+        .enableSecondFactorTotp(this.secondFactorToken, this.secondFactorName)
         .then(response => {
           if (response.error) {
             this.set("errorMessage", response.error);
diff --git a/app/assets/javascripts/discourse/templates/components/second-factor-input.hbs b/app/assets/javascripts/discourse/templates/components/second-factor-input.hbs
index a17e0de..8a0d24d 100644
--- a/app/assets/javascripts/discourse/templates/components/second-factor-input.hbs
+++ b/app/assets/javascripts/discourse/templates/components/second-factor-input.hbs
@@ -6,4 +6,5 @@
     id=inputId
     autocorrect="off"
     autocapitalize="off"
-    autofocus="autofocus"}}
+    autofocus="autofocus"
+    placeholder=placeholder}}
diff --git a/app/assets/javascripts/discourse/templates/modal/second-factor-add-totp.hbs b/app/assets/javascripts/discourse/templates/modal/second-factor-add-totp.hbs
index 4f44cd0..80a13f8 100644
--- a/app/assets/javascripts/discourse/templates/modal/second-factor-add-totp.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/second-factor-add-totp.hbs
@@ -33,10 +33,14 @@
     </div>
 
     <div class="control-group">
-      <label class="control-label input-prepend">{{i18n 'user.second_factor.label'}}</label>
+      <label class="control-label input-prepend">{{i18n 'user.second_factor.name'}}</label>
+      <div class="controls">
+        {{second-factor-input value=secondFactorName inputId='second-factor-name' placeholder=(i18n 'user.second_factor.totp.default_name')}}
+      </div>
 
+      <label class="control-label input-prepend">{{i18n 'user.second_factor.label'}}</label>
       <div class="controls">
-        {{second-factor-input maxlength=6 value=secondFactorToken inputId='second-factor-token'}}
+        {{second-factor-input maxlength=6 value=secondFactorToken inputId='second-factor-token' placeholder='123456'}}
       </div>
     </div>
 
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index d352d9f..3373600 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -971,6 +971,7 @@ en:
         enable: "Manage Two Factor Authentication"
         forgot_password: "Forgot password?"
         confirm_password_description: "Please confirm your password to continue"
+        name: "Name"
         label: "Code"
         rate_limit: "Please wait before trying another authentication code."
         enable_description: |

GitHub sha: 30087beb

1 Like