Allow re-authentication in editor after 401 response #4602

jaswilli · 2014-12-08T00:39:45Z

This PR supersedes #3492. The commit from #3492 has been rebased and is now working. There are some UX and other minor details that need to be sorted out:

A couple things I noticed right away (there are likely others as well):

There's currently no feedback after the re-authentication succeeds or fails.
Credentials need to be cleared from the controller after the re-auth attempt.
The modal needs to be styled.

ErisDS · 2014-12-09T21:26:43Z

@JohnONolan & @PaulAdamDavis this PR includes a new modal that allows you to sign back in on the editor in the event that you get logged out. It currently looks like this:

Needs some ❤️ 😉

core/client/templates/modals/signin.hbs

+            <div class="password-wrap">
+                {{input class="password" type="password" placeholder="Password" name="password" value=password}}
+            </div>
+            <button class="button-save" type="submit" {{action "validateAndAuthenticate"}} {{bind-attr disabled=submitting}}>Log in</button>


PaulAdamDavis · 2014-12-12T11:23:36Z

Along with changing the class on the button, add this to the bottom of core/client/assets/sass/components/modals.scss

The extra spacing under the title comes from #4632

// Modal login styles
.modal-body .login-form {
    display: block; // Override inherited `display: table-cell;`

    .email-wrap,
    .password-wrap {
        input {
            width: 100%;
        }
    }

    @media (max-width: 900px) {
        margin: 0 auto;
        max-width: 264px;

        .email-wrap,
        .password-wrap {
            width: 100%;
            margin: 0 auto 1em;
        }

        .btn {
            margin: 0;
            width: 100%;
            margin-bottom: 1em;
        }
    }

    @media (min-width: 901px) {
        .email-wrap,
        .password-wrap {
            width: calc(50% - 5px);
        }

        .email-wrap {
            float: left;
        }

        .password-wrap {
            float: right;
        }

        .btn {
            margin-top: 8px;
            float: right;
        }
    }
}

core/client/templates/modals/signin.hbs

