FIX: Allow the app to generate and accept longer backup codes (#8761)

- Increase size of textarea when displaying generated codes
- Adjust maxlength of input field in JS UI
- Adjust maxlength of input field in no_ember UI

Follow-up to bff9880d63

app/assets/javascripts/discourse/components/second-factor-input.js.es6

@@ -19,6 +19,6 @@ export default Component.extend({
   @discourseComputed("secondFactorMethod")
   maxlength(secondFactorMethod) {
     if (secondFactorMethod === SECOND_FACTOR_METHODS.TOTP) return "6";
-    if (secondFactorMethod === SECOND_FACTOR_METHODS.BACKUP_CODE) return "16";
+    if (secondFactorMethod === SECOND_FACTOR_METHODS.BACKUP_CODE) return "32";
   }
 });

app/assets/stylesheets/common/base/user.scss

@@ -594,9 +594,9 @@
       .wrapper {
         display: inline-block;
         position: relative;
-        padding: 10px;
         border-radius: 3px;
         border: 1px solid $primary-low;
+        width: 100%;
       }
 
       .backup-codes-area {
@@ -604,11 +604,10 @@
         padding: 0;
         height: auto;
         text-align: center;
-        width: 250px;
+        width: 100%;
         background: white;
         border: 0;
         cursor: auto;
-        overflow: hidden;
         outline: none;
         font-family: monospace;
 

app/views/common/_second_factor_backup_input.html.erb

@@ -1,2 +1,2 @@
-<%= text_field_tag(:second_factor_token, nil, autofocus: true, pattern: '[a-z0-9]{16}', maxlength: 16, type: 'text') %>
+<%= text_field_tag(:second_factor_token, nil, autofocus: true, pattern: '[a-z0-9]{16}', maxlength: 32, type: 'text') %>
 <%= hidden_field_tag 'second_factor_method', '2' %>