Timing on a Reset Button

Wappler General Need Help
1

Looking for some help from the javascript pros. Here’s my novice approach to the following situation:

I have card show/hide function on a login page. When the user clicks the PW reset button it shows a message telling them to go check their email for the reset link. I’d like another reset button to appear after 20 minutes in case the email doesn’t go through.

I’m have trouble figuring out how to attach a “timer” to this. Any insight is appreciated.

2

H,

What about a flow? It has a wait function and you can also add a condition or something else.

image
image1065×809 25.6 KB

Remember the delay is in ms, so 20 minutes are 1200000 ms :slight_smile:

And there’s a component called action scheduler, which you can set a dynamic event to set actions.

image
image488×734 15.3 KB

I also take this from codepen:

<html>
<body>
  <div>Time left = <span id="timer">20:00</span></div>
</body>
</html>

var timeLimitInMinutes = 20;
var timeLimitInSeconds = timeLimitInMinutes * 60;
var timerElement = document.getElementById('timer');

function startTimer() {
  timeLimitInSeconds--;
  var minutes = Math.floor(timeLimitInSeconds / 60);
  var seconds = timeLimitInSeconds % 60;

  if (timeLimitInSeconds < 0) {
    timerElement.textContent = '00:00';
    clearInterval(timerInterval);
    return;
  }

  if (minutes < 10) {
    minutes = '0' + minutes;
  }
  if (seconds < 10) {
    seconds = '0' + seconds;
  }

  timerElement.textContent = minutes + ':' + seconds;
}

var timerInterval = setInterval(startTimer, 1000);

If you’re using flow you can call the javascript function as startTimer

3

I thought of a flow as well, but a 20 minute ‘wait’ is a long time and the chance of the user still being on the page after 20 minutes is very slim.

Must be a way to set a cookie or something. So they can leave the page and come back.

1 Like
4

I have done something similar to this. If the purpose of this timer is to stop the user from clicking on the resend link button without first waiting for a certain time, then you can use a combination of date and time component and variable.

On the click event of the reset link, set a value for the variable end_timer.setValue(countdowntimer.datetime.addMinutes(20)).

Then disable the reset link button by adding this condition ((countdowntimer.datetime.minutesUntil(end_timer.value)).floor() &gt; 0).

@brad has also made a valid point about the length of this wait.

1 Like
5

Personally I think anything other than using a cookie is unlikely to help as any solution involving storage which would be cleared on leaving the page (such as variables), closing the browser (such as session variables) are unlikely to be as effective as desired.
Simply disable the link/button if the cookie is set

1 Like
6

I’ve faced a lot of times this case…
I think the way I would go is:

  1. The clicks the reset password button
  2. a message apperas “Pleae check your email for the reset link…”
  3. INSIDE this message I would insert at the bottom AND one more link
  • “You did’t receive the email with the link? Please click here to resend the link…”

I don’t know how you prefer to check the first link or the second and delete the according record in your database (a session I suppose) and proceed the reste procedure with the correct link (record in your database).
This way the system assumes that the email has been sent and received from the user UNLESS a new request tells the opposite

7

Thanks everyone - based on all the feedback and my novice level - a cookie wasn’t even considered. Headed on a little bit of travel for 10 days and will get back to it. Something to pour over during the flights…