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

UX: add link for email login below username, remove button (#12118)

This commit is contained in:
Kris 2021-02-24 16:30:08 -05:00 committed by GitHub
parent 437c348598
commit 362dd798ae
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 56 additions and 44 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

@ -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: {

11
app/assets/javascripts/discourse/app/templates/components/login-buttons.hbs
View File

@ -9,13 +9,4 @@
{{/if}}
{{b.title}}
</button>
{{/each}}
{{#if showLoginWithEmailLink}}
{{d-button
action=emailLogin
label="email_login.button_label"
disabled=processingEmailLink
icon="far-envelope"
class="login-with-email-button"}}
{{/if}}
{{/each}}

11
app/assets/javascripts/discourse/app/templates/mobile/modal/login.hbs
View File

@ -6,11 +6,7 @@
<p class="login-subheader">{{i18n "login.subheader_title"}}</p>
</div>
{{#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 @@
<div class="input-group">
{{input value=loginName class=(value-entered loginName)type="email" id="login-account-name" autocorrect="off" autocapitalize="off" disabled=showSecondFactor}}
<label class="alt-placeholder" for="login-account-name">{{i18n "login.email_placeholder"}}</label>
{{#if showLoginWithEmailLink}}
<a href id="email-login-link" {{action (unless processingEmailLink "emailLogin")}}>
{{i18n "email_login.login_link"}}
</a>
{{/if}}
</div>
<div class="input-group">
{{input value=loginPassword class=(value-entered loginPassword) type="password" id="login-account-password" maxlength="200" disabled=showSecondFactor}}

11
app/assets/javascripts/discourse/app/templates/modal/login.hbs
View File

@ -13,6 +13,11 @@
<div class="input-group">
{{input value=loginName type="email" id="login-account-name" class=(value-entered loginName) autocomplete="username" autocorrect="off" autocapitalize="off" disabled=showSecondFactor}}
<label class="alt-placeholder" for="login-account-name">{{i18n "login.email_placeholder"}}</label>
{{#if showLoginWithEmailLink}}
<a href id="email-login-link" {{action (unless processingEmailLink "emailLogin")}}>
{{i18n "email_login.login_link"}}
</a>
{{/if}}
</div>
<div class="input-group">
{{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 @@
<p class="login-subheader">{{i18n "login.subheader_title"}}</p>
</div>
{{/if}}
{{login-buttons
showLoginWithEmailLink=showLoginWithEmailLink
processingEmailLink=processingEmailLink
emailLogin=(action "emailLogin")
externalLogin=(action "externalLogin")}}
{{login-buttons externalLogin=(action "externalLogin")}}
</div>
{{/if}}
{{/d-modal-body}}

2
app/assets/javascripts/discourse/tests/acceptance/login-with-email-and-hide-email-address-taken-test.js
View File

@ -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(),

2
app/assets/javascripts/discourse/tests/acceptance/login-with-email-and-no-social-logins-test.js
View File

@ -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) {

2
app/assets/javascripts/discourse/tests/acceptance/login-with-email-disabled-test.js
View File

@ -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"
);
});

10
app/assets/javascripts/discourse/tests/acceptance/login-with-email-test.js
View File

@ -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(),

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

@ -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;
}

2
app/assets/stylesheets/common/foundation/variables.scss
View File

@ -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

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

@ -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;

2
app/assets/stylesheets/mobile/login.scss
View File

@ -141,8 +141,6 @@
}
#login-form {
margin-bottom: 0.75em;
label {
float: left;
display: block;

1
config/locales/client.en.yml
View File

@ -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 <b>%{username}</b>, you should receive an email with a login link shortly."
complete_email: "If an account matches <b>%{email}</b>, you should receive an email with a login link shortly."