@@ -0,0 +1,14 @@
+{{#gh-modal-dialog action="closeModal" showClose=true type="action" style="wide,centered" animation="fade"


jaswilli · 2014-12-12T19:50:58Z

Thanks @PaulAdamDavis -- updated with those changes.

jaswilli · 2014-12-13T01:58:26Z

What do we think about only allowing the re-auth to be against the user that was previously logged in by either pre-filling the username field (and making it readonly) or just only showing a password prompt?

It's really not appropriate to log in as a different user in this situation and from a technical standpoint--who knows what would happen. Basically we'd have to reset the application, which is exactly the opposite of what we're trying to accomplish here.

JohnONolan · 2014-12-13T09:04:36Z

+1

jaswilli · 2014-12-13T15:28:14Z

Updated to only allow re-auth as the previously logged in user.

I also added a notification after a successful re-auth because it felt really...abrupt without any feedback. But let me know if no notification is preferred.

Anyway, I think this in a pretty workable state right now so it'd be great if people could take it for a spin and see if there are any issues.

jaswilli · 2014-12-13T15:34:09Z

Also, for anyone who wants to test this, you can get the modal to come up by opening the editor, deleting the access token from the database (delete from accesstokens;) and then clicking the save button in the editor.

jaswilli · 2014-12-13T16:26:29Z

ErisDS · 2014-12-13T17:23:09Z

@jaswilli are you happy with this now?

Just saw you took the WIP tag off so I assume yes, Sorry!

jaswilli · 2014-12-13T17:51:24Z

Yeah, I took off the WIP because it seems pretty good to me. Definitely open to feedback and more changes though.

ErisDS · 2014-12-13T17:53:34Z

I think it might be worth adding the user-select false CSS rule to the disabled input? Just because if you try to select the email and hit backspace it actually goes back and gets a bit confusing.

ErisDS · 2014-12-13T17:54:46Z

Otherwise seems to be working pretty awesomely!

jaswilli · 2014-12-13T18:35:05Z

As far as I know user-select doesn't work on input elements. I could change the email address to be in a span instead and make it unselectable:

JohnONolan · 2014-12-13T18:54:19Z

I don't think we should display email at all, just "Please re-authenticate" (for the heading) and password field?

jaswilli · 2014-12-13T19:02:40Z

@JohnONolan how about this?:

edit (I can change the header to please re-authenticate)

jaswilli · 2014-12-13T22:45:36Z

Screenshot from PR as it stands right now:

JohnONolan · 2014-12-13T23:01:03Z

Perfect - just need @PaulAdamDavis to followup with CSS on the form

JohnONolan · 2014-12-13T23:01:19Z

Also what happens if I click on the X ?

jaswilli · 2014-12-13T23:09:23Z

Also what happens if I click on the X ?

The modal just goes away and you're back in the editor. From there if you try to navigate away you'll get the "Are you sure you want to leave?" modal, or if you do something that triggers another 401 (i.e. saving) the re-auth modal will come back up.

PaulAdamDavis · 2014-12-14T22:07:25Z

Here's some minor style changes (thought it would be clearer sharing the whole block instead of line-per-line comments.

It looks like this on desktop. Mobile view hasn't changed.

// Modal login styles
.modal-body .login-form {
    display: block; // Override inherited `display: table-cell;`

    .password-wrap {
        input {
            width: 100%;
        }
    }

    @media (max-width: 900px) {
        margin: 0 auto;
        max-width: 264px;

        .password-wrap {
            width: 100%;
            margin: 0 auto 1em;
        }

        .btn {
            margin: 0;
            width: 100%;
            margin-bottom: 1em;
        }
    }

    @media (min-width: 901px) {
        display: flex;

        .password-wrap {
            flex: 1;
        }
    }
}

sebgie · 2014-12-15T14:21:23Z

Tested, looks very good to me 👍! When the CSS changes from Pauls comment are in, this is good to go.

Closes #2092 - Adds styling for re-auth modal. - Prevent transition to posts route on success. - Clear credentials from controller. - Handle confirmAccept action if form is submitted via 'enter'. - Only allow re-auth as the user that was previously logged in.

jaswilli · 2014-12-15T14:43:07Z

Updated CSS is in. Thanks again, @PaulAdamDavis

Allow re-authentication in editor after 401 response

jaswilli mentioned this pull request Dec 8, 2014

[WIP] Handle session expiration gracefully #3492

Closed

PaulAdamDavis reviewed Dec 12, 2014
View reviewed changes

core/client/templates/modals/signin.hbs

@@ -0,0 +1,14 @@

{{#gh-modal-dialog action="closeModal" showClose=true type="action" style="wide,centered" animation="fade"

This comment was marked as abuse.

Sign in to view

jaswilli changed the title ~~[WIP] Allow re-authentication in editor after 401 response~~ Allow re-authentication in editor after 401 response Dec 13, 2014

marcoow and others added 2 commits December 15, 2014 14:39

allow re-login when authorization fails on editor.edit route

1961b07

sebgie added a commit that referenced this pull request Dec 15, 2014

Merge pull request #4602 from jaswilli/better-auth-retry

7a0fe7c

Allow re-authentication in editor after 401 response

sebgie merged commit 7a0fe7c into TryGhost:master Dec 15, 2014

jaswilli deleted the better-auth-retry branch December 15, 2014 15:02

jaswilli mentioned this pull request Dec 15, 2014

Remove files for a modal that is no longer used. #4655

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Allow re-authentication in editor after 401 response #4602

Allow re-authentication in editor after 401 response #4602

jaswilli commented Dec 8, 2014

ErisDS commented Dec 9, 2014

This comment was marked as abuse.

PaulAdamDavis commented Dec 12, 2014

This comment was marked as abuse.

jaswilli commented Dec 12, 2014

jaswilli commented Dec 13, 2014

JohnONolan commented Dec 13, 2014

jaswilli commented Dec 13, 2014

jaswilli commented Dec 13, 2014

jaswilli commented Dec 13, 2014

ErisDS commented Dec 13, 2014

jaswilli commented Dec 13, 2014

ErisDS commented Dec 13, 2014

ErisDS commented Dec 13, 2014

jaswilli commented Dec 13, 2014

JohnONolan commented Dec 13, 2014

jaswilli commented Dec 13, 2014

jaswilli commented Dec 13, 2014

JohnONolan commented Dec 13, 2014

JohnONolan commented Dec 13, 2014

jaswilli commented Dec 13, 2014

PaulAdamDavis commented Dec 14, 2014

sebgie commented Dec 15, 2014

jaswilli commented Dec 15, 2014

		@@ -0,0 +1,14 @@
		{{#gh-modal-dialog action="closeModal" showClose=true type="action" style="wide,centered" animation="fade"

Allow re-authentication in editor after 401 response #4602

Allow re-authentication in editor after 401 response #4602

Conversation

jaswilli commented Dec 8, 2014

ErisDS commented Dec 9, 2014

This comment was marked as abuse.

PaulAdamDavis commented Dec 12, 2014

This comment was marked as abuse.

jaswilli commented Dec 12, 2014

jaswilli commented Dec 13, 2014

JohnONolan commented Dec 13, 2014

jaswilli commented Dec 13, 2014

jaswilli commented Dec 13, 2014

jaswilli commented Dec 13, 2014

ErisDS commented Dec 13, 2014

jaswilli commented Dec 13, 2014

ErisDS commented Dec 13, 2014

ErisDS commented Dec 13, 2014

jaswilli commented Dec 13, 2014

JohnONolan commented Dec 13, 2014

jaswilli commented Dec 13, 2014

jaswilli commented Dec 13, 2014

JohnONolan commented Dec 13, 2014

JohnONolan commented Dec 13, 2014

jaswilli commented Dec 13, 2014

PaulAdamDavis commented Dec 14, 2014

sebgie commented Dec 15, 2014

jaswilli commented Dec 15, 2014