Skip to content

Fix issue with page reload/refresh on two-factor-challenge page #1291

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 5, 2023
Merged

Fix issue with page reload/refresh on two-factor-challenge page #1291

merged 2 commits into from
Apr 5, 2023

Conversation

andrewdwallo
Copy link
Contributor

The following pull request fixes the issue as explained here: #1289 (comment)

Reloading/refreshing the page no longer causes the recovery code form input to appear for a short amount of time. The "blip" as Alpine calls it is no longer occuring, which was causing the issue in the first place.

In Alpine's documentation:

"Sometimes, when you're using AlpineJS for a part of your template, there is a "blip" where you might see your uninitialized template after the page loads, but before Alpine loads."

"x-cloak addresses this scenario by hiding the element it's attached to until Alpine is fully loaded on the page."

@taylorotwell
Copy link
Member

Can the x-cloak styling go into a stylesheet?

@fotrino
Copy link
Contributor

fotrino commented Apr 5, 2023

Yes, I've it in my app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

[x-cloak] { display: none; }

@taylorotwell taylorotwell merged commit 1d2d6d0 into laravel:3.x Apr 5, 2023
@andrewdwallo andrewdwallo deleted the fix/two-factor-page branch April 6, 2023 01:37
@andrewdwallo
Copy link
Contributor Author

Apologies, I believe that the x-cloak directive should only be applied where x-show="recovery" is, not where
x-show="! recovery" is. This is because refreshing the page while you are actually showing the "recovery code" form input, by default, will just bring you back to the form input "code". I will test it out again, but I have just learned that I think that is the case after using what we have now on a very slow server. What we have now works, but I don't think it is the best way to handle it. If I do find that this is the case, do you want me to create another pull request to fix it or do you want to? All that would be needed to be changed is to remove x-cloak wherever x-show="! recovery" is.

@andrewdwallo
Copy link
Contributor Author

Yep, I was right. x-cloak should only be where x-show="recovery" is. We need to remove it wherever x-show="! recovery" is. Here are the differences. I purposely made the server slow here.

What we have now, which worked to remove the brief view of the "recovery code" form input:

Bad.mp4

What we should use. Which is remove x-cloak where x-show="! recovery" and keep x-cloak where x-show="recovery":

Good.mp4

@taylorotwell
Copy link
Member

Pushed your suggested fix.

@andrewdwallo
Copy link
Contributor Author

Pushed your suggested fix.

Great! Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants