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

[andrewdwallo]

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]

Can the x-cloak styling go into a stylesheet?

[fotrino]

Yes, I've it in my app.css

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

[x-cloak] { display: none; }

[andrewdwallo]

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]

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]

Pushed your suggested fix.

[andrewdwallo]

Pushed your suggested fix.

Great! Thanks