UX: better email login pages (#19058)
* UX: better email login pages * Update error message for email login error
This commit is contained in:
parent
40e8912395
commit
040136675b
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -269,3 +269,7 @@
|
|||
font-size: var(--font-up-3);
|
||||
}
|
||||
}
|
||||
|
||||
.email-login {
|
||||
width: 90%;
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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:
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue