Dynamic import for zxcvbn library

[Oksydan]

Questions	Answers
Branch?	8.0.x-rc
Description?	zxcvbn library is rly huge and shouldn't be loaded in core.js. We are providing new filed to prestashop global variable core_js_public_path. It is being used for webpack publicPath on the fly to avoid problem when ruing prestashop inside catalog (domain.com/directory/). For now prestashop.checkPasswordScore is asynchronous and it's returning a promise. zxcvbn library is being loaded dynamically on calling prestashop.checkPasswordScore function. I will provide PR to classic and hummingbird.
Type?	improvement
Category?	FO
BC breaks?	Yes and no. Since prestashop 8.0.0 isn't released yet but it will be if we don't implement it now.
Deprecations?	no
Fixed ticket?	Fixes #30088
How to test?	1. Build core.js assets (there should new file with suffix -chunk.js. 2. If testing with classic-theme PrestaShop/classic-theme#67 apply changes from this PR. 3. Go to FO register page. 4. Type inside password field, (you can open network tab in browser, there should be js file loaded on password check). 5. Password policy should be working as before.
Possible impacts?	Check if it's working for prestashop installation with different physicial_uri

Before:
core.js size: 940kB

After:
core.js size: 144kB

[yanmakouf]

@NeOMakinG 🦸‍♂️ 🚀 🔎

[Hlavtox]

Remember that we want to load core js optionally - #29995 😎

[NeOMakinG]

We definitely need this inside the 8.0 release or it will be a big blocker for the adoption

@Oksydan you're a monster btw

[jolelievre]

Not sure I get the purpose of this one? It allows using const zxcvbn = (await import('zxcvbn')).default; and import from chunks right?

[Oksydan]

Hi @jolelievre,
Webpack need publicPath to be set so it can find files that have to be fetched example publicPath = "/themes/" - domain.com/themes/chunkfilename.
We can set publicPath in webpack configuration to just /themes/ and that should work in 99% but if store physical_uri is different than / for example /store/ (domain.com/store/) publicPath will be /store/themes/. That's why we need that variable to be set on the fly.

[khouloudbelguith]

Hello @nicosomb,

I checked those cases
Case1

Physical_uri === /Presta+Shop/ => OK

• Install > Information step
• FO > Create an account
• FO > Edit information
• FO > Create an account for a guest
• FO > Checkout > Create an account

Case2

Physical_uri === /PrestaShop/ => OK

• Install > Information step => OK
• FO > Create an account => OK
• FO > Edit information => OK
• FO > Create an account for a guest => OK
• FO > Checkout > Create an account => OK

Case3

Physical_uri === / => OK

• Install > Information step => OK
• FO > Create an account => OK
• FO > Edit information => OK
• FO > Create an account for a guest => OK
• FO > Checkout > Create an account => OK

I attached screen records

Check.1.-.base.uri._.mp4

Case4

Physical_uri === /test/80x/ => NOK
Install > Information step: OK
BO > Create a customer => OK
BO > Edit an employee password => OK
FO > Create an account => NOK
FO > Edit information => NOK
FO > Checkout > Create an account => NOK

The info messages are not displayed when typing the password
I attached a screen record

base.uri._test_80x_.NOK.mp4

I tried with 8.0.0RC1 => OK

8.0.0RC1.with.PR.ok.mp4

Thanks!

[Oksydan]

Hi @khouloudbelguith,
In not working case your network tab is showing that file has been fetched properly. There is a js error in your console ever time you type in password field. Did you apply changes to classic when you were testing that case 4? Are you able to show me that console with errors?
Thanks

[khouloudbelguith]

Hi @Oksydan,

Thanks for your feedback.
After some rechecks, it is ok ✔️
I checked with this

Also, automatic tests => OK ✔️
I checked when multistore enabled / I checked friendly URL enabled & disabled => OK ✔️

final_check.mp4

Also, I checked the size of core.js => ok

Before, it was Nok

Thanks!

[prestonBot]

QA approved, well done! Message to the maintainers: do not forget to milestone it before the merge.

[kpodemski]

Thank you @Oksydan @khouloudbelguith

[Oksydan]

@khouloudbelguith good job. Thank you.