UX: better email login pages (#19058)

* UX: better email login pages

* Update error message for email login error

app/assets/javascripts/discourse/app/templates/email-login.hbs

@@ -1,34 +1,36 @@
 <div class="container email-login clearfix">
-  <div class="pull-left col-image">
-    <img src={{this.lockImageUrl}} class="password-reset-img" alt={{i18n "email_login.emoji"}}>
-  </div>
+  <div class="content-wrapper">
+    <div class="image-wrapper">
+      <img src={{this.lockImageUrl}} class="password-reset-img" alt={{i18n "email_login.emoji"}}>
+    </div>
 
-  <div class="pull-left col-form">
     <form>
       {{#if this.model.error}}
-        <div class="alert alert-error">
-          {{this.model.error}}
+        <div class="error-info">
+          {{html-safe this.model.error}}
         </div>
       {{/if}}
 
       {{#if this.model.can_login}}
-        {{#if this.secondFactorRequired }}
-          {{#if this.model.security_key_required }}
-            <SecurityKeyForm @allowedCredentialIds={{this.model.allowed_credential_ids}} @challenge={{this.model.security_key_challenge}} @showSecurityKey={{this.model.security_key_required}} @showSecondFactor={{false}} @secondFactorMethod={{this.secondFactorMethod}} @otherMethodAllowed={{this.secondFactorRequired}} @action={{action "authenticateSecurityKey"}}>
-            </SecurityKeyForm>
+        <div class="email-login-form">
+          {{#if this.secondFactorRequired }}
+            {{#if this.model.security_key_required }}
+              <SecurityKeyForm @allowedCredentialIds={{this.model.allowed_credential_ids}} @challenge={{this.model.security_key_challenge}} @showSecurityKey={{this.model.security_key_required}} @showSecondFactor={{false}} @secondFactorMethod={{this.secondFactorMethod}} @otherMethodAllowed={{this.secondFactorRequired}} @action={{action "authenticateSecurityKey"}}>
+              </SecurityKeyForm>
+            {{else}}
+              <SecondFactorForm @secondFactorMethod={{this.secondFactorMethod}} @secondFactorToken={{this.secondFactorToken}} @backupEnabled={{this.model.backup_codes_enabled}} @isLogin={{true}}>
+                <SecondFactorInput @value={{this.secondFactorToken}} @secondFactorMethod={{this.secondFactorMethod}} @backupEnabled={{this.backupEnabled}} />
+              </SecondFactorForm>
+            {{/if}}
           {{else}}
-            <SecondFactorForm @secondFactorMethod={{this.secondFactorMethod}} @secondFactorToken={{this.secondFactorToken}} @backupEnabled={{this.model.backup_codes_enabled}} @isLogin={{true}}>
-              <SecondFactorInput @value={{this.secondFactorToken}} @secondFactorMethod={{this.secondFactorMethod}} @backupEnabled={{this.backupEnabled}} />
-            </SecondFactorForm>
+            <h2>{{i18n "email_login.confirm_title" site_name=this.siteSettings.title}}</h2>
+            <p>{{i18n "email_login.logging_in_as" email=this.model.token_email}}</p>
           {{/if}}
-        {{else}}
-          <h2>{{i18n "email_login.confirm_title" site_name=this.siteSettings.title}}</h2>
-          <p>{{i18n "email_login.logging_in_as" email=this.model.token_email}}</p>
-        {{/if}}
 
-        {{#unless this.model.security_key_required }}
-          <DButton @label="email_login.confirm_button" @action={{action "finishLogin"}} @type="submit" @class="btn-primary" />
-        {{/unless}}
+          {{#unless this.model.security_key_required }}
+            <DButton @label="email_login.confirm_button" @action={{action "finishLogin"}} @type="submit" @class="btn-primary" />
+          {{/unless}}
+        </div>
       {{/if}}
     </form>
   </div>

app/assets/stylesheets/common/base/login.scss

@@ -453,3 +453,28 @@ button#new-account-link {
     padding-bottom: 1em;
   }
 }
+
+.email-login {
+  border-radius: 10px;
+  background-color: var(--secondary);
+  padding: 20px;
+  margin: 0 auto;
+  .content-wrapper {
+    box-shadow: 0 1px 10px 1px rgba(var(--primary-low-rgb), 1.25);
+    border-radius: 10px;
+    padding: 1em 2.5em 1em 2.5em;
+    .image-wrapper {
+      text-align: center;
+      padding-bottom: 1em;
+    }
+    .email-login-form {
+      text-align: center;
+      .btn-primary {
+        margin-top: 10px;
+      }
+      #security-key {
+        justify-content: center;
+      }
+    }
+  }
+}

app/assets/stylesheets/desktop/login.scss

@@ -394,7 +394,6 @@
 }
 
 .password-reset,
-.email-login,
 .invites-show {
   .col-form {
     padding: 0.5em 2em 1em;
@@ -422,8 +421,7 @@
   }
 }
 
-.password-reset,
-.email-login {
+.password-reset {
   .col-form {
     padding-top: 40px;
   }
@@ -476,3 +474,10 @@
     }
   }
 }
+
+.email-login {
+  width: 550px;
+  .password-reset-img {
+    height: 150px;
+  }
+}

app/assets/stylesheets/mobile/login.scss

@@ -269,3 +269,7 @@
     font-size: var(--font-up-3);
   }
 }
+
+.email-login {
+  width: 90%;
+}

app/controllers/session_controller.rb

@@ -352,7 +352,7 @@ class SessionController < ApplicationController
     else
       render json: {
         can_login: false,
-        error: I18n.t('email_login.invalid_token')
+        error: I18n.t('email_login.invalid_token', base_url: Discourse.base_url)
       }
     end
   end
@@ -383,7 +383,7 @@ class SessionController < ApplicationController
       end
     end
 
-    render json: { error: I18n.t('email_login.invalid_token') }
+    render json: { error: I18n.t('email_login.invalid_token', base_url: Discourse.base_url) }
   end
 
   def one_time_password

config/locales/server.en.yml

@@ -841,7 +841,7 @@ en:
     success_unapproved: "You successfully changed your password."
 
   email_login:
-    invalid_token: "Sorry, that email login link is too old. Select the Log In button and use 'I forgot my password' to get a new link."
+    invalid_token: 'Oops! The link you used no longer works. You can <a href="%{base_url}/login">Log In</a> now. If you forgot your password, you can <a href="%{base_url}/password-reset">request a link</a> to reset it.'
     title: "Email login"
 
   user_auth_tokens:

spec/requests/session_controller_spec.rb

@@ -178,7 +178,7 @@ RSpec.describe SessionController do
 
         expect(response.status).to eq(200)
         expect(response.parsed_body["error"]).to eq(
-          I18n.t('email_login.invalid_token')
+          I18n.t('email_login.invalid_token', base_url: Discourse.base_url)
         )
       end
 
@@ -191,7 +191,7 @@ RSpec.describe SessionController do
           expect(response.status).to eq(200)
 
           expect(response.parsed_body["error"]).to eq(
-            I18n.t('email_login.invalid_token')
+            I18n.t('email_login.invalid_token', base_url: Discourse.base_url)
           )
         end
       end