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

2024-11-22 15:25:35 +08:00 · 2021-02-24 16:30:08 -05:00 · 2021-02-24 16:30:08 -05:00 · 362dd798ae
commit 362dd798ae
parent 437c348598
13 changed files with 56 additions and 44 deletions
--- 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: {
--- 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}}
  </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}}
--- 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 @@
      <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}}
--- a/app/assets/javascripts/discourse/app/templates/modal/login.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/login.hbs
@ -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}}
--- 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(),
--- 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) {
--- 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"
    );
  });
--- 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(),
--- 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;
      }
--- 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
--- 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;
--- 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;
--- 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 <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."