Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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.
This commit is contained in:
Jordan Vidrine 2021-02-12 16:24:13 -06:00 committed by GitHub
parent 70050a8ba3
commit 7fe5368718
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 30 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/assets/javascripts/discourse/app/controllers/login.js
View File

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

12
app/assets/stylesheets/common/base/login.scss
View File

@ -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 // Create Account + Login
.d-modal.create-account, .d-modal.create-account,
.d-modal.login-modal { .d-modal.login-modal {

11
app/assets/stylesheets/desktop/login.scss
View File

@ -55,7 +55,7 @@
#modal-alert { #modal-alert {
max-width: 100%; max-width: 100%;
margin-bottom: 0; margin-bottom: 0;
padding: 8px 40px 8px 16px; padding: 8px 50px 8px 16px;
min-height: 35px; 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 // styles used on
// login modal only // login modal only
.login-modal:not(.hidden) { .login-modal:not(.hidden) {