UX: Second Factor + Alert Display (#12071)

* UX: Second Factor + Alert Display

This commit removes JS edits of the modal-alert and uses CSS instead. This commit also adds some styling to the 2FA login when using a key instead of a 2FA authenticator.

app/assets/javascripts/discourse/app/controllers/login.js

@@ -83,24 +83,29 @@ export default Controller.extend(ModalFunctionality, {
     "awaitingApproval",
     "hasAtLeastOneLoginButton",
     "showSecondFactor",
-    "canLoginLocal"
+    "canLoginLocal",
+    "showSecurityKey"
   )
   modalBodyClasses(
     awaitingApproval,
     hasAtLeastOneLoginButton,
     showSecondFactor,
-    canLoginLocal
+    canLoginLocal,
+    showSecurityKey
   ) {
     const classes = ["login-modal"];
     if (awaitingApproval) {
       classes.push("awaiting-approval");
     }
-    if (hasAtLeastOneLoginButton && !showSecondFactor) {
+    if (hasAtLeastOneLoginButton && !showSecondFactor && !showSecurityKey) {
       classes.push("has-alt-auth");
     }
     if (!canLoginLocal) {
       classes.push("no-local-login");
     }
+    if (showSecondFactor || showSecurityKey) {
+      classes.push("second-factor");
+    }
     return classes.join(" ");
   },
 
@@ -166,8 +171,6 @@ export default Controller.extend(ModalFunctionality, {
               (result.security_key_enabled || result.totp_enabled) &&
               !this.secondFactorRequired
             ) {
-              document.getElementById("modal-alert").style.display = "none";
-
               this.setProperties({
                 otherMethodAllowed: result.multiple_second_factor_methods,
                 secondFactorRequired: true,

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

@@ -27,6 +27,18 @@
   }
 }
 
+.d-modal.login-modal {
+  #modal-alert:empty {
+    display: none;
+  }
+
+  #modal-alert:not(:empty) {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+}
+
 // Create Account + Login
 .d-modal.create-account,
 .d-modal.login-modal {

app/assets/stylesheets/desktop/login.scss

@@ -55,7 +55,7 @@
   #modal-alert {
     max-width: 100%;
     margin-bottom: 0;
-    padding: 8px 40px 8px 16px;
+    padding: 8px 50px 8px 16px;
     min-height: 35px;
   }
 
@@ -101,6 +101,15 @@
   }
 }
 
+.login-modal.modal-body:not(.hidden).second-factor {
+  .login-left-side {
+    max-width: 350px;
+  }
+  .modal-footer {
+    margin-top: 1em;
+  }
+}
+
 // styles used on
 // login modal only
 .login-modal:not(.hidden) {