diff --git a/app/assets/javascripts/discourse/app/controllers/login.js b/app/assets/javascripts/discourse/app/controllers/login.js index e612f735fc4..5d25aec81c7 100644 --- a/app/assets/javascripts/discourse/app/controllers/login.js +++ b/app/assets/javascripts/discourse/app/controllers/login.js @@ -99,6 +99,7 @@ export default Controller.extend(ModalFunctionality, { } if (hasAtLeastOneLoginButton && !showSecondFactor && !showSecurityKey) { classes.push("has-alt-auth"); + document.querySelector("#discourse-modal").classList.add("has-alt-auth"); } if (!canLoginLocal) { classes.push("no-local-login"); @@ -114,9 +115,9 @@ export default Controller.extend(ModalFunctionality, { return showSecondFactor || showSecurityKey; }, - @discourseComputed("canLoginLocalWithEmail") - hasAtLeastOneLoginButton(canLoginLocalWithEmail) { - return findAll().length > 0 || canLoginLocalWithEmail; + @discourseComputed() + hasAtLeastOneLoginButton() { + return findAll().length > 0; }, @discourseComputed("loggingIn") @@ -133,9 +134,9 @@ export default Controller.extend(ModalFunctionality, { showSpinner: readOnly("loggingIn"), - @discourseComputed("canLoginLocalWithEmail", "processingEmailLink") - showLoginWithEmailLink(canLoginLocalWithEmail, processingEmailLink) { - return canLoginLocalWithEmail && !processingEmailLink; + @discourseComputed("canLoginLocalWithEmail") + showLoginWithEmailLink(canLoginLocalWithEmail) { + return canLoginLocalWithEmail; }, actions: { diff --git a/app/assets/javascripts/discourse/app/templates/components/login-buttons.hbs b/app/assets/javascripts/discourse/app/templates/components/login-buttons.hbs index c81a7745eaa..07a10e5c124 100644 --- a/app/assets/javascripts/discourse/app/templates/components/login-buttons.hbs +++ b/app/assets/javascripts/discourse/app/templates/components/login-buttons.hbs @@ -9,13 +9,4 @@ {{/if}} {{b.title}} -{{/each}} - -{{#if showLoginWithEmailLink}} - {{d-button - action=emailLogin - label="email_login.button_label" - disabled=processingEmailLink - icon="far-envelope" - class="login-with-email-button"}} -{{/if}} +{{/each}} \ No newline at end of file diff --git a/app/assets/javascripts/discourse/app/templates/mobile/modal/login.hbs b/app/assets/javascripts/discourse/app/templates/mobile/modal/login.hbs index 15472d6f885..3e9721811aa 100644 --- a/app/assets/javascripts/discourse/app/templates/mobile/modal/login.hbs +++ b/app/assets/javascripts/discourse/app/templates/mobile/modal/login.hbs @@ -6,11 +6,7 @@

{{i18n "login.subheader_title"}}

{{#if showLoginButtons}} - {{login-buttons - showLoginWithEmailLink=showLoginWithEmailLink - processingEmailLink=processingEmailLink - emailLogin=(action "emailLogin") - externalLogin=(action "externalLogin")}} + {{login-buttons externalLogin=(action "externalLogin")}} {{/if}} {{#if canLoginLocal}} @@ -19,6 +15,11 @@
{{input value=loginName class=(value-entered loginName)type="email" id="login-account-name" autocorrect="off" autocapitalize="off" disabled=showSecondFactor}} + {{#if showLoginWithEmailLink}} + + {{i18n "email_login.login_link"}} + + {{/if}}
{{input value=loginPassword class=(value-entered loginPassword) type="password" id="login-account-password" maxlength="200" disabled=showSecondFactor}} diff --git a/app/assets/javascripts/discourse/app/templates/modal/login.hbs b/app/assets/javascripts/discourse/app/templates/modal/login.hbs index 1753a34821f..e9a50775838 100644 --- a/app/assets/javascripts/discourse/app/templates/modal/login.hbs +++ b/app/assets/javascripts/discourse/app/templates/modal/login.hbs @@ -13,6 +13,11 @@
{{input value=loginName type="email" id="login-account-name" class=(value-entered loginName) autocomplete="username" autocorrect="off" autocapitalize="off" disabled=showSecondFactor}} + {{#if showLoginWithEmailLink}} + + {{i18n "email_login.login_link"}} + + {{/if}}
{{input value=loginPassword type="password" class=(value-entered loginPassword) id="login-account-password" autocomplete="current-password" maxlength="200" capsLockOn=capsLockOn disabled=disableLoginFields}} @@ -75,11 +80,7 @@
{{/if}} - {{login-buttons - showLoginWithEmailLink=showLoginWithEmailLink - processingEmailLink=processingEmailLink - emailLogin=(action "emailLogin") - externalLogin=(action "externalLogin")}} + {{login-buttons externalLogin=(action "externalLogin")}}
{{/if}} {{/d-modal-body}} diff --git a/app/assets/javascripts/discourse/tests/acceptance/login-with-email-and-hide-email-address-taken-test.js b/app/assets/javascripts/discourse/tests/acceptance/login-with-email-and-hide-email-address-taken-test.js index d75eafea084..fdb7114bf3a 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/login-with-email-and-hide-email-address-taken-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/login-with-email-and-hide-email-address-taken-test.js @@ -19,7 +19,7 @@ acceptance("Login with email - hide email address taken", function (needs) { await visit("/"); await click("header .login-button"); await fillIn("#login-account-name", "someuser@example.com"); - await click(".login-with-email-button"); + await click("#email-login-link"); assert.equal( queryAll(".alert-success").html().trim(), diff --git a/app/assets/javascripts/discourse/tests/acceptance/login-with-email-and-no-social-logins-test.js b/app/assets/javascripts/discourse/tests/acceptance/login-with-email-and-no-social-logins-test.js index b1496f7e281..f92715e0896 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/login-with-email-and-no-social-logins-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/login-with-email-and-no-social-logins-test.js @@ -15,7 +15,7 @@ acceptance("Login with email - no social logins", function (needs) { await visit("/"); await click("header .login-button"); - assert.ok(exists(".login-with-email-button")); + assert.ok(exists("#email-login-link")); }); test("with login with email disabled", async function (assert) { diff --git a/app/assets/javascripts/discourse/tests/acceptance/login-with-email-disabled-test.js b/app/assets/javascripts/discourse/tests/acceptance/login-with-email-disabled-test.js index 84fcd4d5764..bafce734602 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/login-with-email-disabled-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/login-with-email-disabled-test.js @@ -18,7 +18,7 @@ acceptance("Login with email disabled", function (needs) { ); assert.notOk( - exists(".login-with-email-button"), + exists("#email-login-link"), "it displays the login with email button" ); }); diff --git a/app/assets/javascripts/discourse/tests/acceptance/login-with-email-test.js b/app/assets/javascripts/discourse/tests/acceptance/login-with-email-test.js index b75514b9fc8..ad9edeeffac 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/login-with-email-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/login-with-email-test.js @@ -30,12 +30,12 @@ acceptance("Login with email", function (needs) { ); assert.ok( - exists(".login-with-email-button"), + exists("#email-login-link"), "it displays the login with email button" ); await fillIn("#login-account-name", "someuser"); - await click(".login-with-email-button"); + await click("#email-login-link"); assert.equal( queryAll(".alert-error").html(), @@ -46,7 +46,7 @@ acceptance("Login with email", function (needs) { ); await fillIn("#login-account-name", "someuser@gmail.com"); - await click(".login-with-email-button"); + await click("#email-login-link"); assert.equal( queryAll(".alert-error").html(), @@ -60,7 +60,7 @@ acceptance("Login with email", function (needs) { userFound = true; - await click(".login-with-email-button"); + await click("#email-login-link"); assert.equal( queryAll(".alert-success").html().trim(), @@ -71,7 +71,7 @@ acceptance("Login with email", function (needs) { await visit("/"); await click("header .login-button"); await fillIn("#login-account-name", "someuser@gmail.com"); - await click(".login-with-email-button"); + await click("#email-login-link"); assert.equal( queryAll(".alert-success").html().trim(), diff --git a/app/assets/stylesheets/common/base/login.scss b/app/assets/stylesheets/common/base/login.scss index 84b2661e8a0..62bac05f0b9 100644 --- a/app/assets/stylesheets/common/base/login.scss +++ b/app/assets/stylesheets/common/base/login.scss @@ -12,6 +12,10 @@ display: none; } +#discourse-modal:not(.has-alt-auth) .modal-inner-container { + max-width: 28em; // prevents long alerts from expanding the modal width +} + .login-modal:not(.hidden).has-alt-auth.no-local-login { min-width: fit-content; background: var(--secondary); @@ -107,12 +111,12 @@ position: relative; display: flex; flex-direction: column; - margin-bottom: 1em; + margin-bottom: 0.8em; &:last-child { margin-bottom: 2em; } input { - padding: 0.75em 0.5em; + padding: 0.75em 0.77em; border-radius: 0.25em; min-width: 250px; box-shadow: none; @@ -149,6 +153,19 @@ input.alt-placeholder:invalid { color: var(--primary); } + + #email-login-link { + opacity: 0; + } + + #forgot-password-link, + #email-login-link { + font-size: $font-down-1; + } + input.value-entered + label.alt-placeholder + #email-login-link { + opacity: 1; + transition: opacity 0.5s; + } .tip:not(:empty) + label.more-info { display: none; } diff --git a/app/assets/stylesheets/common/foundation/variables.scss b/app/assets/stylesheets/common/foundation/variables.scss index 33b439aaedf..a5d6770e23c 100644 --- a/app/assets/stylesheets/common/foundation/variables.scss +++ b/app/assets/stylesheets/common/foundation/variables.scss @@ -51,6 +51,7 @@ $base-font-family: var(--font-family) !default; $heading-font-family: var(--heading-font-family) !default; // Font-size defintions, multiplier ^ (step / interval) +$font-up-7: 2.639em; $font-up-6: 2.296em; $font-up-5: 2em; $font-up-4: 1.7511em; @@ -64,6 +65,7 @@ $font-down-3: 0.6599em; $font-down-4: 0.5745em; $font-down-5: 0.5em; $font-down-6: 0.4355em; +$font-down-7: 0.3789em; // inputs/textareas in iOS need to be at least 16px to avoid triggering zoom on focus // with base at 15px, the below gives 16.05px diff --git a/app/assets/stylesheets/desktop/login.scss b/app/assets/stylesheets/desktop/login.scss index fa59edad41e..c050ebb8127 100644 --- a/app/assets/stylesheets/desktop/login.scss +++ b/app/assets/stylesheets/desktop/login.scss @@ -109,7 +109,7 @@ .login-left-side { align-self: stretch; width: calc(60% - 4em); - padding: 1em 2em; + padding: 3em 3em 2.5em; } } .login-left-side { @@ -117,10 +117,11 @@ width: calc(100% - 4em); display: flex; flex-direction: column; - padding: 1em 4em 1em 2em; + padding: 3em 3em 2.5em; .login-welcome-header { .login-title { - font-size: 2.75em; + line-height: $line-height-small; + font-size: $font-up-7; } .login-subheader { font-size: 1.125em !important; @@ -132,12 +133,11 @@ align-items: flex-start !important; } #login-form { - margin: 1.5em 0 0 0; + margin: 3em 0 1.25em 0; } .modal-footer { display: flex; flex-direction: row; - justify-content: space-between; width: 100%; padding: 0; border: 0; @@ -147,7 +147,7 @@ display: none; } &.has-alt-auth .login-right-side { - width: 40%; + width: 35%; display: flex; flex-direction: column; align-items: center; diff --git a/app/assets/stylesheets/mobile/login.scss b/app/assets/stylesheets/mobile/login.scss index 2d5cc7f45ff..c5c80a922f3 100644 --- a/app/assets/stylesheets/mobile/login.scss +++ b/app/assets/stylesheets/mobile/login.scss @@ -141,8 +141,6 @@ } #login-form { - margin-bottom: 0.75em; - label { float: left; display: block; diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index a603f2fcc15..7fe355e6556 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -1718,6 +1718,7 @@ en: email_login: link_label: "Email me a login link" button_label: "with email" + login_link: "Skip the password; email me a login link" emoji: "lock emoji" complete_username: "If an account matches the username %{username}, you should receive an email with a login link shortly." complete_email: "If an account matches %{email}, you should receive an email with a login link shortly."