Bootstrap Vue - is there any way to time out a message box confirmation modal?

user_12275825 0
Viewed 1761

I'm new to both JS and stackoverflow, so please let me know if I need to provide more detail, or if there is a better approach.

My goal is to have a modal (preferably the msgBoxConfirm modal) close, or "Cancel" programmatically after a set time period when no input is given. I've tried wrapping it in a setTimeout and calling a time out function from within .then, but failed in both attempts.

Here is a scaffold of the code I'd like to add a time out to:

timedModalAlert: function () {
  this.$bvModal.msgBoxConfirm('Session expiration in XX. Press OK to continue.')
  .then(value => {
    if (value == true) {
      // function to refresh token
    } else {
      // function to log user out
    }
  }
  )
}

My attempt:

timedModalAlert: function () {
  setTimeout (() => {
  this.$bvModal.msgBoxConfirm('Session expiration in XX. Press OK to continue.')
  .then(value => {
    if (value == true) {
      // function to refresh token
    } else {
      // function to log user out
    }
  }
  )
}, 1000)
bootstrap-vue vuejs2 javascript
2 Answers

Bootstrap-Vue has a method to hide modals, $bvModal.hide, which takes a modal id as it's parameter. That means if you give your modal an ID, you can then close it again later.

$bvModal.msgBoxConfirm, accepts various options as a second parameter. Including an ID, so if we give our message box an ID. We can then use this ID to close it again, after x time has passed using a setTimeout and $bvModal.hide

new Vue({
  el: '#app',
  methods: {
    openModal() {
      const modalTimeoutSeconds = 3;
      const modalId = 'confirm-modal'
      let modalSetTimeout = null;      

      this.$bvModal.msgBoxConfirm(`Session expiration in ${modalTimeoutSeconds} seconds. Press OK to continue.`, {
        id: modalId
      })
      .then(wasOkPressed => {
        if(wasOkPressed) {
          /* Do something */
        } else {
          /* Do something else */
        }
      })
      .catch(() => {
        console.log('The modal closed unexpectedly')
      })
      .finally(() => {
        clearTimeout(modalSetTimeout)
      })
      
      modalSetTimeout = setTimeout(() => {
        this.$bvModal.hide(modalId)
      }, modalTimeoutSeconds * 1000)
    }
  }
})
<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.14.0/dist/bootstrap-vue.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.14.0/dist/bootstrap-vue.js"></script>


<div id="app">
  <b-btn @click="openModal">
    Open Modal
  </b-btn>
</div>

user_83979740

setTimeout causes your function to be called after the timeout has expired, so all your code does is delay the message box by a second.

To achieve what you want, you need to start a timer that will cause a log out, then display the message box. If the user doesn't click OK, or doesn't click in time, they will be logged out .Otherwise the timeout is cancelled and their session is refreshed:

timedModalAlert: function () {
  let modalId = 'my-modal'
  // Start a timeout, recording the timeout ID for cancelling it
  let timeoutID = setTimeout (() => {
    // function to close the dialog
    this.$bvModal.hide(modalId)
    // OR 
  }, x) // Set the timeout value in ms
  // Display the message box
  this.$bvModal.msgBoxConfirm('Your session will expire in x. Press OK to continue.', { id: modalId } )
    .then(value => {
      if (value == true) {
        // Stop the timeout
        clearTimeout(timeoutID)
        // function to refresh token
      } else {
        // function to log user out
      }
    })
}
user_92031100
Related