Added special view for "locked" users when they fail signin (#1561)
refs https://github.com/TryGhost/Ghost/pull/11790 - After user fails to signin due to "locked" being locked a new view with automatic email message and more instructions will be shown to make the password reset process easier. - Refined instructions screen - Added icon + animation - Refined copy Co-authored-by: Nazar Gargol <nazargargol@gmail.com>
This commit is contained in:
Peter Zimon
GitHub
parent
3be0fcc286
commit
d7597e426e
|
|
@ -21,6 +21,8 @@ export default Controller.extend(ValidationEngine, {
|
|||
authProperties: null,
|
||||
|
||||
flowErrors: '',
|
||||
passwordResetEmailSent: false,
|
||||
|
||||
// ValidationEngine settings
|
||||
validationType: 'signin',
|
||||
|
||||
|
|
@ -55,6 +57,10 @@ export default Controller.extend(ValidationEngine, {
|
|||
|
||||
this.set('flowErrors', (mainError.context.string || mainError.message.string));
|
||||
|
||||
if (mainError.message.string.match(/your password must be reset/i)) {
|
||||
this.set('passwordResetEmailSent', true);
|
||||
}
|
||||
|
||||
if (mainError.context.string.match(/user with that email/i)) {
|
||||
this.get('signin.errors').add('identification', '');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
/* Sign in
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-signin {
|
||||
.gh-signin, .gh-auth-email {
|
||||
position: relative;
|
||||
margin: 30px auto;
|
||||
padding: 40px;
|
||||
|
|
@ -60,3 +59,138 @@
|
|||
box-shadow: none;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
/* Email notification */
|
||||
/* ---------------------------------------------------------- */
|
||||
.gh-auth-animation-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--lightgrey);
|
||||
animation: 0.5s forwards 0.6s containerFadeIn;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes containerFadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.gh-auth-email-animation {
|
||||
position: relative;
|
||||
width: 122px;
|
||||
height: 125px;
|
||||
margin-bottom: -24px;
|
||||
animation: 0.5s forwards 0.6s envelopeFadeIn;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes envelopeFadeIn {
|
||||
0% {
|
||||
transform: translateY(-6px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.gh-auth-email-animation .gh-auth-envelope-back {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.gh-auth-email-animation .gh-auth-envelope-front {
|
||||
position: absolute;
|
||||
top: 48px;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.gh-auth-email-animation .gh-auth-paper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 15px;
|
||||
width: 90px;
|
||||
height: 82px;
|
||||
background: white;
|
||||
border: 1px solid #C5D2D9;
|
||||
border-radius: 4px;
|
||||
animation: 1.2s ease forwards 1.15s paperIn;
|
||||
}
|
||||
|
||||
.gh-auth-email-animation .gh-auth-lock {
|
||||
margin-top: 15px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
opacity: 0;
|
||||
animation: 0.45s forwards 1.35s lockIn;
|
||||
}
|
||||
|
||||
@keyframes paperIn {
|
||||
0% {
|
||||
transform: scale(1,1) translateY(0);
|
||||
}
|
||||
10% {
|
||||
transform: scale(1.05,.95) translateY(0);
|
||||
}
|
||||
30% {
|
||||
transform: scale(.95,1.05) translateY(-32px);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1,1) translateY(-27px);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1,1) translateY(-27px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes lockIn {
|
||||
0% {
|
||||
transform: scale(1) translateY(2px);
|
||||
opacity: 0;
|
||||
}
|
||||
60% {
|
||||
transform: scale(1.1) translateY(-2px);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1) translateY(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.gh-auth-lock-body {
|
||||
margin-top: 48px;
|
||||
animation: 0.5s forwards 0.2s bodyFadeIn;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.gh-auth-lock-body p {
|
||||
color: var(--midgrey);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.4em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@keyframes bodyFadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,24 @@
|
|||
<div class="gh-flow">
|
||||
<div class="gh-flow-content-wrap">
|
||||
<section class="gh-flow-content">
|
||||
{{#if this.passwordResetEmailSent}}
|
||||
<div class="gh-auth-email">
|
||||
<div class="gh-auth-animation-container">
|
||||
<div class="gh-auth-email-animation">
|
||||
{{svg-jar "locked-email-back" class="gh-auth-envelope-back"}}
|
||||
{{svg-jar "locked-email-front" class="gh-auth-envelope-front"}}
|
||||
<div class="gh-auth-paper">
|
||||
{{svg-jar "locked-email-lock" class="gh-auth-lock"}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-auth-lock-body">
|
||||
<p>
|
||||
For security, you need to create new password. An email has been sent to you with instructions!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
<form id="login" method="post" class="gh-signin" novalidate="novalidate" {{action "authenticate" on="submit"}}>
|
||||
<GhFormGroup @errors={{this.signin.errors}} @hasValidated={{this.hasValidated}} @property="identification">
|
||||
<span class="gh-input-icon gh-icon-mail">
|
||||
|
|
@ -57,6 +75,7 @@
|
|||
</form>
|
||||
|
||||
<p class="main-error">{{if this.flowErrors this.flowErrors}} </p>
|
||||
{{/if}}
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<svg width="122" height="125" viewBox="0 0 122 125" xmlns="http://www.w3.org/2000/svg"><title>envelope-back</title><path d="M3.953 39.164L54.375 2.172c3.947-2.896 9.303-2.896 13.25 0l50.422 36.992c2.484 1.823 3.953 4.728 3.953 7.82v68.336c0 5.346-4.312 9.68-9.632 9.68H9.632C4.312 125 0 120.666 0 115.32V46.983c0-3.09 1.469-5.996 3.953-7.819z" fill="#C5D2D9" fill-rule="evenodd"/></svg>
|
||||
|
After Width: | Height: | Size: 386 B |
|
|
@ -0,0 +1 @@
|
|||
<svg width="122" height="77" viewBox="0 0 122 77" xmlns="http://www.w3.org/2000/svg"><title>envelope-front</title><g stroke="#C5D2D9" fill="none" fill-rule="evenodd"><path d="M.5 3.023v64.28c0 2.519 1.002 4.802 2.642 6.463 1.634 1.655 3.9 2.693 6.438 2.734h102.431c1.888-.005 3.641-.592 5.093-1.593l-5.64-3.368C44.768 31.699 9.41 10.472 5.388 7.859 3.085 6.365 1.463 4.75.5 3.024z" fill="#F2F4F7"/><path d="M121.491 3.111c-.97 1.746-2.609 3.38-4.94 4.89-3.73 2.418-34.423 20.824-92.079 55.216L4.895 74.89c1.428.99 3.162 1.578 5.127 1.61l102.41-.001c2.325-.006 4.447-.894 6.052-2.35 1.616-1.466 2.71-3.508 2.962-5.806l.045-65.233z" fill="#F8FAFC"/></g></svg>
|
||||
|
After Width: | Height: | Size: 657 B |
|
|
@ -0,0 +1 @@
|
|||
<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><path d="M8.75 16.25h22.5c1.667 0 2.5.833 2.5 2.5v17.5c0 1.667-.833 2.5-2.5 2.5H8.75c-1.667 0-2.5-.833-2.5-2.5v-17.5c0-1.667.833-2.5 2.5-2.5zm2.5 0V10c0-3.368 1.458-5.894 4.375-7.578 2.917-1.684 5.833-1.684 8.75 0S28.75 6.632 28.75 10v6.25M20 25v5" stroke="#3EB0EF" stroke-width="1.5" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
|
After Width: | Height: | Size: 454 B |
Loading…
Reference in New Issue