FIX: Don't redirect when manually adding 2fa (#22474)

<img width="369" alt="Screenshot 2023-07-06 at 3 41 12 PM" src="https://github.com/discourse/discourse/assets/50783505/847d54ed-a62a-4266-b99e-31279f5bf747">

No changes in styling, the adding of classes was to give targets for testing

app/assets/javascripts/discourse/app/components/modal/second-factor-add-totp.hbs

@@ -26,11 +26,15 @@
           </div>
           <p>
             {{#if this.showSecondFactorKey}}
+              <div class="second-factor-key">
                 {{this.secondFactorKey}}
+              </div>
             {{else}}
-              <a href {{on "click" this.enableShowSecondFactorKey}}>{{i18n
-                  "user.second_factor.show_key_description"
-                }}</a>
+              <a
+                href
+                class="show-second-factor-key"
+                {{on "click" this.enableShowSecondFactorKey}}
+              >{{i18n "user.second_factor.show_key_description"}}</a>
             {{/if}}
           </p>
         </div>

app/assets/javascripts/discourse/app/components/modal/second-factor-add-totp.js

@@ -33,7 +33,9 @@ export default class SecondFactorAddTotp extends Component {
   }
 
   @action
-  enableShowSecondFactorKey() {
+  enableShowSecondFactorKey(e) {
+    e.preventDefault();
+    e.stopImmediatePropagation();
     this.showSecondFactorKey = true;
   }
 

app/assets/javascripts/discourse/tests/acceptance/user-preferences-second-factor-test.js

@@ -66,8 +66,13 @@ acceptance("User Preferences - Second Factor", function (needs) {
     await click(".new-totp");
     assert.ok(exists(".qr-code img"), "shows qr code image");
 
-    await click(".add-totp");
+    await click(".modal a.show-second-factor-key");
+    assert.ok(
+      exists(".modal .second-factor-key"),
+      "displays second factor key"
+    );
 
+    await click(".add-totp");
     assert.ok(
       query(".alert-error").innerHTML.includes("provide a name and the code"),
       "shows name/token missing error message"