Detect exit intent when editing Profile, and prompt before navigating away

[gaswirth]

There is already functionality in place to detect whether a Profile has edits, currently used to enable/disable the Save button. This should be taken one more step to prompt the user before refreshing/reloading, or navigating away and losing edited form data.

[stephenscript]

I took a look into this and would like to propose an implementation using react-router Prompt and some native DOM events to prevent navigation away / closing if there are unsaved changes. I would use the hasEditedProfile state you mentioned to conditionally block navigation with a warning toast message.

I'm happy to claim this enhancement ticket and get to work. I'll update here as development ensues.

[gaswirth]

Great thought, but one issue -- I believe Prompt is only available in router v5, not v6. Let me know if you find that's not the case, but I'm fairly sure Prompt was removed after v5.

[stephenscript]

Ah, you're right. How strange. Looks like I'll have to build the functionality myself. More fun for me! I think I can still manage it, just with a bit more creativity. Good catch.