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

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);

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}}

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 maxlength=6 value=secondFactorToken inputId='second-factor-token'}}
+        {{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' placeholder='123456'}}
       </div>
     </div>
 

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: |