From 7fe536871873c911a1a5a6f006408c1579909563 Mon Sep 17 00:00:00 2001
From: Jordan Vidrine <30537603+jordanvidrine@users.noreply.github.com>
Date: Fri, 12 Feb 2021 16:24:13 -0600
Subject: [PATCH] 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.
---
 .../javascripts/discourse/app/controllers/login.js  | 13 ++++++++-----
 app/assets/stylesheets/common/base/login.scss       | 12 ++++++++++++
 app/assets/stylesheets/desktop/login.scss           | 11 ++++++++++-
 3 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/controllers/login.js b/app/assets/javascripts/discourse/app/controllers/login.js
index aabc8444707..c175d7a647e 100644
--- a/app/assets/javascripts/discourse/app/controllers/login.js
+++ b/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,
diff --git a/app/assets/stylesheets/common/base/login.scss b/app/assets/stylesheets/common/base/login.scss
index 1c98616a1c0..8b8cf5ace16 100644
--- a/app/assets/stylesheets/common/base/login.scss
+++ b/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 {
diff --git a/app/assets/stylesheets/desktop/login.scss b/app/assets/stylesheets/desktop/login.scss
index 533c2682de4..49d3654be08 100644
--- a/app/assets/stylesheets/desktop/login.scss
+++ b/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) {