Whenever the code "546847RecoveryTooSoon" is given by the server the Collapse is set to show.
But, I noticed that if I trigger it again it collapses. So, I'm wondering if the "show" attribute is actually more like a toggle?
If it is, how to I get it to remain showing as long as that code keeps getting triggered?
THE CODE:
<div class="collapse" id="id_collapse_RecoveryTooSoon" is="dmx-bs5-collapse" dmx-bind:show="(form_recoverPassword2.lastError.response == '546847RecoveryTooSoon')">
<p class="bg-warning">
<i class="fas fa-clock"></i>
Oops! You tried again too quickly. Wait at least five seconds.
</p>
</div>
Not sure what you're after my friend...
From what I understood, you have a serverconnect form and whenever it is submitted , you check something (counting a response time?) in your api and if a condition is true then you through an error response with value '546847RecoveryTooSoon'.
Then when the form is submitted in your page you try to get that by reading the .lastError.response if it is == '546847RecoveryTooSoon'. Then you show your collapse.
Otherwise it is collapsed.
Am I right?
When the form is submitted, do you reset the form?
If you just handle the collapse (show/hide) via the form event?
remove the dmx-bind:show from the collapse
and check if the form.lastError.response == '546847RecoveryTooSoon' then show
Could that work?
Everything is working fine, I just don't know why the collapse opens and closes both on a "show" command.
But yes, I'm counting response time.
Whenever someone submits an attempt to recover a password the database records the time.
If someone submits another attempt within five seconds it makes them wait.
If it's within 5 seconds of their previous attempt, the server will throw a 200 response with the response "546847RecoveryTooSoon" - that number is irrelevant, just something I made up so I don't accidentally get that value from somewhere else.
But whenever the form's last.Error.response is "546847RecoveryTooSoon" then it shows the collapse which has the message telling them to wait.
I'm not sure why it collapses if I receive that response again.
Here's the full code.
I didn't add the .lastError.response value (notification) every time yet, as I was using my browser's console to see those values. I have them output right now.
I think this is causing the problem...
you submit the form and immediately reset it...
Please try this:
on button click, only submit the form (NO RESET). dmx-on:click="form_recoverPassword2.submit()"
This way you leave the form's response from the last submittion available to control if the collapse should show or hide
Then you can define what to do if the form is submitted with success (not fast etc) on your form success event. Then you can reset the form.
Oops. In response to that suggestion, looks like part of my message didn't get included. Aaaaaand it was actually here waiting for me when I clicked "reply":
I haven't added a form reset yet, while I was testing to make it easier for me.
That reset was what I added after your first response.
The collapse closes on the second "show" even without that.
Collapse functions as a toggle when clicked on the collapse element. When you click on the collapse element, show is added / removed to show or hide the collapsible element.
If the idea is to show and / or disable the submit button for 5 seconds, then an option would be to use a front-end countdown timer. You can dynamically show and disable the submit button until the countdown timer is greater than 0.
Another change I would suggest is to set the binding for show to dmx-class:show="(form_recoverPassword2.lastError.response == '546847RecoveryTooSoon')". It's a dynamic class toggle property instead of a dynamic binding.
