Dawn theme, javascript for login template

[BigSkillet]

Where I can find the javascript associated with templates/customers/login? Specifically, the forgot password toggle and recover_success message? I haven't found any references in global.js or any other theme files.

I also noticed the forgot password toggle and recover_success message work when javascript is disabled. Could it be that it doesn't required javascript and they achieved the functionality some other way?

I'm stumped...

[PaulNewton]

I don't have an exact answer for this due to time and not being sure what your seeking.

Overall the entire form processing process is poorly defined and documented and not conducive for testing.

Like if your trying to test form error/success messages you may need to disable captchas entirely.etc

So it can take some digging.

Dawn reference customer forms and files

• JS utilities for Customers  https://github.com/Shopify/dawn/blob/main/assets/customer.js 
• https://github.com/Shopify/dawn/tree/main/templates/customers 
• Login https://github.com/Shopify/dawn/blob/main/templates/customers/login.liquid 
  •  https://shopify.dev/themes/architecture/templates/customers-login 
• Reset password https://github.com/Shopify/dawn/blob/main/templates/customers/reset_password.liquid
  •  https://shopify.dev/themes/architecture/templates/customers-reset-password
• CSS https://github.com/Shopify/dawn/blob/main/assets/customer.css 

The form tag and parameters

https://shopify.dev/api/liquid/tags/theme-tags#recover_customer_password 

Similar unanswered questions

https://community.shopify.com/c/shopify-design/how-to-show-successful-password-recovery-message/td-p... 

[BigSkillet]

I'm building a theme from scratch and would like to reference the javascript for the login, but can't seem to find it anywhere. I'd like to see how it's changed since Timber, Debut, and Slate. Any idea where that might be located, if it exists at all?  

[PaulNewton]

You keep mentioning javascript but your not talking about the GOAL, what is the code your looking for doing?

What are you trying to do?

Finding any code across 3 very different code base for comparison is gonna be a lot of work.

[BigSkillet]

The goal is to find the javascript for the forgot password toggle and recover_message associated with the login template. That's it – that's the goal. I've looked through every file in the Dawn theme and I'm not finding any reference to those items.

[PaulNewton]

Ah at least for the UI toggle between login & recover that is actually handled by CSS in some themes.

For dawn that should be in customer.css .

They use ::target psuedo selector to change styles based on the url hash/fragment : none, or #login or #recover .

You'd want to jump into browser devtools and inspect this off and on interaction flipping the display:none / display:block 

If by recovery message you mean the area/text after the recovery link is used from the recovery email I'm not sure we can intercept that besides maybe capturing the form body and parsing the form-body that's rendered?

Or maybe changing the text in locales.

Or maybe note that a lack of errors means success if trying to do liquid logic.

You could try pushing the form object into json and inspecting that output text on the frontend to see if something stands out.

[BigSkillet]

Thanks, @PaulNewton! 

Just as I suspected – no javascript. Thanks for pointing that out in customer.css. It's exactly what I was looking for and I've learned something new with the :target selector!

Yes, when I say recovery message, I'm referring to the success message that appears after a password reset. I think that may be controlled by the #login, #recover :target as well, but I'll need to investigate further. Thanks again!

@Zworthkey,
I was referring to the password recovery message in the main/templates/customers/login template, not the main password page. I'm trying to understand how the recovery message works without javascript.

[PaulNewton]

---

@BigSkillet wrote:

Yes, when I say recovery message, I'm referring to the success message that appears after a password reset. I think that may be controlled by the #login, #recover :target as well, but I'll need to investigate further. Thanks again!

---

Expanded thread for context https://community.shopify.com/c/technical-q-a/trigger-if-form-posted-successfully-with-url/m-p/14274... 

Wouldn't the pattern there be ?recovery_posted=true , ?recover_posted=true , ?recover_password=true , ?reset_password=true etc ? , ?recover_success=true 

  Wild guess really the way they build some of this stuff.

I can't recall ever seeing a param for being able to trigger the success message but I have avoided form testing ironically because of how much it's undocumented. Just knowing about the contact_posted parameter for testing shopify forms puts you miles ahead of most on the forums in that regard. You may have noticed a lack of shopify response to liquid language queries unlike API stuff as well.

So if you need to keep digging I recommend:

• ping shopify support directly 
• Use the feedback at the bottom of docs page for the customers-login template about the lack of parameter docs, optionally give email. https://shopify.dev/themes/architecture/templates/customers-login 
• If your a shopify partner - you'll want to get in the partner slack to ask around to increase chances of unburying any specific parameter for the password recovery.
• If your working with a plus merchant go through the MSM to try to a technical response instead of a basic tier 1 support response.
• If you reeally need to keep digging maybe try researching liquid code bases for the keywords through sourcegraph.com
• https://sourcegraph.com/search?q=context:global+lang:Liquid+recover_customer_password&patternType=li... 

@Zworthkey,
I was referring to the password recovery message in the main/templates/customers/login template, not the main password page. I'm trying to understand how the recovery message works without javascript.

While the template was wrong,  Note that response was about changing the translation locale strings of what text is actually displayed for such things. 

Which for dawn is {{ 'customer.recover_password.success' | t }} around line customers/login.liquid

[Zworthkey]

Please go to Shopify dawn theme by following below path:-

dawn/sections/main-password-header.liquid

And search their shop.password_message

Hope rest you will manage at your own.

Thanks